showing and hidding DIV's 1

joelmac · Apr 22, 2003

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

elegidito · Apr 22, 2003

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

xutopia · Apr 22, 2003

Joel,

Use standard compliant code.

document.getElementById("theDIV1&quot

.style.display='none';
document.getElementById("theDIV2&quot

.style.display='block';

I hope this helps you out!

Gary

http://www.xutopia.com

Haran
==========================

Pragasam · Apr 23, 2003

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=="width&quot

return document.body.clientWidth;
if(which=="height&quot

return document.body.clientHeight;
}
if(document.layers){
if(which=="width&quot

return (window.innerWidth);
if(which=="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 ? "visible" : "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 != "inherit" ? replaceContent(layerName, content) : null;

}

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

if(value=="left&quot

return parseInt(layer.left);
if(value=="top&quot

return parseInt(layer.top);
if(value=="width&quot

return parseInt(layer.width);
if(value=="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

;
cp[0] = cp[0].slice(5);
if(value=="top&quot

return parseInt(cp[0]);
if(value=="right&quot

return parseInt(cp[1]);
if(value=="bottom&quot

return parseInt(cp[2]);
if(value=="left&quot

return parseInt(cp[3]);
}
if(document.layers){
if(value=="top&quot

return (layer.clip.top);
if(value=="right&quot

return (layer.clip.right);
if(value=="bottom&quot

return (layer.clip.bottom);
if(value=="left&quot

return (layer.clip.left);
}
}

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

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

// clip layerTo
function clipLayerTo(layerName, l, t, r, b){
layer = (document.all) ? eval(layerName).style : document.eval(layerName);
if(document.all){
layer.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)";
}
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 = "rect("+(getClipValue(layerName,'top')+t)+"px "
+(getClipValue(layerName,'right')+r)+"px "
+(getClipValue(layerName,'bottom')+b)+"px "
+(getClipValue(layerName,'left')+l)+"px)";
}
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, "left&quot

;
curY = getSize(layerName, "top&quot

;;
lW = getSize(layerName, "width&quot

;
lH = getSize(layerName, "height&quot

;
docW = getWinSize("width&quot

;
docH = getWinSize("height&quot

;

moveLayerBy(layerName, dx, dy);

timer = setTimeout("slideLayer('"+layerName+"',"+dx+","+dy+","+speed+&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, "left&quot

;
curY = getSize(layerName, "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("slideLayerTo('"+layerName+"',"+x+","+y+","+step+","+speed+&quot

", speed);

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

// wipe layer
function wipeLayer(layerName, endPoint, type){
var step = 5;
var speed = 10;
if(type=="fromLeft&quot

{
if((getClipValue(layerName,'right')) < endPoint){
clipLayerBy(layerName, 0, 0, step, 0);
setTimeout("wipeLayer('"+layerName+"',"+endPoint+", '"+type+"')", speed);
}
}
if(type=="fromRight&quot

{
if((getClipValue(layerName,'right')) > endPoint){
clipLayerBy(layerName, 0, 0, -step, 0);
setTimeout("wipeLayer('"+layerName+"',"+endPoint+", '"+type+"')", speed);
}
}
if(type=="fromTop&quot

{
if((getClipValue(layerName,'top')) < endPoint){
clipLayerBy(layerName, 0, step, 0, 0);
setTimeout("wipeLayer('"+layerName+"',"+endPoint+", '"+type+"')", speed);
}
}
if(type=="fromBottom&quot

{
if((getClipValue(layerName,'bottom')) > endPoint){
clipLayerBy(layerName, 0, 0, 0, -step);
setTimeout("wipeLayer('"+layerName+"',"+endPoint+", '"+type+"')", 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,"height&quot

);
sTurn = 0;
}
clipLayerBy(layerName, sStep, 0, sStep, 0);

if((getClipValue(layerName,"left&quot

) > getSize(layerName,"width&quot

+lightX ||
(getClipValue(layerName,"right&quot

) < 0){
sStep = -sStep;
sTurn++;
}

timer=setTimeout('searchLight("'+layerName+'",'+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 = "fedcba9876543210";
else col = "0123456789abcdef";
for(i=0; i < col.length; i++){
c = col.charAt(i);
c+=c+c+c+c+c;
if(document.all){
str ="<div style='position:absolute; top:"+(y+i*height)+"; left:"+x+"; ";
str+="width:"+width+"; height:"+height+"; ";
str+="background:#"+c+"'></div>";
}
if(document.layers){
str ="<layer top="+(y+i*height)+" left="+x+" ";
str+="width="+width+" height="+height+" ";
str+="bgcolor=#"+c+"'></layer>";
}
document.write(str);
}
}

// make gradation with horizontal direction
function makeGradH(way, x, y, width, height){
if (way==0) col = "fedcba9876543210";
else col = "0123456789abcdef";
for(i=0; i < col.length; i++){
c = col.charAt(i);
c+=c+c+c+c+c;
if(document.all){
str ="<div style='position:absolute; top:"+y+"; left:"+(x+i*width)+"; "
str+="width:"+width+"; height:"+height+"; ";
str+="background:#"+c+"'></div>";
}
if(document.layers){
str ="<layer top="+y+" left="+(x+i*width)+" ";
str+="width="+width+" height="+height+" ";
str+="bgColor=#"+c+"'></layer>";
}
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("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="position:absolute; left:'+left+'; top:'+top+'; ';
code+= 'width:'+width+'; height:'+height+';" 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="dragLayer()"
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("parseInt(document.ids."+layerName+".fontSize)"
}
curSize += step;
var doc = document.layers[layerName];
doc.document.open("text/html"
doc.document.tags.FONT.textAlign = "center";
doc.document.tags.FONT.fontSize = curSize;
doc.document.write("<font color=red>"+text+"</font>"
doc.document.close();
}
}

timer = setTimeout("zoomIn('"+layerName+"','"+text+"',"+Max+","+step+","+speed+&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("parseInt(document.ids."+layerName+".fontSize)"
}
curSize -= step;
var doc = document.layers[layerName];
doc.document.open("text/html"
doc.document.tags.FONT.textAlign = "center";
doc.document.tags.FONT.fontSize = curSize;
doc.document.write("<font color=red face=times>"+text+"</font>"
doc.document.close();
}
}

timer = setTimeout("zoomOut('"+layerName+"','"+text+"',"+min+","+step+","+speed+&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 = "tomato"; // 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 = "";
var type_i = 0;
var typeMessage = "";

function typeIt(layerName, speed){

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

if(type_i >= typeComment.length){
type_i = 0;
typeMessage ="";
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="dragLayer()">
<div id="div1" style="position:absolute; z-index:1; left: 50px; top: 20px; background-color: #FFFFD7;">
<TABLE>
<TR>
<TD>Hai</TD>
</TR>
</TABLE>
</div>
</body>
<HTML>

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!

showing and hidding DIV's 1

joelmac

Programmer

elegidito

Programmer

xutopia

Programmer

Pragasam

Programmer

Similar threads

Part and Inventory Search

Sponsor