Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Navbar Help

  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navbar Help

    Hi,

    I am a newb coder and have built a site but am having issues with different browsers and window sizes. Whenever I resize the browser windows I am no longer able to click the links on the nav bar. Is there some way to lock the links to the nav bar even when I resize? Here is the link and the code:

    http://www.thepioneers.tv


    Thanks in advance!


    Code:
    <link href="Pioneers.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    <link href="favicon.ico" rel="Shortcut Icon" />
    </head>
    
    <body onload="MM_preloadImages('Media/buttons/treatmentdown.png','Media/buttons/teaserdown.png','Media/buttons/episodesdown.png','Media/buttons/charactersdown.png','Media/buttons/contactdown.png')">
    <div id="title"></div>
    <div class="box1">
    		<a id="box-link" href="index.html"></a>
    		</div></div>
    <div id="navbar">
    <a href="treatment.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('treatment','','Media/buttons/treatmentdown.png',1)"><img src="Media/buttons/treatmentup.png" name="treatment" width="150" height="60" border="0" id="treatment" /></a>
    <a href="teaser.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('teaser','','Media/buttons/teaserdown.png',1)"><img src="Media/buttons/teaserup.png" name="teaser" width="110" height="60" border="0" id="teaser" /></a>
    <a href="episode.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('episode','','Media/buttons/episodesdown.png',1)"><img src="Media/buttons/episodesup.png" name="episode" width="150" height="60" border="0" id="episode" /></a>
    <a href="character.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('character','','Media/buttons/charactersdown.png',1)"><img src="Media/buttons/charactersup.png" name="character" width="160" height="60" border="0" id="character" /></a>
    <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','Media/buttons/contactdown.png',1)"><img src="Media/buttons/contactup.png" name="contact" width="150" height="60" border="0" id="contact" /></a></div>

  • #2
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I also think I fudged the other pages because whenever I resize the window (say for ipad size) the images that are anchored to the bottom stay the same size while the window shrinks.

  • #3
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    First: I would suggest an external JavaScript sheet.
    Second: Have you validated?
    Third: I tested it in Chrome and it works fine, resizing and all. What issue specifically is it? Is it a certain browser that is acting up? Or a platform?
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.


  •  

    Posting Permissions

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