[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
[jQuery] Datepicker and Jquery updating the value of pulldown menu
Hi,
I need help adding the jquery date picker to my existing code, but
not
reconstructing the whole HTML file.
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 /
titlecalenar/title
script src=http://ajax.googleapis.com/ajax/libs/jquery/
1.3.2/
jquery.min.js type=text/javascript charset=utf-8/script
script src=http://ajax.googleapis.com/ajax/libs/jqueryui/
1.7.2/jquery-ui.min.js type=text/javascript charset=utf-8/
script
script type=text/javascript
$(function(){
// #datepickers
$(#datepicker).datepicker({showOn: 'button',
buttonImage: 'images/calendar.gif', buttonImageOnly: true});
});
/script
/head
body
pDepart:/p
table cellpadding=2 cellspacing=0 border=0
tr
tdselect name=departureMonth
onchange=javascript:dmddChange
(document.hotForm.departureMonth,document.hotForm.departureDay);
option value=0January/option
option value=1February/option
option value=2March/option
option value=3April/option
option value=4May/option
option value=5June/option
option value=6July/option
option value=7August/option
option value=8September/option
option value=9October/option
option value=10November/option
option value=11December/option
/select/td
tdselect name=departureDay onchange=dmddChange
(document.hotForm.departureMonth,document.hotForm.departureDay)
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=1010/option
option value=/option
option value=1212/option
option value=1313/option
option value=1414/option
option value=1515/option
option value=1616/option
option value=1717/option
option value=1818/option
option value=1919/option
option value=2020/option
option value=2121/option
option value=/option
option value=2323/option
option value=2424/option
option value=2525/option
option value=2626/option
option value=27 selected=selected27/option
option value=2828/option
option value=2929/option
option value=3030/option
option value=3131/option
/select/td
tda href=javascript:openCalendar('hotForm',
'departure');img src=http://affiliate.travelnow.com/
searchboximages/blueFormCalendar.gif border=0//a/td
/tr
/table
pGoing to:/p
table cellpadding=2 cellspacing=0 border=0
tr
tdselect name=departureMonth
onchange=javascript:dmddChange
(document.hotForm.departureMonth,document.hotForm.departureDay);
option value=0January/option
option value=1February/option
option value=2March/option
option value=3April/option
option value=4May/option
option value=5June/option
option value=6July/option
option value=7August/option
option value=8September/option
option value=9October/option
option value=10November/option
option value=11December/option
/select/td
tdselect name=departureDay onchange=dmddChange
(document.hotForm.departureMonth,document.hotForm.departureDay)
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=1010/option
option value=/option
option value=1212/option
option value=1313/option
option value=1414/option
option value=1515/option
option value=1616/option
option value=1717/option
option value=1818/option
option value=1919/option
option value=2020/option
option value=2121/option
option value=/option
option value=2323/option
option value=2424/option
option value=2525/option
option value=2626/option
option value=27 selected=selected27/option
option value=2828/option
option value=2929/option
option value=3030/option
option value=3131/option
/select/td
tda href=javascript:openCalendar('hotForm',
'departure');img src=http://affiliate.travelnow.com/
[jQuery] Google Maps, JQuery and KML file need Help
Hi, I'm new to Google Map API and also with JQuery Javascript framework. I really need help in building this project that uses Google Map, JQuery and a KML file. To give you an Idea of what I'm planning to build. This is an image preview of my interface (http://pennfolio.com/ GoogleMap/ui-preview.jpg). I am currently stuck with this code, http://pennfolio.com/GoogleMap/index.html. (I can't figure out how to pull data from the kml file, like I would like to get the image and put it in a div.) I want to load the kml file to the Google map and replacing all the random marker with the image specified in the KML file. I created a div with an ID of sidebar, it's main purpose would be the container of all the thumbnails that are linked in the map, (I don't know how to get the images from the KML file and putting the inside the #sidebar ) If possible I would like to retain the jquery ui, Since I like the feature that when a user click a marker or the thumbnail in the map or in the sidebar A Tab pops up with the description. Description also would be loaded from the kml file. I think my main problem is getting the values from the KML file and would output in html. -- The Files, http://pennfolio.com/GoogleMap/GoogleMap-files.zip I'm also open to other approach and suggestion. Thanks You
[jQuery] Google Maps and JQuery,
Hi, I want to know if this can be done using jQuery and Google Maps. In my website I have a Google map where users could add new markers with a description on it and the marker they put would be permanent on my map, meaning if they comeback they would still see the markers they added. I also want the feature that they could just drag and drop the marker, so it would be easy to the users. What would be my approach and how would I do it? Thank you!
[jQuery] background image fade-in fade-out transition every 3 seconds
Hi, How do I tween background images every 3 seconds it would change with a fade-in and fade-out effect? I would like it to apply in my body with background-image in my css. thanks!
[jQuery] body background fading images in cycle? need help...
Hi,
I am looking for a solution to change my body's background with a list
of backgrounds in every 3 seconds with some fade-in and fade-out
transitions, I also want it to cycle back to its beginning image.
script jquery/script
style
.bodyBG1 { image1 }
.bodyBG2 { image1 }
.bodyBG3 { image1 }
/style
body
div id=mainwrapper
div id=samplesample content/div
/div
body
Thanks guy!
[jQuery] Injecting tags to specific location.
Hi, My CMS won't let me customize their HTML structure they didn't give me access to their templating system. But they'd let me access their Head section were I could add custom Javascript and CSS. Example this would be their template structure: body div id=wrapper div id=maincontent Maincontent /div div id=left Left Contents /div div id=right Right Contents /div /div /body This what I want to achieve: body div id=wrapper div id=maincontent div class=inject1 div class=inject2 div class=inject3 Maincontent /div /div /div /div div id=left div class=inject1 div class=inject2 div class=inject3 Left Contents /div /div /div /div div id=right div class=inject1 div class=inject2 div class=inject3 Right Contents /div /div /div /div /div /body The reason why the injections was structured like that is, I want the regular divs to be rounded. the Inject1, Inject2, Inject3 would be style in my external CSS. To all JQuery experts there I really need help... I think it would also be great if it was like a class that i can just be apply it to specific ids or class. Thanks!
[jQuery] Sony Drop down menu in jquery
Hi, Is the horizontal drop down menu in Sony (http://www.sony.com/ index.php) can be done in Jquery?. I like the 2 columns like shop or electronics and the sub menu just expand when it is being click. Is there already done solution like this on the web? Thanks!
[jQuery] Cool Sony Horizontal Drop Down menu in JQuery?
Hi, Sony.com (http://www.sony.com/index.php) has a very cool horizontal menu, My question is can this be done in unordered list with JQuery? I like the 2 columns menu that expand (it can be seen under shop or electronics) and also would expand to its sub menu. Is there already done solution for this? Thanks!
