SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript/jquery--menu doesn't show up

    I'm trying to get the menu to show up and it won't.

    Here is the HTML code:<
    head>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Alaska Fur Gallery</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <script language="JavaScript" src="js.js"></script>
    <link rel="stylesheet" type="text/css" href="activemenu.css" />
    <script src="jquery-activemenu.js" type="text/javascript"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />

    <script type="text/javascript">
    $(document).ready(function() {
    $("a#fancybox").fancybox({
    'titleShow' : false,
    type:'image'
    });

    //show the footer
    $("#footer").css("visibility","visible");

    //initialize activeMenu
    initMenu();
    });

    </script>




    </head>
    <body>


    <div id="container">

    <div id="header">
    <a href="index.html"><div id="logolink">Alaska Fur Gallery</div></a>
    <div id="answer">We're Here to Answer Your Questions. Call Us Today at 334-277-7610</div>
    <div id="underlinemenu" class="ulmhead">
    <ul>
    <li><a href="index.html" style="border:0;">Home</a></li>
    <li><a href="content2e96.html?id=431503">About</a></li>
    <li><a href="content9bf1.html?id=431504">Services</a></li>
    <li><a href="find_location.html">Locations</a></li>
    <li><a href="ct.html">Contact Us</a></li>

    </ul>
    </div>
    <div class="clear"></div>
    <div id="topmenu">
    <ul id="activeMenu">
    <li style="top: 0; left:0px"><a href="shopa146.html?action=cat&amp;catID=20529" id="furs">Furs</a></li>
    <li style="top: 0; left:66px"><a href="shop52df.html?action=cat&amp;catID=20541" id="leather">Leather & Fur</a></li>
    <li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&amp;catID=20575" id="cashmere">Cashmere & Fur</a></li>
    <li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&amp;catID=21239" id="outerwear">Outerwear</a></li>
    <li style="top: 0; left:493px"><a href="shop0376.html?action=cat&amp;catID=20544" id="plus">Plus Sizes</a></li>
    <li style="top: 0; left:604px"><a href="shop2060.html?action=cat&amp;catID=20580" id="accessories">Accessories</a></li>
    </ul>
    </div><!-- topmenu -->
    </div><!-- header -->

    <!--submenu divs-->
    <div id="furs_submenu">
    <ul class="dropdown" style="width:130px; float:left; margin:0 30px 0 0;">
    <span>Women's Furs</span>
    <li><a href="shopde5e.html?action=cat&amp;catID=20572">Mink</a></li>
    <li><a href="shop2705.html?action=cat&amp;catID=20574">Sable</a></li>
    <li><a href="shop5c0d.html?action=cat&amp;catID=20570">Chinchilla</a></li>
    <li><a href="shopdfa7.html?action=cat&amp;catID=20568">Beaver</a></li>
    <li><a href="shop04fa.html?action=cat&amp;catID=20571">Lynx</a></li>
    <li><a href="shop65dc.html?action=cat&amp;catID=20569">Bobcat</a></li>
    <li><a href="shopc9fc.html?action=cat&amp;catID=20622">Coyote</a></li>
    <li><a href="shop65f8.html?action=cat&amp;catID=20539">Fox</a></li>
    <li><a href="shop3276.html?action=cat&amp;catID=20573">Rabbit</a></li>
    </ul>
    <ul class="dropdown" style="width:140px; float:left;">
    <span>Men's Furs</span>
    <li><a href="shop2ef6.html?action=cat&amp;catID=20531">Mink</a></li>
    <li><a href="errorfe10.html?action=cat&amp;catID=20532">Sable</a></li>
    <li><a href="errorfe10.html?action=cat&amp;catID=20533">Chinchilla</a></li>
    <li><a href="errorfe10.html?action=cat&amp;catID=20534">Beaver</a></li>
    <li><a href="errorfe10.html?action=cat&amp;catID=20535">Lynx</a></li>
    <li><a href="errorfe10.html?action=cat&amp;catID=20536">Bobcat</a></li>
    <li><a href="shopfc5b.html?action=cat&amp;catID=20618">Coyote</a></li>
    <li><a href="shop88e4.html?action=cat&amp;catID=20537">Fox</a></li>
    <li><a href="errorfe10.html?action=cat&amp;catID=20540">Rabbit</a></li>
    </ul>
    </div>

    <div id="leather_submenu">
    <ul class="dropdown">
    <li><a href="shop973d.html?action=cat&amp;catID=20542">Women's Leather & Fur</a></li>
    <li><a href="shop4cc6.html?action=cat&amp;catID=20543" style="border:0;">Men's Leather & Fur</a></li>
    </ul>
    </div>

    <div id="cashmere_submenu">
    <ul class="dropdown">
    <li><a href="shop3f01.html?action=cat&amp;catID=20576">Coats</a></li>
    <li><a href="shopd4d8.html?action=cat&amp;catID=20577">Strollers</a></li>
    <li><a href="shop7899.html?action=cat&amp;catID=20578">Jackets</a></li>
    <li><a href="shopcba4.html?action=cat&amp;catID=20579" style="border:0;">Capes</a></li>
    </ul>
    </div>

    <div id="plus_submenu">
    <ul class="dropdown" style="width:130px; float:left; margin:0 30px 16px 0;">
    <span>Women's Furs</span>
    <li><a href="shop2530.html?action=cat&amp;catID=20564">Mink</a></li>
    <li><a href="shop807e.html?action=cat&amp;catID=20566">Sable</a></li>
    <li><a href="shopbc8f.html?action=cat&amp;catID=20557">Chinchilla</a></li>
    <li><a href="shopcb16.html?action=cat&amp;catID=20553">Beaver</a></li>
    <li><a href="shop3cb8.html?action=cat&amp;catID=20561">Lynx</a></li>
    <li><a href="shopb6e3.html?action=cat&amp;catID=20555">Bobcat</a></li>
    <li><a href="shop1e6c.html?action=cat&amp;catID=20621">Coyote</a></li>
    <li><a href="shopc08b.html?action=cat&amp;catID=20559">Fox</a></li>
    <li><a href="shop0495.html?action=cat&amp;catID=20562">Rabbit</a></li>
    </ul>
    <ul class="dropdown" style="width:140px; float:left;">
    <span>Men's Furs</span>
    <li><a href="shop9b23.html?action=cat&amp;catID=20565">Mink</a></li>
    <li><a href="shop10dc.html?action=cat&amp;catID=20567">Sable</a></li>
    <li><a href="shop8154.html?action=cat&amp;catID=20556">Chinchilla</a></li>
    <li><a href="shop0b63.html?action=cat&amp;catID=20551">Beaver</a></li>
    <li><a href="shopa40f.html?action=cat&amp;catID=20560">Lynx</a></li>
    <li><a href="shopd843.html?action=cat&amp;catID=20554">Bobcat</a></li>
    <li><a href="shopa2c0.html?action=cat&amp;catID=20620">Coyote</a></li>
    <li><a href="shopb0b2.html?action=cat&amp;catID=20558">Fox</a></li>
    <li><a href="shopd3b0.html?action=cat&amp;catID=20563">Rabbit</a></li>
    </ul>
    <div class="clear"></div>
    <ul class="dropdown" style="width:130px; float:left; margin:0 30px 10px 0;">
    <span>Leather & Fur</span>
    <li><a href="shop91d6.html?action=cat&amp;catID=20549">Women's Leather & Fur</a></li>
    <li><a href="shop8605.html?action=cat&amp;catID=20548">Men's Leather & Fur</a></li>
    </ul>
    <ul class="dropdown" style="width:140px; float:left; margin:-6px 0 0 0;">
    <li><a href="shope478.html?action=cat&amp;catID=20550" style="border:0;"><strong>Cashmere & Fur</strong></a></li>
    </ul>
    </div>

    <div id="accessories_submenu">
    <ul class="dropdown">
    <li><a href="shop2f26.html?action=cat&amp;catID=20581">Fur Hats</a></li>
    <li><a href="shop9989.html?action=cat&amp;catID=20582">Fur Headbands</a></li>
    <li><a href="shop935f.html?action=cat&amp;catID=20583">Fur Earmuffs</a></li>
    <li><a href="shopd2bf.html?action=cat&amp;catID=20584">Gloves with Fur</a></li>
    <li><a href="shop2c08.html?action=cat&amp;catID=20585">Fur Boot Toppers</a></li>
    <li><a href="shop9f4f.html?action=cat&amp;catID=20586">Fur Scarves & Flings</a></li>
    <li><a href="shop3d06.html?action=cat&amp;catID=20587">Fur Blankets</a></li>
    <li><a href="shop4bf4.html?action=cat&amp;catID=20588">Fur Handbags</a></li>
    <li><a href="shop611a.html?action=cat&amp;catID=20589" style="border:0;">Mink Teddy Bears</a></li>
    </ul>
    </div>

    Here is the javascript:
    /*
    jQuery ActiveMenu v1.0
    Author: Miguel Sanchez
    12/2009
    */


    var timeouts = []; //for hiding the menu purposes


    function initMenu(){
    var offclass;
    var menuAnchor;
    $("#activeMenu").find("li").each(function() {

    //get a reference to the anchor inside the li
    menuAnchor = $(this).children(":first");

    //get the name of the offclass
    offclass = $(menuAnchor).attr("id")+"_off";

    //assign off class to item
    $(menuAnchor).addClass(offclass);

    //assign hover event handler to main menu
    $(menuAnchor).hover(
    function (event) {
    submenu_show(event.target);
    },
    function (event) {
    submenu_hide(event.target);
    }
    );

    });

    //assign hover events to submenu
    $("div [id$=_submenu]").hover(
    function (event) {
    submenu_over(event.target);
    },
    function (event) {
    submenu_out(event.target);
    }
    );


    }


    function submenu_show(caller){
    //hide all the submenus
    $("div [id$=_submenu]").hide();

    //get the id of the main menu item
    var mainMenuItemId = $(caller).attr("id")

    //get the "on" class name
    var onclass = mainMenuItemId+"_on";
    //get the "off" class name
    var offclass = mainMenuItemId+"_off";

    //remove off class to item
    $(caller).removeClass(offclass);

    //assign on class to item
    $(caller).addClass(onclass);

    // get the id of the submenu
    var targetSubMenuId = mainMenuItemId+"_submenu";
    //show the submenu
    $("#"+targetSubMenuId).slideDown("fast");



    }

    function submenu_hide(caller){

    //get the id of the main menu item
    var mainMenuItemId = $(caller).attr("id");

    //get the "on" class name
    var onclass = mainMenuItemId+"_on";
    //get the "off" class name
    var offclass = mainMenuItemId+"_off";

    //remove on class to item
    $(caller).removeClass(onclass);

    //assign off class to item
    $(caller).addClass(offclass);

    timeouts[mainMenuItemId] = setTimeout(function() {
    $("#"+mainMenuItemId+"_submenu").slideUp("fast");
    }, 200);

    }

    function submenu_over(caller){

    //get a reference to the containing div
    var subMenuDiv = $(caller).closest("div");
    //show the div
    $(subMenuDiv).show();

    //get the id of the main menu
    var mainMenuItemId = $(subMenuDiv).attr("id");
    mainMenuItemId = mainMenuItemId.replace("_submenu","");

    clearTimeout(timeouts[mainMenuItemId]);


    //remove the "off" class
    $("#"+mainMenuItemId).removeClass(mainMenuItemId+"_off");
    //add the "on" class
    $("#"+mainMenuItemId).addClass(mainMenuItemId+"_on");
    }


    function submenu_out(caller){
    //get a reference to the containing div
    var subMenuDiv = $(caller).closest("div");
    $(subMenuDiv).hide();
    //get the id of the main menu
    var menuAnchorId = $(subMenuDiv).attr("id");
    menuAnchorId = menuAnchorId.replace("_submenu","");

    //remove the "on" class
    $("#"+menuAnchorId).removeClass(menuAnchorId+"_on");

    //add the "off class
    $("#"+menuAnchorId).addClass(menuAnchorId+"_off");
    }


    Here is the CSS styling:/* graphical menu codes */

    #topmenu ul {
    list-style: none;
    width: 738px;
    height:52px;
    padding:0;
    margin: 0px;
    position: absolute;
    top:94px;
    right:0;
    overflow: hidden;

    }

    #topmenu li {
    display: inline;
    position: absolute;
    }


    #topmenu li a{
    float: left;
    font-size:11px;
    line-height: 14px;
    white-space: nowrap;
    text-transform: uppercase;
    text-align:center;
    padding: 0 0 0 0;
    text-indent:777px;
    overflow:hidden;
    height:52px;
    }

    #topmenu li a:hover {
    color: #bceffa;
    }
    a.on {
    color: #bceffa;
    }

    #topmenu a {
    color: #ffffff;
    text-decoration: none;

    }
    #topmenu a:hover {
    color: #bceffa;
    text-decoration: none;
    }




    .furs_off {
    background: url("graphics/topmenu2.gif") 0 0 no-repeat;
    width:66px;
    }

    .furs_on {
    background: url("graphics/topmenu2.gif") 0 -52px no-repeat;
    }

    .leather_off {
    background: url("graphics/topmenu2.gif") -66px 0 no-repeat;
    width:144px;
    }

    .leather_on{
    background: url("graphics/topmenu2.gif") -66px -52px no-repeat;
    }

    .cashmere_off {
    background: url("graphics/topmenu2.gif") -210px 0 no-repeat;
    width:165px;
    }

    .cashmere_on{
    background: url("graphics/topmenu2.gif") -210px -52px no-repeat;
    }

    .outerwear_off {
    background: url("graphics/topmenu2.gif") -374px 0 no-repeat;
    width:119px;
    }

    .outerwear_on{
    background: url("graphics/topmenu2.gif") -374px -52px no-repeat;
    }

    .plus_off {
    background: url("graphics/topmenu2.gif") -493px 0 no-repeat;
    width:111px;
    }

    .plus_on{
    background: url("graphics/topmenu2.gif") -493px -52px no-repeat;
    }

    .accessories_off {
    background: url("graphics/topmenu2.gif") -604px 0 no-repeat;
    width:133px;
    }

    .accessories_on{
    background: url("graphics/topmenu2.gif") -604px -52px no-repeat;
    }





    ul.dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    z-index:10000;
    position:relative;
    }

    ul.dropdown li span {
    display: block;
    _display:inline-block;
    text-decoration: none;
    }
    ul.dropdown li a {
    display: block;
    position: relative;
    _display:inline-block; /* so IE doesn't add space between elements */
    _width: 83%; /* makes block fill width in IE */
    padding: 6px 10px 6px 10px;
    font-size: 13px;
    color: #ffffff;
    text-decoration: none;
    border-bottom:1px solid #b78833;

    }


    ul.dropdown li a:hover{
    color: #ffffff;
    background: #e3a73a;
    text-decoration: none;
    }

    .dropdown span{
    font-weight:bold;
    color:#64450f;
    margin:0 0 0 10px;
    }


    #furs_submenu {
    width:300px;
    padding: 5px 0;
    background: #c8912f;
    position: absolute;
    top: 146px;
    left: 260px;
    display: none;
    z-index:1000;
    }

    #leather_submenu {
    width:166px;
    padding: 5px 0;
    background: #c8912f;
    position: absolute;
    top: 146px;
    left: 325px;
    display: none;
    z-index:1000;
    }

    #cashmere_submenu {
    width:192px;
    padding: 5px 0;
    background: #c8912f;
    position: absolute;
    top: 146px;
    left: 470px;
    display: none;
    z-index:1000;
    }

    #plus_submenu {
    width:300px;
    padding: 5px 0;
    background: #c8912f;
    position: absolute;
    top: 146px;
    left: 698px;
    display: none;
    z-index:1000;
    }

    #accessories_submenu {
    width:158px;
    padding: 5px 0;
    background: #c8912f;
    position: absolute;
    top: 146px;
    left: 840px;
    display: none;
    z-index:1000;
    }

  2. #2
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am probably missing something drastically obvious, but where is jQuery itself included in your code?

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think it's on line 9 of html. i'm new to this


    <script src="jquery-activemenu.js" type="text/javascript"></script>

  4. #4
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mlhamp View Post
    <script src="jquery-activemenu.js" type="text/javascript"></script>
    I don't think that's jQuery itself - I think it's a jQuery plugin. Try adding this to your head element:

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    That will link you to jQuery 1.4 on Google's CDN.

  5. #5
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank yo so much. I actually deleted that line because I though it was for google analytics

  6. #6
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad I could help. I have been through the jQuery-not-properly-included dance myself


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •