...

View Full Version : using external css with javascript causes element to have no properties?



fatrat
01-11-2007, 02:30 PM
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?

Kor
01-11-2007, 03:57 PM
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.


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

TripperTreats
01-11-2007, 04:01 PM
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/webcontent/styles.html

fatrat
01-11-2007, 08:16 PM
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.

fatrat
01-14-2007, 09:18 AM
any idea why this script doesnt work in netscape?




// 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);
}





<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>

fatrat
01-15-2007, 07:28 AM
*bump*

would it be simpler to just put a div wrapper round it, and change the class of it?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum