Solved

Netscape 4 Layer/Div

Posted on 2000-05-04
9
252 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
ID: 2776670
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
ID: 2776675
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
ID: 2776779
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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 

Author Comment

by:usagi88
ID: 2776816
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
 

Author Comment

by:usagi88
ID: 2776840
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
ID: 2777158
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
ID: 2799783
The problem is that NN only wants to edit {position: absolute} div's in a descent way.
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2799952
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
ID: 2808440
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
coldfusion grab more the one form field to make an insert 3 41
HTML Relative path 9 32
How to use embargo Date/time in php 29 38
Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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