Add class and attribute with js

Question

Sorry for my english..

I understand that it was done with addClass and removeClass but how to write terms do not understand I need to do so if the screen resolution is less than 768 pixels then add the attributes id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" and the class "dropdown-menu" to the ul with class small and remove class from li parent class and remove the ul with class nav-child

UPD

I have this:

<li class="item-104 deeper parent">
  <span class="nav-header ">About</span>
  <ul class="nav-child unstyled small">
   <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
  </ul>
</li>

i want do this, when window screen less than 768px:

<li class="item-104 deeper">
      <span class="nav-header " id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</span>
      <ul class="dropdown-menu unstyled small">
       <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
      </ul>
    </li>

I want to remove the classes nav-child and parent and add to span attributes

can someone come in handy:

$(function () {
    var window_width = 750; // or $(window).width();

    if ($(window).width() < 768) {
      $('.small').addClass('dropdown-menu');
      $('.deeper').removeClass('parent');
      $('.small').removeClass('nav-child');
      $('.deeper .nav-header').attr({id: 'dLabel', type: 'button', 'data-toggle':'dropdown', 'aria-haspopup':'true', 'aria-expanded': 'false'});
    } else {
      $('.small').removeClass('dropdown-menu');
      $('.deeper').addClass('parent');
      $('.small').addClass('nav-child');
      $('.deeper .nav-header').attr({id: '', type: '', 'data-toggle':'', 'aria-haspopup':'', 'aria-expanded': ''});
    }
});

I've added a solution, but unfortunately i do not understand your condition, when attributes should be romved. — Tobias S
– Tobias S, Commented Sep 5, 2016 at 5:44

Tobias S · Accepted Answer · 2016-09-05 06:13:38Z

3

For adding attributes and classes you could use:

$('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
$('ul.small').addClass('dropdown-menu');

Removing is simpler, because then you set the attribute to an empty string:

$('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});

Current size of your windows can be get with:

$( window ).width()

Or do you want this attributes to be given on resize events? Then just try:

$( window ).resize(function() {
  if ($( window ).width() < 768){
    $('ul.small').addClass('firstClass').addClass('secondClass');
    $('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
  } else {
   $('ul.small').removeClass('firstClass').removeClass('secondClass');
    $('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});
  }
}

After author has edited his question:

var window_width = 750; // or $(window).width();

if ($(window).width() < 768) {
  $('#deeper').removeClass('parent');
  $('#deeper .nav-header').attr({id: 'dLabel', type: 'button', 'data-toggle':'dropdown', 'aria-haspopup':'true', 'aria-expanded': 'false'});
} else {
  $('#deeper').addClass('parent');
  $('#deeper .nav-header').attr({id: '', type: '', 'data-toggle':'', 'aria-haspopup':'', 'aria-expanded': ''});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-104 deeper parent">
  <span class="nav-header ">About</span>
  <ul class="nav-child unstyled small">
   <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
  </ul>
</li>

edited Sep 5, 2016 at 6:13

answered Sep 5, 2016 at 5:36

Tobias S

1,2758 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TriSTaR Over a year ago

$( window ).resize(function() { if ($( window ).width() > 768){ $('ul').addClass('ferstClass secondClass'); } else { // remove attr $('li').removeClass('parent'); } } This is don't work :(

Tobias S Over a year ago

Please post your code as edit above! You have to add every class individual!

TriSTaR Over a year ago

Thank you maaan )))) I love you ;D

Promil Bhardwaj · Accepted Answer · 2016-09-05 05:47:38Z

2

You are using addClass and removeClass, means you have jQuery included. Use this:

if($(window ).width() < 768){       // Returns width of browser viewport
     // addClass
 }

answered Sep 5, 2016 at 5:47

Promil Bhardwaj

765 bronze badges

Comments

Ehsan · Accepted Answer · 2016-09-05 05:57:03Z

1

Try this :

$(document).ready(function(){

    if ($(window).width() < 768) {

        $("ul").attr({id:"dLabel",type:"button",data-toggle:"dropdown",aria-haspopup:"true",aria-expanded="false"});


        $("ul").addClass("dropdown-menu");

        //and rest code..........

    }

    else {

        // go back Default...
    }

})

answered Sep 5, 2016 at 5:57

Ehsan

13k3 gold badges27 silver badges46 bronze badges

Comments

softwarenewbie7331 · Accepted Answer · 2016-09-05 05:57:02Z

0

alternative: draw both types and hide one or other using CSS.

@media screen and (min-width: 0px) and (max-width: 768px) {
  #first { display: block; }
  #second { display: none; }
}

@media screen and (min-width: 768px) {
  #first { display: none; }
  #second { display: block; }
}

much easier to design and debug in my opinion

answered Sep 5, 2016 at 5:57

softwarenewbie7331

9676 silver badges12 bronze badges

Collectives™ on Stack Overflow

Add class and attribute with js

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related