CODEWITHSUNDEEP
javascriptcss
ultraInstinct
ultraInstinct

Reputation: 4323

How to setting a Class in a conditional statement of Javascript?

How to setting a Class in Javascript? I going to use Addthis sharing buttons in my website. The problem is that I need to have two different Styles of Sharing buttons in to my website, one to be shown in a computer browser and other for a mobile device.

I'm going to use the below script. My question is how to include the code lines of two Styles sharing codes in the conditions of the javascript code? How to put the classes into the javascript condition because the sharing codes have Classes of CSS.

    <script >
    function detectmob() { 
     if( navigator.userAgent.match(/Android/i)
     || navigator.userAgent.match(/webOS/i)
     || navigator.userAgent.match(/iPhone/i)
     || navigator.userAgent.match(/iPad/i)
     || navigator.userAgent.match(/iPod/i)
     || navigator.userAgent.match(/BlackBerry/i)
     || navigator.userAgent.match(/Windows Phone/i)
     ){
        return true;  // Style for mobile devices
      }

     else {
        return false;  // Style for computer devices
      }
    }

//Style for mobile devices
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>
<!-- AddThis Button END -->

// Style for Computer
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>
<!-- AddThis Button END -->

Upvotes: 1

Views: 15373

Answers (3)

Wanderson Silva
Wanderson Silva

Reputation: 31

you can use classList instead of className. Your code should be something like:

(function addConditionalStyles () {
  const desiredElement = document.querySelector('#desiredElement');

  desiredElement.classList.toggle('mobile-only-class', detectMobile());
})();

in this example, the class .mobile-only-class will be applied only if the function detectMobile evaluates to truthy value.

Upvotes: 2

Bergi
Bergi

Reputation: 664767

You can use the className property of the <div> element:

<div id="addthis-box" class="addthis_toolbox addthis_32x32_style">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<script>
    var box = document.getElementById("addthis-box");
    if (detectmob()) {
        box.className += " addthis_default_style";
    } else {
        box.className += " addthis_floating_style";
        box.style.left = "50px";
        box.style.top = "50px";
    }
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>

Upvotes: 2

Jakub Kotrs
Jakub Kotrs

Reputation: 6244

If you only wish to add a CSS Class dynamically, you can use

document.getElementById('the-element-s-id').className += 'the-desired-class';

If you want to only add the two (left and top), you can also use

e = document.getElementById('here-goes-the-element-s-id');
e.style.left = '50px';
e.style.top = '50px';

Although, I believe your technique is faulty as you're only targeting specific users, I advice you to have a look at CSS Media Queries and set your styles more generally.

Upvotes: 0

Related Questions