Java Script / JQuery Tuturial

Java Script-JQuery Image

My JavasScript, jQuery and Ajax Tutorials

Here, in these tutorials I will walk you through some tutorials that I randomly chose out of curiousity to demonstrate beautiful stuffs that you can easily program in HTML, CSS, Java Script and JQuery. Because of time constraints and given that we cannot expect you to learn and practice all these programming languages in just one brief tutorial, specially for beginners. In this tutorial, I've focused mostly on two beautiful languages to make these tutorials attractive and easy to learn. To your advantage, I will also provide the codes for each functionality and a few more free stuffs. Please promise to be honest to yourself that you won't just copy and paste the codes to get the job done but would rather practice it and understand it.

To practice these tutorials you will need:

  • Text editor - I suggest you download TextWangler, Sublime Text 2, Notepad++ or Xcode
  • Browser for testing
  • And of course a working computer

Now, let's begin:

Accordion Panes

This is a relatively advanced tutorial that assumes the learners have basic knowledge of Javascript, CSS, HTML and JQuer; however HTML and CSS codes are also provided below, click on the links to learn more.

Although there are different ways you can achieve this effect, the code I provided below is not only very simple to read and learn, it does the job. For what it does, it hide the contents until it is needed. Once you click on the bar, it opens up and remains opened until you click or refresh the page again. The code is self-explainatory but comments are also included

Happy learning!


    
                // JavaScript Document

        // Accordian Script

        // Hide the content divs
        $('.accordion div').hide();

        // Variables
        var $accordionH3 = $('.accordion h3');

        $accordionH3.click(function(){
          
          var $this = $(this);
          var $thisDiv = $this.next();
          
          if($thisDiv.is(':visible')){
            $this.removeClass('minus'); 
          }else{
            $this.addClass('minus');
          }
          
          $thisDiv.slideToggle();
          
        });

        // End of index-main page JS
        // Tutorial-two-js  fade-out begins
        // Hide all the images except for the image with the class of 'show'
        $('.box img').not('.show').hide();

        // name your slideshow function
        // this name can be anything
        slideshow();

        function slideshow(){
          
          //create variables
          // store the current image
          var current = $('.show');
          
          // store the next image
          // this uses a ternary operator
          // ternary operator is short hand for writing a simple "if" statement
          //
          //  var x = a ? b : c
          //
          // set "x" to b if "a" is true otherwise set it to "c"
          
          var nextImage = current.next().length ? current.next() : current.siblings().first();
          
          //select "current"
          current.hide().removeClass('show');
          //animate in the next element
          nextImage.fadeIn().addClass('show');
          
          // repeat the function using a timer
          setTimeout(slideshow, 3000);

        };

      
    

Accordion Panes Demo

These panes open and close, click on each accordion bar to see this in action

Tutorial One: Java Script

Avanti car concept sketch Image Credit

In this tutorial I'm demonstrating how to achieve accordion panes in Java Script. In other words, this is the demo itself otherwise read my above statements for more

Tutorial Two: JQuery

PRR S1 Locomotive Image Credit

This tutorial demonstrates a basic image slider with fade out functionality. Please visit tutorial one for more

Tutorial Three: JQuery-Ajax

J-Q plugin Image Credit

In this tutorial I will show you how to use JQuery-Ajax .load() functionality to set a beautiful backgrounds using images, color gradient and fonts with various headings as in tutorial one and two

I hope you enjoyed the tutorials and learned something new