Search the Community
Showing results for tags 'jquery'.
-
I'm building a showreel page in Wordpress with a custom plugin. The plugin outputs a linked image for all items in the showreel and puts a "hidden data" div inside the anchor with all the video sources needed. Then there's the video container, which contains an empty video tag and a couple of images (video controls). When an image is clicked, I get the hidden data and replace/add the source tags to the video before it is opened with fancybox. This works fine, however, after closing the popup and clicking on another video it breaks after a random amount of clicks. In firefox it's right from the first click, in Chrome it's more. The script still changes the source tags, but the video is still the same. It's probably cached in the browser. Does anyone know how do I make it reload the video every time it opens in fancybox ? (I tried loading it through AJAX, but I couldn't get it to hook to a Wordpress function) The page can be viewed here http://londoncreativ...ls/tv-showreel/.
-
Hi all, I've got a problem with this piece of code. I believe this should work properly but when closing the Safari browser the alert box is properly displayed but when clicking "Ok" the browser closes. It should return to the page as it returns false. I've tried setting it to return false but with no luck. This works on FF and Chrome ok. var is_chrome = navigator.userAgent.indexOf('Chrome') > -1; var is_explorer = navigator.userAgent.indexOf('MSIE') > -1; var is_firefox = navigator.userAgent.indexOf('Firefox') > -1; var is_safari = navigator.userAgent.indexOf("Safari") > -1; var is_Opera = navigator.userAgent.indexOf("Presto") > -1; if ((is_chrome)&&(is_safari)) {is_safari=false;} //within $(document).ready(function(){ jQuery(window).bind("beforeunload", function(){ // showDebug1("Exiting..."); $.ajax({ url: "<?=$exit_url?>"}); leave = confirm("Exit page?"); if (leave==true){ return ret; } else { if(is_chrome) { return 'Leave page?'; } else if(is_safari) { alert('Click OK to continue'); } else { return false; } } }); Anyone have any ideas? Cheers, CaptainChainsaw
-
Hi! I need to know when the php file has sent the email from the a HTML Form and passsing it to Jquery. i did some research in internet and i found the "submit" option with .serialize() in Jquery, but 'cause i'm new in php i can't get it work. How .serialize() works exactly? Because i'm having my "alert" just by clicing the submit bottom and not when the email has been sent. If someone could help me with a link to begginers to learn that or make a correction in my code, i would be very greatfull. Here's my code : HTML : <html> <form method="post" action="form-to-email.php" id="myform"> <div class="field"> <label for="name">Your Name :</label> <input type="text" name="name" id="name" class="required" /> </div> <div class="field"> <label for="email">Please, give us an email :</label> <input type="text" name="email" id="email" class="required email" /> </div> <div class="field"> <label for="message" id="message-bg">Tell us about your project :</label> <textarea name="message" rows="20" cols="20" id="message" class="required"></textarea> </div> <img id="icon-contact" src="images/icon-contact.png" alt="icon-contact" /> <div class="field"> <input type="submit" name="submit" value="Submit" class="submit-button" /> </div> </form> </html> PHP : <?php if(!isset($_POST['submit'])) { echo "error; you need to submit the form!"; } $name = $_POST['name']; $visitor_email = $_POST['email']; $message = $_POST['message']; //Validate first if(empty($name)||empty($visitor_email)) { echo "Name and email are mandatory!"; exit; } if(IsInjected($visitor_email)) { echo "Bad email value!"; exit; } $email_from = 'website-clientes@blabla.com';//<== update the email address $email_subject = "Mensaje del amigo/a $name"; $email_body = "Hola! Me llamo $name, y quisiera decirles :\n \n$message \n \n \n". $to = "blbla@blabla.com";//<== update the email address $headers = "From: $email_from \r\n"; $headers .= "Reply-To: $visitor_email \n"; //Send the email! mail($to,$email_subject,$email_body,$headers); header('Location: index.html'); ?> JQUERY : $("#myform").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); $.post( 'form-to-email.php', $("#myform").serialize(), function() { $('#myform').get(0).reset(); alert("Your message has been sent, Thanks!") ; } ); }); Thanks a lot for your help ! -
Hi Guys I wonder if someone can help. Essentially it's a jquery script that makes a scrolling div track the page. So when you scroll down the page the div follows you. That works fine. The issue is that if a user clicks back, or forward on the iPad the jquery seems to simply fail and the scroll event stops working. I tried to strip the page down to test this with just a straight alert as follows: $(document).ready(function(){ alert(1); }); This code fires fine on page load and alerts 1, but if I then navigate away, and then click back, the alert doesnt fire. I am guessing this is a caching issue but I was wondering if anyone had encountered this problem and what the best solution is? Any advice welcome as iPad design is all very new to me. Drongo
-
I am using osclass Osclass v8.0.2 free classified. I am trying to implement load more i.e infinite scroll facility on homepage page. When user scrolls, listings should be loaded automatically to give users pleasant and engaging experiences. Below is my code: Got from plugin. That I want to directly insert in osclass script. For the learning purpose. I am trying it on my localhost. Please help to achieve this, any help is highly appreciated. Thanks. <?php $content_block = htmlspecialchars_decode(inf_param('#main')); $listings_parent_block = htmlspecialchars_decode(inf_param('#listing-card-list')); $pagination_block = htmlspecialchars_decode(inf_param('.paginate')); $pagination_next = htmlspecialchars_decode(inf_param('a.searchPaginationNext')); $loaded_listings_count = htmlspecialchars_decode(inf_param('loaded_listings_count')); $report_errors = htmlspecialchars_decode(inf_param('report_errors')); ?> <style> <?php echo $pagination_block; ?> {display:none!important;} .inf-loader {display:none;width:100%;padding:25px 5px;margin:20px 0;background:#eee;border-radius:6px;color:#777;font-size:16px;text-align:center;line-height:20px;} .inf-loader > div {display:inline-block;width:auto;position:relative;padding-left:44px;} .inf-loader img {position:absolute;display:inline-block;top:-6px;left:0;width:32px;height:32px;max-height:32px;max-width:32px;} .inf-loader span {display:inline-block;font-weight:bold;line-height:20px;font-size:14px;} <?php echo $content_block; ?>.loading .inf-loader {display:inline-block;} </style> <script async type="text/javascript"> $(document).ready(function() { var currentPag = 1; var isLoading = false; var pagUrl = ''; var newUrl = ''; var oldUrl = ''; // ADD LOADING BLOCK ABOVE PAGINATION var loadingBlock = '<div class="inf-loader"><div><img src="<?php echo osc_base_url(); ?>oc-content/plugins/infinite/img/loader.gif"/><span><?php echo osc_esc_js(__('Loading items...', 'infinite')); ?></span></div></div>'; $(window).scroll(function(e) { var scroll = $(window).scrollTop(); var threshold = $('<?php echo $content_block; ?>').position().top + $('<?php echo $content_block; ?>').innerHeight() - 100; var position = $(window).scrollTop() + $(window).innerHeight(); if($('<?php echo $pagination_next; ?>').length) { pagUrl = $('<?php echo $pagination_next; ?>').attr('href'); } else { pagUrl = ''; } //console.log(oldUrl + '--->' + pagUrl ); // loading block add above pagination now if(!$('<?php echo $content_block; ?>').find('.inf-loader').length) { $(loadingBlock).insertBefore($('<?php echo $pagination_block; ?>')); } if(!$('<?php echo $content_block; ?>').length || !$('<?php echo $listings_parent_block; ?>').length || !$('<?php echo $pagination_block; ?>').length || !$('<?php echo $pagination_next; ?>').length) { infCheckBlocks(); } else if(position > threshold && isLoading == false && pagUrl != oldUrl && pagUrl != '' && pagUrl != '#') { isLoading = true; $('<?php echo $content_block; ?>').addClass('loading'); $.ajax({ url: pagUrl, type: "GET", success: function(response){ var length = response.length; var data = $(response).contents().find('<?php echo $listings_parent_block ; ?>').html(); var pagBlock = $(response).contents().find('<?php echo $pagination_block; ?>'); var currItemCount = $(response).contents().find('<?php echo $loaded_listings_count; ?>').text(); oldUrl = pagUrl; $('<?php echo $pagination_block; ?>').html(pagBlock); $('<?php echo $listings_parent_block; ?>').append(data); if($('<?php echo $loaded_listings_count; ?>').length) { $('<?php echo $loaded_listings_count; ?>').text(currItemCount); } // lazy load if exists if(typeof $.fn.Lazy !== 'undefined') { $('<?php echo $listings_parent_block; ?>').find('img.lazy').Lazy({ appendScroll: window, scrollDirection: 'both', effect: 'fadeIn', effectTime: 300, afterLoad: function(element) { setTimeout(function() { element.css('transition', '0.2s'); }, 300); } }); } isLoading = false; currentPag = currentPag + 1; $('<?php echo $content_block; ?>').removeClass('loading'); }, error: function(response){ hasPag = false; $('<?php echo $content_block; ?>').removeClass('loading'); response = response.responseText; console.log(response); console.log(data); } }); } }); }); function infCheckBlocks() { <?php if($report_errors == 1) { ?> console.log('<?php echo osc_esc_js(__('Infinite scroll failed to load next items, check message bellow!', 'infinite')); ?>'); if(!$('<?php echo $content_block; ?>').length) { console.log('<?php echo osc_esc_js(sprintf(__('Content block does not exists, make sure selector is correct. Current selector: %s', 'infinite'), $content_block)); ?>'); } if(!$('<?php echo $listings_parent_block; ?>').length) { console.log('<?php echo osc_esc_js(sprintf(__('Listing parent block does not exists, make sure selector is correct. Current selector: %s', 'infinite'), $content_block)); ?>'); } if(!$('<?php echo $pagination_block; ?>').length) { console.log('<?php echo osc_esc_js(sprintf(__('Pagination block does not exists, maybe there are no other pages. Make sure selector is correct. Current selector: %s', 'infinite'), $pagination_block)); ?>'); } if(!$('<?php echo $pagination_next; ?>').length) { console.log('<?php echo osc_esc_js(sprintf(__('Pagination next button does not exists, maybe there are no other pages. Make sure selector is correct. Current selector: %s', 'infinite'), $pagination_next)); ?>'); } <?php } ?> } </script> -
I have a DataTables table and I have managed to get everything working fine. Within each row i have an action button with either accepts, approves or deletes the row. Like i say everything is working but after the respective button has been clicked I have to load the entire page again to get the table to refresh and it just doesnt look right. Anyway her is the code initial code to load the results into the table $(document).ready(function(){ $("#requests-container").html("<div class=\'col-sm-12 py-5\'><center><i class=\'fas fa-spinner fa-3x fa-spin mb-3 text-muted\'></i><br /></center></div>"); $("#requests-container").load("'.DIR.'admin/dashboard/requests", function(){ $("#project-requests").DataTable({ "order": [[0, "desc"]], "responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 25, "aLengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], "buttons": ["copy","pdf", "print", "colvis"] }).buttons().container().appendTo(\'#project-requests_wrapper .col-md-6:eq(0)\'); $("#project-requests_wrapper").children(":first").addClass("p-2"); $("#project-requests_wrapper").children(":first").next().next().addClass("p-2"); }); }); Then I have this once the link has been clicked $(document).on("click", ".action-requests", function(e){ e.preventDefault(); var Toast = Swal.mixin({ toast: true, position: \'top-end\', showConfirmButton: false, timer: 5000 }); var pageLink = $(this).attr("href"); var requestId = $(this).attr("data-id"); $.post("admin/dashboard/queries/" + pageLink, { id: requestId }, function(data, status){ if(status === "success") { if(pageLink == "approverequest") { Toast.fire({icon: "success",title: data}); $("#requests-container").html("<div class=\'col-sm-12 py-5\'><center><i class=\'fas fa-spinner fa-3x fa-spin mb-3 text-muted\'></i><br /></center></div>"); $("#requests-container").load("'.DIR.'admin/dashboard/requests", function(){ $("#project-requests").DataTable({ "order": [[0, "desc"]], "responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 25, "aLengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], "buttons": ["copy","pdf", "print", "colvis"] }).buttons().container().appendTo(\'#project-requests_wrapper .col-md-6:eq(0)\'); $("#project-requests_wrapper").children(":first").addClass("p-2"); $("#project-requests_wrapper").children(":first").next().next().addClass("p-2"); }); } else { Toast.fire({icon: "success",title: data}); $("#requests-container").html("<div class=\'col-sm-12 py-5\'><center><i class=\'fas fa-spinner fa-3x fa-spin mb-3 text-muted\'></i><br /></center></div>"); $("#requests-container").load("'.DIR.'admin/dashboard/requests", function(){ $("#project-requests").DataTable({ "order": [[0, "desc"]], "responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 25, "aLengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], "buttons": ["copy","pdf", "print", "colvis"] }).buttons().container().appendTo(\'#project-requests_wrapper .col-md-6:eq(0)\'); $("#project-requests_wrapper").children(":first").addClass("p-2"); $("#project-requests_wrapper").children(":first").next().next().addClass("p-2"); }); } } }); }); Like i said its a bit long winded for such a simple action but if its not like this DataTables wont load after the submission I was just wondering if anyone has a simpler idea to shorten the coding Thanks
-
I am using jui datepicker. I have a table which has columns StartYear and EndYear set to varchar data type. I need to store the Start Year in the format of Month Year for example Start Year : Jan 2023 End Year : Jan 2024 I have configured the jui date picker to show only Month and Year. Data is getting correctly saved in the table in create action, but on the update form the same data is not fetched correctly as shown in below image Below is the code _form.php <?php use yii\helpers\Html; use yii\bootstrap\ActiveForm; use yii\jui\DatePicker; use yii\helpers\ArrayHelper; ?> <style type="text/css"> .ui-datepicker-calendar { display: none; } </style> <script> $(document).ready(function() { $('.picker').datepicker({ changeMonth: true, changeYear: true, dateFormat: 'MM yy', onClose: function() { var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); }, }); }); </script> <?php $form = ActiveForm::begin();?> <?= $form->field($model, 'StartYear')->widget(DatePicker::classname(), [ //'language' => 'ru', 'options' => ['class' => 'form-control picker','readOnly'=>'readOnly'], 'clientOptions'=>['changeMonth'=>true, 'changeYear'=>true, 'dateFormat' => 'MM yy', 'readOnly'=>true] ]) ?> <?= $form->field($model, 'EndYear')->widget(DatePicker::classname(), [ //'language' => 'ru', 'options' => ['class' => 'form-control picker','readOnly'=>'readOnly'], 'clientOptions'=>['changeMonth'=>true, 'changeYear'=>true, 'dateFormat' => 'MM yy', 'readOnly'=>true] ]) ?> <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> <?php ActiveForm::end(); ?>
-
I use this code to open the contents of my Menu Links inside my <div id="main"> so I do not need to reload the whole page each time: .delegate('a.difflink', 'click', function(){ $('#content').empty(); var page = $(this).attr('id'); $('#content').load("page_scripts/loop_a.php?page="+ page); Problem created is that by using the above method my browser's address bar always shows www.myXample.com so I cannot create sitemap for SEO. And as I understood (not sure if I am correct) the way I made it work is like there are no new urls to show (since I am just changing div content). QUESTION: Is there a way to make my page work as it should e.g when I press "Downloads" --- address will show: www.myXample.com/downloads and still no need to reload the whole page? A solution would be to use this in my code: window.history.pushState('','','/downloads'); it changes the url to the desired BUT if I manually enter on my browser www.myXample.com/downloads I get just the contents of the div without any page formatting or menus, which is natural result. So is there a work around to achieve my goal or is it one of two: Reloading the whole page Vs No reloading and no URLs for SEO.
-
<input name="weekday[8]" type="checkbox" value="21" class="weekday" checked=""> <input name="timing[8]" type="text" id="name" value="11" size="45" /> <input name="weekday[9]" type="checkbox" value="99" class="weekday" checked=""> <input name="timing[9]" type="text" id="name" value="12" size="45" /> <input name="weekday[10]" type="checkbox" value="77" class="weekday" checked=""> <input name="timing[10]" type="text" id="name" value="13" size="45" /> I have above html code 1. when checkbox for checkbox name="weekday[8]" is clicked, I want to check whether timing[8] is empty or not (we need to derive field name timing[8] from field name weekday[8] 2. when timing[8] some value is entered , i want to name="weekday[8]" -> checked (we need to derive field name weekday[8] from timing[8] we can find the name (jquery) $('.weekday').click(function(){ var checkboxname=$(this).attr('name'); // we get checkbox clicked name=name[8] console.log('checkbox name='+checkboxname); }) In simple case (without dimension) this is easy we get name of field (checkbox is clicked) as name[8] i want to derive field name timing[8] i tried (jquery) $('.weekday').click(function(){ var checkboxname=$(this).attr('name'); console.log('checkboxname='+checkboxname);// i got this correct weekday[8] in this case var splitname=checkboxname.split('weekday');// seperated [8] , console.log(splitname[0]+' 1='+splitname[1]); //splitname[1] will have [8] //now want to form or generate value of variable mobile[8] var n='mobile'+splitname[1];//the n will be mobile[8] console.log('n='+n);// ths will be mobile[8] var inp=$('input[name="'+n+'"]').val(); console.log(' inp='+inp);// but no success //here I want value of $('input[name=name[8]').val(); }) Please guide how i derive (using jquery) filed name mobile[8] from filed name[8] -
I have divs which can be clicked and then another div will pop out with few colors for users to choose. After choosing the colors in the div that pop out the div that is clicked will change into that background. I used class to determain which div is clicked. function works fine but I realized when I try console.log the class I used as global to findout which div to change the background. the console.log keeps adding up also multiplying too. Can I have a pair of eye to see where it's adding things up? var colorHolder = null; //used to store the location where color is picked function colorFieldPicker(onClickSide, xValInput, yValInput,side){ onClickSide.on('click', function(event){ colorHolder = $(this).attr('class'); var yVal = (event.pageY - yValInput) + "px"; var xVal = (event.pageX / xValInput) + "px"; $('.colorSelectBox').css({"left": xVal, "top": yVal}).toggle(); colorPickerOnClick(side); }); } function colorPickerOnClick(side){ $('div.black').add('div.yellow').on('click', function(){ var colorAttr = $(this).attr('value'); var splitClass = colorHolder.split(" "); side.closest('div').find('.'+splitClass[0] + '.'+splitClass[1]).css({"background": colorAttr}).attr('value', colorAttr); console.log(colorHolder); //this is where it's displaying in console that it'll keep on adding up. $('.colorSelectBox').css({"display": "none"}); }); } Thanks everyone in advance.
-
I am retriving records from mysql database that has expiry time limit. The time in the database is saved in "minutes". So for one hour, it'll be "3600" minutes. That's all fine. Now what I am trying to do is create a countdown clock using Javascript/jquery and I have ran into a bit of a problem. 1. I am retriving multiple records from the database that all have a countdown timer. Currently, it's only taking the time value of the first record and using that for all the records. I would like to know how I can make it so that each record will have it's own countdown timer value? 2. Everytime I refresh a page, it will reset the timer. How can I fix this? Here's my code. <?php foreach($rows as $row) { $get_expiry_time = $row['expiry_time']; <div class="record"> <div class="timer"> </div> </div> } ?> <script> $(document).ready(function(){ var countDownTime = <?php echo $get_expiry_time; ?>; function countDownTimer() { var hours = parseInt( countDownTime / 3600 ) % 24; var minutes = parseInt( countDownTime / 60 ) % 60; var seconds = countDownTime % 60; var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); $('.timer').html(result); if(countDownTime == 0 ){ countDownTime = 60*60*60; } countDownTime = countDownTime - 1; setTimeout(function(){ countDownTimer() }, 1000); } countDownTimer(); }); </script>
