SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Member gratiot's Avatar
    Join Date
    Jan 2003
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross-Browser Javascript/CSS

    I have spent several hours combing through sitepointforum.com and other websites looking for the answer to this issue. I need the following code to work in at least Netscape 7.1 if not earlier versions. My main issue has been using (this) so that I can edit the current objects style, even though there are several cells with the same style identifier. This code works in IE, I need to know how to get it to work in Netscape.

    Thanks,
    Mike

    Code:
     
    <html>
    <head>
    <style type="text/css">
    #startmnu {position:absolute;
    	width:100px;
    	height:200px;
    	left:10px;
    	top:10px;
    	background-color:#333333;
    	border:1px solid #ffffff;
    	z-index:1000;}
    #mnuhr {width:90%;height:1px;}
    #mnutxtcll {font-family:Trebuchet MS;
    	font-size:9pt;
    	font-weight:bold;
    	text-align:center;
    	text-transform:uppercase;
    	color:#ffffff;
    	width:100px;
    	height:20px;
    	vertical-align:middle;
    	background-color:#333333;
    	cursor:pointer;}
    </style>
    <script language="JavaScript" type="text/javascript">
    function InvertColors(tdObj)
      { var bckgrdclr = tdObj.currentStyle["backgroundColor"];
    	var txtclr = tdObj.currentStyle["color"];
     
     tdObj.style.backgroundColor = txtclr;
     tdObj.style.color = bckgrdclr;
      }
    </script>
    </head>
    <table id="startmnu" cellpadding="0" cellspacing="0" border="0">
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Home</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Documents</td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Favorites</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Programs</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Settings</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
    </table>
    </html>

  2. #2
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this piece.

    Code:
    <script type="text/javascript">
    function InvertColors(obj) {
      var tmp = obj.style.backgroundColor;
      obj.style.backgroundColor = obj.style.color;
      obj.style.color = tmp;
    }
    </script>
    PS. Don't use same id atribute value on multiple elements. Element ID must be unique.
    Annotations support for PHP5
    TC/OPT™ Group Leader

  3. #3
    SitePoint Member gratiot's Avatar
    Join Date
    Jan 2003
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the code you provided and it did not work for Netscape.

    Is there an alternative to using the same id attribute on multiple elements, but not have to write separate css for each element? If there is that would resolve my issue.

  4. #4
    SitePoint Member
    Join Date
    Nov 2003
    Location
    cph@dk
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <style>
    .foo {
    /* style here */
    }
    </style>

    <div class="foo" />

  5. #5
    SitePoint Member
    Join Date
    Nov 2003
    Location
    cph@dk
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this script :
    Code:
    <html>
    <head>
    <style type="text/css">
    #startmnu {position:absolute;
    	width:100px;
    	height:200px;
    	left:10px;
    	top:10px;
    	background-color:#333333;
    	border:1px solid #ffffff;
    	z-index:1000;}
    .mnuhr {width:90%;height:1px;}
    .mnutxtcll, .mnutxtcllHover {
    	font-family:Trebuchet MS;
    	font-size:9pt;
    	font-weight:bold;
    	text-align:center;
    	text-transform:uppercase;
    	color:#ffffff;
    	width:100px;
    	height:20px;
    	vertical-align:middle;
    	background-color:#333333;
    	cursor:pointer;
    }
    .mnutxtcllHover {
    	background-color:#ffffff;
    	color:#333333;
    }
    </style>
    <script type="text/javascript">
    // alternates style on mouseover / mouseout
    function hoverStyle(obj, mode)
    {
    	var cname = obj.className;
    	if (typeof(cname) == "Undefined") return ;
    	
    	if (cname.length > 5) {
    		var is_hover = cname.substring(cname.length-5,cname.length) == "Hover";
    	} else {
    		var is_hover = false;
    	}
    
    	if (mode == null) {
    		if (is_hover) {
    			obj.className = cname.substring(0,cname.length-5);
    		} else {
    			obj.className = cname + "Hover";
    		}
    	} else if (mode == 'over') {
    		if (!is_hover)
    			obj.className = cname + "Hover";
    	} else if (mode == 'out') {
    		if (is_hover)
    			obj.className = cname.substring(0,cname.length-5);
    	}
    }
    </script>
    </head>
    <table id="startmnu" cellpadding="0" cellspacing="0" border="0">
      <tr><td><hr class="mnuhr" /></td></tr>
      <tr><td class="mnutxtcll" onMouseOver="hoverStyle(this)" onMouseOut="hoverStyle(this)">Home</td></tr>
      <tr><td><hr class="mnuhr" /></td></tr>
      <tr><td class="mnutxtcll" onMouseOver="hoverStyle(this)" onMouseOut="hoverStyle(this)">Documents</td></tr>
      <tr><td class="mnutxtcll" onMouseOver="hoverStyle(this)" onMouseOut="hoverStyle(this)">Favorites</td></tr>
      <tr><td><hr class="mnuhr" /></td></tr>
      <tr><td class="mnutxtcll" onMouseOver="hoverStyle(this)" onMouseOut="hoverStyle(this)">Programs</td></tr>
      <tr><td><hr class="mnuhr" /></td></tr>
      <tr><td class="mnutxtcll" onMouseOver="hoverStyle(this)" onMouseOut="hoverStyle(this)">Settings</td></tr>
      <tr><td><hr class="mnuhr" /></td></tr>
    </table>
    </html>

  6. #6
    SitePoint Member gratiot's Avatar
    Join Date
    Jan 2003
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    troels ,


    Thanks that works, however, I have a couple of questions about the code.

    I notice that the function hoverStyle has two parameters "obj" and "mode" I understand that "obj" is the cellobject passed with "this" parameter? However, where does mode come from. As far as I can see it is not needed, since it will always be null. Is the portion below necessary? I took this portion out and the code still worked in IE and Netscape. Can you give me an example of why and when mode would come into play and how it is defined?

    Thanks,
    Mike

    Code:
    } else if (mode == 'over') {
    		if (!is_hover)
    			obj.className = cname + "Hover";
    	} else if (mode == 'out') {
    		if (is_hover)
    			obj.className = cname.substring(0,cname.length-5);
    	}

  7. #7
    SitePoint Member
    Join Date
    Nov 2003
    Location
    cph@dk
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just grabbed it from my default js collection. no 'mode' isn't needed, so you could remove that part. i use it for letting multiple links highlight one. eg :

    Code:
    <a href="" onmouseover="hoverStyle(findObj('foo'),'over')" onmouseout="hoverStyle(findObj('foo'),'out')">
        <img src="" class="foo" id="foo" />
    </a> <a href="" onmouseover="hoverStyle(findObj('foo'),'over')" onmouseout="hoverStyle(findObj('foo'),'out')">
        label
    </a>

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ::: certified wild guess :::

  9. #9
    SitePoint Member gratiot's Avatar
    Join Date
    Jan 2003
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pretty much but with Netscape instead of Internet Explorer. I should have added on to that posting shouldn't have I. Thanks for all your help on this.
    - Gratiot


Bookmarks

Posting Permissions

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