Javascript var, let & const – What’s the Difference?

A lot of new features came out with ES6. One of the features that came with ES6 is the addition of let and const, which can be used for variable declaration. The question is, what makes them different from var which we’ve been using? If you are still not clear about this, then this article is for you.

In this video, you can learn var, let and const with respect to their scope, use, and hoisting.

WordPress – Use php variables in javascript function

In WordPress , sometimes you need to use your PHP variable into included javascript file. You can use below function for this.

wp_register_script( 'myscript', FB_LIKE_PLUGIN_URL . 'fb.js' , array('jquery'), '2.5.4.6' );
wp_enqueue_script( 'myscript' );
$local_variables = array('app_id' => $app_id,'name' => "Milap");
wp_localize_script( 'myscript', 'vars', $local_variables );

wp_register_script function include my own created javascript file from plugin directory and also include jquery file.
$local_variables contains array in which you have to pass all variables with key which you want to access into your fb.js file.
wp_localize_script function will pass this array into js file & you can access theses variables in javascript file like vars.app_id and vars.name !!

Let me know , if you have any confusion ..

jQuery ajaxError function

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button#call").click(function () {
            $("div#response").load("page.html");
        });
        $("div#log").ajaxError(function () {
            $(this).text("Triggered ajaxError handler.");
        });
    });
</script>
<button id="call">Call</button>
<div id="response"></div>
<div id="log"></div>

HTML5’s Data Attributes With jQuery

<html>
    <head>
        <title>Using HTML5's Data Attributes With jQuery</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var val = $("#custom").data("emailid");
                if (val) {
                    $("#msg").html(val);
                }
            });
        </script>
    </head>
    
    <body>
        <div align="center" style="margin-top:100px;">
            <div>
                <h1>Using HTML5's Data Attributes With jQuery</h1>
            </div>
            <div>
                <input type="text" name="username" data-address="ahmedabad" data-name="Milap"
                data-emailid="cemilap.88@gmail.com" id="custom" />
            </div>
            <div>
                <span id="msg"></span>
            </div>
        </div>
    </body>

</html>

How to create an image rotator with jquery and css

Whenever you need to display random images (more than 1 image) ,
you can do it using simple jquery cycle plugin.

Here is the small explanation :-


<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.cycle.all.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $('#<em><strong>imagediv</strong></em>').cycle({
 fx:    'fade',
 speed:  2500
 });
 });
 </script>

<div id="<em><strong>imagediv</strong></em>">
 <img src="image1.jpg"  alt="image1" />
 <img src="image2.jpg" alt="image2" />
 <img src="image3.jpg alt="image3" />
 <img src="image4.jpg  alt="image4" />
 <img src="image5.jpg alt="image5" />
 </div>
  1. Download jquery.js from http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
  2. Download jquery.cycle.all.js from http://malsup.github.com/jquery.cycle.all.js
  3. Include both .js files in header .
  4. add following CSS
    .pics {
    height: 117px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 354px;
    }
    

There are many options to set time for fading effect & all..

You can refer http://jquery.malsup.com/cycle for more option & customization jQuery cycle plugin.

Thats it ..

Done.. Enjoy !!!