0

Simple JQuery slideup and slidedown Using click() Tutorial

Simple JQuery slideup and slidedown Using click() Function. This tutorial will help to e-commerce Web Designers and Image Gallery Based Websites
Simple JQuery slideup and slidedown click() function on image

Step1: Create a HTML document in your favourite Editor

<!DOCTYPE html>
<html>
  <head>
    <title>Nowstartwebdesign.com- Simple JQuery slideup and slidedown Using .click() Tutorial</title>
  </head>
<body>  
</body>
</html>

Step2: Now Create a HTML images main container
<!DOCTYPE html>
<html>
    <head>
        <title>Nowstartwebdesign.com- Simple JQuery slideup and slidedown Using .click() Tutorial</title>
    </head>
    <body>
        <div class="mainwrapp">
          
        </div>
    </body>
</html>

Step3: Now Create the CSS of the DIV

.mainwrapp {
          background: none repeat scroll 0 0 #F2F2F2;
          border: 1px solid #E0E0E0;
          margin: 0 auto;
          padding: 10px;
          width: 888px;
}

Step4: Now create the sub DIV’s under the main container

<div class="gallery_wrapper">


<div id="image1"> <!-- Slider image 1 -->
<div id="slide1"> "><!-- main content slider1 -->
<h2>NOWSTARTWEBDESIGN.COM</h2>
<h1> Web Design Inspiration</h1>
<h3>HTML Tutorial’s </h3>
</div>
</div>



<div id="image2"> <!-- Slider image 2 -->
<div id="slide2"> "><!-- main content slider2 -->
<h2>NOWSTARTWEBDESIGN.COM</h2>
<h1> Web Design Inspiration</h1>
<h3>CSS Tutorial’s</h3>
</div>
</div>



<div id="image3"> <!-- Slider image 3 -->
<div id="slide3">"><!-- main content slider3 -->
<h2>NOWSTARTWEBDESIGN.COM</h2>
<h1> Web Design Inspiration</h1>
<h3>jQuery Tutorial’s </h3>
</div>
</div>



<div style="clear:both;"></div>
</div>


Step5: Now Create the CSS of the Slider Images DIV’s Like Below. #slide1, #slide2, #slide3, main content div’s hide through css (display:none;), Like below css. Becoz when a user Click on the image the Click event shows the content div (through jQuery), Like below jQuery inline code.


.gallery_wrapper {
          padding: 5px;
          margin: 0px auto;
          border: solid 1px #c3c3c3;
}
#image1 {
          cursor: pointer;
          float: left;
          width: 280px;
          height: 150px;
          margin: 5px;
          text-align: center;
          border: solid 1px #c3c3c3;
          background: url("http://demos.nowstartwebdesign.com/images/WebDesignInspiration.jpg") no-repeat center top;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
}
#slide1 {
          width: 280px;
          height: 150px;
          position: absolute;
          z-index: 999;
          display: none;
          background-color: #000;
          opacity: 0.8;
}
h1, h2, h3 {
          font-size: 14px;
          color: #fff;
          padding: 5px 0;
}
#image2 {
          cursor: pointer;
          float: left;
          margin: 5px;
          width: 280px;
          height: 150px;
          text-align: center;
          background: url("http://demos.nowstartwebdesign.com/images/WebDesignInspiration2.jpg") no-repeat center top;
          border: solid 1px #c3c3c3;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
}
#slide2 {
          position: absolute;
          z-index: 999;
          width: 280px;
          height: 150px;
          display: none;
          background-color: #000;
          opacity: 0.8;
}
#image3 {
          cursor: pointer;
          float: left;
          margin: 5px;
          width: 280px;
          height: 150px;
          text-align: center;
          background: url("http://demos.nowstartwebdesign.com/images/WebDesignInspiration3.jpg") no-repeat center top;
          border: solid 1px #c3c3c3;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
}
#slide3 {
          position: absolute;
          z-index: 999;
          width: 280px;
          height: 150px;
          display: none;
          background-color: #000;
          opacity: 0.8;
 }

Now we are going to jQuery
Note: 1st You can download file jquery.min.js in jquery library
Now you can paste
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Inside the head section Like Below Example: 
<head>
    <title>Nowstartwebdesign.com- Simple JQuery slideup and slidedown Using click() Tutorial</title>        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>      
</head>

Step6: Now Going to JQuery


<script>



$(document).ready(function() {
   $("#image1").click(function() {
   $("#slide3").slideUp("slow");
   $("#slide2").slideUp("slow");
   $("#slide1").slideDown("slow");
     });
});



$(document).ready(function() {
$("#image2").click(function() {
$("#slide3").slideUp("slow");
$("#slide2").slideDown("slow");
$("#slide1").slideUp("slow");
  });
});



$(document).ready(function() {
$("#image3").click(function() {
$("#slide3").slideDown("slow");
$("#slide2").slideUp("slow");
$("#slide1").slideUp("slow");
  });
});


</script>

 Demo

Tags: HTML, CSS, Javascript, jQuery

 

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

No comments :

Post a Comment