Solved

Netscape 4 Layer/Div

Posted on 2000-05-04
9
249 Views
Last Modified: 2010-04-09
Hi I tried to change the text inside a <div> in Netscape 4 using Javascript.

<div id="layer1" style="position:relative;width:200px;height:200px;">
some text one</div>

My Javascript:
document.layers["layer1"].document.open();
document.layers["layer1"].document.write("my text here");
document.layers["layer1"].document.close();

The script gets activated but the text just disappear and the NS4 javascript console complaints about "layer1 not defined". Doesn't NS4 support <DIV> tag??

Then I tried using <layer> instead of <div>:
<layer id="layer1" style="position:relative;width:200px;height:200px;">
some text one</layer>

Now it changes correctly but the layer always align to the top left corner of the page, the relative positioning doesn't work! It's not possible for me define top and left position in this case as the font size changes, the layer can get overlap with other graphics.

Please help!
0
Comment
Question by:usagi88
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 8

Expert Comment

by:xabi
Comment Utility
This works for me under NN:

<html>
<head><title>Untitled</title>
<SCRIPT LANGUAJE="javascript">
<!--
function init() {
  document.layers["layer1"].document.open();
  document.layers["layer1"].document.write("my text here");
  document.layers["layer1"].document.close();
}
// -->
</SCRIPT>
<style TYPE="text/css">
<!--
 #layer1 {position:relative;width:200;height:200;}
//-->
</style>
</head>
<body>
<div id="layer1" style="position:relative;width:200px;height:200px;"> some text one</div>
<a href="javascript:init()">Click here</a>
</body>
</html>
</html>

xabi
0
 
LVL 8

Expert Comment

by:xabi
Comment Utility
better:

<html>
<head><title>Untitled</title>
<SCRIPT LANGUAJE="javascript">
<!--
function init() {
  document.layers["layer1"].document.open();
  document.layers["layer1"].document.write("my text here");
  document.layers["layer1"].document.close();
}
// -->
</SCRIPT>
<style TYPE="text/css">
<!--
 #layer1 {position:relative;width:200;height:200;}
//-->
</style>
</head>
<body>
<div id="layer1"> some text one</div>
<a href="javascript:init()">Click here</a>
</body>
</html>
</html>

xabi
0
 
LVL 8

Accepted Solution

by:
jbirk earned 100 total points
Comment Utility
xabi's example didn't work in NN 4.7 for me.  It changed the text but after that the link dissapeared and the text was partially cut off at the top and left (looked kind of wierd).  In my experience you won't be able to get netscape to change the contents of a layer reliably unless you use absolute positioning.  Netscape just needs this for some reason.  

Are you sure there's no other way to lay out your page so overlapping doesn't occur?  You can always use tables and invisible 1X1 images to force the other content to push off to the side.  And using a table in the layer will get that text to wrap.

-Josh
0
 

Author Comment

by:usagi88
Comment Utility
Hi, I tried your codes. When I click the link, the JS runs and the text changes, but then it appears further up and more to the left such that about half the sentence is hidden (since it's already at the top left corner) like the sentence 'falls' half-way out of the browser... hope u get what I mean.

So when I added a "<P>SOME TITLE<P>" in between <body> and <div> tag so that the <div> text appears after the title. Now when I click the link to run the JS, the whole div just disappears. Do u know why??
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:usagi88
Comment Utility
Oh, I saw jbirk's comments only after I post mine. So that means that's no other way out than what jbirk suggests....?

Thanks for all ur help anyway, and one more silly qn: how should I grade this question?? ;)
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Well, that depends.  If you use my suggestion you should accept my comment as an answer.  If you prefer to pursue xabi's suggestion and try to get them working, though I have serious doubts on a reliable solution, then you should wait for more input from xabi or other experts.

If go with my solution, I can help you make your page layout right if you want.
-Josh
0
 
LVL 8

Expert Comment

by:Kobe_Lenjou
Comment Utility
The problem is that NN only wants to edit {position: absolute} div's in a descent way.
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
How's it coming usaqi88?  Have you given up on another way to do this?  I'm sure that the only reliable way is with absolutely positioned layers.

-Josh
0
 

Author Comment

by:usagi88
Comment Utility
Thanks Jbirk for your help. I've given up on making it work on NN for the moment, I will continue to experiment when I have more time on my hands.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now