Home › Forums › JavaScript › How come return false prevent redirection of link ?Urgent
- This topic is empty.
-
AuthorPosts
-
August 27, 2009 at 8:43 am #25896SnoopyMember
Hello i have an urgent request for help
I have a dropddown menu where the main menu items when on click should display a subnav tht has other sublinks.
When i clicked on main menu item it is supossed to go on a link , the problem is tht when i clicked on one of main menu item , it won’t redirect the required link but the dropdown menu is tht subnav is appearing. If i remove the "return false" the link work but my drop down menu does not appears :( .Please can someone help plz i have been this problem for three days . Thank for kind repliesHere is my jquery code
/////////////////////////////////////////////////////////////////////////////////////////////////////
// JavaScript DocumentCode:$(document).ready(function() {$(“#defaultSubNav”).show();
$(“a#MainNav_0”).click(function(){
$(“#defaultSubNav”).show();
$(“#SubmenuNav_1,#SubmenuNav_2,#SubmenuNav_3”).hide();
return false;});
$(“a#MainNav_1”).click(function(){
$(“ul#SubmenuNav_1 li:first”).css(‘margin-left’,’95px’);
$(“#SubmenuNav_2,#defaultSubNav,#SubmenuNav_3”).hide();
$(“ul#SubmenuNav_1”).show();
return false;
});$(“a#MainNav_2”).click(function(){
$(“ul#SubmenuNav_2 li:first”).css(‘margin-left’,’95px’);
$(“#SubmenuNav_1,#defaultSubNav,#SubmenuNav_3”).hide();
$(“ul#SubmenuNav_2”).show();return false;
});
$(“a#MainNav_3”).click(function(){
$(“ul#SubmenuNav_3 li:first”).css(‘margin-left’,’95px’);
$(“#SubmenuNav_2,#defaultSubNav,#SubmenuNav_1”).hide();
$(“ul#SubmenuNav_3”).show();return false;
});});
//////////////////////////////////////////////////////////////////////////////////////////////
my cssCode:@charset “utf-8”;
/* CSS Document */
*{
margin:0px;
padding:0px;
list-style-type:none;
}div.menu_wrapper {
position:relative;
padding:0px;
list-style-type:none;
position:relative;
margin:0px 0px 100px 0px;
}div#mainmenu{
height:32px;
position:relative;
background: url(/images/Newmenu/MainNav_bg.jpg) repeat-x;}
a#MainNav_0 img{
border:none;
}a#MainNav_0,a#MainNav_1,a#MainNav_2,a#MainNav_3,a#MainNav_4{
text-decoration:none;
font-family:Arial;
font-weight: bold;
font-size: 14px;
color:#FFFFFF;
line-height : 34px;
padding:0 18px 0px 18px ;
border:none;
float:left;}
a#MainNav_0:link,a#MainNav_1:link,a#MainNav_2:link,a#MainNav_3:link{
text-decoration:none;
font-family:Arial;
font-weight: bold;
font-size: 14px;
color:#FFFFFF;
line-height : 34px;
padding:0 18px 0px 18px ;
border:none;
/*float:left;*/
}
a#MainNav_0:visited,a#MainNav_1:visited,a#MainNav_2:visited,a#MainNav_3:hover{
text-decoration:none;
background: repeat-x;
font-family:Arial;
font-weight: bold;
font-size: 14px;
color:#ffffff;
padding:0 18px 0px 18px ;
border:none;
/*float:left;*/
}
a#MainNav_0:hover,a#MainNav_1:hover,a#MainNav_2:hover,a#MainNav_3:hover{
background: #cc6e0a repeat-x;
text-decoration:none;
font-family:Arial;
font-weight: bold;
font-size: 14px;
color:#ffffff;
padding:0 18px 0px 18px ;
border:none;
/*float:left;*/
}a#MainNav_0:active,a#MainNav_1:active,a#MainNav_2:active,a#MainNav_3:active{
background: #cc6e0a repeat-x;
text-decoration:none;
font-family:Arial;
font-weight: bold;
font-size: 14px;
color:#ffffff;
padding:0 18px 0px 18px ;
border:none;
/*float:left;*/
}div.nav_seperator{
background : url(/images/Newmenu/MainNav_Separator.jpg) no-repeat 0 0;
width:2px;
height:32px;
float:left;/*margin:0px 18px 0px 18px;*/
}
ul#SubmenuNav_1
{
background :url(/images/Newmenu/Subnav_bg.jpg) repeat-y #e5e5e6 ;
border-bottom:1px solid #d5d5d5;
margin:0px;
padding:10px 0px 0px 0px;
position:absolute;
top:32px;
left:0px;
display:none;}
ul#SubmenuNav_2
{
background :url(/images/Newmenu/Subnav_bg.jpg) repeat-y #e5e5e6 ;
border-bottom:1px solid #d5d5d5;
margin:0px;
padding:10px 0px 0px 0px;
position:absolute;
top:32px;
left:0px;display:none;
}
ul#SubmenuNav_3
{
background :url(/images/Newmenu/Subnav_bg.jpg) repeat-y #e5e5e6 ;
border-bottom:1px solid #d5d5d5;
margin:0px;
padding:10px 0px 0px 0px;
position:absolute;
top:32px;
left:0px;
display:none;}
div#defaultSubNav
{
background :url(/images/Newmenu/Subnav_bg.jpg) repeat-y #e5e5e6 ;
border-bottom:1px solid #d5d5d5;
margin:0px;
padding:10px 0px 0px 0px;
position:absolute;
top:32px;
left:0px;
height:86px;
width:100%;}
ul.SubItems{ width:100%;}
ul.SubItems li
{
float:left;
width:70px;
margin-right:18px;
font-size: 11px;
font-weight:bold;
font-family:arial;
text-align : center;
border:none;
padding-bottom:10px;}
ul.SubItems li a
{
text-decoration : none;
color:#747474;
}/*ul.SubItems li a:hover
{ text-decoration : none;
color:#FD8900;
}*/ul.SubItems li a img
{ border:none;}/*end of menu*/
/////////////////////////////////////////////////////////////////////////////////////////////
my html code
August 28, 2009 at 3:42 am #62931Mr KiTT3NMemberYou cant have a link do both…. Either an Anchor link "<a href=…" will go to a location (ie index.html) or it will perform a javascript action…
If you want to show sub nav when the link is click you can pass information threw the hash ie (indext.html#show) then do
Code:if(location.hash == “show”)
{
subNav(‘show);
}ect….
August 28, 2009 at 9:24 am #62935SnoopyMemberHello Mr KiTT3N and everyone
ya u r right. the link can’t do both at the same time.
so i have placed the following code below the closed body in my template
<script type="text/javascript">
function fireEventDrpdwnMenu(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent(‘on’+event,evt);}
else{
// dispatch for firefox + others + Not supported in IE, which uses fireEvent() instead.
var evt = document.createEvent("HTMLEvents");evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
$(function(event)
{
//capture url
$url = window.location.href;
$id = $(‘a[href^=’+$url+’]’).attr(‘id’);
// alert($id);
// trigger my click for drop down to be displayed
fireEventDrpdwnMenu(document.getElementById($id),’click’);});
</script>It is working on firefox but with but not on IE 6,IE 7 ,opera and google chrome. On ie 6,ie 7 , opera and google chrome the page keep on reloading.
Please can someone help cause this is an urgent request.Thank you for kind replies
August 28, 2009 at 1:26 pm #62947SnoopyMemberHello everyone
Refering to last post where is mention tht it was not working on google chrom , opera ,safari, ie 6 , ie 7 .
I found another way where is working on ie7, ie6 , firefox but unfortunately :( it is NOT WORKING on google chrome, opera, safari . In google chrome, opera, safari the page keeps on reloading , can someone help , desperately need to fix it . Than k your kind help :)
Can u someone help mefunction fireEventSport(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return !element.fireEvent(‘on’+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
$(function(event)
{
var $url = window.location.href;
var $arrAnchor = document.getElementsByTagName(‘a’);
var $id;for(i=0,count=$arrAnchor.length;i<count;i++)
{if($url.indexOf($arrAnchor.href)>-1)
{
$id = $arrAnchor.id;break;
}
}fireEventSport(document.getElementById($id),’click’);
});
August 28, 2009 at 8:37 pm #62984vonMemberDo you have any reason not to do a hover over to get the sub-menu to appear? If not, I would suggest that. Then you could still make the click event on the original menu item go where intended without any fancy script.
August 29, 2009 at 3:02 am #62968Mr KiTT3NMemberI’d recommend you look at a framework like jquery or mootools….
The reason you are having so many problems is cause the dom is a mess… rather than writing code for each broswer you can write it once and the framework will take care of the browser differences….
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.