...

View Full Version : Easy update for modern browsers?



Deacon Frost
06-02-2009, 09:53 PM
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? :).



<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:



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/

Old Pedant
06-02-2009, 10:12 PM
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.

Deacon Frost
06-02-2009, 10:46 PM
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:



<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.

Old Pedant
06-03-2009, 12:26 AM
No, the menuengine() function is too simplistic.

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

Try something like this:


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:


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.

Old Pedant
06-03-2009, 12:40 AM
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.

Deacon Frost
06-03-2009, 03:36 AM
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 =/.

Old Pedant
06-03-2009, 07:23 AM
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.



<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>

Deacon Frost
06-03-2009, 11:02 PM
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.



<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum