Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

showing and hidding DIV's 1

Status
Not open for further replies.
joelmac

joelmac

Programmer
Jun 4, 2002
92
CA
hi there,

I need to be able to change stuff on my page very quickly. Right now I have 4 div's, each one with different info that i want to display, 3 of them have style="display:none" and one with style="display:block" (so only one is displayed on page load). I also have 4 radio buttons, each with an onclick="" ponting to a function that hides all divs and shows the one i want to display using:

theDIV1.style.display='none';
theDIV2.style.display='block';

Do you get the idea? This works great in IE but not in NS. any ideas on how I could fix that?

Thanks


________________________
JoelMac
 
Sort by date Sort by votes
im not sure if the display property is available in netscape, haven't checked this in awhile but i think the best you can do is
Code: 
visibility:invisible
and
Code: 
visibility:visible
....someone tell me if i'm wrong

"Those who dare to fail miserably can achieve greatly." - Robert F. Kennedy
 
Upvote 0 Downvote
Joel,

Use standard compliant code.

document.getElementById("theDIV1").style.display='none';
document.getElementById("theDIV2").style.display='block';

I hope this helps you out! :)

Gary Haran
==========================
 
Upvote 0 Downvote
This is the code only run in NETSCAPE. (i use drag proprrty of layer)

<html>
<head>
<script>
// go to link
function setLink(LINK){
self.location = LINK;
}
// get window size
function getWinSize(which){
if(document.all){
if(which==&quot;width&quot;) return document.body.clientWidth;
if(which==&quot;height&quot;) return document.body.clientHeight;
}
if(document.layers){
if(which==&quot;width&quot;) return (window.innerWidth);
if(which==&quot;height&quot;) return (window.innerHeight);
}
}

// set layer
function setLayer(layerName, x, y, width, height, bgColor, content, visible){

var layer = document.all ? document.all[layerName].style : document.layers[layerName];
layer.visibility = (visible ? &quot;visible&quot; : &quot;hidden&quot;);
moveLayerTo(layerName, x, y);
layer.width = width;
layer.height = height;
if(bgColor != null){
document.all ? layer.backgroundColor = bgColor : layer.bgColor = bgColor;
}
clipLayerTo(layerName, 0, 0, width, height);
content != &quot;inherit&quot; ? replaceContent(layerName, content) : null;

}

// get layer's position
function getSize(layerName, value){
layer = (document.all) ? eval(layerName).style : document.eval(layerName);

if(value==&quot;left&quot;) return parseInt(layer.left);
if(value==&quot;top&quot;) return parseInt(layer.top);
if(value==&quot;width&quot;) return parseInt(layer.width);
if(value==&quot;height&quot;) return parseInt(layer.height);
}

// get layer's clip value
function getClipValue(layerName,value){
layer = (document.all) ? eval(layerName).style : document.layers[layerName];
if(document.all){
cp = layer.clip.split(&quot; &quot;);
cp[0] = cp[0].slice(5);
if(value==&quot;top&quot;) return parseInt(cp[0]);
if(value==&quot;right&quot;) return parseInt(cp[1]);
if(value==&quot;bottom&quot;) return parseInt(cp[2]);
if(value==&quot;left&quot;) return parseInt(cp[3]);
}
if(document.layers){
if(value==&quot;top&quot;) return (layer.clip.top);
if(value==&quot;right&quot;) return (layer.clip.right);
if(value==&quot;bottom&quot;) return (layer.clip.bottom);
if(value==&quot;left&quot;) return (layer.clip.left);
}
}

// show layer
function showLayer(layerName){
layer = (document.all) ? eval(layerName).style : document.eval(layerName);
layer.visibility = (document.all) ? &quot;visible&quot; : &quot;show&quot;;
}

// hide layer
function hideLayer(layerName){
layer = (document.all) ? eval(layerName).style : document.eval(layerName);
layer.visibility = (document.all) ? &quot;hidden&quot; : &quot;hide&quot;;
}

// clip layerTo
function clipLayerTo(layerName, l, t, r, b){
layer = (document.all) ? eval(layerName).style : document.eval(layerName);
if(document.all){
layer.clip = &quot;rect(&quot;+t+&quot;px &quot;+r+&quot;px &quot;+b+&quot;px &quot;+l+&quot;px)&quot;;
}
if(document.layers){
layer.clip.top = t;
layer.clip.right = r;
layer.clip.bottom = b;
layer.clip.left = l;
}
}

// clip layerBy
function clipLayerBy(layerName, l, t, r, b){
layer = (document.all) ? eval(layerName).style : document.layers[layerName];
if(document.all){
layer.clip = &quot;rect(&quot;+(getClipValue(layerName,'top')+t)+&quot;px &quot;
+(getClipValue(layerName,'right')+r)+&quot;px &quot;
+(getClipValue(layerName,'bottom')+b)+&quot;px &quot;
+(getClipValue(layerName,'left')+l)+&quot;px)&quot;;
}
if(document.layers){
layer.clip.top = (getClipValue(layerName,'top')) + t;
layer.clip.right = (getClipValue(layerName,'right')) + r;
layer.clip.bottom = (getClipValue(layerName,'bottom')) + b;
layer.clip.left = (getClipValue(layerName,'left')) + l;
}
}
// move layer to (x, y)
function moveLayerTo(layerName, x, y){

if(document.all){
eval(layerName).style.left = x;
eval(layerName).style.top = y;
}
if(document.layers){
document.layers[layerName].moveTo(x,y);
}
}

// move layer by (dx, dy)
function moveLayerBy(layerName,dx,dy){
if(document.all){
eval(layerName).style.pixelLeft += dx;
eval(layerName).style.pixelTop += dy;
}
if(document.layers){
document.layers[layerName].moveBy(dx,dy);
}
}

// slide layer
function slideLayer(layerName, dx, dy, speed){
layer = (document.all) ? eval(layerName).style : document.eval(layerName);
curX = getSize(layerName, &quot;left&quot;);
curY = getSize(layerName, &quot;top&quot;);;
lW = getSize(layerName, &quot;width&quot;);
lH = getSize(layerName, &quot;height&quot;);
docW = getWinSize(&quot;width&quot;);
docH = getWinSize(&quot;height&quot;);

moveLayerBy(layerName, dx, dy);

timer = setTimeout(&quot;slideLayer('&quot;+layerName+&quot;',&quot;+dx+&quot;,&quot;+dy+&quot;,&quot;+speed+&quot;)&quot;, speed);

if((curX <= -lW) || (curX >=docW) ||
(curY <= -lH) || (curY >=docH)) clearTimeout(timer);
}

// slide layer to (x, y)
function slideLayerTo(layerName, x, y, step, speed){

curX = getSize(layerName, &quot;left&quot;);
curY = getSize(layerName, &quot;top&quot;);

dx = parseInt(x - curX)/step;
dy = parseInt(y - curY)/step;
zoneX = Math.abs(x - curX);
zoneY = Math.abs(y - curY);

if((zoneX < 10) && (zoneY < 10)){
moveLayerTo(layerName, x, y);
} else moveLayerBy(layerName, dx, dy);

timer = setTimeout(&quot;slideLayerTo('&quot;+layerName+&quot;',&quot;+x+&quot;,&quot;+y+&quot;,&quot;+step+&quot;,&quot;+speed+&quot;)&quot;, speed);

if(curX==x && curY==y) clearTimeout(timer);
}


// wipe layer
function wipeLayer(layerName, endPoint, type){
var step = 5;
var speed = 10;
if(type==&quot;fromLeft&quot;){
if((getClipValue(layerName,'right')) < endPoint){
clipLayerBy(layerName, 0, 0, step, 0);
setTimeout(&quot;wipeLayer('&quot;+layerName+&quot;',&quot;+endPoint+&quot;, '&quot;+type+&quot;')&quot;, speed);
}
}
if(type==&quot;fromRight&quot;){
if((getClipValue(layerName,'right')) > endPoint){
clipLayerBy(layerName, 0, 0, -step, 0);
setTimeout(&quot;wipeLayer('&quot;+layerName+&quot;',&quot;+endPoint+&quot;, '&quot;+type+&quot;')&quot;, speed);
}
}
if(type==&quot;fromTop&quot;){
if((getClipValue(layerName,'top')) < endPoint){
clipLayerBy(layerName, 0, step, 0, 0);
setTimeout(&quot;wipeLayer('&quot;+layerName+&quot;',&quot;+endPoint+&quot;, '&quot;+type+&quot;')&quot;, speed);
}
}
if(type==&quot;fromBottom&quot;){
if((getClipValue(layerName,'bottom')) > endPoint){
clipLayerBy(layerName, 0, 0, 0, -step);
setTimeout(&quot;wipeLayer('&quot;+layerName+&quot;',&quot;+endPoint+&quot;, '&quot;+type+&quot;')&quot;, speed);
}
}
}

// searchLight
var sTurn = null;
var sStep = 5;
var sLoop = 3;
var sSpeed = 10;
function searchLight(layerName, lightX){

if(sTurn==null){
showLayer(layerName);
clipLayerTo(layerName, 0, 0, lightX, getSize(layerName,&quot;height&quot;));
sTurn = 0;
}
clipLayerBy(layerName, sStep, 0, sStep, 0);

if((getClipValue(layerName,&quot;left&quot;)) > getSize(layerName,&quot;width&quot;)+lightX ||
(getClipValue(layerName,&quot;right&quot;)) < 0){
sStep = -sStep;
sTurn++;
}

timer=setTimeout('searchLight(&quot;'+layerName+'&quot;,'+lightX+')', sSpeed);
if(sTurn >= sLoop){
clearTimeout(timer);
sTurn = null;
hideLayer(layerName)
}
}

// make gradation with vertical direction
function makeGradV(way, x, y, width, height){
if (way==0) col = &quot;fedcba9876543210&quot;;
else col = &quot;0123456789abcdef&quot;;
for(i=0; i < col.length; i++){
c = col.charAt(i);
c+=c+c+c+c+c;
if(document.all){
str =&quot;<div style='position:absolute; top:&quot;+(y+i*height)+&quot;; left:&quot;+x+&quot;; &quot;;
str+=&quot;width:&quot;+width+&quot;; height:&quot;+height+&quot;; &quot;;
str+=&quot;background:#&quot;+c+&quot;'></div>&quot;;
}
if(document.layers){
str =&quot;<layer top=&quot;+(y+i*height)+&quot; left=&quot;+x+&quot; &quot;;
str+=&quot;width=&quot;+width+&quot; height=&quot;+height+&quot; &quot;;
str+=&quot;bgcolor=#&quot;+c+&quot;'></layer>&quot;;
}
document.write(str);
}
}

// make gradation with horizontal direction
function makeGradH(way, x, y, width, height){
if (way==0) col = &quot;fedcba9876543210&quot;;
else col = &quot;0123456789abcdef&quot;;
for(i=0; i < col.length; i++){
c = col.charAt(i);
c+=c+c+c+c+c;
if(document.all){
str =&quot;<div style='position:absolute; top:&quot;+y+&quot;; left:&quot;+(x+i*width)+&quot;; &quot;
str+=&quot;width:&quot;+width+&quot;; height:&quot;+height+&quot;; &quot;;
str+=&quot;background:#&quot;+c+&quot;'></div>&quot;;
}
if(document.layers){
str =&quot;<layer top=&quot;+y+&quot; left=&quot;+(x+i*width)+&quot; &quot;;
str+=&quot;width=&quot;+width+&quot; height=&quot;+height+&quot; &quot;;
str+=&quot;bgColor=#&quot;+c+&quot;'></layer>&quot;;
}
document.write(str);
}
}

// replace new html
function replaceContent(layerName, html) {
if(document.all) eval(layerName).innerHTML = html;

if(document.layers){
document.eval(layerName).document.open(&quot;text/html&quot;);
document.eval(layerName).document.write(html);
document.eval(layerName).document.close();
}
}

// load html to scrolllayer
function loadURL(layerName, left, top, width, height, file){
if(document.all){
code = '<iframe frameborder=0 id='+layerName+' '
code+= 'style=&quot;position:absolute; left:'+left+'; top:'+top+'; ';
code+= 'width:'+width+'; height:'+height+';&quot; src='+file+'>';
code+= '</iframe>';
eval(layerName).outerHTML = code;
}
if(document.layers){
document.layers[layerName].moveTo(left, top);
document.layers[layerName].resizeTo(width, height);
document.layers[layerName].load(file, width);
}
}


// drag & drop
var curLayer = null;
function mouseDown(e){
if(document.all){
e = window.event;
oX = e.clientX;
oY = e.clientY;
curLayer = e.srcElement;
e.returnValue = false;
}
if(document.layers){
if(curLayer==null){
oX = e.pageX;
oY = e.pageY;
for(i=document.layers.length-1; i>=0; i--){
el = document.layers;
if((oX > el.left) && (oX < el.left+el.clip.width) &&
(oY > el.top) && (oY < el.top+el.clip.height)){
curLayer = el;
return false;
}
}
}
return true;
}
}

function mouseMove(e){
if(document.all){
if(curLayer != null){
e = window.event;
curLayer.style.pixelLeft += (e.clientX - oX);
curLayer.style.pixelTop += (e.clientY - oY);
oX = e.clientX;
oY = e.clientY;
e.returnValue = false;
}
}
if(document.layers){
if(curLayer != null){
curLayer.moveBy(e.pageX - oX, e.pageY - oY);
oX = e.pageX;
oY = e.pageY;
}
}
}

function mouseUp(e){
if(document.all){
curLayer = null;
event.returnValue = false;
}
if(document.layers){
if(curLayer != null){
curLayer = null;
return false;
}
return true;
}
}

function dragLayer(){ // set this function like this; onLoad=&quot;dragLayer()&quot;
if(document.layers){
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}

document.onmousedown = mouseDown;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}

// zoom-in and zoom-out
var curSize = null;

function zoomIn(layerName, text, Max, step, speed){

if(document.all){
curSize = parseInt(eval(layerName).style.fontSize);
if (curSize < Max){
eval(layerName).innerHTML = text;
curSize += step;
eval(layerName).style.fontSize = curSize;
}
}

if(document.layers){
if(curSize < Max){
if(curSize == null){
curSize = eval(&quot;parseInt(document.ids.&quot;+layerName+&quot;.fontSize)&quot;);
}
curSize += step;
var doc = document.layers[layerName];
doc.document.open(&quot;text/html&quot;);
doc.document.tags.FONT.textAlign = &quot;center&quot;;
doc.document.tags.FONT.fontSize = curSize;
doc.document.write(&quot;<font color=red>&quot;+text+&quot;</font>&quot;);
doc.document.close();
}
}

timer = setTimeout(&quot;zoomIn('&quot;+layerName+&quot;','&quot;+text+&quot;',&quot;+Max+&quot;,&quot;+step+&quot;,&quot;+speed+&quot;)&quot;, speed);

if(curSize >= Max) clearTimeout(timer);
}

function zoomOut(layerName, text, min, step, speed){

if(document.all){
curSize = parseInt(eval(layerName).style.fontSize);
if (curSize > min){
eval(layerName).innerHTML = text;
curSize -= step;
eval(layerName).style.fontSize = curSize;
}
}

if(document.layers){
if(curSize > min){
if(curSize == null){
curSize = eval(&quot;parseInt(document.ids.&quot;+layerName+&quot;.fontSize)&quot;);
}
curSize -= step;
var doc = document.layers[layerName];
doc.document.open(&quot;text/html&quot;);
doc.document.tags.FONT.textAlign = &quot;center&quot;;
doc.document.tags.FONT.fontSize = curSize;
doc.document.write(&quot;<font color=red face=times>&quot;+text+&quot;</font>&quot;);
doc.document.close();
}
}

timer = setTimeout(&quot;zoomOut('&quot;+layerName+&quot;','&quot;+text+&quot;',&quot;+min+&quot;,&quot;+step+&quot;,&quot;+speed+&quot;)&quot;, speed);

if(curSize <= min) clearTimeout(timer);
}

// change layer's fontColor or backgroundColor
function changeColor(layerName, html, which){
col = parseInt(Math.random()*255*255*255);
col = col.toString(16);
if(col.length < 6) col = &quot;tomato&quot;; // Any color is OK

if(document.all){
var doc = document.all[layerName].style;
if(which == 0) doc.backgroundColor = col;
if(which == 1) doc.color = col;
eval(layerName).innerHTML = html;
}
if(document.layers){
var doc = document.layers[layerName].document;
doc.open();
if(which == 0) doc.bgColor = col;
if(which == 1) doc.fgColor = col;
doc.write(html);
doc.close();
}
}

// typewriter
var typeComment = &quot;&quot;;
var type_i = 0;
var typeMessage = &quot;&quot;;

function typeIt(layerName, speed){

typeMessage += typeComment.slice(type_i,type_i+1);
type_i++;
code = '<font style=&quot;font:bold 15pt times; color:cyan; background:black;&quot;>';
code+= typeMessage +'_'+'</font>';
replaceContent(layerName, code);
timer = setTimeout(&quot;typeIt('&quot;+layerName+&quot;',&quot;+speed+&quot;)&quot;, speed);

if(type_i >= typeComment.length){
type_i = 0;
typeMessage =&quot;&quot;;
clearTimeout(timer);
}
}

// new window open
function openIt(URL, x, y, w, h){
popWin = window.open(URL,'',
'width='+w+',height='+h+',top='+y+',left='+x+',resizable=no');
popWin.focus();
}

// sort link by browser
function sortIt(IE,NC){
if(document.all) window.location = IE;
if(document.layers) window.location = NC;
}

</script>
</head>
<body onLoad=&quot;dragLayer()&quot;>
<div id=&quot;div1&quot; style=&quot;position:absolute; z-index:1; left: 50px; top: 20px; background-color: #FFFFD7;&quot;>
<TABLE>
<TR>
<TD>Hai</TD>
</TR>
</TABLE>
</div>
</body>
<HTML>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
281
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
307
AbidingDude
AbidingDude
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
224
waubain
waubain
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
104
ggriffit
ggriffit
leifoet
  • Locked
  • Question
How to combine JS and ASP ?
Replies
5
Views
181
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top