Scrolling with Jquery – Part 1
Share|Scrolling with Jquery – Part 1 <script type="text/javascript"...
Scrolling with Jquery – Part 1
Scrolling with Jquery – 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:
Slicker Show and Hide using Jquery Advance Part 2
Slicker Show and Hide using Jquery Advance Part 2
<html>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
a {
color:#993300; text-decoration:none;
}
#div1 {
width:70%;
display: none;
padding:5px;
border:2px solid #EFEFEF;
background-color:Pink;
}
#click_here
{
padding:5px;
border:2px solid #FFEFEF;
background-color:#00ff00;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#click_here").click(function(event)
{
event.preventDefault();
$("#div1").slideToggle();
});
$("#div1 a").click(function(event)
{
event.preventDefault();
$("#div1").slideUp();
});
});
</script>
</head>
<body>
<input type="button" id="click_here" value="Click Here">
<table>
<tr>
<td>HTML Content</td>
</tr>
</table>
<div id="div1">
<a href="#" class="close">[x]</a>
<p>
Content comes here
</p>
</div>
<table>
<tr>
<td>HTML Content</td>
</tr>
</table>
</body>
</html>
Share this:
jQuery YouTube Popup Player
jQuery YouTube Popup Player
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery YouTube Popup Player</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.youtubepopup.js"></script>
<script type="text/javascript">
$(function () {
$("a.youtube").YouTubePopup({ autoplay: 0 });
});
</script>
</head>
<body>
<a class="youtube" href="#" rel="4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>
<br>
<a class="youtube" href="#" rel="YPQ_N4imYVE" title="jQuery YouTube Popup Player Plugin TEST">Test 2 </a>
<br>
<a class="youtube" href="#" rel="SmM0653YvXU" title="jQuery YouTube Popup Player Plugin TEST">Test 3 </a>
<br>
<a class="youtube" href="#" rel="EPo5wWmKEaI" title="jQuery YouTube Popup Player Plugin TEST">EPo5wWmKEaI</a>
<br>
<a class="youtube" href="#" rel="t4H_Zoh7G5A" title="jQuery YouTube Popup Player Plugin TEST">t4H_Zoh7G5A</a>
</body>
</html>
(Contains 1 attachments.)
Share this:
Slicker Show and Hide using Jquery – Basic Version
Slicker Show and Hide using Jquery – Basic Version
You can also check the advance version here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
// toggles the slickbox on clicking the noted link
$('a#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
</script>
<p><a id="slick-toggle" href="#">My URL</a></p>
<div id="slickbox" style="display: none;">www.pscsglobal.com</div>
Share this:
Slicker Show and Hide using Jquery
Slicker Show and Hide using Jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META content=pranavaj@pranavaj.net name=Author>
<title>Untitled Document</title>
<style>
h2 {
padding:10px;
font-size:20px;
color:#243953;
background-color:#fafafa;
border: 1px solid #a9a9a9;
-moz-border-radius: 7px; /* Rounder Corner */
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom:5px;
}
.togglebox {
background-color:#CCC;
border: 1px solid #a9a9a9;
/* Rounder Corner */
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
overflow: hidden;
font-size: 1.2em;
width: 295px;
clear: both;
margin-bottom:10px;
}
.togglebox .content {
padding: 20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//Hide (Collapse) the containers on load
$(".togglebox1").hide();
//Slide up and down on hover
$("h2").click(function(){
$(this).next(".togglebox1").slideToggle("slow");
});
});
</script>
</head>
<body>
<h2>Click Here</a></h2>
<div class="togglebox1">
<div class="block">
<h3>Content Here</h3>
<!--Content-->
</div>
</div>
My Misc Content comes here
</body>
</html>
Share this:
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:
Slicker Show and Hide using Jquery Advance Part 2
Share|Slicker Show and Hide using Jquery Advance Part 2 <html> <style...
jQuery YouTube Popup Player
Share|jQuery YouTube Popup Player <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
Slicker Show and Hide using Jquery – Basic Version
Share|Slicker Show and Hide using Jquery – Basic Version You can also check the...
Slicker Show and Hide using Jquery
Share|Slicker Show and Hide using Jquery <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
jQuery Horizontal page Scolling
Share|jQuery Horizontal page Scolling <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...