Grow your CSS skills. Land your dream job.

How come return false prevent redirection of link ?Urgent

  • # August 27, 2009 at 8:43 am

    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 replies

    Here is my jquery code
    /////////////////////////////////////////////////////////////////////////////////////////////////////
    // JavaScript Document

    Code:
    $(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

    Code:
    @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

    You 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

    Hello 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

    Hello 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 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.href)>-1)
    {
    $id = $arrAnchor
    .id;

    break;

    }
    }

    fireEventSport(document.getElementById($id),’click’);

    });

    von
    # August 28, 2009 at 8:37 pm

    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.

    # August 29, 2009 at 3:02 am

    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….

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".