Search jQuery

jQuery Forum

Screen name:
herselffilm

herselffilm's Profile

3 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Animated subnav not dropping on click

[0Replies]

26-May-2011 09:22 PM
Forum: Getting Started

Hi there!

I've been stuck on this for a few days now.

I've got 3 <ul> with respective classes nested one inside the other. I have the click functions working properly on the .mainnav, the .subnav drops down, but the click function on the .subnav doesn't drop it's child .subnav2.

This question I have is how do I refer to the <ul> when they're nested inside one another?

Here's the targeted HTML:

For the full source, see http://libertynationalgc.com/html/index2.html

Thanks for any help.

<div id="image_thumb"> <ul> <li><a href="thecourse2.html">THE COURSE</a></li> <li> <div class="block"> <a class="aclubhouse" href="#">THE CLUBHOUSE</a> <div class="subnav"> <ul> <li><a href="#">OVERVIEW</a></li> <li><a href="#">FEATURED ROOMS</a> <ul class="subnav2"> <li><a href="#">THE FORMAL DINING ROOM</a></li> <li><a href="#">THE GRILL ROOM</a></li> <li><a href="#">THE GRILL BAR</a></li> <li><a href="#">THE NIGHT BAR</a></li> <li><a href="#">THE CIGAR TERRACE</a></li> <li><a href="#">THE LOUNGES</a></li> <li><a href="#">THE LIBRARY</a></li> </ul> </li> <li><a href="#">DINING</a> <ul class="subnav2"> <li><a href="#">ABOUT THE CHEF</a></li> </ul> </li> <li><a href="#">AMENITIES</a> <ul class="subnav2"> <li><a href="#">THE SPA</a></li> <li><a href="#">THE FITNESS CENTER</a></li> <li><a href="#">LOCKER ROOMS</a></li> <li><a href="#">THE PRO SHOP</a></li> <li><a href="#">SERVICES</a></li> </ul> </li> </ul> </div>

and the jQuery:

$("#image_thumb ul li:first").addClass('active'); $("#image_thumb ul li").click(function(){ //Set Variables var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL var imgDesc = $(this).find('.block').html(); //Get HTML of block var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block var subnav = $(this).find('.subnav').html(); //Get HTML of subnav if ($(this).is(".active")) { //If it's already active, then... return false; // Don't click through } else { //Animate the Teaser $(".main_image .block").animate({ opacity: 0, marginTop: -imgDescHeight }, 400 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.9, marginTop: "0" }, 400 ); }); $(".main_image .subnav").animate({ opacity: 0, marginTop: "-90" }, 300 , function() { $(".main_image .subnav").html(subnav).animate({ opacity: 1, marginTop: "0"}, 300 ); }); } $("#image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists $(this).addClass('active'); //add class of 'active' on this list only return false;

Help with nested classes
[0Replies]
- 24-May-2011 03:33 PM
- Forum: Using jQuery
This code is quite a mess, picked up where someone else left off and the only thing I've managed is the subnav showing when you click the first <li> in .block

What I'd like to do is have a a second subnav (.subnav2) below the slide .subnav and at the same time slide .block up and change to whatever html contained in the list. I would also like to stop the current slideshow and replace with a new one.
I get stuck at the subnav2 slide- do I need to call the children of #image_thumb .subnav?

Demo the original developer was working from:
http://www.sohtanaka.com/web-design/examples/image-rotator/

Any help is appreciated, code is below.

Below is the javascript pertaining to the navs so far:
<script type="text/javascript">
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .subnav").show().animate({ opacity: 0.8}, 1); //Show Space for Subnav
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$("#image_thumb ul li:first").addClass('active');
$("#image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
var subnav = $(this).find('.subnav').html(); //Get HTML of subnav

if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginTop: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.8, marginTop: "0" }, 250 );
$(".main_image .subnav").html(subnav).animate({ opacity: 0.9, marginTop: "0"}, 500 );
});
}

$("#image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;

})
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$(".main_image .subnav").slideToggle();
$("a.collapse").toggleClass("show");
});
$("#image_thumb .subnav ul li:first").addClass('active');
$("#image_thumb .subnav ul li").click(function(){
$(this).children("ul").show().animate({ opacity: 0.8}, 1); //Show Space for Subnav

var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var subnav2 = $(this).find('.subnav2').html(); //Get HTML of subnav

if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .subnav2").show().animate({ opacity: 0.8, marginTop: "0"}, 250); //Show Space for Subnav
$(".main_image .subnav2").html(subnav2).animate({ opacity: 0.9, marginTop: "0"}, 500 );

}
});
});//Close Function
</script>

