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 replies
Here is my jquery code ///////////////////////////////////////////////////////////////////////////////////////////////////// // JavaScript Document
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
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 me
function 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;
Do 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.
I'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....
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 replies
Here is my jquery code
/////////////////////////////////////////////////////////////////////////////////////////////////////
// JavaScript Document
$(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 css
/////////////////////////////////////////////////////////////////////////////////////////////
my html code
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
ect....
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
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 me
function 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[i].href)>-1)
{
$id = $arrAnchor[i].id;
break;
}
}
fireEventSport(document.getElementById($id),'click');
});
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....