How to Add Auto scrollup button to the page

                                  

                                               In some website you design that contain large height dew to the large amount of data, so this provide some difficulty to the user to scroll from bottom to top . Here include
 some code for add autoscroll up button to the html page.

* Add below code to the head section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>   
        <link rel="stylesheet" type="text/css" href="style.css" />               
        <script type="text/javascript">
            $(document).ready(function(){
           
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $('.scrollup').fadeIn();
                } else {
                    $('.scrollup').fadeOut();
                }
            });
           
            $('.scrollup').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 600);
                return false;
            });

        });
        </script>


* Add the code in the body to implement auto scrollup.
  
<a href="#" class="scrollup">Scroll</a>     

** In the head section we refer style.css . so copy below code and save it as style.css.

html, body, ul, ol, li, form, fieldset, legend{
            margin: 0;
            padding: 0;
        }

        h1, h2, h3, h4, h5, h6, p { margin: 0; }
       
       
        body{font-family: 'Droid Sans', sans-serif;background:#eee;color:#888;padding:0;margin:0;font-size: 72.5%; }
               
        p{
            margin-bottom:15px;
        }
       
        h2{
            text-align:center;
            font-size:32px;
            font-weight:400;
        }
       
        h4{
            text-align:center;
            font-size:18px;   
            font-weight:400;           
        }
       
        #wrap{
           
            width:960px;
            margin:0 auto;
        }
       
        #content{
            background:#fff;
            padding:10px 15px;
           
        }
       
        #header{
            margin-bottom:20px;
        }
        #footer{
            text-align:center;
        }
       
        .scrollup{
            width:40px;
            height:40px;           
            text-indent:-9999px;
            opacity:0.3;
            position:fixed;
            bottom:50px;
            right:100px;
            display:none;           
            background: url('top.PNG') no-repeat;
        }
     you can add any image you want to represent the auto scroll button at background:url('up picture')

How to Add auto page scroll to particular location

    
  In some site development process we require auto scrolling of page to the particular point of the web page on button click.   We can do this by using simple javascript. we can define the jumping point by write the pixel position in horizontal and vertical.

* Paste below code ] in head section.

<script type="text/javascript">
    function jumpScrollup() {
       window.scroll(0,0); // horizontal and vertical scroll targets
}
function jumpScroll() {
       window.scroll(0,800); // horizontal and vertical scroll targets
}
</script>

here (0,800) shows the pixel position that you want to jump. 0 for horizontal and 800 for vertical pixel position. you can change this pixel positions.

* Add below code to where you want to add the jumping function such as button click or links.

<a href="javascript:jumpScroll()">Link name</a>

you can use these codes to many times in a single page by changing the pixel positon.

Adobe photoshop cs5 class room in a Book.

   
  This is a training book from adobe for improving the ability in photoshop. This include the step by step of photoshop development. It provide best shortcut method for easy use of photoshop.

*Click VIEW to Read book online.  *Click DOWNLOAD to download pdf.

Adobe Dreamweaver CS5 classroom in a Book

                                      
 

                           This is the famous Training book from Adobe. It explain the step by step development of web designing by using the Adobe Dreamweaver cs5. Pictorial representation and codes help you to become a great web designer.  This book also give tips for easy coding.
                            You can free download this book in pdf format by clicking below link.
   
*Click VIEW to Read book online. 
*Click DOWNLOAD to download pdf.

Sliding Div Panels in HTML

 In Web designing div panels have very important role. So by using different styles in div panels we can create beautiful designs.
We can add any content to these  div panels.

The Html code for sliding div panel is given below.


-----------------------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title></title>
     <link href="main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <input id="btnSlideDown" type="button" value="SlideDown" />
    <input id="btnSlideUp" type="button" value="SlideUp" />    <br />
    <div id="divTest" style="display: none; width: 500px; height: 100px; background-color:#009;">
       
    <!--content-->
      <div id="innercontent">
           <font style="color:#FFF; font-weight:bold;">
            Div 1 Contents
            cybermate4u.com</font>
         </div>
     </div>
  <!--end content-->

<!--new slide-->
      <input id="btnSlideDown1" type="button" value="SlideDown" />
      <input id="btnSlideUp1" type="button" value="SlideUp" />
   
 <div id="divTest1" style="display: none; width: 500px; height: 100px; background-  color:#0F3">         
    <div id="innercontent">
        <font style="color:#099">
          Div 2 Contents
            cybermate4u.com
       </font>        
    </div>
 </div> 
</div>
</body>

<script type="text/javascript">

    $(function()
    {

        $('#btnSlideDown').click(function()
        {

            $('div#divTest').slideDown('slow');

        });


        $('#btnSlideUp').click(function()
        {

            $('div#divTest').slideUp('slow');

        });

    });
   
   
   
        $(function()
    {

        $('#btnSlideDown1').click(function()
        {

            $('div#divTest1').slideDown('slow');

        });


        $('#btnSlideUp1').click(function()
        {

            $('div#divTest1').slideUp('slow');

        });

    });

</script>

</html>
-----------------------------------------------------------------------------------------------------------------------------

     
    We can define the width, height and the background color of the sliding div panels. The code in red color shows the sliding panel for the single div panels.
  Try it Your self..Happy coding.........