Next the full HTML (with slideshow 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" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Liberty National | Golf Course</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
   <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src="js/jquery.zweatherfeed.min.js" type="text/javascript"></script>
   <script src="js/jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="js/jquery.vticker.js" type="text/javascript"></script>

<script type='text/javascript'>

$(document).ready(function(){

$("img.on").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});

$(document).ready(function(){

$(document).ready(function () {
$('body').fadeIn(3000);
});

});

function slideSwitch() {
   var $active = $('#bgimg IMG.active');

   if ( $active.length == 0 ) $active = $('#bgimg IMG:last');

   // use this to pull the images in the order they appear in the markup
   var $next = $active.next().length ? $active.next()
   : $('#bgimg IMG:first');

   // uncomment the 3 lines below to pull the images in random order

   // var $sibs = $active.siblings();
   // var rndNum = Math.floor(Math.random() * $sibs.length );
   // var $next = $( $sibs[ rndNum ] );

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
   .addClass('active')
   .animate({opacity: 1.0}, 1000, function() {
   $active.removeClass('active last-active');
   });
}

$(function() {
   setInterval( "slideSwitch()", 5000 );
});


$(document).ready(function () {

$('#ticker').rssfeed('http://feeds.bbc.co.uk/iplayer/highlights/tv').ajaxStop(function() {
$('#ticker div.rssBody').vTicker({ showItems:1});
});
});


$(document).ready(function () {
$('#weather').weatherfeed(['USNJ0234']);
});
</script>
</head>

<body>
<div id="wrapper">


<div id="header">
   <div id="weather"></div>
   <div id="ticker"></div>
   <div id="logo">
   <a href="index.html"><img src="images/header/logo_fade.png" width="98" height="69" class="off"/></a>
   <a href="index.html"><img src="images/header/logo.png" width="98" height="69" class="on" /></a>
   </div>

   <div id="image_thumb">
<ul>
<li><a href="thecourse.html">THE COURSE</a></li>

<li>
<div class="block">
<a class="aclubhouse" href="#">THE CLUBHOUSE</a>
   <div class="subnav">
   <ul>
   <li><a href="#">OVERVIEW</a></li>
   <li><a href="#">FEATURED ROOMS</a>
   <div class="subnav2">
   <ul>
   <li><a href="#">THE FORMAL DINING ROOM</a></li>
   <li><a href="#">THE GRILL ROOM</a></li>
   <li><a href="#">THE GRILL BAR</a></li>
   <li><a href="#">THE NIGHT BAR</a></li>
   <li><a href="#">THE CIGAR TERRACE</a></li>
   <li><a href="#">THE LOUNGES</a></li>
   <li><a href="#">THE LIBRARY</a></li>
   </ul>
   </div>
   </li>
   <li><a href="#">DINING</a>
   <div class="subnav2">
   <ul>
   <li><a href="#">ABOUT THE CHEF</a></li>
   </ul>
   </div>
   </li>
   <li><a href="#">AMENITIES</a>
   <div class="subnav2">
   <ul>
   <li><a href="#">THE SPA</a></li>
   <li><a href="#">THE FITNESS CENTER</a></li>
   <li><a href="#">LOCKER ROOMS</a></li>
   <li><a href="#">THE PRO SHOP</a></li>
   <li><a href="#">SERVICES</a></li>
   </ul>
   </div>
   </li>
   </div>
<img src="images/overlay_head/theclubhouse.png" border="0"/>

<p class="clubhouseABOUT">LIBERTY NATIONAL IS QUICKLY GAINING RECOGNITION AS A PREMIER DESTINATION. PLAYING GOLF CHAMPIONSHIPS AT A DEMANDING 7,400 YARDS, PAR 70, LIBERTY NATIONAL FEATURES "A4" HYBRID BENT GRASS GREENS-AN EXPRESSION OF EXCELLENCE. LIBERTY NATIONAL'S PROXIMITY TO THE STATUE OF LIBERTY AND THE MANHATTAN SKYLINE ATTEST TO THE COURSE'S BEAUTY. THE COURSE IS NOT SIMPLY A CHALLENGING TEST OF SKILL, BUT WITH A MILE-LONG WATERFRONT, THE VIEWS ARE UNMATCHED IN THE GAME OF GOLF AS LADY LIBERTY IS THE TARGET ON SEVERAL APPROACH SHOTS.</p>
   </div>
</li>

<li>
<div class="block">
<a class="aclubhouse" href="#">ABOUT</a>
   <div class="subnav">
   <ul style="left: 340px;">
   <li><a href="#">OVERVIEW</a></li>
   <li><a href="#">EVENTS</a></li>
   <li><a href="#">GALLERY</a></li>
   <li><a href="#">TEAM</a></li>
   </ul>
   </div>
<img src="images/overlay_head/aboutus.png" border="0"/>
<p class="clubhouseABOUT">"When we describe the project to anyone, it never fails to command their complete attention. Who else can say the Statue of Liberty is less than a thousand yards off the eighteenth green with the Manhattan Skyline rising as a backdrop. The view of the Verrazano Narrows Bridge places every player at the foot of the American Story – coming to freedom and opportunity. Mountains are nice, the ocean is great, but in a choice for the best site in America, this one wins hands down. Golf in this setting is as unique as The United Stated in world history." – Bob Cupp
Liberty National is the closest golf course to Manhattan, located across the Hudson River from the most creative and influential professionals on earth.

Members can choose a variety of exclusive ways to arrive at the club:
- Complimentary high-speed launch service with onboard
concierge service from multiple points in Manhattan.
- Private watercrafts will dock at our own world-class marina.
- State of the art heliport located on club grounds.
- Easy and fast auto access thru the Holland tunnel or local airports

Private jets can choose to land at several nearby airports; Linden Airport (LDJ), Morristown Municipal Airport (MMU), Teterboro Airport (TEB), Essex County Airport (CDW) or Newark Liberty International Airport. </p>
</div>
</li>

<li class="margin_left">
<div class="block">
<a class="aclubhouse" href="#">PRESS</a>
   <div class="subnav">
   <ul style="left: 580px;">
   <li><a href="#">OVERVIEW</a></li>
   <li><a href="#">PRESS COVERAGE</a></li>
   <li><a href="http://www.libertynationalgc.com/press/login.php" target="_blank">PRESS KIT</a></li>
   </ul>
   </div>
<img src="images/overlay_head/press.png" border="0"/>
<p class="clubhouseABOUT">As a premier golf course in the world, Liberty National has been featured in various articles and press materials including The Wall Street Journal and The New York Times.</p>
</div>
</li>

<li>
<div class="block">
<a class="aclubhouse" href="#">MEMBERSHIP</a>
   <div class="subnav">
   <ul style="left: 710px">
   <li><a href="#">OVERVIEW</a></li>
   <li><a href="http://www.libertynationalmembers.com/club/scripts/Login/login.asp" target="_blank">LOGIN</a></li>
   </ul>
   </div>
<img src="images/overlay_head/membership.png" border="0"/>

<p class="clubhouseABOUT">Membership at Liberty National is by Invitation Only. Further information can be obtained by emailing Bill Campbell at <font color="#C1D72E"><a href='mailto:bill.campbell@libertynationalgc.com'>bill.campbell@libertynationalgc.com</a></p>
</div>
</li>

<li>
<div class="block">
<a class="aclubhouse" href="#">CONTACT</a>
   <div class="subnav">
   <ul style="left:700px">
   <li><a href="#">OVERVIEW</a></li>
   <li><a href="#">DIRECTIONS</a></li>
   <li><a href="#">EMAIL US</a></li>
   </ul>
   </div>
   <img src="images/overlay_head/contactus.png" border="0"/>

<p></p>
</div>
</li>

</ul>
</div>


<div id="flags">
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="54px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="54px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="54px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="54px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="54px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="54px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="54px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="54px" height="6" />
   <img src="images/flags/flagholes_icon.png" width="55px" height="6" />
   </div>
</div>

<div id="content">
   

   <div id="main" class="container">

<div class="main_image">
<div class="desc">
   <div class="subnav">
   </div>
   <div class="subnav2">
   </div>
<a href="#" class="collapse">Close Me!</a>
<div class="block">

<img src="images/overlay_head/welcome.png" border="0"/>

<p class="clubhouseABOUT">LIBERTY NATIONAL IS QUICKLY GAINING RECOGNITION AS A PREMIER DESTINATION. PLAYING GOLF CHAMPIONSHIPS AT A DEMANDING 7,400 YARDS, PAR 70, LIBERTY NATIONAL FEATURES "A4" HYBRID BENT GRASS GREENS-AN EXPRESSION OF EXCELLENCE. LIBERTY NATIONAL'S PROXIMITY TO THE STATUE OF LIBERTY AND THE MANHATTAN SKYLINE ATTEST TO THE COURSE'S BEAUTY. THE COURSE IS NOT SIMPLY A CHALLENGING TEST OF SKILL, BUT WITH A MILE-LONG WATERFRONT, THE VIEWS ARE UNMATCHED IN THE GAME OF GOLF AS LADY LIBERTY IS THE TARGET ON SEVERAL APPROACH SHOTS.</p>
</div>
</div>
</div>
</div>

   <div id="bgimg">
   <img src="images/holes/hole_02.jpg" width="1000" height="507" class="active"/>
   <img src="images/holes/hole_03.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_04.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_05.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_06.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_07.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_08.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_09.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_10.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_11.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_12.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_13.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_14.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_15.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_16.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_17.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_18.jpg" width="1000" height="507"/>
   <img src="images/holes/hole_01.jpg" width="1000" height="507"/>
</div>

</div> 

</div>
<div id="footer">
<a href="#" class="left">Photography by Joann Dost and Evan Schiller</a>
<a href="#" class="right">© 2011 Liberty National Golf Course</a>
</div>


<script type="text/javascript">
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .subnav").show().animate({ opacity: 0.8}, 1); //Show Space for Subnav
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$("#image_thumb ul li:first").addClass('active');
$("#image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
var subnav = $(this).find('.subnav').html(); //Get HTML of subnav

if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginTop: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.8, marginTop: "0" }, 250 );
$(".main_image .subnav").html(subnav).animate({ opacity: 0.9, marginTop: "0"}, 500 );
});
}

