Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    using external css with javascript causes element to have no properties?

    Code:
    function changeme(id, type)
    {
    	var state='none';
    	var state=document.getElementById(id).style.display;
    	/*alert('id:'+id+' state:'+state+'!');*/
    	if (state=='none' || state=='')
    	{
    		state='block';
    		document.getElementById(id).style.display = state;
    		if(type=='table'){document.getElementById(id).style.display = 'table';}
    	} else
    	{
    		state='none';
    		document.getElementById(id).style.display = 'none';
    	}
    	createCookie(id, state, 30);
    }
    http://digitalpatriots.org

    the code doesnt work using firefox. When u click on the '+' on the right of any element it doesnt hide until the second click. I think becuase the styles are set using an external style sheet the javascript assumes the element has no properties, so state=='' and it sets it to display:block.
    How can I get the 'state' of the element?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    1. if your element has no style witten locally, inside the tag, that means your element has no style at all, so that element.style is null. In this case, you sho8uld switch the conditioner.
    2. IE and Moz use different values for "positive" display in case of table and table's elements. Fortunately the blank value: '' may replace the "positive" value.
    Code:
    function changeme(id){
    var obj=document.geElementById(id);
    obj.style.display=(obj.style.display=='none')?'':'none';
    }
    On the other hand I rather would have used classes, and switch the className instead of style.display values
    Last edited by Kor; 01-11-2007 at 04:06 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See this link for an excellent discussion of the problem and a simple script to six it at the bottom.

    http://developer.apple.com/internet/...nt/styles.html
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the help guys.

    i ended up using the script from trippertreats link, works a treat in firefox, ie7+6, so cheers mate, thats a nice find.

    only needed to use the getStyleById function just to get the style.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    any idea why this script doesnt work in netscape?

    Code:
    // Copyright © 2001 by Apple Computer, Inc., All Rights Reserved.
    //
    // You may incorporate this Apple sample code into your own code
    // without restriction. This Apple sample code has been provided "AS IS"
    // and the responsibility for its operation is yours. You may redistribute
    // this code, but you are not permitted to redistribute it as
    // "Apple sample code" after having made changes.
    
    // ugly workaround for missing support for selectorText in Netscape6/Mozilla
    // call onLoad() or before you need to do anything you would have otherwise used
    // selectorText for.
    var ugly_selectorText_workaround_flag = false;
    var allStyleRules;
    // code developed using the following workaround (CVS v1.15) as an example.
    // http://lxr.mozilla.org/seamonkey/source/extensions/xmlterm/ui/content/XMLTermCommands.js
    function ugly_selectorText_workaround() {
    	if((navigator.userAgent.indexOf("Gecko") == -1) ||
    	   (ugly_selectorText_workaround_flag)) {
    		return; // we've already been here or shouldn't be here
    	}
    	var styleElements = document.getElementsByTagName("style");
    	
    	for(var i = 0; i < styleElements.length; i++) {
    		var styleText = styleElements[i].firstChild.data;
    		// this should be using match(/\b[\w-.]+(?=\s*\{)/g but ?= causes an
    		// error in IE5, so we include the open brace and then strip it
    		allStyleRules = styleText.match(/\b[\w-.]+(\s*\{)/g);
    	}
    
    	for(var i = 0; i < allStyleRules.length; i++) {
    		// probably insufficient for people who like random gobs of 
    		// whitespace in their styles
    		allStyleRules[i] = allStyleRules[i].substr(0, (allStyleRules[i].length - 2));
    	}
    	ugly_selectorText_workaround_flag = true;
    }
    // getStyleById: given an element ID and style property
    // return the current setting for that property, or null.
    // args:
    //  i - element id
    //  p - property
    function getStyleById(i, p) {
    	var n = document.getElementById(i);
    	var s = eval("n.style." + p);
    
    	// try inline
    	if((s != "") && (s != null)) {
    		return s;
    	}
    
    	// try currentStyle
    	if(n.currentStyle) {
    		var s = eval("n.currentStyle." + p);
    		if((s != "") && (s != null)) {
    			return s;
    		}
    	}
    	
    	// try styleSheets
    	var sheets = document.styleSheets;
    	if(sheets.length > 0) {
    		// loop over each sheet
    		for(var x = 0; x < sheets.length; x++) {
    			// grab stylesheet rules
    			var rules = sheets[x].cssRules;
    			if(rules.length > 0) {
    				// check each rule
    				for(var y = 0; y < rules.length; y++) {
    					var z = rules[y].style;
    					// selectorText broken in NS 6/Mozilla: see
    					// http://bugzilla.mozilla.org/show_bug.cgi?id=51944
    					ugly_selectorText_workaround();
    					if(allStyleRules) {
    						if(allStyleRules[y] == i) {
    							return z[p];
    						}			
    					} else {
    						// use the native selectorText and style stuff
    						if(((z[p] != "") && (z[p] != null)) ||
    						   (rules[y].selectorText == i)) {
    							return z[p];
    						}
    					}
    				}
    			}
    		}
    	}
    	return null;
    }
    function createCookie(name,value,days) {
    	if (days) {
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    function readCookie(name) {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++) {
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    
    function changeme(id, type)
    {
    	var id=id;
    	state = getStyleById(id, 'display');
    	/*alert('id:'+id+' state:'+state+'!');*/
    	if (state=='none' || state=='')
    	{
    		state='block';
    		document.getElementById(id).style.display = state;
    		if(type=='table'){document.getElementById(id).style.display = 'table';}
    	} else
    	{
    		state='none';
    		document.getElementById(id).style.display = 'none';
    	}
    	createCookie(id, state, 30);
    }
    Code:
    <div class="standardheader">
    		<h1> <span class="standardheader-mid"><span class="standardheader-left"></span> <span class="standardheader-right" title="Change Me." onClick="changeme('navigation')">+</span> &nbsp;Navigation</span></h1>
    
    		<ul class="row1list" id="navigation">
    			<li><a href="clan_admin.php?mode=createclan&amp;sid=e98e4665862d55255de1c6ef863c65fb&amp;clan=0">Create a Clan</a></li>
    			<li><a href="scrim.php?mode=addscrim&amp;sid=e98e4665862d55255de1c6ef863c65fb&amp;clan=0">Add a Scrim</a></li>
    		</ul>
    	</div>

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    *bump*

    would it be simpler to just put a div wrapper round it, and change the class of it?
    Last edited by fatrat; 01-15-2007 at 07:31 AM.


  •  

    Posting Permissions

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