 |
| |
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-11-2003 22:42
Hi,
Basically I need a button which when clicked will add a 2px border to all objects on the same page with the same class attribute. So for example, when the button with the class attribute of 'picture1' (class="picture1") is clicked all images with the same class attribute of 'picture1' all become highlighted with a border. But when the button with the class attribute of 'picture2' is clicked then all previous highlighted images become unhighlighted and all the images with the new class attribute of 'picture2' become highlighted. I hope that makes sense to somebody.
Thanks guys.
|
Veneficuz
Paranoid (IV) Inmate
From: A graveyard of dreams
Insane since: Mar 2001
|
posted 05-12-2003 00:30
I think this should do the trick:
code:
function highlight( var className ) {
var a = document.getElementByTagName('img');
for (var n = 0; n < a.length; n++) {
if ( a[n].getAttribute('class') == className ) {
// highlighted border
a[n].style.border = '2px solid red';
} else {
// nonhighlighted border
a[n].style.border = '1px solid black';
}
}
}
And you call it with something like: <a href=" javascript: highlight('picture1'); void(0); " > <img class="picture1" src="..."> </a
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
[This message has been edited by Veneficuz (edited 05-12-2003).]
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-12-2003 03:36
Hi,
It looks good but I can't seem to get it to work, I've even tried a simple demo with no other scripts or objects on the page.
I just seem to always generate errors on clicking - usually 'object does not support this property or method' and when I change it around a bit I tend to get 'object expected' errors.
Do you have a working example?
Or can anyone guess what could be wrong?
Thanks,
Jon
[This message has been edited by smonkey (edited 05-12-2003).]
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-12-2003 19:48
please, someone come back and help me.
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 05-12-2003 23:18
His code looks fine. Could you give us a link to an example that's *not* working?
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-13-2003 00:46
not at the moment slime, my domain is being transferred so i have no reliable place to put it.
I can include my src code tho, you'll have to add your own images: code:
<html>
<head>
<script type="text/javascript">
function highlight( var className ) {
var a = document.getElementByTagName('img');
for (var n = 0; n < a.length; n++) {
if ( a[n].getAttribute('class') == className ) {
// highlighted border
a[n].style.border = '2px solid red';
} else {
// nonhighlighted border
a[n].style.border = '1px solid black';
}
}
}
</script>
</head>
<body>
<a href="javascript:highlight('image1');void(0);"><img src="image1.jpg" class="image1" width="75" height="75"></a>
<a href="javascript:highlight('image2');void(0);"><img src="image2.jpg" class="image2" width="75" height="75"></a>
<img src="image1.jpg" class="image1" width="75" height="75">
<img src="image2.jpg" class="image2" width="75" height="75">
</body>
</html>
Am I being really stupid and missed something so blatantly obvious?
|
Veneficuz
Paranoid (IV) Inmate
From: A graveyard of dreams
Insane since: Mar 2001
|
posted 05-13-2003 01:02
The really blatant problem is that the function getElementByTagName doesn't exist. Forgot an 's' in there, so the real function (that works) is getElementsByTagName 
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 05-13-2003 01:35
Ah. One thing that would have helped in this case would be to look at the line number on which the error occured =)
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-13-2003 03:24
It said line 5 character 21 - expected indentifier, I'm never sure where to start counting from and what lines if any aren't countable, plus sometimes an error on one line is a problem with a previous line - debugging is not my strong point, in fact coding in general is not my strong point, that's why I need you guys so much 
Thanks
*Edit*
erm, well on load it's still throwing out the above error, and when I click it throws out an error on line 1 character 1 - object expected. If I change the first line from 'function highlight( var className )' to 'function highlight( className )' it stops the errors but onclick it just changes all the images to the black 1px border and no red border is seen. Something is wrong here, and I'm to blind to see it.
visit my CryoKinesis Online Gallery
[This message has been edited by smonkey (edited 05-13-2003).]
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-13-2003 03:47
ok I have worked it out but it has a major bug,
to work in IE the code must be code:
<script type="text/javascript">
function highlight(className) {
var a = document.getElementsByTagName('img');
for (var n = 0; n < a.length; n++) {
if ( a[n].getAttribute('[b]className[/b]') == className ) {
// highlighted border
a[n].style.border = '2px solid red';
} else {
// nonhighlighted border
a[n].style.border = '1px solid black';
}
}
}
</script>
But to work in mozilla the code must be: code:
<script type="text/javascript">
function highlight(className) {
var a = document.getElementsByTagName('img');
for (var n = 0; n < a.length; n++) {
if ( a[n].getAttribute('[b]class[/b]') == className ) {
// highlighted border
a[n].style.border = '2px solid red';
} else {
// nonhighlighted border
a[n].style.border = '1px solid black';
}
}
}
</script>
what's up with that huh? different ways to call classes in different browsers?
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 05-13-2003 04:17
Ah. Technically, that's a bug in Internet Explorer. However, you can replace that line with this, and it should work in all browsers:
if ( a[n].className.indexOf(className) != -1 ) {
The element a[n] has a property called className which contains the value of the class attribute set on that element. This is a universal property that should work in all recent browsers.
For future reference, line numbers should be counted from the very top of the file that they're encountered on - even if that file contains HTML or other non-JavaScript text. Internet Explorer can sometimes be incorrect, so if it seems like it's giving the wrong line number, try running the page in Mozilla, and check Tools -> Web Development -> JavaScript Console to see the errors that occur. (Mozilla generally gives much better error messages than IE does, and it always gives the correct line number.)
If you ever get an error on "line 1", and there was no JavaScript on line 1 (like, in an HTML file which contains JavaScript), it means that the error was within an onclick="..." HTML attribute of some sort, or maybe it was within a setTimeout("...",...) function call.
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-13-2003 05:05
Thanks Slime, it now works perfectly. I don't really understand how the fix works but I'm glad it does
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-13-2003 19:14
Retraction of Previous Statement!
It does not work perfectly, for some reason the class 'image1' also highlights 'image10' through to 'image19', how can I fix that on huh?
Also it has a tendency to apply the 'else' stated border to all images in my page, how would I make it apply to only images that contain the word 'image' as part of their class declaration? (all the images I want to be affected by this have a class of 'imageN' where N is a number)
[This message has been edited by smonkey (edited 05-13-2003).]
|
Veneficuz
Paranoid (IV) Inmate
From: A graveyard of dreams
Insane since: Mar 2001
|
posted 05-14-2003 01:34
To only add the other border to images with a class name containing 'image' exchange the else line with this one:
} else if ( a[n].className.indexOf('image') != -1 ) {
Not sure how you go about fixing the problem with it reading image10... If you know that you are going to have less than a 100 image classes you can use image01, image02, etc for the classes bellow nr 10. That would work, but wouldn't look very good.
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-14-2003 02:12
I can't actually change the file numbering, so I need a fix. Isn't there a way with regular expressions to make it have to match the class/string variable exactly to the letter rather than how it works at the moment?
My only other idea is this, but i'm not sure how to code it. Basically as all my images begin with the word 'image' followed by a number I should be able to avoid passing the string 'image2' or whatever to the scirpt, if I can just pass the number then it will match by default because in numeric terms 1 and 10 aren't the same at all (i think that will work). Then all I'd need would be a way to combine the prefix 'image' and the number into a string to do the actual class changing.
How would I do that in javascript syntax?
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 05-14-2003 02:56
Oh, I didn't think of that. Yeah, this line:
if ( a[n].className.indexOf(className) != -1 ) {
checks to see if the element's class *contains* the class name you give it. ("image10" contains "image1", so it thinks it should apply the formatting to the "image10" class.) The reason I did this is because there is a case where the class name can contain *more* than just "image1", yet the formatting *should* be applied. That case occurs when you assign the same element to multiple classes, such as:
<div class="image1 image2"></div>
That div belongs to class image1 *and* image2, but its className is not equal to "image1".
To work around this problem we can use regular expressions. Try:
if ( a[n].className.match(new RegExp('\b' + className + '\b')) ) {
I'm not sure if that'll work because I forget how the match function works, but give it a shot...
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-14-2003 04:22
nope, doesn't work slime - it destroys the changing of class
I don't understand the match thing either - I only really understand the replace thing (what are the 'things' called properly?)
a tricky problem.
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 05-14-2003 15:44
ok I have been tinkering with your suggestion Slime and have come up with a solution:
basically the if line gets changed to:
if ( a[n].className.match(new RegExp('^' + className + '$')) ) {
the \b word boundary method doesn't work, I'm assuming this is because the class string has only one word and no spaces or special characters to constitute a word boundary.
with the ^ 'start of' and $ 'end of' symbols it knows that the word is exactly as specified and the extra 0-9 in 10-19 can't then be counted. In fact it would probably even work without the ^ 'start of' because the only bit that changes is the end.
a simpler solution would have been to just change the classes from 'imageN' (where N is a number) to something like 'clsNimg' or something where the number was not at either end. But this way is better.
thanks all
|