$("#image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;

})
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$(".main_image .subnav").slideToggle();
$("a.collapse").toggleClass("show");
});
$("#image_thumb .subnav ul li:first").addClass('active');
$("#image_thumb .subnav ul li").click(function(){
$(this).children("ul").show().animate({ opacity: 0.8}, 1); //Show Space for Subnav

var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var subnav2 = $(this).find('.subnav2').html(); //Get HTML of subnav

if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .subnav2").show().animate({ opacity: 0.8, marginTop: "0"}, 250); //Show Space for Subnav
$(".main_image .subnav2").html(subnav2).animate({ opacity: 0.9, marginTop: "0"}, 500 );

}
});
});//Close Function
</script>

</body>
</html>

Scale toggle hover won't release
[2Replies]
- 21-May-2011 10:16 AM
- Forum: Getting Started
Hi there,

I'm converting a flash site www.libertynationalgc.com to HTML, and I'm using the force of jquery for the animations.
If you go to the site above and click "The Course" tab you'll see a scale toggle with the thumbnails.
I want to know how to do that solidly.

A) I tried all day yesterday to do it with this function:
```
$(document).ready(function(){ $(".hole").hide(); $(".course_thumbs").hover(function(){ $(this).find(".hole").toggle("scale"{}1000); return false; }); });
```
With HTML:
```
<div class="course_thumbs"> <img src="images/course/thumbs/hole_th_01.jpg" class="hole"/> <img src="images/course/overlays/hole_ov_01.jpg" class="hole_title"/> </div>
```
Toggles back and forth fine, but eventually...
1) When the mouse leaves sometimes it doesn't toggle back to the original image "Hole 1 at..." or it toggles the initial image under the second.
2) Sometimes two thumbnails toggle at once.

I think what I'm missing is a line that basically says "don't toggle until all other toggles are finished" and "go back to .holetitle on mouseleave."

My testing server for full code:
www.libertynationalgc.com/html

I took the scale argument out so I can have my sanity back, but I want to beat these FLASH guys!!!

Thanks for any help or suggestions.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend