Closed Thread Icon

Preserved Topic: question about effect on homepage Pages that link to <a href="https://ozoneasylum.com/backlink?for=17845" title="Pages that link to Preserved Topic: question about effect on homepage" rel="nofollow" >Preserved Topic: question about effect on homepage\
 
Author Thread
riddim
Nervous Wreck (II) Inmate

From:
Insane since: Aug 2000

 posted posted 08-28-2000 10:41

On the homepage at www.bugimus.com clicking on the next and back links (the links look somewhat like « - x - » takes one to another part of the page but it may seem like its different pages being clicked altogether coz with every click the other parts of the page in other the div tags are hidden. My question is how is this achieved, preferabbly some one who has code for a page which is divided into 3 or 4 parts would be helpful. A simple view source doesnt help much as the page is loaded with too many java scripts so I dont know which ones are responsible for the effect and which ones arent.
mbridge
Paranoid (IV) Mad Scientist

From:
Insane since: Jun 2000

 posted posted 08-28-2000 16:24

Ok, this was originally from bitdamaged, I think...Anyway, it works really well for me.
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;

function show(layer){
eval(docObj + layer + styleObj + '.visibility = "visible"');
}

function hide(layer){
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}

So just put href="javascript:show('layername');" and the link will show the layer named layername.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

 posted posted 08-28-2000 19:24

There is a little bit missing there, you need these lines after the :
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;

if (nn){
docObj = "document.";
styleObj = "";
}
if (ie) {
docObj = "document.all."
styleObj = ".style"
}

What this will do is show and hide layers. What you do is make a couple of DIVs all absolutly positioned in one spot with all of them hidden except one. Then show and hide them on the links actually to expand on this it helps to have a clear function as well. something like this.

thelayers = new Array('DIV1','DIV2','DIV3','DIV4');
function clear(){
for (i=0;i<=thelayers.length;i++){
eval(docObj+'DIV'+i+styleObj+'.visibility = hidden');
}}

this will hide all the layers then you call this in your "show" script.

Here the whole thing looks like this.

nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;

if (nn){
docObj = "document.";
styleObj = "";
}
if (ie) {
docObj = "document.all."
styleObj = ".style"
}


//list all the layers you want to show/hide here
thelayers = new Array('DIV1','DIV2','DIV3','DIV4');
function clear(){
for (i=0;i<=thelayers.length;i++){
eval(docObj+'DIV'+i+styleObj+'.visibility = hidden');
}}

function show(layer){
eval(docObj + layer + styleObj + '.visibility = "visible"');
}

function hide(layer){
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}

You can see something like this at www.bitdamaged.com click on the "view the old site" link.

Use the menu.


Walking the Earth like Kane
mbridge
Paranoid (IV) Mad Scientist

From:
Insane since: Jun 2000

 posted posted 08-28-2000 20:09

haha, I forgot to paste in half the code, sorry about that.
riddim
Nervous Wreck (II) Inmate

From:
Insane since: Aug 2000

 posted posted 08-29-2000 01:13

thenx for the code mbridge and bitdamaged but it cant be simply pasted in a html page and something which might be simple to y'all like listing layers is really hard for me. Am not that good with Java so coding the rest myself would be next to impossible. Is there any way any of y'all would put in the rest of the code for me. A simple "this is where text part 1, 2, 3 and 4 goes" with links to the other 3 parts from the 1st visible layer would be helpful and appreciated. At the time of writing this bitdamaged.com is down so I cant check it out to see the code. TIA.
mbridge
Paranoid (IV) Mad Scientist

From:
Insane since: Jun 2000

 posted posted 08-29-2000 03:43

<html>
<head>
<title>Untitled Document</title>
<script>
function setup() {
//detects browser and set variables
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;

if (nn) {
docObj = 'document.liquidv1.document.'
styleObj = '';
gallery = document.galleryDrop;
y_pos = parseInt(gallery.top)
}

if (ie) {
docObj = 'document.all.';
styleObj = '.style';
gallery = galleryDrop.style;
y_pos = parseInt(gallery.pixelTop)
}
}

function show(layer){
//shows a specified layer
eval(docObj + layer + styleObj + '.visibility = "visible"');
}

function hide(layer){
//hides a specified layer
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}
</script>
<style type="text/css">
/* Defines css properties for each layer */
#firstDiv
{position: absolute; top: 50px; left: 50px; z-index: 0; visibility: visible; width: 250; height: 250;}
#secondDiv
{position: absolute; top: 50px; left: 50px; z-index: 0; visibility: hidden; width: 250; height: 250;}
#thirdDiv
{position: absolute; top: 50px; left: 50px; z-index: 0; visibility: hidden; width: 250; height: 250;}
</style>
</head>

<body bgcolor="#FFFFFF" onLoad="setup()">
<div id="firstDiv">
<p><b>First Layer</b></p>
<p><a href="javascript:show('thirdDiv'); hide('firstDiv');">previous</a></p>
<p><a href="javascript:show('secondDiv'); hide('firstDiv');">next</a></p>
</div>

<div id="secondDiv">
<p><b>Second Layer</b></p>
<p><a href="javascript:show('firstDiv'); hide('secondDiv');">previous</a></p>
<p><a href="javascript:show('thirdDiv'); hide('secondDiv');">next</a></p>
</div>

<div id="thirdDiv">
<p><b>Third Layer</b></p>
<p><a href="javascript:show('secondDiv'); hide('thirdDiv');">previous</a></p>
<p><a href="javascript:show('firstDiv'); hide('thirdDiv');">next</a></p>
</div>
</body>
</html>

You should be able to figure it out from the code. The only thing you would have to change is the html, in order to format it the way you like. Bitdamaged or slime, look it over quickly and make sure I didn't make any mistakes please.
riddim
Nervous Wreck (II) Inmate

From:
Insane since: Aug 2000

 posted posted 08-29-2000 04:34

Thenx alot mbridge : )
Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

 posted posted 08-30-2000 01:33

