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

---------------------------------------------------------------------------------------------------------------------

Drag and Drop using Jquery:

Simple Jquery functions for dragging and dropping the images .



<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.1em; float: left; margin: 0px 0px 0px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.1em; float: left; margin: 10px; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
<img src="https://tse1.mm.bing.net/th?id=OIP.lTarnkkPh3kF2FmMe5kdhwEsDh&pid=15.1&P=0&w=211&h=159" alt="Smiley face" height="100" width="100"></div>
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>

</div>


No comments:

Post a Comment