Jump to content

counting elements in class


Bogey
 Share

Recommended Posts

hey hey,I want to run a javascript, but this function has to loop several times (as much a there are elements in a class)...How can I count the number of items in a particular class?And is it wise to use Java? cause Java can be disabled!!! Is it more wise, to go around Java and try it on a different way?

Edited by Bogey
Link to comment
Share on other sites

i think you mean Javascript, there is a difference.i don't know if there are more advanced methods to do what you want, but to get the 'count' it's

var get_elem=getElementsByClassName('yourclassname')var count=get_elem.length;
just FYI, i'm also a beginner, so i hope that's correct !! :)
Link to comment
Share on other sites

Thnx ShadowMage... now it works perfectly... also in older version of IE :)One more thing:I have a .CSS-file in which I use .classname:hover to change the color of the buttons, when hovering the mouse over...When I reload my page, it works fine!!!When I push a button, then I go to a javascript file (onmouseclick) en run the script, to change the colors of the buttons...After that, the :hover effect isnt working anymore... how can I get it done so the hover effect still active? Do I need te reload the css. file or so?Hope I make myself clear?

Edited by Bogey
Link to comment
Share on other sites

When I push a button, then I go to a javascript file (onmouseclick) en run the script, to change the colors of the buttons...After that, the :hover effect isnt working anymore... how can I get it done so the hover effect still active? Do I need te reload the css. file or so?Hope I make myself clear?
I assume you're modifying the style attribute (ie, button.style.color = 'red') and the style attribute is the same as adding inline styles to the HTML tag itself (like, <input type='button' style='color: red;' />). Since inline styles override those set in embedded or external stylesheets, I think that's why you no longer see the hover effect from your stylesheet.What exactly is the purpose of changing the colors in the script? Is it a theme picker? Or does it serve some other purpose?
Link to comment
Share on other sites

The purpose is:I want on startup all buttons in "div_navigation" be BLACK, when hovering over, the buttons have to change GREEN and back to BLACK.When I push my "home" button, then the home.php appears in my div_main and the home button turns GREEN.When I push "contact" button, then contact.php appears in div_main and contact button turns GREEN and ALL others (home included) turn BLACK again...Still want the hovering effect :SOr am I doing all this above on a very wrong manner, has it to be done in a different way?PS I am new to php/java/css... I picked it up again, lot of years ago I was quite busy with VB and VBA and some HTML, but that is more then 5 years ago...No I am starting again and make myself a nice homepage :)EDIT: oh yes.... I am changing the style attribute.... backgroundcolor in this case :)

Edited by Bogey
Link to comment
Share on other sites

When you change all other buttons back to black, don't set it specifically to black. Reset it to a blank string instead.Ie,Instead of:button.style.backgroundColor = 'black';do this:button.style.backgroundColor = '';That should let your CSS stylesheet take over again.

Link to comment
Share on other sites

YESSS SUPER!!!!thnx :)EDIT:It works on: FireFox, Safari, Chromebut NOT on IE :S (the hover doesnt work at all there! even not at startup)

Edited by Bogey
Link to comment
Share on other sites

It might be better to create a separate class for the affected button(s), complete with :hover behaviors. Instead of changing specific properties, change the button's className.

Edited by Deirdre's Dad
Link to comment
Share on other sites

I don't quite understand what you mean.I tell my situation in short:1.) index.php contains 4 div's (header, navigation, main, footer)2.) navigation contains 4 buttons (home, about, work, contact)3.) when button (2) is clicked, then home.php/about.php/work.php/contact.php load in div "main"4.) the button which page is shown in "main" has to be green, the other ones blackSo far al working fine... I now only miss the hover effect...

Link to comment
Share on other sites

DD brings up a good point. In your stylesheet, just create another class (let's call it 'active') and give it the styles you want for the selected menu item (ie, the green background).

.menuBtn, .active { /* Notice this targets your existing class and the new class you'll create */   ...All your existing style definitions for the normal button state...}.menuBtn:hover {   ...All existing hover styles...}.active {   /* This is where you'll set the active styles for the clicked menuBtn */   background-color: green;}

Then in your JavaScript, instead of changing individual style properties, you'll change the class.Ie, change this:button.style.backgroundColor = 'green';to this:button.className = 'active';As for why the :hover isn't working in IE, it's probably due to an incorrect/missing DTD. I think any one will work, but Strict is probably best. (Check here if you don't know what a DTD is)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...