SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape and CSS help

    Recently I have been working on some javascript buttons.
    I have recently changed the code that "swapped the background" to swapping a class. This works great in MSIE and Safari(a mac netscape derivative) but on mouseover in netscape the class features just disapear

    Here is the script code:
    Code:
    <script type="text/javascript">
    
    function over_but(objId)
    {
    	this.obj = document.getElementById(objId);
    	this.Ov = this.obj.classOv;		
    	this.CkOv = this.obj.classCkOv;
    	var bObj = this;
    	this.checked = this.obj.checked;
    	{
    		var classUR = ( bObj.checked ) ? bObj.CkOv : bObj.Ov ;
    		bObj.obj.className = classUR;
    	} 
    }
    
    function out_but(objId)
    {
    	this.obj = document.getElementById(objId);
    	this.Ot = this.obj.classOt;		
    	this.Ck = this.obj.classCk;
    	var bObj = this;
    	this.checked = this.obj.checked;
    
    	{
    		var classUR = ( bObj.checked ) ? bObj.Ck : bObj.Ot ;
    		bObj.obj.className = classUR;
    	} 
    }
    
    function change_but(objId, elemId, cVal )
    {
    	this.obj = document.getElementById(objId);
    	this.elem = document.forms['myForm'].elements[elemId];
    //		this.elem = elemId;
    	this.uVal = 0;
    	this.cVal = cVal;		
    	this.classOt = this.obj.classOt;		
    	this.classCk = this.obj.classCk;
    	this.checked = this.obj.checked;
    
    	if ( this.checked)
    	{  
    		this.elem.value = this.uVal;               
    //				document.forms['myForm'].elements[this.elem].value= this.uVal;
    		this.obj.className = this.classOt;          
    		this.obj.checked = false;
    	}
    	else
    	{
    		this.elem.value = this.cVal;
    //				document.forms['myForm'].elements[this.elem].value = this.cVal;
    		this.obj.className = this.classCk;
    		this.obj.checked = true;
    	}
    }
    </script>
    here is a portion of the call from the page:
    Code:
    <div id="ButBar" style="position:absolute; z-index: 3; left: 0; top: 125; visibility: visible;">
    
    <table><tr><td>
       <form id="myForm" ACTION="<?php echo($ACT_NOW); ?>" METHOD="POST">
    	    <table width="120" border="0" cellpadding="0" cellspacing="1">
              	<tr>
                	<td colspan="2">
    					<table width="80" height="20" align="center"
    					onClick="javascript:change_but('AA1','AB1',<?php echo($gid1); ?>)"
    					onMouseOver="javascript: over_but('AA1')"
    					onMouseOut="javascript: out_but('AA1')" class="Med1" id="AA1"  valign="middle"
    					classOt="Med1" classOv="Med2" classCk="Med3" classCkOv="Med4">
    						<tr>
    							<td> 
    								 <p align="center">
    								    <input id="AB1" name="gid[]" checked="false" type="hidden" value="0" size="5">
    								    <?php echo("$gname1"); ?>
    								    </input>
    							     </p>
    							</td>
    						</tr>
    	  			  </table>
    				</TD>
    I have a domain now! here is the link so you can see it for yourself:
    http://educatewithpurpose.com/Store.php

    -berzerko

  2. #2
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should have shown part of my CSS code, here it is:
    Code:
    .Med1 {
    	background-image: url(../Assets/M.png);
    	font-family: Copperplate;
    	font-size: 14px;
    	background-repeat: no-repeat;
    	background-position: left center;
    	text-align: center;
    	color: #000000;
    }
    .Med2 {
    	background-image: url(../Assets/M_f2.png);
    	background-repeat: no-repeat;
    	font-family: Copperplate;
    	font-size: 14px;
    	color: #FFFF66;
    	background-position: center center;
    }
    .Med3 {
    	background-image: url(../Assets/M_f3.png);
    	color: #FFFFFF;
    	background-repeat: no-repeat;
    	font-family: Copperplate;
    	font-size: 14px;
    	background-position: center center;
    }
    .Med4 {
    	background-image: url(../Assets/M_f4.png);
    	color: #FFFF66;
    	background-repeat: no-repeat;
    	font-family: Copperplate;
    	font-size: 14px;
    	background-position: center center;
    }
    -berzerko

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi berzerko,

    By the use of the 'this' keyword your functions become object methods, but the calls to the functions in the mouseover and mouseout events do not dereference the methods on an object. It's possible that IE is using the form object (perhaps it's an implicit 'this.call()') - but still, this looks like a problem.

    BTW, what version of Netscape are you using?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Also berzerko, Safari is not based on Gecko (which is what Netscape is based on). Safari is based on the KHTML rendering engine found in Konqueror for Linux.

  5. #5
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Hi berzerko,

    By the use of the 'this' keyword your functions become object methods, but the calls to the functions in the mouseover and mouseout events do not dereference the methods on an object. It's possible that IE is using the form object (perhaps it's an implicit 'this.call()') - but still, this looks like a problem.

    BTW, what version of Netscape are you using?
    I am not sure that I understand. I did remove the "this" before the obj.className. And it still worked in MSIE, but not in Netscape.

    -berzerko

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Repost your javascript after your changes.

    BTW, what version of Netscape are you using?

  7. #7
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Repost your javascript after your changes.

    BTW, what version of Netscape are you using?
    Here is the code;
    Code:
    <script type="text/javascript">
    
    function over_but(objId)
    {
    	this.obj = document.getElementById(objId);
    	this.Ov = this.obj.classOv;		
    	this.CkOv = this.obj.classCkOv;
    	var bObj = this;
    	this.checked = this.obj.checked;
    	{
    		var classUR = ( bObj.checked ) ? bObj.CkOv : bObj.Ov ;
    		obj.className = classUR;
    	} 
    }
    
    function out_but(objId)
    {
    	this.obj = document.getElementById(objId);
    	this.Ot = this.obj.classOt;		
    	this.Ck = this.obj.classCk;
    	var bObj = this;
    	this.checked = this.obj.checked;
    
    	{
    		var classUR = ( bObj.checked ) ? bObj.Ck : bObj.Ot ;
    		obj.className = classUR;
    	} 
    }
    
    function change_but(objId, elemId, cVal )
    {
    	this.obj = document.getElementById(objId);
    	this.elem = document.forms['myForm'].elements[elemId];
    	this.uVal = 0;
    	this.cVal = cVal;		
    	this.classOt = this.obj.classOt;		
    	this.classCk = this.obj.classCk;
    	this.checked = this.obj.checked;
    
    	if ( this.checked)
    	{  
    		this.elem.value = this.uVal;               
    		obj.className = this.classOt;          
    		this.obj.checked = false;
    	}
    	else
    	{
    		this.elem.value = this.cVal;
    		obj.className = this.classCk;
    		this.obj.checked = true;
    	}
    }
    </script>
    Also, I am using Netscape 7.02 on a Mac

    -berzerko

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove all 'this.'

  9. #9
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Remove all 'this.'
    Same as before works in MSIE and Safari not in Netscape

    -berzerko

    here is the code:
    [code]
    <script type="text/javascript">

    function over_but(objId)
    {
    obj = document.getElementById(objId);
    Ov = obj.classOv;
    CkOv = obj.classCkOv;
    checked = obj.checked;
    {
    var classUR = (checked ) ? CkOv : Ov ;
    obj.className = classUR;
    }
    }

    function out_but(objId)
    {
    obj = document.getElementById(objId);
    Ot = obj.classOt;
    Ck = obj.classCk;
    checked = obj.checked;

    {
    var classUR = ( checked ) ? Ck : Ot ;
    obj.className = classUR;
    }
    }

    function change_but(objId, elemId, cVal )
    {
    obj = document.getElementById(objId);
    elem = document.forms['myForm'].elements[elemId];
    uVal = 0;
    cVal = cVal;
    classOt = obj.classOt;
    classCk = obj.classCk;
    checked = obj.checked;

    if ( checked)
    {
    elem.value = uVal;
    obj.className = classOt;
    obj.checked = false;
    }
    else
    {
    elem.value = cVal;
    obj.className = classCk;
    obj.checked = true;
    }
    }
    </script>

  10. #10
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been doing google searches to see if anyone had a solution for this problem. I have found others with the same problem but no solutions.

    Can anyone tell me if this is possible? If it is not I will abandon changing the class and return to changing the image and stlyle separately.

    -berzerko

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't have much time to look at it tonight, but here are a few things I saw:

    1. The functions linkCSS() and initButtons() are called but are not present in the file.

    2. This "javascript:" is used only in the href attribute of A elements. It is not needed in event attributes. For example, you have onMouseOver="javascript:over_but('AA15')" when it should be onmouseover="over_but('AA15')".

    3. Instead of changing the className of tables you would probably encounter less problems by changing the className of DIV's.

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick example that works on IE 6.0, Mozilla 1.2.1, and Opera 7 (all on Win98).
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <style type='text/css'><!--
    body {
      color:#000; background:#fff;
      margin:0; padding:0;
      font-family:verdana,arial,sans-serif;
      font-size:12px;
    }
    .outCls {
      color:#fff;
      background:url(cb/graphics/bg1.jpg);
    }
    .outChkCls {
      color:#00f;
      background:url(cb/graphics/bg4.jpg);
    }
    .ovrCls {
      color:#f00;
      background:url(cb/graphics/bg6.jpg);
    }
    .ovrChkCls {
      color:#0f0;
      background:url(cb/graphics/bg8.jpg);
    }
    --></style>
    <script type='text/javascript'><!--
    window.onload = function() {
    }
    function tOver(id) {
      var ele = document.getElementById(id);
      if (ele && ele.getAttribute) {
        var cs = ele.getAttribute('chkState');
        var cls = ele.getAttribute(cs=='0'?'ovrCls':'ovrChkCls');
        ele.className = cls;
      }
    }
    function tOut(id) {
      var ele = document.getElementById(id);
      if (ele && ele.getAttribute) {
        var cs = ele.getAttribute('chkState');
        var cls = ele.getAttribute(cs=='0'?'outCls':'outChkCls');
        ele.className = cls;
      }
    }
    function toggleChk(id) {
      var ele = document.getElementById(id);
      if (ele && ele.getAttribute && ele.setAttribute) {
        var cs = ele.getAttribute('chkState');
        ele.setAttribute('chkState', (cs=='0'?'1':'0'));
        tOver(id);
      }
    }
    //--></script>
    </head>
    <body>
    
    <table id='t1' width='100' height='100' class='outCls'
      chkState='0' onclick="toggleChk('t1')"
      ovrCls='ovrCls' ovrChkCls='ovrChkCls'
      outCls='outCls' outChkCls='outChkCls'
      onmouseover="tOver('t1')" onmouseout="tOut('t1')">
      <tr><td>Example</td></tr>
    </table>
    
    </body>
    </html>
    Last edited by MikeFoster; Mar 24, 2003 at 21:01.

  13. #13
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awsome Mike,

    I was able gleen the "getAttribute" function out of your last comments. I didn't know about this before.

    By setting my variables as such:

    Ot = obj.setAttribute('classOt');

    The code now works in netscape.

    Now all I have to do is go back and clean up my code to remove orphaned pieces of code such as uncalled init()'s that you noted previously

    Thanks much for all your help,

    -berzerko

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome. It's going to be a good-looking site - good work!


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
  •