techTutorz: April 2014

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>

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 !

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 !

Monday, April 21, 2014

Understanding HTML5 tags & attributes

Hello everyone ! in this post we are going to help you understand how to use HTML5's tags & attributes so that you can easily kick start your HTML5 tutorials and easily follow our future articles & tutorials or any other tuorial you will find on the net. OK, this post is going to be the easiest one as almost all the rules & syntax are the same except some minor changes and believe us these minor changes will make your HTML writing even easier and less time consuming. So let's start with the changes made to some tags in this latest version of HTML :

Document type definition : Do you guys remember the document type definition in the previous version of html i.e, HTML 4.01 ? I know you don't, you only remember that it was long, ugly & very much time consuming. Well put all that memories into a trash because HTML5 has completely replaced & redesigned the old doctype definition into a new doctype definition tag given below :
```
   <!DOCTYPE html>
```
yes that's all guys what we have to do to define our document type. Isn't it easy, short, beautiful & very much time saving.
<script> tag : The declaration syntax of script tag to attach external scripts to html has been choped a little and made little more time saving. The previous syntax wanted you to include the following attributes : "type" & "src" for perfect declaration but HTML5 has removed the "type" attribute from declaration as it is automatically detected and you can now write your script tag declaration as below :
```
   <script src="D:\abc.js"></script>
```
<link> tag : Same syntax changes have been made to the link tag as well. The previous syntax wanted you to include the following attributes : "rel" , "type" & "href" for perfect declaration but HTML5 has removed the "type" attribute from declaration as it is automatically detected and you can now write your link tag declaration as below :
```
   <link rel="stylesheet" href="D:\abc.css"></script>
```

Ok that's all with changes to tags now let us look at the changes to syntax rules :

Case-Insensitive : HTML5 is case-insensitive i.e, you can use any type of case for tag names & attributes, you can use upper, lower & even mix them as per your convenience like below :
```
   <HTML>

      <head></head>

      <Body BGCOLOR="green"></Body>

      <a Href="www.google.com">google</a>

   </HTML>
```

