Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with javascript compatibility 1

Status
Not open for further replies.
2metermark

2metermark

Technical User
Jun 19, 2010
6
US
Hello all,
I have a chunk of javascript that I use to turn styles on and off on my page, displaying lists of links to other pages on my site. It works great for IE and for FireFox, but does nothing at all in Safari, and Chrome. What am I missing?
Here is the code:

function setStyleClass (classesOff,classesOn) {
var classOn;
if (document.all) {
for (var s = 0; s < document.styleSheets.length; s++)
for (var r = 0; r < document.styleSheets.rules.length; r++){
if (document.styleSheets.rules[r].selectorText.indexOf(classesOff,0) > -1)
document.styleSheets.rules[r].style.display = "none";
for(var j = 0; j < classesOn.length; j++){
classOn = classesOn[j];
if (document.styleSheets.rules[r].selectorText == '.' + classOn)
document.styleSheets.rules[r].style.display = "block";
}
}
}
else if (document.getElementById) {
for (var s = 0; s < document.styleSheets.length; s++)
for (var r = 0; r < document.styleSheets.cssRules.length; r++){
if (document.styleSheets.cssRules[r].selectorText.indexOf(classesOff,0) > -1)
document.styleSheets.cssRules[r].style.display = "none";

for(var j = 0; j < classesOn.length; j++){
classOn = classesOn[j];
if (document.styleSheets.cssRules[r].selectorText == '.' + classOn)
document.styleSheets.cssRules[r].style.display = "block";
}
}
}
}

This gets called by the following when the appropriate link is clicked on:

<a ONCLICK="setStyleClass('B1_Li',['B1_List_41_60','B1_Link_21_40','B1_Link_61_80']);" href="#">Links 41 - 60</a>

