Advanced Search

Results 1 to 6 of 6

Thread: DHTML newbie

  1. #1
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question DHTML newbie

    I'm hoping someone will be patient enough to help me. I'm working in FrontPage and was thinking how best to design my site. In research I came across navbars. I see there are many options and I think the nested side bars would work best. However, I have no idea where to begin. I see the code is available but not really sure what to do with it. I don't mind reading so feel free to point me to a helpful tutorial website. I'm on the "code" tab of Frontpage and stuck now. Please help.
    http://www.dynamicdrive.com/style/cs...side_bar_menu/

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi i don't know frontpage, but i have attached a zip folder with the nav bar example code put into an html page. You can download it, unzip it and open it in your browser to see how it looks. After that open it in front page and take a good look at the source code. Maybe you will be able to customize it to your needs then. If not... ask again and explain what changes you want.

  3. #3
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much! I've been able to play around and gain an understanding on how to customize it. Another question (of course). I'm struggling with properly placing it into the code I already have. I'm doing something wrong b/c it either appears off in placement or completely freezes!

    Where should I put the code from the navbar in my other page created? I have provided code from my page in the attachment along with customized navbar code below.

    Navbar Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    .sidebarmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 12px Calibri;
    width: 120px; /* Main Menu Item widths */
    border-bottom: 1px solid #FFFFFF;
    }
    .sidebarmenu ul li{
    position: relative;
    }
    /* Top level menu links style */
    .sidebarmenu ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: black;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    }
    .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
    background-color: #FFFFFF; /*background of tabs (default state)*/
    }
    .sidebarmenu ul li a:visited{
    color: white;
    }
    .sidebarmenu ul li a:hover{
    background-color: silver;
    }
    /*Sub level menu items */
    .sidebarmenu ul li ul{
    position: absolute;
    width: 170px; /*Sub Menu Items width */
    top: 0;
    visibility: hidden;
    }
    .sidebarmenu a.subfolderstyle{
    background: url('../Local%20Settings/Temp/Temporary%20Directory%202%20for%20navbar.zip/navbar/right.gif') no-repeat 97% 50%;
    }
    /* Holly Hack for IE \*/
    * html .sidebarmenu ul li { float: left; height: 1%; }
    * html .sidebarmenu ul li a { height: 1%; }
    /* End */
    </style>
    <script type="text/javascript">
    //Nested Side Bar Menu (Mar 20th, 09)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
    function initsidebarmenu(){
    for (var i=0; i<menuids.length; i++){
    var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
    if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
    ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
    else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
    for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
    ultags[t].style.visibility="visible"
    ultags[t].style.display="none"
    }
    }
    }

    if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)

    </script>

    </body>

    <body text="#FFFFFF" bgcolor="#FFFFFF">
    <div class="sidebarmenu" style="color: #FFFFFF; border: 1px solid #FFFFFF; padding-left: 160px; padding-top: 320px; background-color: #FFFFFF">
    <ul id="sidebarmenu1" style="color: #FFFFFF; border: 1px solid #FFFFFF; background-color: #FFFFFF">
    <li><a href="#">Argentina</a></li>
    <ul>
    <li><a href="#">Internal Datasheet</a></li>
    <li><a href="#">Client Facing</a></li>
    </ul>
    </li>
    <li><a href="#">Brazil</a></li>
    <ul>
    <li><a href="#">Internal Datasheet</a></li>
    <li><a href="#">Client Facing</a></li>
    </ul>
    </li>
    <li><a href="#">Colombia</a>
    <ul>
    <li><a href="#">Internal Datasheet</a></li>
    <li><a href="#">Client Facing</a></li>
    </ul>
    </li>
    <li><a href="#">Mexico</a></li>
    <ul>
    <li><a href="#">Internal Datasheet</a></li>
    <li><a href="#">Client Facing</a></li>
    </ul>
    </li>

    </ul>
    </div>

  4. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Unfortunately I can't open .docx documents. The basic layout of your code should follow this structure
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>  this tag opens the head section
    
    metatags, css and scripts can be placed here
    
    </head> ends the head section
    
    <body> opens the body (page content) section
    
    lists (navigation) and page content goes here
    
    </body> ends the body section
    </html> ends the document
    For example: you may not put the </body> before <body> . It has to be the other way around and the navigation and other content can be placed between <body> and </body>. Also make sure you only have one copy of each of these on your page <html> <head> </head <body> </body> </html>
    Last edited by azoomer; 06-11-2010 at 04:47 PM.

  5. #5
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Okay I am making slight progress. Thank you for explaining that piece...helps me to understand more! I think I've figured out what my problem might be. I have multiple sections with <body> and </body>. Is that allowed? I was trying to place the navbar BODY code within my other BODY section and still it locks up. So I know it's still off. I'll keep trying. Only way to learn is practice.

    But I've gone ahead and posted the code from my beginning page in a .doc file. Perhaps you may have a little time to view and offer one example seeing my code now.

    Thanks again for your help

  6. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Okay now i can see your page. I understand if you find it hard to figure out. You have a lot of code and it is difficult to get an overview. I would suggest that you start out with getting the basic page structure with <div> and css before you put all the javascript on the page. Personally i would advice you to get rid of the tables all together. About your question regarding the body tag : Only one <body> and one </body> is allowed. And also you should not put anything between </head> and <body>. On your page there is a lot of " microsoft stuff " and tables that are cluttering the code. If i were you I would start from scratch with a clean page structure and add one basic element at the time, focusing on html with divs and css to place these divs in the right location. The code structure and elements of your page now is too confusing for me to be able to integrate the other navigation. Keep it simple, that will give you a far better understanding of what's going on.

    The best way to structure your page would, in my opinion, be to have the css and javascript in separate files that you link to in the head of the html document. Avoid tables if possible and try also to avoid inline styles (css) and inline javascript if possible.

    Some links: http://www.w3schools.com/ with a lot of tutorials
    And the validator for html: http://validator.w3.org/ where you can check if you page has errors
    If it is not online you can get the totalvalidator firefox add on and use locally. It is very helpfull.
    Regarding css: the firebug add on is invaluable.
    Last edited by azoomer; 06-11-2010 at 06:24 PM.

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
  •