mbridge,

there were just a couple of small problems in the code. They were in the setup function, I modified it slightly and if riddim plugs this one in it will work fine:

function setup() {
//detects browser and set variables
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;

if (nn) {
//docObj = 'document.liquidv1.document.'
docObj = 'document.'
styleObj = '';
//gallery = document.galleryDrop;
//y_pos = parseInt(gallery.top)
}

if (ie) {
docObj = 'document.all.';
styleObj = '.style';
//gallery = galleryDrop.style;
//y_pos = parseInt(gallery.pixelTop)
}
}

The gallery and y_pos lines were not needed. And for nn, the "document.liquidv1." had to go.
mbridge
Paranoid (IV) Mad Scientist

From:
Insane since: Jun 2000

 posted posted 08-30-2000 01:49

oh man, I didn't mean to leave those lines in, those were for a site I was working on, I guess I pasted too much of the code, arg! Two mistakes in one thread!
riddim
Nervous Wreck (II) Inmate

From:
Insane since: Aug 2000

 posted posted 08-30-2000 20:30

Thenx Bugimus, I found out about the problem coz when I tried lookin it up in Frontpage it gave me a script error. But other than that it functioned well.
Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

 posted posted 08-30-2000 23:38

riddum,

On my homepage I actually use an alternate method of displaying content within a layer. What I am doing is dynamically writing the content into the layer. The other solution mbridge gave you is a very good way to do it too. I actually would recommend that way if you're new to scripting.

The reason I am doing it this way is because my layers move around. In order to save memory usage I define only two layers that will move around and write several pages into only those two layers.

If you are interested in playing around with dynamically writing content into a layer, take a look at this code:

<html>
<head>
<title>dHTML Example, Dynamically writing content to a div (layer). Author Bugimus</title>
<script language="JavaScript1.2">
<!--

// Determine browser.
if( document.images ) {
NN4 = (document.layers); // Netscape Navigator 4+
IE4 = (document.all); // Internet Explorer 4+
GN4 = (NN4 &#0124; &#0124; IE4); // Generation 4 browser
} else { GN4 = false; } // Lame

// Define each page of text to write into the div in the following array.
var div_content = new Array();

div_content[0]="<font size=+2>1.</font> This is the content for div number one. You can place html tags in here like <b>bold</b> and <i>italics</i>.<br><br>";

div_content[1]="<font size=+2>2.</font> This is the content for div number two.<br><br>"+
"You can also place other HTML tags in here but be careful when using the quotes. If you need to use a quote like in an href tag, "+
"make sure you preceed it with a backslash like this <font color=red>\\\"</font>. The backslash before the double quote will prevent the browser from getting confused as to when the string ends.";

function showText(pagenumber) {
// As usual, there are two completely different ways of doing this for IE and NN. Just take a
// look at the two methods here to see how to do it.
// We need to put a table into the div for Netscape to keep the same width and height.
// For this demo let's just make it the same for IE and NN using the following two variables.
tablebegin="<table width=300 height=200 border=1 bgcolor=yellow cellpadding=15><tr><td valign=top>";
tableend="</td></tr></table>";
divname="contentDiv";
if(NN4) {
eval("document."+divname+".document.writeln(tablebegin)");
eval("document."+divname+".document.writeln(div_content[pagenumber])");
eval("document."+divname+".document.writeln(tableend)");
eval("document."+divname+".document.close()");
} else {
eval("document.all."+divname+".innerHTML = tablebegin+div_content[pagenumber]+tableend");
}
}
//-->
</SCRIPT>

</head>

<body>
<b>Click the page links to dynamically write content into the layer on the right.</b><br><br>
<a href="javascript:showText(0);">Page 1</a><br>
<a href="javascript:showText(1);">Page 2</a><br>

<div id="contentDiv" style="position: absolute; left: 150; top: 50;">
<table width=300 height=200 border=1 bgcolor=yellow cellpadding=15><tr><td valign=top>
This is the initial content for this div.&nbsp; Click one of the links to switch to different pages.
</td></tr></table>
</div>

</body>
</html>

« Backwards — Onwards »

Show Forum Drop Down Menu