How to change css style on condition?

[hyperjam]

I have class .chat_queues   and depending on what language user select, 4 or 5 chat options will be available. User always have option of 4 standard languages but if users language is for example hungarian - than there should appear also fifth option. The problem is, that if so, then styles need to be adjusted to fit the content block.

So far i have tried various options, the last is simple javascript on the bottom, but nothing really works, and styles aren't changed.

Does anyone had the same problem and know how to fix such issue?

  <div class="chat_queues" style="padding-top: 16px;

  padding-left: 25px;" >                        

                          <j:set var="jvar_language" value="${gs.getUser().getLanguage()}"   />

                          <j:choose>

                              <j:when test="${jvar_language == 'hu'}">

                                  <div class="chat_option">

                                      <a href="#" title = "${gs.getMessage('Hungarian Chat')}" onclick="CustomEvent.fire(LiveEvents.LIVE_EVENT, LiveEvents.LIVE_WINDOW_JOIN_QUEUE_QUERY, '3a5a406b71a1650018a2d4bf538ef791', '${gs.getMessage('Hungarian Chat')}'); return false;">

                                <img src="/flag_hu.pngx" width="20" height="15"/>           ${gs.getMessage('Chat ')}

  <br>${gs.getMessage('7:00-7:00 M-F')} </br>

                                      </a>

                                  </div>

                              </j:when>

  </j:choose>

                          <div class="chat_option" style="margin: 0 0 0 0" >

                              <a href="#" title = "${gs.getMessage('English Chat')}" onclick="CustomEvent.fire(LiveEvents.LIVE_EVENT, LiveEvents.LIVE_WINDOW_JOIN_QUEUE_QUERY, '6ef48966449c910018a20e1f1c9ea21b', '${gs.getMessage('English Chat')}'); return false;">

                                      <img src="/flag_en.pngx" width="20" height="15"/>     ${gs.getMessage('Chat 24x7')}

                              </a>

                          </div>

                          <div class="chat_option" style="margin: 4px 0 0 0" >

                              <a href="#" title = "${gs.getMessage('Mandarin Chat')}" onclick="CustomEvent.fire(LiveEvents.LIVE_EVENT, LiveEvents.LIVE_WINDOW_JOIN_QUEUE_QUERY, 'a14e64114d89914018a2295005e2b9e2', '${gs.getMessage('Mandarin Chat')}'); return false;">

                                  <img src="/flag_zh.pngx" width="20" height="15"/>   ${gs.getMessage('Chat 24x7')}

                              </a>

                          </div>

                          <div class="chat_option" style="margin: 4px 0 0 0" >

                              <a   href="#" title = "${gs.getMessage('Spanish Chat')}" onclick="CustomEvent.fire(LiveEvents.LIVE_EVENT, LiveEvents.LIVE_WINDOW_JOIN_QUEUE_QUERY, '3642fbe44d45514018a2295005e2b916', '${gs.getMessage('Spanish Chat')}'); return false;">

                                  <img src="/flag_es.pngx" width="20" height="15"/> ${gs.getMessage('Chat 24x7')}

                              </a>

                          </div>

                          <div class="chat_option" style="margin: 4px 0 0 0" >

                              <a     href="#" title = "${gs.getMessage('Portuguese Chat')}" onclick="CustomEvent.fire(LiveEvents.LIVE_EVENT, LiveEvents.LIVE_WINDOW_JOIN_QUEUE_QUERY, '2e2eecdd4d49914018a2295005e2b99e', '${gs.getMessage('Portuguese Chat')}'); return false;">

                                  <img src="/flag_pt.pngx" width="20" height="15"/> ${gs.getMessage('Chat 24x7')}

                              </a>

  </div>

</div>

Javascript in Dynamic Content in the same document

<script>

var arr = document.getElementsByClassName("chat_option");

if (arr.length == 4) {

  <!-- alert(arr.length + "is the arr length"); document.getElementsByClassName("chat_queues").style.paddingTop = "10px";-->

  document.getElementsByClassName("chat_queues").style.paddingLeft = "50px";

  }

</script>

[hyperjam]

in the script in the bottom i was trying at least to check whether it works on 4 items . but it doesn't.

[ChrisBurks · Accepted solution]

Hi Anna,

The issue is that although you only have one element with the class name of "chat_queues", javascript still brings back an array when using getElementsByClassName. You'll need to adjust your script a little to get it to work.

For example:

var arr = document.getElementsByClassName("chat_option");

var chatQ = document.getElementsByClassName("chat_queues");

if (arr.length == 4) {

      for(var i=0; i != chatQ.length; i++){

            chatQ[i].style.paddingLeft = "50px";

      }

}

[hyperjam]

thank you for you answer!

[Brad Tilton]

Hi Anna,

document.getElementsByClassName("chat_queues") is going to return an array with an element for each instance of the chat_queues class so you'll need to iterate through it and set the style for each element.

http://stackoverflow.com/questions/15843581/how-to-corectly-iterate-through-getelementsbyclassname