jQuery Horizontal page Scolling
Share|jQuery Horizontal page Scolling <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
jQuery Horizontal page Scolling
jQuery Horizontal page Scolling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Horizontal Scrolling with jQuery</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<style>
a{
color:#fff;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:13px;
font-weight:bold;
}
span.reference a{
color:#fff;
text-shadow:1px 1px 1px #000;
padding-right:20px;
}
span.reference a:hover{
color:#ddd;
text-decoration:none;
}
</style>
<body>
<div class="section black" id="section1">
<h2>Section 1</h2>
<p>
MY Spectre around me night and day
Like a wild beast guards my way;
My Emanation far within
Weeps incessantly for my sin.
</p>
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section white" id="section2">
<h2>Section 2</h2>
<p>
‘A fathomless and boundless deep,
There we wander, there we weep;
On the hungry craving wind
My Spectre follows thee behind.
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li>2</li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section black" id="section3">
<h2>Section 3</h2>
<p>
‘He scents thy footsteps in the snow
Wheresoever thou dost go,
Thro’ the wintry hail and rain.
When wilt thou return again?
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li>3</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
</html>
(Contains 1 attachments.)
Share this:
jQuery Vertical Page Scrolling
jQuery Vertical Page Scrolling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Vertical Scrolling with jQuery</title>
<link rel="stylesheet" href="css/style_vertical.css" type="text/css" media="screen"/>
</head>
<style>
a{
color:#fff;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:13px;
font-weight:bold;
}
span.reference a{
color:#fff;
text-shadow:1px 1px 1px #000;
padding-right:20px;
}
span.reference a:hover{
color:#ddd;
text-decoration:none;
}
</style>
<body>
<div class="section black" id="section1">
<h2>Section 1</h2>
<p>
MY Spectre around me night and day
Like a wild beast guards my way;
My Emanation far within
Weeps incessantly for my sin.
</p>
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section white" id="section2">
<h2>Section 2</h2>
<p>
‘A fathomless and boundless deep,
There we wander, there we weep;
On the hungry craving wind
My Spectre follows thee behind.
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li>2</li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section black" id="section3">
<h2>Section 3</h2>
<p>
‘He scents thy footsteps in the snow
Wheresoever thou dost go,
Thro’ the wintry hail and rain.
When wilt thou return again?
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li>3</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
</script>
</body>
</html>
(Contains 1 attachments.)
Share this:
jQuery Page Scroll Basic – Part 1
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scrollPage').click(function() {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 1500 );
return false;
});
});
</script>
<p id="scrollToTOP">
<b>You are at TOP</b>
<p><a href="#scrollToCenter" class="scrollPage">Click Me to Vertical Center</a></p>
<p><a href="#scrollToBottom" class="scrollPage">Click Me to Bottom</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="scrollToCenter">
<b>You are Vertical Center !!!!!</b>
<p><a href="#scrollToTOP" class="scrollPage">Click Me to TOP</a></p>
<p><a href="#scrollToCenter" class="scrollPage">Click Me to Vertical Center</a></p>
<p><a href="#scrollToBottom" class="scrollPage">Click Me to Bottom</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="scrollToBottom">
<b>You are at Bottom !!!!!</b>
<p><a href="#scrollToTOP" class="scrollPage">Click Me to TOP</a></p>
<p><a href="#scrollToCenter" class="scrollPage">Click Me to Vertical Center</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Share this:
jQuery Autocomplete Script
jQuery Autocomplete Script
Search .html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
function log(event, data, formatted) {
$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
}
function formatItem(row) {
return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, '');
}
$("#MyKeyword").autocomplete('search.php', {
width: 300,
multiple: true,
matchContains: true,
formatItem: formatItem,
formatResult: formatResult
});
$("#MyKeyword").result(function(event, data, formatted) {
var hidden = $(this).parent().next().find(">:input");
hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
});
});
</script>
</head>
<body>
<div id="content">
<form autocomplete="off">
<input type="text" id="MyKeyword" />
<input type="submit" value="Submit" />
</form>
<h3>Result:</h3> <ol id="result"></ol>
</div>
</body>
</html>
Search.php
<?php // You can pass your database connection here // And one can use any langauge JSP, ASP, PHP, CFM etc. // Just change the search.php to your page name and extension in Search.html echo "1|Pranav\n"; echo "2|Rima\n"; echo "3|Aish\n"; echo "4|Tejal\n"; echo "5|Shilpa\n"; ?>
(Contains 1 attachments.)
Share this:
jQuery simple animate
Replace the jquery reference with the path to your jquery-version.js file. If this does not work, then something might be wrong with your jquery library file.
<html>
<head>
<script type="text/javascript" src="jqueryMIN.js"></script>
<script>
function hello() {
var selObj = $('#direction');
var slider = $('#slider');
if (!parseInt(selObj.val()))
{
alert('You must select a direction');
}
else
{
switch(parseInt(selObj.val()))
{
case 1:
slider.animate({top: 100}, 800)
break;
case 2:
slider.animate({left: 100}, 800)
break;
case 3:
slider.animate({ top: 0, left: 0 }, 800)
break;
}
}
}
</script>
</head>
<body>
<select id="direction" onchange="hello()">
<option value="">Select an direction</option>
<option value='1'>down</option>
<option value='2'>right</option>
<option value='3'>reset</option>
</select>
<div id='slider' style='position: relative; display: block; background-color: #00f; width: 100px; height: 100px;'></div>
</body>
Share this:
onSelect Open URL Using jQuery
onSelect Open URL Using jQuery
$('#userNav').change(function() {
window.location = $(':selected',this).attr('href')
});
<select id="userNav">
<option></option>
<option href="http://google.com">Goolge</option>
<option href="http://devguru.in">DevGuru</option>
<option href="http://pscsglobal.com">PSCS</option>
<option href="http://direct4host.biz">direct4host</option>
<option href="http://Bankofsms.com">Bankofsms</option>
<option href="http://drdazzle.net">drdazzle</option>
<option href="http://dazzlingdesign.in">dazzlingdesign</option>
</select>
Share this:
jQuery Vertical Page Scrolling
Share|jQuery Vertical Page Scrolling <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
jQuery Page Scroll Basic – Part 1
Share| <script type="text/javascript"...
jQuery Autocomplete Script
Share|jQuery Autocomplete Script Search .html <html> <head> <script...
jQuery simple animate
Share|Replace the jquery reference with the path to your jquery-version.js file. If this...
onSelect Open URL Using jQuery
Share|onSelect Open URL Using jQuery $('#userNav').change(function()...