techTutorz: JQuery

Showing posts with label JQuery. Show all posts

Monday, May 18, 2015

Roll Effect On Elements Using Jquery

In this post we are going to show : how to make an element roll forward on mouseover.

First of all you need to download the JQuery plugin file from http://jquery.com/ to know more about including and using JQuery file read our post downloading and including JQuery API and you will also require a third party JQuery plugin known as JQTransit which you can download it from here.
Create a simple html file with a table as shown below

   <html>
     <head>
     </head>

     <body>

      <table id="r">
       <tr>
        <td>rrll</td>
       </tr>
      </table>

     </body>

   </html>

Then embed the downloaded JQuery files in your html file between the <head> tag using the <script> tag as shown below

   <head>

   <!-- -------------- path of your downloaded jquery file goes inside 'src' attribute ------------ -->

   <script type="text/javascript" src="JQuery.js"></script>

   <script type="text/javascript" src="jQtransit.js"></script> 

   </head>

After that add another script tag in <head> and write your JQuery code to roll the element as shown below


   <script type="text/javascript">
  
   $(document).ready(function(){

        $("#r").mouseenter(function(){
     
      $(this).transition({x:'+=200px',rotate:'+=360deg'},2000);     
   }); 

   });

   </script>

You are all set and ready to go. Check out the demo given below.

You can download the entire source code by clicking below download button.

Download

Hope you liked our post if you did please link this post to your blog our website and do comment.

Happy Programming !

Wednesday, April 30, 2014

Sliding a division using slideUp & slideDown functions in JQuery

In this post we are going to show : how you can apply slide up & slide down effect to an <div> element with the JQuery slideUp & slideDown function. Although this tutorial aims at applying effects to the <div> element you can almost apply these effects to any html element like <p>, <img>, <table> and so on using the same method. So lets start.

First of all you need to download the JQuery plugin file from http://jquery.com/ to know more about including and using JQuery file read our post downloading and including JQuery API
Create a simple html file with one div & two button as shown below

   <html>
     <head>
     </head>

   <body>

      <div></div>
      <input type="button" id="su" value="Slide Up"></input>
      <input type="button" id="sd" value="Slide Down"></input>

   </body>

   </html>

Then embed the downloaded JQuery file in your html file between the <head> tag using the <script> tag as shown below

   <head>

   <!-- -------------- path of your downloaded jquery file goes inside 'src' attribute ------------ -->
   
   <script type="text/javascript" src="JQuery.js"></script>

   </head>

After that add another <script> tag in <head> and write your JQuery code to apply slide up & slide down effect to the element as shown below


   <script type="text/javascript">

   $(document).ready(function(){

         $("#su").click(function(){

               $("div").slideUp("slow");

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

        });

        $("#sd").click(function(){

              $("div").slideDown("slow"); 

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

        })

   });

   </script>

Happy Programming !

Tuesday, April 29, 2014

Delaying the fadeIn & fadeOut effect on <div> in JQuery

In this article we are going to show you how to use the JQuery delay function to delay the fadeIn & fadeOut effect on an <div> (you an use almost any html element you prefer) element that we discussed in the previous post (fading in & out <div> using JQuery).

Step 1:

Lets start with the html part. You can design your <div> element as you wish but we have given down a simple example you can use that for the start :

   <body>

   <div style="background-color:green;width:150px;height:150px;"></div><br />
   <input id="fo" type="button" value="Fade Out"></input>
   <input id="fi" type="button" value="Fade In"></input>

   </body>

Step 2:

Now lets look at the <head> part which is the last step, here you will include your JQuery file and also write the main coding for what you are here :

   <head>

   <script type="text/javascript" src="jquery-1.11.0.js"></script>

   <script type="text/javascript">

   $(document).ready(function(){
 
       $("#fi").click(function(){
            $("div").delay(3000).fadeIn("slow");
       });

       $("#fo").click(function(){
            $("div").delay(3000).fadeOut("slow");
       });

   });

   </script>

   </head>

The above code shows the delay function being used to delay the fadeIn & fadeOut effect for some seconds on button click and also you have to provide the delay time in milliseconds, the above code delays the effect by 3000 mlliseconds i.e, 3 seconds. The summary of the story is : when you will click the button it will fade out or in after some seconds specified by you.

