Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 22
  1. #1
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    I was literally introduced to web design and html four days ago - I have little idea what I'm doing. I've watched some youtube videos, and built a small website off a template. I've made a dropdown menu that runs off of javascript, but it isn't functional anymore. I don't know what happened. Can anybody help me?

    When I first implemented the drop down menu, it worked fine. It requires you to "allow blocked content" at the bottom of the screen when previewing, but that's all. After a while had passed and I was working on other things, previews started to act strangely. When I clicked "allow blocked content," the page would freeze. If I didn't, there would be no menu. A few times I waited, and after stuff had loaded in the background I guess, the dropdown menu worked as before. Eventually, it happened that background stuff never finished loading, and now, no matter how long I wait, it stays frozen. I figured it wasn't important, and ignored it, since it had worked before. Now that I've uploaded the actual site, the dropdown menu doesn't work there either!

    I got the drop down menu from this website: http://javascript-array.com/scripts/...rop_down_menu/
    Here is the code that I took and modified to fit my website. Sorry it's so long, I have a lot of menu items.

    HTML (in Master Sheet)
    <ul id="sddm">
    <li style="width: 80px">
    <a href="#"
    onmouseover="mopen('m1')"
    onmouseout="mclosetime()" style="width: 80px">Home</a>
    <div id="m1"
    onmouseover="mcancelclosetime()"
    onmouseout="mclosetime()">
    </div>
    </li>
    <li style="width: 180px">
    <a href="#"
    onmouseover="mopen('m2')"
    onmouseout="mclosetime()" style="width: 180px">About the Dances</a>
    <div id="m2"
    onmouseover="mcancelclosetime()"
    onmouseout="mclosetime()">
    <a href="#" style="width: 158px">About Ballroom and Latin</a>
    <a href="" style="width: 158px">About Cha Cha</a>
    <a href="" style="width: 158px">About Samba</a>
    <a href="" style="width: 158px">About Rumba</a>
    <a href="" style="width: 158px">About Paso Doble</a>
    <a href="" style="width: 158px">About Jive</a>
    <a href="" style="width: 158px">About Waltz</a>
    <a href="" style="width: 158px">About Tango</a>
    <a href="" style="width: 158px">About Foxtrot</a>
    <a href="" style="width: 158px">About Viennese Waltz</a>
    <a href="" style="width: 158px">About Quickstep</a>
    </div>
    </li>
    <li style="width: 180px">
    <a href=""
    onmouseover="mopen('m3')"
    onmouseout="mclosetime()" style="width: 180px">Learn the Dances</a>
    <div id="m3"
    onmouseover="mcancelclosetime()"
    onmouseout="mclosetime()">
    <a href="" style="width: 158px">Vocabulary</a>
    <a href="" style="width: 158px">Learn Cha Cha</a>
    <a href="" style="width: 158px">Learn Samba</a>
    <a href="" style="width: 158px">Learn Rumba</a>
    <a href="" style="width: 158px">Learn Paso Doble</a>
    <a href="" style="width: 158px">Learn Jive</a>
    <a href="" style="width: 158px">Learn Waltz</a>
    <a href="" style="width: 158px">Learn Tango</a>
    <a href="" style="width: 158px">Learn Foxtrot</a>
    <a href="" style="width: 158px">Learn Viennese Waltz</a>
    <a href="" style="width: 158px">Learn Quickstep</a>
    </div>
    </li>
    <li style="width: 180px">
    <a href=""
    onmouseover="mopen('m4')"
    onmouseout="mclosetime()" style="width: 180px">Getting Dressed</a>
    <div id="m4"
    onmouseover="mcancelclosetime()"
    onmouseout="mclosetime()">
    <a href="" style="width: 158px">Clothing</a>
    <a href="" style="width: 158px">Shoes</a>
    <a href="" style="width: 158px">Jewelry</a>
    <a href="" style="width: 158px">Hair and Make up</a>
    </div>
    </li>
    <li style="width: 180px">
    <a href=""
    onmouseover="mopen('m5')"
    onmouseout="mclosetime()" style="width: 180px">Where to Dance</a>
    <div id="m5"
    onmouseover="mcancelclosetime()"
    onmouseout="mclosetime()">
    <a href="" style="width: 158px">Schools and Studios</a>
    <a href="" style="width: 158px">Teams</a>
    <a href="" style="width: 158px">Competitions</a>
    <a href="" style="width: 158px">Social Dancing</a>
    </div>
    </li>
    <li style="width: 80px"><a href="" style="width: 80px">Contact</a></li>
    </ul>
    <div style="clear:both"></div>

    CSS Code (in Styles Sheet)
    #sddm
    { margin: 0;
    padding: 0;
    z-index: 30}
    #sddm li
    {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: 13px "Trebuchet MS";
    font-weight: bold;
    }
    #sddm li a
    {
    display: block;
    margin: 0 1px 0 0;
    padding: 4px 10px;
    width: 60px;
    background: #999999;
    color: #FFF;
    text-align: left;
    text-decoration: none;
    background-image: url('../images/Gradient Blue.jpg');
    background-repeat: no-repeat;
    }
    #sddm li a:hover
    {
    background-position: bottom;
    background: #49A3FF;
    background-image: url('../images/Gradient Gray.jpg');
    background-repeat: no-repeat;
    }
    #sddm div
    {
    background-position: top;
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #C0C0C0;
    background-image: none;
    }
    #sddm div a
    {
    position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #FFFFFF;
    font: 11px "Trebuchet MS";
    background-image: url('../images/Gradient Blue.jpg');
    }
    #sddm div a:hover
    {
    background: #49A3FF;
    color: #FFF;
    background-image: url('../images/Gradient Gray.jpg');
    }

    JavaScript (in document called Menu.js)
    var timeout = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
    // open hidden layer
    function mopen(id)
    {
    // cancel close timer
    mcancelclosetime();
    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
    }
    // close showed layer
    function mclose()
    {
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
    // go close timer
    function mclosetime()
    {
    closetimer = window.setTimeout(mclose, timeout);
    }
    // cancel close timer
    function mcancelclosetime()
    {
    if(closetimer)
    {
    window.clearTimeout(closetimer);
    closetimer = null;
    }
    }

    I know this is long, but I have no idea where to begin
    Thanks for your help.
    Last edited by teapot; Aug 09th, 2016 at 09:08 PM.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Upload your page somewhere and give us a link to it. It's a lot easier to understand if people can see what's up.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    Quote Originally Posted by TheGAME1264, post: 251825, member: 428
    Upload your page somewhere and give us a link to it. It's a lot easier to understand if people can see what's up.
    I have. I appreciate the help, TheGame1264.
    Last edited by teapot; Aug 09th, 2016 at 09:08 PM.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Ahhh okay. There was so much stuff that I missed it.

    Your menu.js file is missing. You'll need to upload it where your index file is (same folder) and it hopefully will work. But nothing will function without it.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    Oh, I thought I had uploaded it. Thanks. I will give it a try

  7. #6
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    I checked, and the file is in there. I have tried moving it all around, and it is in there, and doesn't work. And that wouldn't explain why it doesn't work in preview. I think something must be wrong... Any ideas?

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    menu.js is failing to load.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    You shouldn't have to move it around at all. You should be able to upload it to the same folder as your index.html file (make sure you do that or it won't work no matter where it is). Once it's there, leave it there and post back.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    Quote Originally Posted by TheGAME1264, post: 251853, member: 428
    You shouldn't have to move it around at all. You should be able to upload it to the same folder as your index.html file (make sure you do that or it won't work no matter where it is). Once it's there, leave it there and post back.
    Okay, it is there. Thanks a lot for helping me with this problem. I appreciate it.

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Weird...it's still giving the same 404 error.

    This is highly unlikely, but I've seen it once before years ago. If you're absolutely sure that you've got menu.js in the exact same folder on your web server as index.html, then contact your host and see if there's an issue involving the serving of .js files. I saw this years and years ago, but not for a long time.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:09 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com