Tuesday, 17 January 2017

Smooth Scrolling jQuery

jQuery can also do this. Here's the code to perform a smooth page scroll to an anchor on the same page. It has some logic built in to identify those jump links, and not target other links.






 <script>

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

</script>

Sunday, 15 January 2017

BootStrap close model window and reset iframe src

Issue : When we closes YouTube video in model window, It keeps playing in background.
Poopup is closed but you can hear Audio in background.

Solutions :

OPT - 1) YouTube : Reset same video url in iframe src ( For individual popups )
 
jQuery(document).ready( function() {
jQuery("#myModal-video").on('hidden.bs.modal', function () {
console.log(" video closed ");

 
jQuery("#myModal-video iframe").attr("src", jQuery("#myModal-video iframe").attr("src"));

});
});


===============================================

OPT - 2) YouTube : Clear video url in iframe src in model popup (For common popups )

jQuery(document).ready( function() {
jQuery("#myModal-video").on('hidden.bs.modal', function () {
jQuery('#youtube_iframe').attr('src', "");
});
}); 


===============================================
IF You want to remove Autoplay (autoplay=1) from all iframe

jQuery("iframe").each(function() {
var video_url = jQuery(this).attr("src");
video_url = video_url.replace("autoplay=1", "autoplay=0");
jQuery(this).attr("src", video_url);
});


---------------------------------------------------------------------------

NOTE :
1) #myModal-video = Model window ID
2)
#youtube_iframe = iframe ID under model window

Thursday, 12 January 2017

Bootstrap-Select without empty element ( Hide First Blank Element From Drop-Down )

In Bootstrap-Select, how can I prevent the first selected item from being shown in 
the title. Alternatively, how can I hide an empty first item from the list of drop 
down options.
In HTML, the <select> element will automatically select the first <option> element 
by default. The typical way around this is to create a blank first row, but this 
looks pretty odd as part of the dropdown menu exposed by bootstrap select.

Here is my solution:
 
FOR BOOTSTRAP
<select class="selectpicker" title="Pick One">
  <option value="" data-hidden="true"  >Select ANY</option>
  <option value="one">one</option>
  <option value="two">two</option>
  <option value="three">three</option>
</select>
 
 
USING CSS ONLY 
#category:focus option:first-of-type {
    display: none;
}
 
<select id="category">
   <option>Pick a choice!</option>
   <option value="choice1">choice1</option>
   <option value="choice2">choice2</option>
   <option value="choice3">choice3</option>
   <option value="choice3">choice4</option>
</select> 

How to clear the cache in Prestashop

When making changes in Prestashop they will often not appear right away due to old cached information. The solution is to clear the cache of the application.
Prestashop version 1.6 and above caches data using Smarty. Cached data is stored in the following folders:
/cache/smarty/compile
/cache/smarty/cache
/img/tmp
all of which are located in your Prestashop's installation folder. For example, if your Prestashop store has been installed in the public_html folder of your hosting account, cached information can be found in:
~/public_html/cache/smarty/compile
~/public_html/cache/smarty/cache
~/public_html/img/tmp
To clear Prestashop's cached data, delete the content of these folders and reload your website in your browser to take a look at the changes you have made.
You can also disable or manage how Prestashop caches information from the application's admin panel -> Advanced Parameters -> Performance.

Monday, 9 January 2017

Get query string values in JavaScript

You don't need jQuery for that purpose. You can use just some pure JavaScript: 
 
function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
 
 
Usage:
// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value) 
var baz = getParameterByName('viral'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)