That's it guys, all you want to make an <div> fade in and again out after a delay of some seconds on button click. Try our live example below :

You can download the entire source code by clicking the below download link

Download

We hope you liked our post, if you did please share this link with your social network.

Happy Designing !

Friday, April 11, 2014

Downloading and including JQuery API library file in your HTML file

Step 1:

Click this link http://jquery.com/ to open the JQuery official website and click on the download button on the home page as shown in the following image :

Step 2:

Clicking the download button will open up a new page where you can see multiple download option,one for uncompressed version,second for production version etc etc for both (1.x & 2.x). But we recommend to download the " uncompressed,development JQuery " from version 1.x as shown below :

Step 3:

Now you are done with download and you can rename the downloaded JQuery file to any name you want.
After that to use the JQuery functionalites you need to include it in your HTML file so for that first create a simple HTML file like below comprising of all the basic syntax :

   <html>
      <head>
      </head>
   
      <body>
      </body>

   </html>

Step 4:

Now add a <script> tag betwen the <head> tag with the type & src attribute specifying the type of script and path of the file your are going to include respectively. For help refer to the code below :

   <html>
      <head>
          <script type="text/javascript" src="D:\Jquery.js"></script>
      </head>

      <body>
      </body>

   </html>

Step 5:

Ok now you are done with everything you need to create a interactive page. Now the final step is to test your JQuery and for that just copy and paste the below code to your notepad as save it in " .html " format and run your page if everything went well you will see the <div> element sliding up.

   <html>
      <head>
          <script type="text/javascript" src="D:\Jquery.js"></script>

          <script type="text/javascript">


                $(document).ready(function(){
                $("#btn").click(function(){
                    $("#d").slideUp("slow");
               });
          });

          </script>
      </head>

      <body>
       
       <div id="d"></div><br /><br />
       <input id="btn" type="button" value="Slide Up"></input>
       
      </body>

   </html>

All done, we hope the example worked and if you enjoyed our post please link our blog in your website or blog and if you any suggestions or problem with the above code please comment and do recommend us.

Happy Programming !

Thursday, April 10, 2014

Fading a division using fadeIn & fadeOut functions in JQuery

In this post we are going to show : how you can apply fade in & fade out effect to an <div> element with the JQuery fadeIn & fadeOut function. Although this tutorial aims at applying effects to the <div> element you can almost apply these effects to any html element like <p>, <img>, <table> and so on using the same method. So lets start.

First of all you need to download the JQuery plugin file from http://jquery.com/ to know more about including and using JQuery file read our post downloading and including JQuery API
Create a simple html file with one div & two button as shown below

   <html>
     <head>
     </head>

     <body>

      <div id="fade"></div>
      <input type="button" id="fi" value="Fade In"></input>
      <input type="button" id="fo" value="Fade Out"></input>

     </body>

   </html>

Then embed the downloaded JQuery file in your html file between the <head> tag using the <script> tag as shown below

   <head>

   <!-- -------------- path of your downloaded jquery file goes inside 'src' attribute ------------ -->

   <script type="text/javascript" src="JQuery.js"></script>

   </head>

After that add another script tag in <head> and write your JQuery code to fade the element as shown below


   <script type="text/javascript">
  
   $(document).ready(function(){

           $("#fi").click(function(){
 
                 $("#fade").fadeIn("slow");

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

           });

           $("#fo").click(function(){

                 $("#fade").fadeOut("slow"); 

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

           })

   });

   </script>

You are all set and ready to go. Check out the demo given below.

Hope you liked our post if you did please link this post to you blog our website and do comment.

Happy Programming !

Pages

Monday, May 18, 2015

Roll Effect On Elements Using Jquery

Wednesday, April 30, 2014

Sliding a division using slideUp & slideDown functions in JQuery

Tuesday, April 29, 2014

Delaying the fadeIn & fadeOut effect on <div> in JQuery

Friday, April 11, 2014

Downloading and including JQuery API library file in your HTML file

Thursday, April 10, 2014

Fading a division using fadeIn & fadeOut functions in JQuery