The way it works is the first argument (style) is turned off (in this case it's a wild card for every style in "B1", and then the next 3 styles are turned on. It's a great little system - when it works.
Can anyone tell me why this wouldn't work in Safari or Chrome?
Thanks in advance for any comments or suggestions.
Mark
 
Sort by date Sort by votes
When referring to internal representation of style sheets' class selector, you may find all sorts of surprise in the (upper/lower) cases. Hence, better to compare and refer to them with some uniform (upper/lower) cases to assure cross-browser compatibility.

>if (document.styleSheets.rules[r].selectorText.indexOf(classesOff,0) > -1)
[tt]if (document.styleSheets.rules[r].selectorText[red].toLowerCase()[/red].indexOf(classesOff[red].toLowerCase()[/red],0) > -1)[/tt]

>if (document.styleSheets.rules[r].selectorText == '.' + classOn)
[tt]if (document.styleSheets.rules[r].selectorText[red].toLowerCase()[/red] == '.' + classOn[red].toLowerCase()[/red])[/tt]

>if (document.styleSheets.cssRules[r].selectorText.indexOf(classesOff,0) > -1)
[tt]if (document.styleSheets.cssRules[r].selectorText[red].toLowerCase()[/red].indexOf(classesOff[red].toLowerCase()[/red],0) > -1)

>if (document.styleSheets.cssRules[r].selectorText == '.' + classOn)
[tt]if (document.styleSheets.cssRules[r].selectorText[red].toLowerCase()[/red] == '.' + classOn[red].toLowerCase()[/red])[/tt]

ps: For ie part, it is optional to make the change. But to put it in stricter analogy to the ff/chrome part, use the same kind of setting uniform case may lessen the burden of keeping in mind two situations rather than one.
 
Upvote 0 Downvote
Well, I thought that would be a good idea, and might fix the problem, but no such luck. I added all of the toLowerCase() statements, but the styles remain invisible when I try to view the pages in chrome. I don't have Safari installed here, but I could check it out if I had to.
Any other ideas or suggestions?
Thanks for stopping by and reading!
Mark
 
Upvote 0 Downvote
A page can fail for many reasons. As far as the functionality implied in the info shown, I can show you this.
[tt]
<html>
<head>
<script type="text/javascript" language="javascript">
function setStyleClass (classesOff,classesOn) {
var classOn;
if (document.all) {
for (var s = 0; s < document.styleSheets.length; s++) {
for (var r = 0; r < document.styleSheets.rules.length; r++) {
if (document.styleSheets.rules[r].selectorText.toLowerCase().indexOf(classesOff.toLowerCase(),0) > -1) {
document.styleSheets.rules[r].style.display = "none";
}
for (var j = 0; j < classesOn.length; j++) {
classOn = classesOn[j];
if (document.styleSheets.rules[r].selectorText.toLowerCase() == '.' + classOn.toLowerCase()) {
document.styleSheets.rules[r].style.display = "block";
}
}
}
}
}
else if (document.getElementById) {
for (var s = 0; s < document.styleSheets.length; s++) {
for (var r = 0; r < document.styleSheets.cssRules.length; r++) {
if (document.styleSheets.cssRules[r].selectorText.toLowerCase().indexOf(classesOff.toLowerCase(),0) > -1) {
document.styleSheets.cssRules[r].style.display = "none";
}
for(var j = 0; j < classesOn.length; j++) {
classOn = classesOn[j];
if (document.styleSheets.cssRules[r].selectorText == '.' + classOn.toLowerCase()) {
document.styleSheets.cssRules[r].style.display = "block";
}
}
}
}
}
}
</script>
<style type="text/css">
.B1_v {display: block;}
.B1_w {display: block;}
.B1_x {display: block;}
.B1_y {display: block;}
.B1_z {display: block;}
.Li_v {display: block;}
.Li_w {display: block;}
.Li_x {display: block;}
.Li_y {display: block;}
.Li_z {display: block;}
</style>
</head>
<body>
<div class="B1_v">this is div B1_v</div>
<div class="B1_w">this is div B1_w</div>
<div class="B1_x">this is div B1_x</div>
<div class="B1_y">this is div B1_y</div>
<div class="B1_z">this is div B1_z</div>
<div class="Li_v">this is div Li_v</div>
<div class="Li_w">this is div Li_w</div>
<div class="Li_x">this is div Li_x</div>
<div class="Li_y">this is div Li_y</div>
<div class="Li_z">this is div Li_z</div>

<br />
<a ONCLICK="setStyleClass('B1',['B1_x','B1_y','B1_z']);" href="#">Links b1 x-z</a>
<br />
<a ONCLICK="setStyleClass('B1',['B1_v','B1_w']);" href="#">Links b1 v-w</a>
<br />
<a ONCLICK="setStyleClass('Li',['Li_x','Li_y','Li_z']);" href="#">Links li x-z</a>
<br />
<a ONCLICK="setStyleClass('Li',['Li_v','Li_w']);" href="#">Links li v-w</a>
<br />
</body>
</html>
[/tt]
I use only div for illustration. If you have list (Li) of some kind, feel free to do so. You've some if () statement without curly brackets to enclose the statements to follow. It is fine for single statement. If you add more statements just for testing or else, you've to enclose them in the curly brackets. (I hope you observe that.)

Again, error can be manifold, what I posted answers to the exact question raised, nothing else.
 
Upvote 0 Downvote
OK, this is great. I still have to study your code to see what you did differently, but now the styles work for me in chrome. Unfortunately, the functionality is not the same in Firefox. The styles turn off, but don't turn back on. I copied your code exactly into a test page, and it does appear that you have corrected the problem for chrome. But I understand so little about javascript that I don't know why it now works differently in Firefox.
I am using divs in my main document much like in your demonstration.
You have helped me out a lot so far, just to get it working in chrome. I will continue to work on it, and see if I can figure out what else needs to be done.
Thank you very much for your help.
Mark
 
Upvote 0 Downvote
Well, that didn't take long. A little closer look at your code showed one small error which caused the problem for FF.
This line in the second loop:

if (document.styleSheets.cssRules[r].selectorText == '.' + classOn.toLowerCase())

Should be this:

if (document.styleSheets.cssRules[r].selectorText.toLowerCase() == '.' + classOn.toLowerCase())

Once I added that .toLowerCase on the selector text, it worked just fine. So now it would appear that the problem is solved! I will verify this functionality in Safari, and see if my problems are over for now.
Thank you again for your outstanding help!
Gratefully yours,
Mark
 
Upvote 0 Downvote
>This line in the second loop:...
Absolutely! sorry for edited out in the box...
 
Upvote 0 Downvote
Well Tsuji,
I have added the code just as you provided it to my main page, and it doesn't work there for some reason. I am going to go through it slowly and add the changes that you made once at a time, to see what might have made it go from partially functional to not functional at all. I noticed that all you really did was add curly braces around some of the loops. How do you know when that should be done or should not be done?
If you have any suggestions on why your demo code would work, but the same code would not work in a different page, I would be very glad to hear them.
Thank you for all the help so far!
Mark
 
Upvote 0 Downvote
I would say add enough alert() at the locations where you want to discover what the variables actually are. Also you rely on indexOf() to test the characteristic of the selectorText (B1 and Li), make sure there no conflicting style etc etc. Can say for sure. If you can extract the relevant parts from your page and post it, maybe, we can take a further look into it.
 
Upvote 0 Downvote
OK, so here goes with all of it. First the javascript portion:

<script type="text/javascript" language="JavaScript">
<!--
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);

