www.webdeveloper.com
Results 1 to 14 of 14

Thread: JavaScript integrated CSS

  1. #1
    Join Date
    Dec 2002
    Posts
    42

    Talking JavaScript integrated CSS

    Okay, I'm working on my school website, and I have this page called rainforest.html that has a dark background. So, I put the title and textarea in two DIVs. The background color is transparent at first, but I have these onMouseOver and onMouseOut events (JavaScript) in the divs (this is an example):

    <div style="background-color:transparent;" onMouseOver="this.style.background='white';" onMouseOut="this.style.background.color='transparent';">

    So, what this does is it blocks out the background. But the problem is, I tried it in Netscape Communicator at my school (we have Netscape Communicator and Internet Explorer), and it does not work in Netscape! Why is this happening?

    The page has not been updated yet; I just made this change on the date of 4/1/03. If you want to see how it is currently, visit "http://b-bp.k12.ny.us/jwy%20web%20pages/rainforest.html (click here). Originally, I had done the stupidest of all things (not on the actual website, though): I had made a single image of a white block that blocks out the background when the user mouses over. The problem was, it was an image separate from the div, and each web browser (even the same ones!) placed the image differently on the page! (However, it showed up on both browsers at least.) And then it hit me, today (4/1/03), that I should change the style of the div and ditch the white image.

    Does anyone know how to solve my problem? I'll give you an update once the page has been uploaded.
    Mark E.

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    Please identify which version of NS you are having problems with.

  3. #3
    Join Date
    Dec 2002
    Posts
    42

    Thumbs up

    Communicator; a pretty old one. That's all I know right now.
    Mark E.

  4. #4
    Join Date
    Nov 2002
    Posts
    4,473
    NS 4?

    That version does not support a "style" parameter for objects.

    I fixed the JS errors in your current page. See attached text file.
    Attached Files Attached Files

  5. #5
    Join Date
    Dec 2002
    Posts
    42

    Thumbs down

    No, no, that's the old one. The one I just edited has yet to be uploaded.

    That's impossible!! How could a web browser NOT support css??
    Mark E.

  6. #6
    Join Date
    Nov 2002
    Posts
    4,473
    No, no, that's the old one
    Never the less, it had errors it it, and I fixed them for you.
    That's impossible!! How could a web browser NOT support css??
    I didn't say it didn't support CSS, I said it doesn't support the "style" property. NS 4 was the first dynamic browser with CSS support. It supports a subset of the CSS1 specification. NS 4 predates this specification. Also, there are many proprietary methods and objects that are not in that specification.

    NS 4 also does not automatically assign mouse events to every object. Infact, if the object is not positioned, you can only use script on things like images and forms.

    Sometimes it is easy, and then sometimes you have to stand on your head. For example, give this a try:
    Code:
    <a href="#" 
    style="position:relative" 
    id="a1" 
    onclick="return false" 
    onmouseover="if(document.layers){document.a1.bgColor='lightgrey'}else{this.style.backgroundColor='lightgrey'}" 
    onmouseout="if(document.layers){document.a1.bgColor=window.document.bgColor}else{this.style.backgroundColor=''}">This will change if you mouse over it</a>

  7. #7
    Join Date
    Dec 2002
    Posts
    42
    Originally posted by gil davis
    NS 4 was the first dynamic browser with CSS support. It supports a subset of the CSS1 specification. NS 4 predates this specification. Also, there are many proprietary methods and objects that are not in that specification.

    NS 4 also does not automatically assign mouse events to every object. Infact, if the object is not positioned, you can only use script on things like images and forms.
    I didn't quite know what you mean, but right now I am in my school. Here is the source code for the rainforest page I tried updating.

    <HTML>
    <HEAD>
    <META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0 Mac">
    <META HTTP-EQUIV="Content-Language" CONTENT="en-us">
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
    <META NAME="GENERATOR" CONTENT="Microsoft FrontPage 4.0">
    <META NAME="ProgId" CONTENT="FrontPage.Editor.Document">
    <TITLE>Rainforest T-Shirt Sales</TITLE>
    <META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=1.0,Transition=23)">
    <SCRIPT>
    function out_message(){
    window.status="Come and support the Earth Foundation!"
    }
    out_message()
    </SCRIPT>
    </HEAD>
    <BODY BACKGROUND="Web%20Graphics/rainforstbg.jpg">

    <P>&nbsp;</P>

    <div name=title id=title onMouseOver="this.style.background='rgb(5,200,0)';" onMouseOut="this.style.background='transparent'">

    <P style="word-spacing: 25; background-color: #00FFFF; color:
    #00FFFF"><CENTER><FONT COLOR="#00ff00" SIZE="+4">R</FONT> <FONT
    COLOR="#ff0000" SIZE="+4">A</FONT> <FONT COLOR="#ffff00" SIZE="+4">I
    </FONT><FONT COLOR="#0000ff" SIZE="+4">N</FONT><FONT COLOR="#ffff00"
    SIZE="+4"> </FONT><FONT COLOR="#008000" SIZE="+4">F</FONT><FONT
    COLOR="#ffff00" SIZE="+4"> </FONT><FONT COLOR="#0000ff" SIZE="+4">O
    </FONT><FONT COLOR="#ff6600" SIZE="+4">R</FONT><FONT COLOR="#0000ff"
    SIZE="+4"> </FONT><FONT COLOR="#ff3399" SIZE="+4">E</FONT><FONT
    COLOR="#0000ff" SIZE="+4"> </FONT><FONT COLOR="#00ff00" SIZE="+4">S
    </FONT><FONT COLOR="#ff3300" SIZE="+4">T</FONT></CENTER></P>

    <P style="word-spacing: 25; background-color: #00FFFF; color:
    #00FFFF"><CENTER><FONT COLOR="#00ff00" SIZE="+4">T</FONT> <FONT
    COLOR="#ff0000" SIZE="+4">-</FONT> <FONT COLOR="#ffff00" SIZE="+4">S
    </FONT><FONT COLOR="#ff6600" SIZE="+4">H</FONT><FONT COLOR="#ffff00"
    SIZE="+4"> </FONT><FONT COLOR="#008000" SIZE="+4">I</FONT><FONT
    COLOR="#ffff00" SIZE="+4"> </FONT><FONT COLOR="#ff6600" SIZE="+4">R
    </FONT><FONT COLOR="#ff3399" SIZE="+4">T</FONT></CENTER></P>

    <P style="word-spacing: 25; background-color: #00FFFF; color:
    #00FFFF"><CENTER><FONT COLOR="#00ff00" SIZE="+4">S</FONT> <FONT
    COLOR="#ff0000" SIZE="+4">A</FONT> <FONT COLOR="#ffff00" SIZE="+4">L
    </FONT><FONT COLOR="#0000ff" SIZE="+4">E</FONT><FONT COLOR="#ffff00"
    SIZE="+4"> </FONT><FONT COLOR="#008000" SIZE="+4">S</FONT></CENTER></P>

    </div>

    <P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</P>

    <div id="textarea" name="textarea" style="z-Index:4" onMouseOver="this.style.background='white';this.style.transparency='opague';" onMouseOut="this.style.background='transparent';this.style.transparency='transparent';">

    <P style="text-indent: 50; line-height: 150%;"><FONT SIZE="+2">Starting
    right befo<!--SELECTION--><!--/SELECTION-->re February vacation,
    the Ecology Club will be having another rainforest T-shirt sale.
    Come and pick up an application from Mr. Muller in room 219. You
    can buy cool t-shirts with animals from a wide selection in a
    catalogue, and sell them to other people.</FONT></P>

    <P style="text-indent: 50; line-height: 150%"><FONT SIZE="+2">Please
    help our rainforest! Every t-shirt you buy will help us to adopt
    more acres of rainforest (1 acre for every 10 t-shirts). The rainforest
    needs all the help it can get. Once you have obtained a form and
    a catalogue, please sell t-shirts to all the people you can! Each
    t-shirt costs $13.50. I would assume that we should still have
    &quot;rewards&quot; (Mr. Muller's baby cries, teachers and members
    dressing up as popular figures, etc.). If you don't have an order
    form, you're in luck because I scanned a copy of the form and
    posted it on this site on a PDF (Portable Document File) file.
    (You will need <A HREF="http://www.adobe.com/products/acrobat/readstep.html"
    onMouseOver="window.status='Click here to download a free version of Adobe
    Acrobat Reader.'" onMouseOut="out_message()">Adobe Acrobat Reader</A>
    to view this file.) For information, you can visit the <A HREF="http://www.earthfound.com/"
    onMouseOver="window.status='Click here to
    visit the Earth Foundation Website.'" onMouseOut="out_message()">Earth
    Foundation website</A>. Unfortunately, neither I nor this site
    can provide you with a catalogue.</FONT></P>

    <P style="text-indent: 50; line-height: 150%"><FONT SIZE="+2">I
    regret to say that this was planned at the last minute.&nbsp;
    We apologize for the short notice, but Mr. Muller will be handing
    out forms and catalogues on Friday, February 14, right before
    vacation. If you didn't get one, you can receive them when we
    return from vacation, and you can print an <A HREF="T-Shirt%20Order%20Form.PDF">order
    form</A> (not a catalogue) using the PDF file.</FONT></P>

    <P style="text-indent: 50; line-height: 150%"><FONT SIZE="+2">We
    are also in the process of planning sales for the Spring and for
    Earth Day.</FONT></P>

    <P style="text-indent: 50; line-height: 150%"><FONT SIZE="+2">Thank
    you for your support in saving the rainforest. Happy selling!</FONT></P>

    <P style="text-indent: 0"><CENTER><A HREF="http://www.b-bp.k12.ny.us/jwy%20web%20pages/Ecology.html"
    TITLE="Ecology Club page" onMouseOver="window.status='Click here to visit the
    Ecology Club webpage.'" onMouseOut="out_message()" onMouseOut="window.status='Come support the Earth Foundation!'"><FONT
    SIZE="+1">Ecology Club page</FONT></A></CENTER></P>

    <P style="text-indent: 0"><CENTER><A HREF="JWY%20home%20page.html"
    TITLE="Home Page" onMouseOver="window.status='Click here to go to our home
    page.'" onMouseOut="out_message()"><FONT SIZE="+1">Home</FONT></A></CENTER></P>

    <P></div><script></script>

    </BODY>
    </HTML>
    Attached Images Attached Images
    Mark E.

  8. #8
    Join Date
    Nov 2002
    Posts
    4,473
    <div name=title id=title
    onMouseOver="this.style.background='rgb(5,200,0)';"
    onMouseOut="this.style.background='transparent'">
    1.) You do not need to give things a name and an id.
    2.) You need to assign a style of "position: absolute" for NS 4 to allow script access to a div. That causes you to place things in specific locations in your page.
    3.) You have to "stand on your head" to get NS 4 to do mouse events on a div.
    4.) NS 4 does not support a background called "transparent".
    5.) You should not use a reserved word ("title") for a name or id (there is already a thing called document.title in JavaScript).

  9. #9
    Join Date
    Dec 2002
    Posts
    42
    Originally posted by gil davis
    1.) You do not need to give things a name and an id.
    Okay, no prob.


    2.) You need to assign a style of "position: absolute" for NS 4 to allow script access to a div. That causes you to place things in specific locations in your page.
    But I want the div to be positioned as "text on the page" (I think this is the position:relative style attribute); I would rather not position it absolutely on the page because the browser can move it around to wherever it wants to, and each browser does it differently. That's what made me ditch the white block image and use the "background" style property instead.


    3.) You have to "stand on your head" to get NS 4 to do mouse events on a div.
    OK, but what action do I acually have to take other that this?


    4.) NS 4 does not support a background called "transparent".
    Why not, and how do I work around that? There has to be a style property value for "background" that Netscape supports.


    5.) You should not use a reserved word ("title") for a name or id (there is already a thing called document.title in JavaScript).
    Very good point.


    OK, so please either tell me the corrections or send me a source file I need to work around these problems (2, 3, and 4) so that my page will work correctly.

    P.S. I am sending you this from my school again, and I have just checked our version of Netscape (which we never really use): Communicator 4.7.

    P.S.S. Just a side question: My teacher just informed me that, because rainforestbg.jpg is a JPEG file, it is not showing up on the internet. But, when I preview it from the webpage making program, it shows up (I preview it in the actual Internet Explorer browser). She says it needs to be a gif image. If this is not caused by the browser itself, then is it caused by the server we use?
    Mark E.

  10. #10
    Join Date
    Nov 2002
    Posts
    4,473
    Originally posted by MarkE
    But I want the div to be positioned as "text on the page" (I think this is the position:relative style attribute); I would rather not position it absolutely on the page because the browser can move it around to wherever it wants to, and each browser does it differently. That's what made me ditch the white block image and use the "background" style property instead.
    Hey, I didn't write the browser, I just know the rules. You cannot have any mouse over/out on a DIV unless it is "position: absolute". And then you still have to "stand on your head".
    OK, but what action do I acually have to take other that this?
    My only possible answer would include "position: absolute", so there is no answer.
    Why not, and how do I work around that? There has to be a style property value for "background" that Netscape supports.
    I don't understand why you cannot get this concept. It is called bgColor, and it is a direct property of an object. Like
    Code:
    document.layers["myLayer"].bgColor = green;
    OK, so please either tell me the corrections or send me a source file I need to work around these problems (2, 3, and 4) so that my page will work correctly.
    Your request is not within the realm of possibilities for NS 4.
    My teacher just informed me that, because rainforestbg.jpg is a JPEG file, it is not showing up on the internet. But, when I preview it from the webpage making program, it shows up (I preview it in the actual Internet Explorer browser). She says it needs to be a gif image. If this is not caused by the browser itself, then is it caused by the server we use?
    Apparently. Unless you don't have the file in the right directory. I would tend to believe your teacher.

    If you really want to learn about things that you can do with NS 4 (probably a BWOT), try this link:

    http://developer.netscape.com/docs/m...html/index.htm
    Last edited by gil davis; 04-04-2003 at 03:31 PM.

  11. #11
    Join Date
    Dec 2002
    Posts
    42
    Ok, I see that Netscape 4.7 does not support the background style property. So what direct property (bgColor) property do I use? Would it be 'div bgColor=""'?

    And you said that it does not support mouseover events for divs... unless they are positioned absolutely. Got it. If this still doesn't work, I will need to use drastic measures: I will actually have to put the mouseover event in a JavaScript like this:

    document.getElementByTagName('div')[0].onmouseover=this.bgColor= // and then I'd have whatever bgColor value I need.

    Whoops, that's right, Netscape doesn't support getElementById or getElementByTagName.

    Ugh, now I will have to give the div a name so that I can identify it correctly (e.g. "textareadiv"):

    document.textareadiv.onmouseover=this.bgColor= // and the value for a transparent background.

    Even this may not work!

    Netscape sure is a pain in the neck!

    So the style background property for a transparent background is "transparent", but what is the direct bgColor property value (not in the style attribute) for a transparent background?
    Last edited by MarkE; 04-05-2003 at 03:44 PM.
    Mark E.

  12. #12
    Join Date
    Nov 2002
    Posts
    4,473
    Here is a short example of how you can flow an absolute DIV with the document. The problem becomes establishing the width and height of the DIV. I cheated and used a table.
    Code:
    <center>
    <table border>
    <tr>
    <td width=100 style="position: relative"><div id="d1" style="position: absolute">This is a DIV test
    <script>
    this.onmouseover = function () {this.bgColor = "lightgrey";}
    this.onmouseout  = function () {this.bgColor = null;}
    </script></div></td>
    <td>This is not</td>
    <td>This is not</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </center>
    what direct property (bgColor) property do I use?
    Code:
    document.layerName.bgColor = "whatever";
    I will have to give the div a name
    No, an ID.
    what is the direct bgColor property value (not in the style attribute) for a transparent background?
    Null (not a string, a constant).

  13. #13
    Join Date
    Dec 2002
    Posts
    42

    Thumbs up

    Alright, I'm catching your drift. But...


    <div id="d1" style="position: absolute">This is a DIV test
    <script>
    this.onmouseover = function () {this.bgColor = "lightgrey";}
    this.onmouseout = function () {this.bgColor = null;}
    </script></div>
    WOW!!! You mean you can actually use the "this" keyword to refer to the tag that came right before the script? How would it know you're talking about the div named "d1"?
    Mark E.

  14. #14
    Join Date
    Nov 2002
    Posts
    4,473
    The script must be inside the DIV. In this case, "this" refers to the document that the script is in.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles