JAVA SCRIPT Archives - Knowledge Bags

Load external JS only on desktops and not on mobile devices

September 1, 2016 Sivakumar Leave a comment

Load external JS only on desktops and not on mobile devices:

<script>
(function() {
if( window.innerWidth > 600 ) {
    var theScript = document.createElement('script');
    theScript.type = 'text/javascript';
    theScript.src = '<?php bloginfo('template_url'); ?>/js/process-home.js';
 
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(theScript);
}
})();
</script>

Or Use Below Code:

Source code

<script>
(function() {
if( window.innerWidth > 600 ) {
    document.write('<scr'+'ipt type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/four.js" ></scr'+'ipt>');
}
})();
</script>

checking the browser cookie enable

June 1, 2016 Maheshwaran Leave a comment

all the browser checking the cookie is enable or not

Source code

var cookieEnabled = (navigator.cookieEnabled) ? true : false;
 
if( cookieEnabled == false){
    document.write('Cookies are disabled.Enable it.' );
 
}else{
 
 document.write('Cookies are enable.' );
}

div resizable and draggable in javascript

June 1, 2016 Maheshwaran Leave a comment

div can added the class to draggable and resizable

Source code

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

outer_div class inner content div resizable and draggable

Source code

<div class="outer_div"> 
   <div class="movable_content  ui-widget-content"          contenteditable> </div>   
</div>

Source code

 $(".movable_content").draggable({
 cursor:"move",
 containment: "parent"
 });
$(".movable_content") .resizable({
 maxWidth: 300,
 minHeight: 150
 });

JQuery – Find() – this – show and hide Process

April 13, 2016 Sivakumar Leave a comment

Source code

<a class='clickclick'>Screenshots
   <div class='screen-pop'>
      <div class='screen-wrap'>
          <img src="/images/example.jpg">
      </div>
      <p class='close-window'></p>
   </div>											
</a>

Source code

<script type="text/javascript">
// show	
$('.clickclick').click(function() {
   $(this).find(".screen-pop").show();
});
// hide	
$('#lightbox').click(function() {
   $(".screen-pop").hide();							
});
</script>

Get url parameter jquery Or Get Query String Values In js

March 19, 2016 Sivakumar Leave a comment

Step1:Get url parameter jquery Or Get Query String :

Source code

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Step2: Get url parameter Or Get Query String Values :

Source code

//example site url
 
http://www.knowledgebags.com/get-url-parameter-jquery-or-get-query-string-values-in-js/?page_count=2
 
//get the parameter
var page_count = getUrlVars()["page_count"];

Light Box Gallery Using Fancybox

March 15, 2016 Sivakumar Leave a comment

Step1: Fancy Box Script

Source code

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
 
    /* This is basic - uses default settings */
 
    jQuery("a.fbb").fancybox();
 
    /* Using custom settings */
 
    jQuery("a#inline").fancybox({
    	'hideOnContentClick': true
    });
 
    /* Apply fancybox to multiple items */
 
    jQuery("a.group").fancybox({
    	'transitionIn'	:	'elastic',
    	'transitionOut'	:	'elastic',
    	'speedIn'		:	600, 
    	'speedOut'		:	200, 
    	'overlayShow'	:	false
    });
 
    });
</script>

Step2:Call the Fancybox Javascript in Php:

Source code

<a class='fbb' href="#" title="example" rel="mygallery">
   <img src="./images/example.png" alt="example" width="150" height="150" />
</a>

Step3: Fancy Box Next/Previous Button:

In order for fancybox to create a gallery previous ,next Button , it needs to see a group of elements. so assigning the same rel attribute to each links

Source code

<a class='fbb' href="#" title="example" rel="mygallery">
    <img src="./images/example.png" alt="example" width="150" height="150"/> 
</a>

Jquery load dialog after few seconds

March 8, 2016 Rajmahendran P Leave a comment

Dialog popup loading while page loading. To load the dialog popup after few seconds, we could use the below method.

Dialog popup will display while page loading, we disable it through style while page loading and we could display it after few seconds through jquery.Disable all popup view through style as like below. Class will change based on your implementation.

Source code

<style>
.newsletter_main {
display: none;
}
.ui-dialog-titlebar-close {
display: none;
}
.ui-widget-overlay {
display: none;
}

Also use below script to display the popup while page loading and enable the display view after few seconds from jQuery.

Source code

<script>
/* Load the dialog popup while page loading */
jQuery( document ).ready(function() {
jQuery( "#newsletter" ).dialog({
closeOnEscape: false,
show: 'fade',
modal: true
});
});
/* Display the popup content after few seconds */
setTimeout(function(){
jQuery( ".newsletter_main" ).css({"display":"block"});
jQuery( ".ui-dialog-titlebar-close" ).css({"display":"block"});
jQuery( ".ui-widget-overlay" ).css({"display":"block"});
}, 3000);
</script>
/* Popup content Div */
<div id="newsletter">
Content Here
</div>

Google Map

March 5, 2016 Sivakumar Leave a comment

Google Map Options :

Source code

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,//Map Zoom view
    disableDoubleClickZoom: true,// Double Click Option
    scrollwheel: false,   // Scroll Zoom
    draggable: false,  // Control Map Position
    center: {lat: 20.24349, lng: 10.08590},
        mapTypeControlOptions: {
     		mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
	    }
  });

Dynamically Change the Image in On load

February 24, 2016 Sivakumar Leave a comment

Dynamically Change the Image in On load

Source code

<script type="text/javascript">
var images = [], 
index = 0;
images[0] = "<a href = 'http://www.pfeifferstudio-com.mybigcommerce.com/'><img src='http://cdn6.bigcommerce.com/s-vqetyz9/template/images/Pfeifer-Studio-Logo_beige_1.gif' border='0' id='LogoImage' alt='pfeiferstudio.com'></a>";
images[1] = "<a href = 'http://www.pfeifferstudio-com.mybigcommerce.com/'><img src='http://cdn6.bigcommerce.com/s-vqetyz9/template/images/Pfeifer-Studio-Logo_blue.gif' border='0' id='LogoImage' alt='pfeiferstudio.com'></a>";
images[2] = "<a href = 'http://www.pfeifferstudio-com.mybigcommerce.com/'><img src='http://cdn6.bigcommerce.com/s-vqetyz9/template/images/Pfeifer-Studio-Logo_orange.gif' border='0' id='LogoImage' alt='pfeiferstudio.com'></a>";
images[3] = "<a href = 'http://www.pfeifferstudio-com.mybigcommerce.com/'><img src='http://cdn6.bigcommerce.com/s-vqetyz9/template/images/Pfeifer-Studio-Logo_red.gif' border='0' id='LogoImage' alt='pfeiferstudio.com'></a>";
images[4] = "<a href = 'http://www.pfeifferstudio-com.mybigcommerce.com/'><img src='http://cdn6.bigcommerce.com/s-vqetyz9/template/images/Pfeifer-Studio-Logo_yellow.gif' border='0' id='LogoImage' alt='pfeiferstudio.com'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

drag and drop restrict window outside canvas area

February 23, 2016 Maheshwaran Leave a comment

//window cannot load dragover an image outside canvas area
window.addEventListener(“dragover”,function(e){
e = e || event;
e.preventDefault();
},false);

//window cannot load drop an image outside canvas area window.addEventListener(“drop”,function(e){
e = e || event;
e.preventDefault();
},false);