function setStyleClass (classesOff,classesOn) {
var classOn;
if (document.all) {
for (var s = 0; s < document.styleSheets.length; s++)
for (var r = 0; r < document.styleSheets.rules.length; r++){
if (document.styleSheets.rules[r].selectorText.indexOf(classesOff,0) > -1)
document.styleSheets.rules[r].style.display = "none";
for(var j = 0; j < classesOn.length; j++){
classOn = classesOn[j];
if (document.styleSheets.rules[r].selectorText == '.' + classOn)
document.styleSheets.rules[r].style.display = "block";
}
}
}
else if (document.getElementById) {
for (var s = 0; s < document.styleSheets.length; s++)
for (var r = 0; r < document.styleSheets.cssRules.length; r++){
if (document.styleSheets.cssRules[r].selectorText.indexOf(classesOff,0) > -1)
document.styleSheets.cssRules[r].style.display = "none";

for(var j = 0; j < classesOn.length; j++){
classOn = classesOn[j];
if (document.styleSheets.cssRules[r].selectorText == '.' + classOn)
document.styleSheets.cssRules[r].style.display = "block";
}
}
}
}

-->
</script>

OK, now the styles:
.B1_Link_01_20 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_List_01_20 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_Link_21_40 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_List_21_40 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}

I've got 4 of these style sheet documents for B1 through B4. The numbers for lists and links go as high as needed to cover the total number of links that exist in the whole list.
<div class="B1_List_01_20">
Is a list of 20 links (<a href"...> )
</div>
to get a group of links to show up, there is this:

<div class="B1_Link_01_20">
<a ONCLICK="setStyleClass('B1_Li',['B1_List_01_20','B1_Link_21_40']);" href="#">Links 1 - 20</a><br><br>
</div>

If you want to got to the page as it is, use FF or IE, and go to:
Navigate to John's page, and you will see it from there.
I am going to work on a test page to use your code, and see if I can get a test working that has more detail than your example. Once I get it put on the server, I will send you an address.

Again, thanks for all your effort and interest. It will be HUGE for me if I can get my site to work for Safari and Chrome.
Talk to you soon,
Mark
 
Upvote 0 Downvote
Make sure you do the same modifications on switchStyleClass() function as well.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
322
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
735
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
167
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
298
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
263
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top