[jQuery] Jquery Coda Slider Help
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 /
titleBuild 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
[jQuery] Jquery Coda Slider Help
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 /
titleBuild 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
