please help me with my code,
<!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" />
<title>Build Slider</title>
<style type="text/css">
body { text-align: center; font-family: "Lucida Sans Unicode",
"Lucida Grande", sans-serif; }
a { text-decoration: none; }
div { position: relative; }
#mainwrap {
width: 950px;
background: #CCC;
text-align: left;
margin: 0 auto;
padding: 10px;
}
#logo { width: 950px; background: #fff; padding: 10px; left:
-10px; }
#logo a { color: #6CF;}
#topnav { position: absolute; width: 450px; top: 30px; right:
-10px; }
#topnav ul { list-style: none; margin: 0; padding: 0; }
#topnav ul li { float: left; }
#topnav ul li a { padding: 5px 10px; display: block; color:
#6CF; }
#topnav ul li a:hover { background: #CF9; border-bottom: solid 2px
#6CF; border-top: solid 2px #6CF; }
#mcontent_hold #home,
#mcontent_hold #about,
#mcontent_hold #product,
#mcontent_hold #contact {
height: 450px;
background: #CFC;
width: 950px;
}
</style>
<script src="http://jqueryfordesigners.com/demo/jquery-1.2.6.js";
type="text/javascript"></script>
<script src="http://jqueryfordesigners.com/demo/
jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="http://jqueryfordesigners.com/demo/
jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></
script>
<script src="http://jqueryfordesigners.com/demo/
jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></
script>
<script type="text/javascript" charset="utf-8">
// when the DOM is ready...
$(document).ready(function () {
var $panels = $('#mainwrap #mcontent_hold > div');
var $container = $('#mainwrap #mcontent_hold');
// if false, we'll float all the panels left and fix the
width
// of the container
var horizontal = true;
// float the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' // IE fix to ensure overflow
is hidden
});
// calculate a new width for the container (so it holds
all panels)
$container.css('width', $panels[0].offsetWidth *
$panels.length);
}
// collect the scroll object, at the same time apply the
hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#mcontent').css('overflow', 'hidden');
// apply our left + right buttons
$scroll
.before('<img class="scrollButtons lefts" src="images/
scroll_left.png" />')
.after('<img class="scrollButtons rights" src="images/
scroll_right.png" />');
// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#top').find('a').click(selectNav);
// go find the navigation link that has this target and select
the nav
function trigger(data) {
var el = $('#topnav .nav').find('a[href$="' + data.id +
'"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.nav a:first').click();
}
// offset is used to move to *exactly* the right place, since
I'm using
// padding on my example, I need to subtract the amount of
padding to
// the offset. Try removing this to get a good idea of the
effect
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll, // the element that has the overflow
// can be a selector which will be relative to the target
items: $panels,
navigation: '.nav a',
// selectors are NOT relative to document, i.e. make sure
they're unique
prev: '',
next: '',
// allow the scroll effect to run both directions
axis: 'xy',
onAfter: trigger, // our final callback
offset: offset,
// duration of the sliding effect
duration: 600,
// easing - can be used with the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'swing'
};
// apply serialScroll to the slider - we chose this plugin
because it
// supports// the indexed next and previous scroll along with
hooking
// in to our navigation.
$('#mainwrap').serialScroll(scrollOptions);
// now apply localScroll to hook any other arbitrary links to
trigger
// the effect
$.localScroll(scrollOptions);
// finally, if the URL has a hash, move the slider in to
position,
// setting the duration to 1 because I don't want it to scroll
in the
// very first page load. We don't always need this, but it
ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
});
</script>
</head>
<body>
<div id="mainwrap">
<div class="fxwrap">
<div id="mainholder">
<div id="top">
<div id="logo" class="gd"><h1><a class="active"
href="#">Logo Here</a></h1></div>
<div id="topnav" class="gd">
<ul class="nav">
<li class="page home"><a title=""
href="#home">Home</a></li>
<li class="page about"><a title=""
href="#about">About</a></li>
<li class="page about"><a title=""
href="#product">Product</a></li>
<li class="page journal"><a title=""
href="">Blog</a></li>
<li class="page contact"><a title=""
href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div id="mcontent">
<div id="mcontent_hold">
<div id="home">Home Goes Here</div>
<div id="about">About Goes Here</div>
<div id="product">Product Goes Here</div>
<div id="contact">Contact Goes Here</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse vehicula euismod ligula, nec ullamcorper sem commodo
egestas. Pellentesque posuere elementum nunc sed pretium. Quisque sed
lectus et sem porta dignissim. Aliquam ipsum mi, <a
href="#about">vulputate</a> vitae molestie eget, <a
href="#">vestibulum</a> sed quam. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Etiam sed semper
nulla. Cras in convallis dui. Donec ornare magna vitae libero egestas
vel fermentum purus rhoncus. Phasellus congue, velit et bibendum
tincidunt, metus erat sodales dolor, fermentum adipiscing enim ligula
id tortor. Vivamus blandit sodales metus, vel ultricies arcu malesuada
vel. Vestibulum dui risus, rhoncus et elementum et, scelerisque at
neque. In dapibus, libero ac laoreet blandit, velit ligula dignissim
massa, et mollis tellus dolor sit amet justo. Donec mauris arcu,
gravida vel egestas auctor, porttitor eget mauris. In vel mauris
lacus. </p>
</div>
</div>
</div>
</body>
</html>
In my top navigation I have Home,Product,Blog,& Contact. I want 'Blog'
button to exclude from scrolling. Because the blog will be pointing at
(blog.website.com or website.com/blog). I already remove any anchor
link in the 'Blog' but it still keep scrolling to the last page, I
also tried putting the actual link like blog.website.com, but it still
keep scrolling. please help me with my code, I can't figure out the
effect that I want.
Many Thanks!
