JQuery

Vertical Scroll using Jquery



index.php


<html>
<head>
    <meta charset="UTF-8">
    <title>Totem Ticker</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.totemticker.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#vertical-ticker').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next',
                previous    :   '#ticker-previous',
                stop        :   '#stop',
                start       :   '#start',
                mousestop   :   true,
            });
        });
    </script>
</head>
<body>
    
    
    <div id="wrapper">
    
        <h1 class="logo">Totem Ticker</h1>
    
        <ul id="vertical-ticker">
            <li>Web Developer</li>
            <li>Software Tester</li>
            <li>Software Analyst</li>
            <li>Technicsl Analyst</li>
            <li>System Analyst</li>
            <li>Software Programmer</li>
            <li>Team Leader</li>
        </ul>
        
        <p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>
        
    </div>
    
    
</body> 
</html>

style.css


*{margin:0; padding:0;}

body{
    font-family:Lucida Grande, Helvetica, Arial, sans-serif;
    background:#CCC;;
    -webkit-font-smoothing:antialiased;
}

h1.logo{
    overflow:hidden; 
    text-indent:-9999em; 
    width:230px; 
    height:70px;
    margin:0 auto 15px auto;
    background: url('../images/totem-logo.png') top left no-repeat;
}

/* Top Banner */

            #banner h1#logo-link{height:57px; width:160px; margin:24px 12px; background: url('../images/build-internet-logo-shadow.png') no-repeat top left;}
                #banner h1#logo-link a{text-indent:-9999px; display:block; height:100%; width:100%; text-decoration:none;}

#wrapper{
    padding:30px;
    width:300px;
    margin:0 auto;
}

    p{color:#fff; padding:10px 0; text-align:center;}
        .nav{}
    
    #wrapper a{color:#e8914c; text-decoration:none; border-bottom:1px dotted #e8914c;}
        #wrapper a:hover{color:#eab209; border-bottom:1px dotted #eab209;}


#vertical-ticker{
    height:400px;
    overflow:hidden;
    margin:0; padding:0;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0, .4);
}

    #vertical-ticker li{
        padding:35px 20px;
        display:block;
        background:#FFF;
        color:#03C;
        border-bottom:1px solid #ddd;
        border-radius:5px;
        text-align:center;
        font-size:25px;
        font-weight:bold;
        font-family: Helvetica Neue, times, serif;
    }
Download js

No comments:

Post a Comment