PDA

View Full Version : Links not working



jickpictures
Jul 29th, 2010, 10:47 AM
Hey,

A lot of the links are not working on my website where I have a simple jquery drop down menu which I replaced with css image buttons. For someone reason, my browser detects the links but will not go to that page when clicked, like something is blocking it. Can anyone tell me what's wrong with my code? Links are only not working in the drop down menus that are labeled "Extras" and "Watch More". My website is below:

http://www.jickpictures.com/preview

-Thank you for the help

Rowsdower!
Jul 29th, 2010, 03:09 PM
You have four errors that I notice right off the bat in your CSS, so while we're in here playing around let's fix those up:

http://www.jickpictures.com/preview/site/css/frontpage.css
Line 155:

position: realative;
...should be...
position: relative;


Line 165:

position: realative;
...should be...
position: relative;


Line 283:

*html #nav2 ul {
...should be...
* html #nav2 ul {


Line 517:

*html #nav2 ul {
...should be...
* html #nav2 ul {


Now as for the menu functionality, I think your problem is that it is trying to slide down a submenu when clicked on. What happens if you change this:

<script type="text/javascript">
$(document).ready(function () {

$('#nav li').toggle(
function () {
//show its submenu
$('ul', this).slideDown(200);

},
function () {
//hide its submenu
$('ul', this).slideUp(200);
}
);

});
</script>
to this:

<script type="text/javascript">
$(document).ready(function () {

$('#nav').toggle(
function () {
//show its submenu
$('ul', this).slideDown(200);

},
function () {
//hide its submenu
$('ul', this).slideUp(200);
}
);

});
</script>

bestdeveloper
Jul 29th, 2010, 04:44 PM
Rowsdower seems to be a very smart guy
I think his help is very useful


http://www.********************/

SB65
Jul 29th, 2010, 04:59 PM
I've been puzzling at this one too...

I think the issue is because a click on the (dropped down) link is re-triggering the toggle 'slideDown' and for reasons I don't quite understand, this is preventing the default link click behaviour.

I managed to get it working by using:


$(document).ready(function () {

$('#nav > li').toggle(
function () {
//show its submenu
$('ul', this).slideDown(200);

},
function () {
//hide its submenu
$('ul', this).slideUp(200);
}
);

$("#nav li li").click(function(event){
event.stopPropagation();
});

});

- to target only the direct child <li> via $('#nav > li') and to prevent the event bubbling up using the stopPropagation method.

Slightly outside my comfort zone here, maybe someone else can explain the cause in a little more detail. The code seems to work for me anyway...

jickpictures
Jul 29th, 2010, 09:27 PM
Wow thank you SB65, that worked. Yeah I don't quite understand what you did but I really appreciate it. You seem to know your stuff. A guy on dynamic forums told me to try, "javascript: void(0);" but I have no idea what he means by that and where to put it.

jickpictures
Jul 29th, 2010, 09:28 PM
And thank you for correcting those errors Rowsdower! haha my fault. However, that fix for the menu did not work. It just closes the drop down menu when i click on an item.