[jQuery] Re: Make width of inner div equal outer

2009-07-29 Thread Paul Collins 
Hi all,
I haven't received a response, so I've put up a test page to make it a bit
more clear.
http://paulcollinslondon.com/test/test.html

Basically, the second level navigation is showing when the page loads,
because the parent list item for ABOUT US has a class of selected. When
you mouseover the second level nav though, it disappears and I'm not sure
why.

If it has a class of selected, I only want it to disappear when you roll
over another top level link. Can anyone let me know what I'm doing wrong
here?

Thanks for any help
Paul



2009/7/27 Paul Collins pauldcoll...@gmail.com

 Hi all,

 I'm completely stuck and been trying to solve this all day! Any help would
 be greatly appreciated...

 Basically, I have a suckerfish type navigation. It works fine with CSS and
 I'm trying to add some JQuery to animate the slide-down effect. I've got
 that working, but I need to have the sub-nav showing when I am on the actual
 page and keep it there when you hover over it, unless you hover over a
 different top level navigation. With CSS, it works fine as I add a class of
 selected to the top level, but I can't work it out in JQuery. Here is my
 code:

 function mainmenu(){

 if ($(#header ul#topNavigation li).is(.selected)){
 $(this).find('div:first:visible');
 }else{
 $(this).find('div:first:invisible');
 };

 $(#header ul#topNavigation li).hover(function(){

 $(this).find('div:first').css({visibility:visible,display:none}).slideDown(300);
 },function(){
 $(this).find('div:first').css({visibility:hidden});
 });
 }

 // activate function
 $(document).ready(function(){
 mainmenu();
 });

 The HTML

 div id=header
 ul id=topNavigation
 lia href=/Home/a/li
  li class=selected
 a href=/About Us/a
  div class=secondLevel
 ul
 lia href=/Overview/a/li
  /ul
 /div
  /li
 lia href=/Contact/a/li
  /ul
 /div

 Currently, the 2nd level appears if I have the class of selected, but it
 dissapears when I mouse over it. I would need it to stay there until I hover
 over a different top level nav item.

 Would really appreciate any help.
 Thanks
 Paul

[jQuery] Re: Make width of inner div equal outer

2009-07-27 Thread Paul Collins 
Hi all,

I'm completely stuck and been trying to solve this all day! Any help would
be greatly appreciated...

Basically, I have a suckerfish type navigation. It works fine with CSS and
I'm trying to add some JQuery to animate the slide-down effect. I've got
that working, but I need to have the sub-nav showing when I am on the actual
page and keep it there when you hover over it, unless you hover over a
different top level navigation. With CSS, it works fine as I add a class of
selected to the top level, but I can't work it out in JQuery. Here is my
code:

function mainmenu(){

if ($(#header ul#topNavigation li).is(.selected)){
$(this).find('div:first:visible');
}else{
$(this).find('div:first:invisible');
};

$(#header ul#topNavigation li).hover(function(){

$(this).find('div:first').css({visibility:visible,display:none}).slideDown(300);
},function(){
$(this).find('div:first').css({visibility:hidden});
});
}

// activate function
$(document).ready(function(){
mainmenu();
});

The HTML

div id=header
ul id=topNavigation
lia href=/Home/a/li
 li class=selected
a href=/About Us/a
 div class=secondLevel
ul
lia href=/Overview/a/li
 /ul
/div
 /li
lia href=/Contact/a/li
 /ul
/div

Currently, the 2nd level appears if I have the class of selected, but it
dissapears when I mouse over it. I would need it to stay there until I hover
over a different top level nav item.

Would really appreciate any help.
Thanks
Paul

[jQuery] Re: Make width of inner div equal outer

2009-07-24 Thread Paul Collins 
Excellent, works a treat, thanks Eric...

2009/7/23 Eric Garside gars...@gmail.com


 $('.secondLevel').css('width', $('#header').width());

 On Jul 23, 1:16 pm, Paul Collins pauldcoll...@gmail.com wrote:
  Hi all,
  I've got a problem with IE6 and I need to basically find the width of the
  header DIV and make the secondLevel DIV match it. So, I guess I need
 to
  target IE6 specifically in the code. Here's what I have:
 
  div id=header
  ul id=topNavigation
  lia href=/Home/a/li
  li class=selected
  a href=/About Us/a
  div class=secondLevel
  ul
  lia href=/Overview/a/li
  /ul
  /div
  /li
  lia href=/Contact/a/li
  /ul
  /div
 
  I'm not sure how to start with the script. I can calculate the width of
 the
  header DIV, but not sure how to force the secondLevel one to match
 it.
 
  alert($(#header).width());
 
  Any help would be fantastic.
  Cheers
  Paul

[jQuery] Re: Make width of inner div equal outer

2009-07-23 Thread Eric Garside 

$('.secondLevel').css('width', $('#header').width());

On Jul 23, 1:16 pm, Paul Collins pauldcoll...@gmail.com wrote:
 Hi all,
 I've got a problem with IE6 and I need to basically find the width of the
 header DIV and make the secondLevel DIV match it. So, I guess I need to
 target IE6 specifically in the code. Here's what I have:

 div id=header
 ul id=topNavigation
 lia href=/Home/a/li
 li class=selected
 a href=/About Us/a
 div class=secondLevel
 ul
 lia href=/Overview/a/li
 /ul
 /div
 /li
 lia href=/Contact/a/li
 /ul
 /div

 I'm not sure how to start with the script. I can calculate the width of the
 header DIV, but not sure how to force the secondLevel one to match it.

 alert($(#header).width());

 Any help would be fantastic.
 Cheers
 Paul