FairyBusiness
asked on
How to make a menu link redirect to its first li child link?
Hi, I am trying to write a function that when a menu link is clicked it automatically re-directs to its first li child's link:
Its not working though. Anyone know how to make this happen?
$('#menu > li:parent').click(function () {
$(window.location).attr('href', '#menu > li:child');
});
Its not working though. Anyone know how to make this happen?
btw you were not getting any value with
'#menu > li:child' in line 2 ....
$('#menu > li:child').attr('attr_name ') gets it
'#menu > li:child' in line 2 ....
$('#menu > li:child').attr('attr_name
ASKER
when I click 'about us"
its not going to:
http://gowiththemaster.com/tleithoff/about.php?id=1&type=1blurb&table=submenus
its still going to:
http://gowiththemaster.com/tleithoff/about.php?id=1&type=1blurb&table=menus
its not going to:
http://gowiththemaster.com/tleithoff/about.php?id=1&type=1blurb&table=submenus
its still going to:
http://gowiththemaster.com/tleithoff/about.php?id=1&type=1blurb&table=menus
$('#menu > li:parent').click(function () {
//var target_url=this.html();//if you want to get url from li text
var target_url=$('#menu > li:parent > a').attr('href') ;
//if you want to get url from an a inside li , you may use this instead of #menu > li:parent
window.location.href=target_url;
});
Would you please insert the html block of #menu ... are you using <a> ... or just getting innerhtml of li
ASKER
<ul id="menu">
<li><span></span><a href="about.php?id=1&type= 1blurb&tab le=menus"> about us</a>
thats the beginning of my menu
<li><span></span><a href="about.php?id=1&type=
thats the beginning of my menu
ASKER
maybe this is better
<ul id="menu">
<li><span></span><a href="#page_1">About Us</a> <!-- KITCHEN MASTER -->
<ul class="ul_1">
<li><a href="#page_more">Kitchen Master</a></li>
<li><a href="#page_more">Our Designers</a>
<ul class="ul_2">
<li class="first"><a href="#page_more">Glenn Ray</a></li>
<li><a href="#page_more">Phillip Weitlauf</a>
<li class="end"><a href="#page_more">Alison Wallace</a></li>
</ul>
</li>
<li><a href="#page_more">Why The Master?</a></li>
<li><a href="#page_more">Portfolio</a></li>
<li class="end"><a href="#page_more">Privacy/Terms</a></li>
</ul>
</li>
ASKER
but thats just an example that came with the template. My links are different. . .
but if about us is clicked:
<a href="#page_1">About Us</a>
I want it to go to the next li:
<li><a href="#page_more">Kitchen Master</a></li>
but if about us is clicked:
<a href="#page_1">About Us</a>
I want it to go to the next li:
<li><a href="#page_more">Kitchen Master</a></li>
Hmm try ;
Unless you decide the html structure and behavior of them in a sequential way, i cannot generalize this but i'm sure it can be done after that.
$('#menu:first > li:eq(0) > a' ).click(function () {
$(' > li:eq(1) > a',this:parents(‘ul:eq(0)’) ).click();
return false;
});
Unless you decide the html structure and behavior of them in a sequential way, i cannot generalize this but i'm sure it can be done after that.
ASKER
That didnt work. I think you were closer with the other one. I modified it but I dont think the syntax is right. What do you think of this though? (maybe you can see my train of thought)
$('#menu > li:parent').click(function () {
//var target_url=this.html();//if you want to get url from li text
var target_url=$('(this) > .ul_1 > li:parent > a').attr('href') ;
//if you want to get url from an a inside li , you may use this instead of #menu > li:parent
window.location.href=target_url;
});
what i see here is
$('#menu > li:parent') is same as $('#menu)
because you are first getting #menu then select its child li (and dont indicate which child) and then select it's parent (#menu itself)
maybe you can try with this way
$('#menu > li:parent') is same as $('#menu)
because you are first getting #menu then select its child li (and dont indicate which child) and then select it's parent (#menu itself)
maybe you can try with this way
var source_link_container=$('#menu:first > li:eq(0)');
$(source_link_container+' > a' ).click(function (source_link_container) {
var target_url=$(source_link_container+':parent > li:eq(1) > a' ).attr('href') ;
window.location.href=target_url;
return false;
});
btw look here : http://api.jquery.com/child-selector/
ASKER
That didnt work, but I just realized we are not even getting into the function so it may be for other reasons:
I tried to do an alert and nothing!
I tried to do an alert and nothing!
$('#menu > li:parent').click(function () {
//var target_url=this.html();//if you want to get url from li text
var target_url=$('#menu > li:parent > a').attr('href');
alert(target_url);
//if you want to get url from an a inside li , you may use this instead of #menu > li:parent
window.location.href=target_url;
});
ASKER
I cant even get this to alert out: why??
http://gowiththemaster.com/tleithoff/test.php
<script type="text/javascript">
$(document).ready(function() {
$('#menu > li:parent > a').click(function () {
alert('hello');
});
});
</script>
<ul id="menu">
<li><a href="#">Hello</a></li>
<li><a href="#">Hi</a></li>
</ul>
http://gowiththemaster.com/tleithoff/test.php
as i've told before
do not use parent .... it selects selected element's parent which is #menu here
You need to indicate which li should be selected.
$('#menu > li:parent') is same as $('#menu)
because you are first getting #menu then select its child
do not use parent .... it selects selected element's parent which is #menu here
You need to indicate which li should be selected.
$('#menu > li:eq(0) > a').click(function () {
alert('hello');
});
ASKER
ok, I changed it but its still not working. . .
http://gowiththemaster.com/tleithoff/test.php
its bumming me out
http://gowiththemaster.com/tleithoff/test.php
its bumming me out
Because you are using jquery without adding it to html
in the head block of your html add this line ;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
in the head block of your html add this line ;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
ASKER
not sure how I forgot that last night. But its still not working
sorry , my fault ... please use
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" /></script>
at the moment cdn above is not responding somehow.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" /></script>
at the moment cdn above is not responding somehow.
ASKER
finally it alerts!! thats a start
ASKER
ok now for this. Is there a way to whenever one of the parent links are clicked the first child link's url is used instead?
so for the first one, instead of going to msn.com it would go to google.com. and the second one would go to iupui.edu instead of myspace.com ??
so for the first one, instead of going to msn.com it would go to google.com. and the second one would go to iupui.edu instead of myspace.com ??
<ul id="menu">
<li><a href="msn.com"></li> <!-- parent link -->
<ul class="children">
<li><a href="google.com">Hello</a></li> <!-- first child link -->
<li><a href="yahoo.com">Hi</a></li>
</ul>
<li><a href="facebook.com"></li>
<li><a href="myspace.com"></li> <!-- parent link -->
<ul class="children">
<li><a href="iupui.edu">Hello</a></li> <!-- first child link -->
<li><a href="ku.edu">Hi</a></li>
</ul>
<li><a href="amazon.com"></li>
</ul>
this should work
but i think your html structure is wrong because
<ul>
<li>first item </li>
<li>second item </li>
</ul>
you need to place elements between li
i'm not sure other way is also allowed at the moment but syntax like below seems faulty ..
<ul>
<ul>
<li>first item </li>
</ul>
<li>first item </li>
<li>first item </li>
</ul>
i suggest you this instead
$('#menu > li > a').click(function () {
var target_url=$(':parent > ul > li:eq(0) > a',this).attr('href');
alert(target_url);
window.location.href=target_url;
});
but i think your html structure is wrong because
<ul>
<li>first item </li>
<li>second item </li>
</ul>
you need to place elements between li
i'm not sure other way is also allowed at the moment but syntax like below seems faulty ..
<ul>
<ul>
<li>first item </li>
</ul>
<li>first item </li>
<li>first item </li>
</ul>
i suggest you this instead
<ul id="menu">
<li><a href="msn.com"> <!-- parent link -->
<ul class="children">
<li><a href="google.com">Hello</a></li> <!-- first child link -->
<li><a href="yahoo.com">Hi</a></li>
</ul>
</li>
<li><a href="facebook.com"></li>
<li><a href="myspace.com"> <!-- parent link -->
<ul class="children">
<li><a href="iupui.edu">Hello</a></li> <!-- first child link -->
<li><a href="ku.edu">Hi</a></li>
</ul>
</li>
<li><a href="amazon.com"></li>
</ul>
ASKER
Well, this is the structure that came with the template and I dont want to screw anything up so I just left it with its default syntax:
I tried your code but it says its undefined in the alert:
http://gowiththemaster.com/tleithoff/test.php
<ul id="menu">
<li><span></span><a href="#page_1">About Us</a> <!-- KITCHEN MASTER -->
<ul class="ul_1">
<li><a href="#page_more">Kitchen Master</a></li>
<li><a href="#page_more">Our Designers</a>
<ul class="ul_2">
<li class="first"><a href="#page_more">Glenn Ray</a></li>
<li><a href="#page_more">Phillip Weitlauf</a>
<li class="end"><a href="#page_more">Alison Wallace</a></li>
</ul>
</li>
<li><a href="#page_more">Why The Master?</a></li>
<li><a href="#page_more">Portfolio</a></li>
<li class="end"><a href="#page_more">Privacy/Terms</a></li>
</ul>
</li>
I tried your code but it says its undefined in the alert:
http://gowiththemaster.com/tleithoff/test.php
try this ;
$('#menu > li > a').click(function () {
var next_ul_tag=$(':parent',this).next('ul');
var target_url=$(' > li:eq(0) > a',next_ul_tag).attr('href');
alert(target_url);
window.location.href=target_url;
});
ASKER
nope, it still says its undefined
this is ok -tested-
captures
<a href="#page_more">Glenn Ray</a>
when you click
<a href="#page_more">Our Designers</a>
and so on ... if some sub menus will not fit to this structure just check if defined or not ..
if(target_url!=undefined) window.location.href=targe t_url;
<script type="text/javascript">
$('li a').click(function () {
var next_ul_tag=$( $(this).parent());
var target_url=$('> ul > li:eq(0) > a',next_ul_tag).attr('href');
alert(target_url);
window.location.href=target_url;
return false;
});
</script>
captures
<a href="#page_more">Glenn Ray</a>
when you click
<a href="#page_more">Our Designers</a>
and so on ... if some sub menus will not fit to this structure just check if defined or not ..
if(target_url!=undefined) window.location.href=targe
ASKER
its not alerting anything, so then its not getting into the function??
http://gowiththemaster.com/tleithoff/test.php
http://gowiththemaster.com/tleithoff/test.php
ASKER
I think this might make it easier. I put classes on the parent links:
(but my jquery syntax is not right) But do you know how to make this work?
(but my jquery syntax is not right) But do you know how to make this work?
<script type="text/javascript">
$('.parent').click(function () {
var target_url=$( $(this) '> li:eq(0) > a',next_ul_tag).attr('href');
alert(target_url);
window.location.href=target_url;
return false;
});
</script>
<ul id="menu">
<li><a class="parent" href="msn.com">msn</li> <!-- parent link -->
<ul class="children">
<li><a href="google.com">google</a></li> <!-- first child link -->
<li><a href="yahoo.com">yahoo</a></li>
</ul>
<li><a class="parent" href="facebook.com">facebook</li>
<li><a class="parent" href="myspace.com">myspace</li> <!-- parent link -->
<ul class="children">
<li><a href="iupui.edu">iupui</a></li> <!-- first child link -->
<li><a href="ebay.edu">ebay</a></li>
</ul>
<li><a href="amazon.com">amazon</li>
</ul>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
what makes you write it with the parent_element with it??
It didnt work with it, so I just took it out bc I couldnt figure out what it did (but thats not shocking as I'm not expert of jquery) I did this and it worked!!
$('.parent').click(functio n () {
var parent_element=$(this).par ent();
var target_url=$(' .children > li:eq(0) > a').attr('href');
alert(target_url);
if(target_url!=undefined) window.location.href=targe t_url;
return false;
});
Also, where the javascript script goes on the page?
It didnt work with it, so I just took it out bc I couldnt figure out what it did (but thats not shocking as I'm not expert of jquery) I did this and it worked!!
$('.parent').click(functio
var parent_element=$(this).par
var target_url=$(' .children > li:eq(0) > a').attr('href');
alert(target_url);
if(target_url!=undefined) window.location.href=targe
return false;
});
Also, where the javascript script goes on the page?
ASKER
That last question should read:
Also, does it matter where the javascript script goes on the page? (like does it have to go below)
Also, does it matter where the javascript script goes on the page? (like does it have to go below)
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for sticking with me on this!!
so you may try
Open in new window