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 8 of 8
  1. #1
    Regular Coder Deacon Frost's Avatar
    Join Date
    Feb 2008
    Location
    Between the Lines
    Posts
    279
    Thanks
    31
    Thanked 4 Times in 4 Posts

    Easy update for modern browsers?

    I have a script that I changed a bunch, and it works in chrome, fx, and opera, but does not, in any way shape or form, work in IE.

    Can you tell me what to change in the script so it will work in the major browsers, please? .

    Code:
    <script language="javascript">
    
    /***********************************************
    * Sliding Menu Bar Script 2- © Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var slidemenu_height='400px' //specify height of menu (in pixels)
    var slidemenu_reveal='25px' //specify amount that menu should protrude initially
    var slidemenu_top=''   //specify vertical offset of menu on page
    
    var ns4=document.layers?1:0
    var ie4=document.all
    var ns6=document.getElementById&&!document.all?1:0
    
    if (ie4||ns6)
    document.write('<div id="slidemenubar2" style="bottom:'+((parseInt(slidemenu_height)-parseInt(slidemenu_reveal))*-1)+'px; 
    
    top:'+slidemenu_top+';height:'+slidemenu_height+'" title="Press Space to expand the menu, and X to contract it">')
    else if (ns4){
    document.write('<style>\n#slidemenubar{\nheight:'+slidemenu_height+';}\n<\/style>\n')
    document.write('<layer id="slidemenubar" bottom=0  top='+slidemenu_top+' height='+slidemenu_height+' visibility=hide>')
    }
    
    
    
    document.write("<div style='margin-top:-2px;text-align:center;font-size:10px;'><p>(Press 'C' to open and close the console.)
    
    </p></div>");
    
    document.write('<div id="navtabs" class="indentmenu">'
    +'<ul>'
    +'<li><a href="external4.htm" rel="#iframe" class="selected">Character</a></li>'
    +'<li><a href="external4.htm" rel="#iframe">Stats</a></li>'
    +'<li><a href="external4.htm" rel="#iframe">Inventory</a></li>'
    +'<li><a href="external4.htm" rel="#iframe">Inbox</a></li>'
    +'</ul>'
    +'<br style="clear: left" />'
    +'</div>'
    +'<div id="divnav" style="border-top: 1px solid #000000;color:white; width:80%; height: 800px; padding: 5px; margin-left:9%; margin-
    
    right:10%; margin-bottom:1em">'
    +'</div>');
    
    
    
    
    
    
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    if (ns4){
    document.slidemenubar.bottom=((parseInt(slidemenu_height)-parseInt(slidemenu_reveal))*-1)
    document.slidemenubar.visibility="show"
    setTimeout("window.onresize=regenerate",400)
    }
    }
    window.onload=regenerate2
    
    topboundary=0
    bottomboundary=(parseInt(slidemenu_height)-parseInt(slidemenu_reveal))*-1
    
    if (ie4||ns6){
    document.write('</div>')
    themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
    }
    else if (ns4){
    document.write('</layer>')
    themenu=document.layers.slidemenubar
    }
    
    function pull(){
    if (window.drawit)
    clearInterval(drawit)
    pullit=setInterval("pullengine()",10)
    }
    function draw(){
    clearInterval(pullit)
    drawit=setInterval("drawengine()",10)
    }
    function pullengine(){
    if ((ie4||ns6)&&parseInt(themenu.bottom)<topboundary)
    themenu.bottom=parseInt(themenu.bottom)+20+"px"
    else if(ns4&&themenu.bottom<topboundary)
    themenu.bottom+=10
    else if (window.pullit){
    themenu.bottom=0
    clearInterval(pullit)
    }
    }
    
    function drawengine(){
    if ((ie4||ns6)&&parseInt(themenu.bottom)>bottomboundary)
    themenu.bottom=parseInt(themenu.bottom)-20+"px"
    else if(ns4&&themenu.bottom>bottomboundary)
    themenu.bottom-=10
    else if (window.drawit){
    themenu.bottom=bottomboundary
    clearInterval(drawit)
    }
    }
    
    if (ns4)
    document.captureEvents(Event.KEYPRESS)
    function menuengine(e){
    if (ns4||ns6){
    
    if (e.which==99 && bottomboundary<topboundary) 
    pull();
    
    
    if (e.which==99 && parseInt(themenu.bottom)>bottomboundary)
    draw();
    
    
    }
    
    else if (ie4){
    if (event.keyCode==99 && bottomboundary<topboundary) 
    pull()
    if (event.keyCode==99 && parseInt(themenu.bottom)>bottomboundary)
    draw()
    }
    }
    document.onkeypress=menuengine
    </script>
    As you can see, it was made back during the time of ie4, so it's rather old >.<.


    I would figure this part:

    Code:
    var ns4=document.layers?1:0
    var ie4=document.all
    var ns6=document.getElementById&&!document.all?1:0
    Is what mainly needs changed, as well as the if clauses scattered around.


    Here's a working example:

    http://ispikedthepunch.com/gameredesign/1/

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,232
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    Why not just forget about document.all??? The only browsers that applies to are MSIE 4 and such.

    And then also forget about ns4.

    Just use document.getElementById( ) for *ALL* browser and see if it doesn't work in all current ones.

    That's the problem with much of that DynamicDrive stuff...it was all written back in ancient times. I tend to avoid it in favor of other JS libraries.

  • #3
    Regular Coder Deacon Frost's Avatar
    Join Date
    Feb 2008
    Location
    Between the Lines
    Posts
    279
    Thanks
    31
    Thanked 4 Times in 4 Posts
    I'm not too savvy on browser detection in JS :P.

    What displays in ie, that won't display in others, though?


    I tried getting rid of all the detective properties:

    Code:
    <script language="javascript">
    
    /***********************************************
    * Sliding Menu Bar Script 2- © Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var slidemenu_height='400px' //specify height of menu (in pixels)
    var slidemenu_reveal='25px' //specify amount that menu should protrude initially
    var slidemenu_top=''   //specify vertical offset of menu on page
    
    
    
    
    document.write('<div id="slidemenubar2" style="bottom:'+((parseInt(slidemenu_height)-parseInt(slidemenu_reveal))*-1)+'px; 
    
    top:'+slidemenu_top+';height:'+slidemenu_height+'" title="Press Space to expand the menu, and X to contract it">')
    
    
    
    document.write("<div style='margin-top:-2px;text-align:center;font-size:10px;'><p>(Press 'C' to open and close the console.)</p></div>");
    
    document.write('<div id="navtabs" class="indentmenu">'
    +'<ul>'
    +'<li><a href="external4.htm" rel="#iframe" class="selected">Character</a></li>'
    +'<li><a href="external4.htm" rel="#iframe">Stats</a></li>'
    +'<li><a href="external4.htm" rel="#iframe">Inventory</a></li>'
    +'<li><a href="external4.htm" rel="#iframe">Inbox</a></li>'
    +'</ul>'
    +'<br style="clear: left" />'
    +'</div>'
    +'<div id="divnav" style="border-top: 1px solid #000000;color:white; width:80%; height: 800px; padding: 5px; margin-left:9%; margin-
    
    right:10%; margin-bottom:1em">'
    +'</div>');
    
    
    
    
    
    
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    document.slidemenubar.bottom=((parseInt(slidemenu_height)-parseInt(slidemenu_reveal))*-1)
    document.slidemenubar.visibility="show"
    setTimeout("window.onresize=regenerate",400)
    }
    window.onload=regenerate2
    
    topboundary=0
    bottomboundary=(parseInt(slidemenu_height)-parseInt(slidemenu_reveal))*-1
    
    
    document.write('</div>')
    themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
    
    
    function pull(){
    if (window.drawit)
    clearInterval(drawit)
    pullit=setInterval("pullengine()",10)
    }
    function draw(){
    clearInterval(pullit)
    drawit=setInterval("drawengine()",10)
    }
    function pullengine(){
    if (parseInt(themenu.bottom)<topboundary)
    themenu.bottom=parseInt(themenu.bottom)+20+"px"
    else if (window.pullit){
    themenu.bottom=0
    clearInterval(pullit)
    }
    }
    
    function drawengine(){
    if (parseInt(themenu.bottom)>bottomboundary)
    themenu.bottom=parseInt(themenu.bottom)-20+"px"
    else if (window.drawit){
    themenu.bottom=bottomboundary
    clearInterval(drawit)
    }
    }
    
    
    document.captureEvents(Event.KEYPRESS)
    function menuengine(e){
    
    
    if (e.which==99 && bottomboundary<topboundary) 
    pull();
    
    
    if (e.which==99 && parseInt(themenu.bottom)>bottomboundary)
    draw();
    
    
    }
    document.onkeypress=menuengine
    </script>
    Didn't really work :P. It not only stayed the same in IE, but it also stopped working in fx :P.
    Last edited by Deacon Frost; 06-02-2009 at 09:50 PM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,232
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    No, the menuengine() function is too simplistic.

    MSIE still uses window.event in place of passing in the event.

    Try something like this:
    Code:
    function menuengine(e)
    {
       var keycode = window.event  != null ? event.keyCode : e.which;
       if (keycode==99 && bottomboundary<topboundary) pull();
       if (keycode==99 && parseInt(themenu.bottom) > bottomboundary) draw();
    }
    Or, even more simply:
    Code:
    function menuengine(e)
    {
       if ( 99 != ( window.event  != null  ? event.keyCode : e.which ) return;
       if ( bottomboundary < topboundary) pull();
       if ( parseInt(themenu.bottom) > bottomboundary) draw();
    }
    But I can't get it to display correctly, as written, in either MS or FF, so I must be missing some pieces.

    Oh, yeah...DOH! I'm missing the <style> info for the sliding div stuff.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,232
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    Looking at it more, I don't see how it works, at all.

    The drawengine() code only moves it one way. Always -20 pixels. Never back the other way.

    My head hurts.

  • #6
    Regular Coder Deacon Frost's Avatar
    Join Date
    Feb 2008
    Location
    Between the Lines
    Posts
    279
    Thanks
    31
    Thanked 4 Times in 4 Posts
    drawengine() relates to the draw() function. That's what collapses it back off screen.

    pullengine() relates to the pull() function, which is what expands it into view.


    See, my problem comes in, in understanding how/why/what. I'm used to PHP, where cross-browser compatibility isn't a problem, simply server settings are the problem.

    So trying to code javascript for several browsers is throwing me off. I don't know which code works in which one, and what needs changed, exactly =/.
    Last edited by Deacon Frost; 06-03-2009 at 02:39 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,232
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    Well, here is my hacky version that works in MSIE 6 and FireFox.

    Using mouseover instead of keypress, but should be easy to change that.

    Code:
    <html>
    <head>
    <style>
    div#pullup { position: absolute;
                 top: 0px;
                 width: 100%;
               }
    div#show { position: absolute;
               top: 20px;
               border: solid red 1px;
               background-color: pink;
             }
    </style>
    <script type="text/javascript">
    var Pullup = null;
    var Show = null;
    var pulledBy = 0;
    var moveby = 0;
    var mover = null;
    
    function SetUp( )
    {
        Pullup = document.getElementById("pullup");
        Show   = document.getElementById("show");
        Show.style.left = Math.round( ( document.body.clientWidth - parseInt(Show.style.width) ) / 2 ) + "px";
        Pullup.style.top = ( document.body.clientHeight  - 20 ) + "px"; 
    }
    function adjustPullup( )
    {
        Pullup.style.top = ( document.body.clientHeight + document.body.scrollTop - pulledBy - 20 ) + "px";
    }
    function moveup( )
    {
        moveby = 6;
        moveit( );
    }
    function movedown( )
    {
        moveby = -6;
        moveit( );
    }
    function moveit( )
    {
        clearTimeout( mover ); // just in case
        if ( ( moveby < 0 && pulledBy <= 0 ) || ( moveby > 0 && pulledBy >= parseInt(Show.style.height) ) ) return;
        pulledBy += moveby;
        if ( pulledBy < 0 ) pulledBy = 0;
        Pullup.style.top = ( document.body.clientHeight + document.body.scrollTop - pulledBy - 20 ) + "px";
        mover = setTimeout( "moveit()", 40 );    
    }
    </script>
    </head>
    <body onLoad="SetUp();" onresize="SetUp();" onscroll="adjustPullup();">
    <div id="pullup" onmouseover="moveup();" onmouseout="movedown();">
        <div align="center">Hover to pull up the good stuff</div>
        <div id="show"  style="width: 600px; height: 150px;">
    	You can put<br/>
            Any content you want</br>
            In here.
        </div>
    </div>
    
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    And more.
    </body>
    </html>

  • #8
    Regular Coder Deacon Frost's Avatar
    Join Date
    Feb 2008
    Location
    Between the Lines
    Posts
    279
    Thanks
    31
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, here is my hacky version that works in MSIE 6 and FireFox.

    Using mouseover instead of keypress, but should be easy to change that.

    Code:
    <html>
    <head>
    <style>
    div#pullup { position: absolute;
                 top: 0px;
                 width: 100%;
               }
    div#show { position: absolute;
               top: 20px;
               border: solid red 1px;
               background-color: pink;
             }
    </style>
    <script type="text/javascript">
    var Pullup = null;
    var Show = null;
    var pulledBy = 0;
    var moveby = 0;
    var mover = null;
    
    function SetUp( )
    {
        Pullup = document.getElementById("pullup");
        Show   = document.getElementById("show");
        Show.style.left = Math.round( ( document.body.clientWidth - parseInt(Show.style.width) ) / 2 ) + "px";
        Pullup.style.top = ( document.body.clientHeight  - 20 ) + "px"; 
    }
    function adjustPullup( )
    {
        Pullup.style.top = ( document.body.clientHeight + document.body.scrollTop - pulledBy - 20 ) + "px";
    }
    function moveup( )
    {
        moveby = 6;
        moveit( );
    }
    function movedown( )
    {
        moveby = -6;
        moveit( );
    }
    function moveit( )
    {
        clearTimeout( mover ); // just in case
        if ( ( moveby < 0 && pulledBy <= 0 ) || ( moveby > 0 && pulledBy >= parseInt(Show.style.height) ) ) return;
        pulledBy += moveby;
        if ( pulledBy < 0 ) pulledBy = 0;
        Pullup.style.top = ( document.body.clientHeight + document.body.scrollTop - pulledBy - 20 ) + "px";
        mover = setTimeout( "moveit()", 40 );    
    }
    </script>
    </head>
    <body onLoad="SetUp();" onresize="SetUp();" onscroll="adjustPullup();">
    <div id="pullup" onmouseover="moveup();" onmouseout="movedown();">
        <div align="center">Hover to pull up the good stuff</div>
        <div id="show"  style="width: 600px; height: 150px;">
    	You can put<br/>
            Any content you want</br>
            In here.
        </div>
    </div>
    
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    Filler stuff.<p>
    And more.
    </body>
    </html>

    Wow, that is hacky >.<.

    Lol.

    Unfortunately it's not as effective, and I'm not sure how much is required to fix it so it's less buggy =/.

    I think the problem with my code may be in my css, and not in my javascript though... besides the whole: not working in ie anyways.


  •  

    Posting Permissions

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