6 Replies - 3241 Views - Last Post: 09 August 2012 - 01:48 AM

#1 kevin_911  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 127
  • Joined: 02-April 09

Javascript add class to a div

Posted 07 August 2012 - 04:17 PM

Hi Guys,

I have a tab menu item which onclick hides and shows a div.

Now I have a class which adds style to a active tab.

I am not able to figure out on how to do add this class when a user clicks on it?

Please advice......

Here is my code:

var showid = "div1";
function doInit(id) {                      
   document.getElementById(showid).style.display = "none";
   document.getElementById(id).style.display = "";			
   showid = id;                                  
}


HTML

<div class="Tab"> <a href="#" onclick="doInit('div1');">Tab1</a> </div>
<div class="Tab"> <a href="#" onclick="doInit('div2');">Tab2</a> </div>
<div class="Tab"> <a href="#" onclick="doInit('div3');">Tab3</a> </div>
<div class="Tab"> <a href="#" onclick="doInit('div4');">Tab4</a> </div>
<div style="clear: both;"></div>


CSS

a.active
{
    font-weight: bold;
    font-size: 12px;
    color: #68A710;
    background: url('../img/tabbg-on.png') top no-repeat;
    position: relative;
}


This post has been edited by kevin_911: 08 August 2012 - 12:13 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript add class to a div

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 782
  • View blog
  • Posts: 1,663
  • Joined: 30-January 09

Re: Javascript add class to a div

Posted 07 August 2012 - 07:09 PM

There's a couple of problems here. Firstly you don't have IDs on any of your elements, so the object document.getElementById(showid) is going to be null every time. Secondly, your function code is missing semi-colons at the end of each line. Thirdly, you need to start using a debugging tool like Firebug for Firefox, otherwise your JS development will be hit-and-miss, and it will take ages to write anything.
Was This Post Helpful? 1
  • +
  • -

#3 kevin_911  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 127
  • Joined: 02-April 09

Re: Javascript add class to a div

Posted 08 August 2012 - 12:21 AM

View Poste_i_pi, on 07 August 2012 - 08:09 PM, said:

There's a couple of problems here. Firstly you don't have IDs on any of your elements, so the object document.getElementById(showid) is going to be null every time. Secondly, your function code is missing semi-colons at the end of each line. Thirdly, you need to start using a debugging tool like Firebug for Firefox, otherwise your JS development will be hit-and-miss, and it will take ages to write anything.


Thanks for the advice 'e_i_pi', I forgot to add semicolon's when I was posting this questions :)
But I am using semicolons in my actual code.

View Poste_i_pi, on 07 August 2012 - 08:09 PM, said:

There's a couple of problems here. Firstly you don't have IDs on any of your elements, so the object document.getElementById(showid) is going to be null every time.


I do have id for the div's 1,2, 3 and 4 but again I should have posted the HTML :)

<div id="div1">Some test text in div1</div>
<div id="div2">Some test text in div2</div>
<div id="div3">Some test text in div3</div>
<div id="div4">Some test text in div4</div>



So I call the divs when a tab is clicked on. It works flawlessly but am not able to figure out on how to add an additional class style for an active tab?
Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 782
  • View blog
  • Posts: 1,663
  • Joined: 30-January 09

Re: Javascript add class to a div

Posted 08 August 2012 - 01:41 AM

Well in that case you need to use the setAttribute() method. When adding a class though, you'll need to add two different attributes, one for IE, one for everyone else:
var newClass = "MyClassName";
element.setAttribute("class", newClass); // Most Browsers
element.setAttribute("className", newClass); // IE;


Was This Post Helpful? 1
  • +
  • -

#5 kevin_911  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 127
  • Joined: 02-April 09

Re: Javascript add class to a div

Posted 08 August 2012 - 02:23 AM

View Poste_i_pi, on 08 August 2012 - 02:41 AM, said:

Well in that case you need to use the setAttribute() method. When adding a class though, you'll need to add two different attributes, one for IE, one for everyone else:
var newClass = "MyClassName";
element.setAttribute("class", newClass); // Most Browsers
element.setAttribute("className", newClass); // IE;



Hi Thanks for the reply!!!

Well I changed my javascript as it was confusing me.

Javascript
function showHide(id) {
   var state = document.getElementById(id).style.display;
   if (state == "block") {
      document.getElementById(id).style.display = 'none';
   } else {
      document.getElementById(id).style.display = 'block';
      document.getElementById('id of the tab div').setAttribute("class", "active");
   }
}



Two questions please:

1. Problem with the above code is it doesn't hide the tabs which haven't been clicked on?
2. Do I put the setAttribute(); in the else statement as shown above?

This post has been edited by kevin_911: 08 August 2012 - 02:23 AM

Was This Post Helpful? 0
  • +
  • -

#6 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 782
  • View blog
  • Posts: 1,663
  • Joined: 30-January 09

Re: Javascript add class to a div

Posted 08 August 2012 - 02:53 PM

Now your Javascript is confusing me too. You need to post all of the code you have in order to replicate a problem, and it is piecemeal over about 3 posts at the moment.

Also, you would also probably benefit from writing pseudo-code/comments in order to brainstorm what you have to do, like this:
function showHide(id)
{
  // if(id is currently clicked id)
  //   do nothing
  // else
  //   change the active tabs to inactive
  //   hide the active text
  //   change the currently clicked id to active
  //   display the currently clicked id text
}


That way, you can see exactly what you need to do.

Also, you might want to look into jQuery, as these sort of UI problems are easily solved with the tiniest amount of jQuery UI code.
Was This Post Helpful? 1
  • +
  • -

#7 kevin_911  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 127
  • Joined: 02-April 09

Re: Javascript add class to a div

Posted 09 August 2012 - 01:48 AM

View Poste_i_pi, on 08 August 2012 - 03:53 PM, said:

Now your Javascript is confusing me too. You need to post all of the code you have in order to replicate a problem, and it is piecemeal over about 3 posts at the moment.

Also, you would also probably benefit from writing pseudo-code/comments in order to brainstorm what you have to do, like this:
function showHide(id)
{
  // if(id is currently clicked id)
  //   do nothing
  // else
  //   change the active tabs to inactive
  //   hide the active text
  //   change the currently clicked id to active
  //   display the currently clicked id text
}


That way, you can see exactly what you need to do.

Also, you might want to look into jQuery, as these sort of UI problems are easily solved with the tiniest amount of jQuery UI code.


Thanks again for the advice.

I can do this flawlessly in jquery :) but due to requirements, I have to write it in plain javascript. I am quite use to jquery and reason why struggling with javascript, perhaps its a good reason for me to do some book reading :D

Anyways I was able to solve the problem using the pseudo technique you mentioned previously.

Thanks

This post has been edited by kevin_911: 09 August 2012 - 01:49 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1