PDA

Click to See Complete Forum and Search --> : DHTML <div> stuff, cross browser pains...

pnj
Dec 19th, 2000, 02:26 PM
AARRRGGG!!
I have this code that works in both browser w/ the exception that in Netscape it 'hides' my <a href>text.
have a look at this in IE then Netscape to see what I meen.

here is my code.

<HTML>
<HEAD>
</HEAD>
<BODY>

<table align="right">
<tr>
<td><a href="#" onMouseOver="changeContent(this,'<FONT COLOR=red>Current events at north!</FONT>')"
onMouseOut="changeContent(this,'Move the mouse pointer over this text')">North</a></td>
</tr>
<tr>
<td><a href="#" onMouseOver="changeContent(this,'<FONT COLOR=red>Current events at south</FONT>')"
onMouseOut="changeContent(this,'Move the mouse pointer over this text')">South</a></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeContent(what,text) {
if (document.all)
object1.innerHTML = text;
else if (document.layers) {
document.open();
document.write(text);
document.close();
}
}
//-->
</SCRIPT>

<DIV ID="object1">
Current events show here!
</DIV>
</BODY>
</HTML>
if you have any suggestions that would be great.

thanks and happy holidays
Mark Sreeves
Dec 20th, 2000, 02:37 AM
Your document.write is overwriting the contents of the page
pnj
Dec 20th, 2000, 10:03 AM
Hi Mark,
how do I fix it? I know you had given me some othere very cool code that worked but I liked this one becouse it passes variable into the function.
I don't know this stuff well enough to marry the two version and make one killer version.

the reason I like the passing variables version is that this will be used in an ASP page and those variables will be sent in from a database.

either way if the code works I don't care I would just like it to be as short as possible.

thanks again Mark
Mark Sreeves
Dec 21st, 2000, 08:31 AM
I still think hiding/showing layers would be the easiest way


have a look at this article:

http://developer.irt.org/script/133.htm
pnj
Dec 21st, 2000, 11:55 AM
Mark,
that code is hard for me to decifer.
here is the code you sent me. as you see I have four different versions of text I need to show up.
The only way I know how to do this is to write a new function for each <a href>.I think that is to much code.
have a look at my code(your code, really) and see if you think it can be shortend.
**************************************

<HTML>
<HEAD>
<script language=javascript>
var ntext;
var otext;
var North;
var South;
var Central;
var SVI;
function init()
{
if (document.all) {ntext = object1.style}
if (document.all) {otext = object2.style}
if (document.layers) {ntext = document.object1}
if (document.layers) {otext = document.object2}
}


function oldText()
{
otext.visibility = 'hidden';
ntext.visibility = 'visible';
}

function newText()
{
ntext.visibility = 'hidden';
otext.visibility = 'visible';
}
//start of north current events
function oldTextNorth()
{
var ntext;
var otext;
if (document.all) {ntext = object1.style}
if (document.all) {otext = object3.style}
if (document.layers) {ntext = document.object1}
if (document.layers) {otext = document.object3}
otext.visibility = 'hidden';
ntext.visibility = 'visible';
}

function newTextNorth()

{
var ntext;
var otext;
if (document.all) {ntext = object1.style}
if (document.all) {otext = object3.style}
if (document.layers) {ntext = document.object1}
if (document.layers) {otext = document.object3}
ntext.visibility = 'hidden';
otext.visibility = 'visible';
}


</script>
</HEAD>
<BODY onLoad="init()" vlink="red">
<a href="#" onMouseover="newText()" onMouseout="oldText()">click here</A>
<a href="#" onMouseover="newTextNorth()" onMouseout="oldTextNorth()">North</A>
<a href="#" onMouseover="newText()" onMouseout="oldText()">South</A>
<a href="#" onMouseover="newText()" onMouseout="oldText()">Central</A>

<div ID="object1" STYLE="position:absolute;top:10;left:270">stuff</div>
<div ID="object2" STYLE="position:absolute;top:10;left:270;visibility:hidden">new text</div>
<div ID="object3" STYLE="position:absolute;top:10;left:570;visibility:hidden">North</div>
<div ID="object4" STYLE="position:absolute;top:10;left:270;visibility:hidden">South Current Events</div>
<div ID="object5" STYLE="position:absolute;top:10;left:270;visibility:hidden">Central Current Events</div>

</BODY>
</HTML>
*****************************************
right now I only have the 'newTextNorth' and the newText function working. but you can see where I would need to write two more functions for South and Central.
it seems like I should be able to have one function and pass in the text I would like to show up...
I just don't how to accomplish this.

thanks for your help Mark
Mark Sreeves
Dec 22nd, 2000, 02:31 AM
That's YOUR code now!

I put oText and Ntext at the top to make them 'global' so you dont need

var ntext;
var otext;
if (document.all) {ntext = object1.style}
if (document.all) {otext = object3.style}
if (document.layers) {ntext = document.object1}
if (document.layers) {otext = document.object3}

in every function.



have a look at this page. I think it might be simular to what you want to do:

http://www.bratta.com/dhtml/scripts.asp?url=scripts/scripts.asp?id=27&ac=6&order=created
pnj
Dec 22nd, 2000, 10:28 AM
thanks Mark,
I just took a quick glance at that page and the source, it looks like it should work perfect.
I would take a closer look but I got the day off work and it's snowing in the mountains.:)

thanks again
happy holidays