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