Quotes are optional : The basic syntax rule that has been around for years that every attribute value must be quoted has been replaced with no quotes by HTML5 i.e, there is no more need to provide quotes for attribute values with 1 exception that every attribute value containing { > , < , , = , ' , " } must be quoted. The correct & incorrect attribute syntax are given below :

   Correct Syntax                     Incorrect Syntax
 
   <div id=hello world></div>        <div id=blah blah></div>
   <div id="hello'eorld"></div>       <div id=blah'blah></div>
   <div id=hello&gt;world></div>      <div id=hello>world></div>
   <div id="hello=world"></div>       <div id=hello=world></div>
   <div id='hello'world'></div>       <div id=hello'world></div>
   <div id='hello"world'></div>       <div id=hello"world></div>

Attributes values are optional : There are some attributes in HTML5 that does not require a value they are called empty attributes in HTML5. For example look at theexample given below :
```
  <video src="videofile.mp4" controls>
  </video>
```
Notice the control attribute above which indicates whether or not the video controls should be visible. It by default means "true". i.e, the controls should be visible. There are many more attributes like this which you will come to know in our future articles.
Closing Empty tags are optional : HTML5 makes it optional to close the tags without contents i.e, you no more have to waste your time by closing all the tags with no body contents. For example look below :
```
  <hr>
  <br>
```

Ok guys that's it and now you are ready to advance in HTML5 as your are clear with all the basic things. To learn more about HTML5 continue to follow our posts. You can also validate your HTML5 pages by going to this link http://validator.w3.org/ an uploading your code and then clicking on validate.

We hope you liked our post, please visit again and share our post with your social network.

Happy Designing !

Saturday, April 19, 2014

Introduction to HTML5

HTML or Hyper Text Markup Language as you all know is a markup language used to create a well structured layout for a web page, it came into existence in 1999 since then the internet has changed significantly. But still designners all over the world noticed that something was missing and incomplete but managed and got seasoned by using third party software and tools. Some of the noticeable demerits of html4 were :

lengthy document type definitions (difficult to memorise)
lack of ability to play sounds & videos without 3rd party plugins (adobe flash, shockwave etc etc)
lack of ability to draw vector graphics (but managed by using 3rd party drawing tools & embedded it into HTML file)
fewer semantic tags (using the same tags for article, address, header, footer etc etc. for eg: <div> making it difficult to define a particular content)
and many more......

You all may be thinking so many missings but still we were structuring our web pages using HTML to be precise HTML 4.01 that was all because we were bound to use what was there and what was available to us. But don't worry gone are the days of limitations as something new has emerged HTML5.

Yes HTML5 ! a new behaviour, name & power for our old markup language. HTML5 which is the latest version of HTML, came into existence in the early 2008 and since then it is slowly releasing it's updates. Today almost every popular browser supports HTML5. HTML5 is developed jointly by World Wide Web (WWW) and Web Hypertext Application Technology Working Group (WHATWG) and is still under development that means there is more & "more is yet to come".

HTML5 was developed to replace HTML4, XHTML and HTML DOM to overcome the above mentioned limitations and many more so that user can design interactive and rich web pages with animations, graphics, music, videos etc without using 3rd party plugins and tools which adds to the page size ultimately affecting your page performance.

HTML5 is device independent as it was designed to work on any device whether you are using a smartphone, PC, laptop or a tablet. Some of many of the features of HTML5 is given below :

Two - Dimensional & Vector drawings & graphics
Audio & Video playback
Drag & Drop operations
Geolocation
Local data storage

These are some of the features of our latest version of HTML and all of them work without any third party plugin support, there are many more features and many more is to come. Look at the below demo code to get a key idea how HTML5 structures it's contents :

As you can see from the above code HTML5 has a very small, simple & a single document type definition which is eazy to remember than that of HTML 4.01.

HTML5 also defines different and unique tags to define particular contents for our web pages for example <header> tag for header contents like website name, logo, slogan and everything that usually goes inside the header, and <footer> tag for contents like copright information, contact numbers, address etc etc and <article> tag for writing & posting your articles. There are any more which you can learn just keep visiting and wait for our next article which will continue with HTML5 basics.

Thank you for visiting our blog if you liked our post please link our article to your blog or website and do comment.

Happy Designing !

Tuesday, April 15, 2014

Code to find the greatest number from user input

In this we are going to show all beginners how can you detect the greatest digit among multiple numbers.

Step 1:

   #include<stdio.h>
   #include<conio.h>

   void main()
   {
      clrscr();


      getch();
   }

This step is nothing but defining the basic C programming syntax.

Step 2:

   int a,b,c;

In this step we declared 3 variables( variables should be declared above clrscr() ) which will be used to store user inputs.

Step 3:

   printf("Enter any 3 numbers\n");

   scanf("%d%d%d",&a,&b,&c);

In this step we have written the code to accept 3 integer values from users.

Step 4:

   if(a>b && a>c)
   {
      printf("%d is the greatest number\n",a);
   }

   if(b>a && b>c)
   {
      printf("%d is the greatest number\n",b);
   }

   if(c>a && c>b)
   {
      printf("%d is the greatest number\n",c);
   }

This is the main and the final step as it does all the comparing of values entered by the user. As you can see above it is very easy to find the greatest number the only thing we need to do it compare each and every value with the other values to find the greatest. You can download the complete code file and run it from your TURBO C++ software by clicking the below link.

Download

Yes that's it, we hope that you liked our post if you did link our post with your social networks and do comment.

Happy Programming !

Monday, April 14, 2014

Sorting array elements in ascending order

Let us today help you with the code to sort an array of elements elements provided by the user in ascending order. The code is given below step by step for your better understanding.

Step 1:

   #include<stdio.h>
   #include<conio.h>

   void main()
   {
      clrscr();


      getch();
   }

This step is nothing but defining the basic C programming syntax.

Step 2:

   int arr[5],temp,i,j;

In this step we declared 2 variables( variables should be declared above clrscr() ), first is an array of size 5 which will be used to store user inputs and an "temp" variable that we will use to temporarily store value, you can name it anything you like.

Step 3:

   printf("Enter any 5 numbers\n");

   for(i=0;i<5;i++)
   {
      scanf("%d",&arr[i]);
   }

In Step 3 we have written the code to accept 5 integer values from users.

Step 4:

   for(i=0;i<5;i++)
   {
        for(j=i+1;j<5;j++)
        {
            if(arr[i]>arr[j])
            {
                 temp=i;
                 i=j;
                 j=temp;
            }
        }
   }

This is the main step as it does all the sorting of array elements in ascending order entered by the user.

Step 5:

   printf("Your numbers have been sorted in ascending order\n\n");  

   for(i=0;i<5;i++)
   {
        printf("%d\n",arr[i]);
   }

This is the final step which display the array values which has been sorted.
Yes that's it, we hope that you liked our post if you did link our post with your social networks and do comment.

Happy Programming !

Saturday, April 12, 2014

Printing all even numbers from a user provided range

In our last post we had shown you how to directly print all even numbers from a static range. If you have not read our previous post than we recommend to read it first by clicking the link printing even numbers using for loop before reading further.

In today's post we are going to show you the C programming code to print all even numbers from any range of numbers provided by the user. The code is given below :

   #include<stdio.h>
   #include<conio.h>

   int main()
   {
       int i,start,end;
       clrscr();
    
       printf("Enter starting number : ");
       scanf("%d",&start);
       printf("Enter ending number : ");
       scanf("%d",&end);

       for (i=start;i<=end;i++)
       {
           if(i%2==0)
           {
               printf(" %d\n",i);
           }
       }
    
       getch();
       return 0;

   }

Now this is the perfect code to solve our even number problem as you can see inside the loop it checks the " i " 's value each and every time it loops to find whether the current value of i returns the remainder as zero if divided by 2 if it does then its an even number.

Hope you liked our post if you have any suggestions or query please comment.

Happy Programming !

Friday, April 11, 2014

Printing even numbers using for loop in c programming

The below code shows how to directly print all even numbers from 2 to 20 without using the if....else conditional statement to check for the remainder as usually done and then decide whether even or not.

   #include<stdio.h>
   #include<conio.h>

   int main()
   {
      int i;
      clrscr();
    
      for (i=2;i<=20;i=i+2)
      {
          printf(" %d\n",i);
      }
    
      getch();
      return 0;

   }

The above code is not the perfect way to find and print even numbers but it will correctly find and print the even numbers because the range is starting from a static integer 2 and then incremented each time by 2 which will result only in even numbers. But this will not work when we will accept the range from user as you know user can enter any number for starting and ending values and in case if he enter 1 or any other odd number then this program will will print out all the odd numbers instead of even. But this code works perfectly if the programmer knows the range prior. To know the perfect way to find & print even numbers check out our article >> printing even numbers from a user provided range.

We hope you liked our post for more articles keep browsing and keep visiting and do comment.

Happy Programming !

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 !

Subscribe to: Posts ( Atom )

Pages

Wednesday, April 30, 2014

Tuesday, April 29, 2014

Monday, April 21, 2014

Saturday, April 19, 2014

Tuesday, April 15, 2014

Monday, April 14, 2014

Saturday, April 12, 2014

Friday, April 11, 2014

Thursday, April 10, 2014