Get element by class?

**s-p-n** · 02-25-2013 01:09 PM

No, JS should always be executed in the body tag after all of the mark-up..
Like so:

HTML Code:

<!doctype html>
<html>
<head>
  <!-- title, meta, css, and *DOM-independent* JavaScript -->
</head>
<body>
  <!-- all mark-up for browser display -->
  <script>
    //My *DOM-dependent* JavaScript.
  <script>
</body>
</html>

*DOM-independent*: JavaScript that never references 'document' or conditionally checks if the document or parts of the document are loaded, and does not error if parts of the document are never loaded.
*DOM-dependent*: JavaScript that references the browser's 'document' variable or anything relating to the Document Object Model'

Since my example uses document.getElementsByClassName('class'), I am assuming there is an element with the class of 'class'. If used in the <head> section or anywhere before '<div class="class">' is seen (the browser reads from top to bottom), then it will be an empty list- as it wont see the elements if it is used before the elements are there.

**supercain** · 02-25-2013 01:20 PM

I put your code right above the </body> tag but still wont work. Am i missing something?

Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style>
.exp-banner {
clip: rect(0px, 150px, 220px, 0px);
position: absolute;
}

.exp-banner div, .ret-banner div {
left: -420px;
position: absolute;
top: -440px;
}
.ret-banner {
position: absolute;
z-index: 100;
}
</style>
</head>
<body style="background-color:saddlebrown;">
<table>
<tbody>
<tr>
<td style="height:300px" colspan="3"></td>
</tr>
<tr>
<td style="width:300px"></td>
<td>
<div>
<div class="exp-banner">
<div>
<embed width="1920" height="1080" wmode="transparent" onmouseover="expand()" src="flash.swf">
</div>
</div>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
<script>
// cycle through list of elements:
function cycle (elements, func) {
var element;
if (!(elements instanceOf Array)) {
return func.call(elements, elements);
}
for (element in elements) {
return cycle(element, func);
}
};

// Get all elements found with a class 'className'
var classes = document.getElementsByClassName('exp-banner');

function retract () {
function run (element) {
element.className = 'exp-banner';
}
cycle(classes, run);
}

function expand () {
function run (element) {
element.className = 'ret-banner';
}
cycle(classes, run);
setTimeout(retract, 3000);
};
</script>
</body>
</html>

**s-p-n** · 02-25-2013 01:41 PM

Sorry, I had some mistakes since I didn't test. Fiddling around in jsfiddle I figured it out:
http://jsfiddle.net/2jtFD/1/

The DOM doesn't call a list of elements a prototype of Array like I'd assumed... So I had to do a little trick to make it work: http://jsfiddle.net/2jtFD/1/

JSFiddle correctly places the js in the right spot, so it works.

**supercain** · 02-25-2013 08:51 PM

Sorry but i dont see it working. I press the button but nothing happens. What is supposed to occur?

**s-p-n** · 02-26-2013 03:18 AM

try http://jsfiddle.net/2jtFD/2/

**supercain** · 02-26-2013 07:59 AM

Hi,

this time the code seems to almost work except for one thing. Its kinda delayed when i have more than one element. Lets say that i have 2 objects instead of one:

if you mouseover the first element, the div will expand immediately achieving the effect perfectly. However, when hovering the 2nd one, there is a delay and the div doesnt expand right away, preventing the effect from showing properly. The same thing happens with the 3rd, 4th and so on if present. Is there anyway to fix that delay?

Thank you.

**s-p-n** · 02-26-2013 11:36 AM

Put it on jsfiddle so I can see the problem

**supercain** · 02-26-2013 12:00 PM

Okay, nevermind. After testing a lot, i just found out its faster to do it with IDs after all. The reason i didnt want to use IDs is because i had to write a new code to automatically generate a unique ID for every element. But after all this trouble I finally decided to try it and go for it. It works, i just feel it could be better:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<script>
function uniqueid(){
var idstr=Math.floor(Math.random()*1001);
return (idstr);
}
</script>
<style>

.exp-banner {
clip: rect(0px, 150px, 220px, 0px);
position: absolute;
}

.exp-banner div, .ret-banner div {
left: -420px;
position: absolute;
top: -440px;
}
.ret-banner {
position: absolute;
z-index: 100;
}
</style>
</head>
<body style="background-color:saddlebrown;">
<table>
<tbody>
<tr>
<td style="height:300px" colspan="3"></td>
</tr>
<tr>
<td style="width:300px"></td>
<td>
<div>
<script>
document.write("<div class='exp-banner' id='"+uniqueid()+"' onmouseover='expand(this.id)'>");
</script>
<div>
<embed width="1920" height="1080" wmode="transparent" src="flash.swf">
</div>
</div>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="height:300px" colspan="3"></td>
</tr>
<tr>
<td style="width:300px"></td>
<td>
<div>
<script>
document.write("<div class='exp-banner' id='"+uniqueid()+"' onmouseover='expand(this.id)'>");
</script>
<div>
<embed width="1920" height="1080" wmode="transparent" src="flash.swf">
</div>
</div>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function expand(iden) {
document.getElementById(iden).className="ret-banner";
setTimeout(function(){document.getElementById(iden).className="exp-banner";}, 3000)
}
</script>
</body>
</html>

that document.write part is bothering me, but i dont know another way to insert the javascript variable in the html id declaration. The code alone works fine but I integrated it in a php board (IPB) and whenever a user submits a post, the post doesnt appear right away on the topic (its supposed to be added dynamically with ajax like on this forum). Instead the user sees a blank screen. So i assume something in the code is conflicting with ajax. Do you have a better way?

Thank you.

**supercain** · 02-26-2013 01:06 PM

I think i got it!

This replaces the document.write part and now everything seems to work perfect. Unless you have an even better solution? Please tell me what you think.

Thread: Get element by class?

Thread Tools

Display

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions