Creating & Assigning a css class in jquery

Question

//Dynamically getting the windows width
var windowwidth = $(window).width() - 50;

//dynamically assigning the windowwidth value to the class(dynamically)
$(window).load(function () {
    $('.cntnt').css('width', windowwidth + 'px');
})


$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $('.wrapper-content').toggleClass('cntnt');
});

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #4a4f55;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

<div class="wrapper-content">
  <div class="container-fluid">
    <a href="#menu-toggle" class="btn pull-left" id="menu-toggle" >
      toggle menu
    </a>
    <div class="row">
      <div class="col-lg-12">
        <h1>Simple Sidebar</h1>
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
      </div>
    </div>
  </div>
</div>

Hi, Im trying to Create a css class in jQuery & assigning it to another id in jQuery. The main agenda is, I want to toggleClass a class in jQuery, which has a width of the $(window), on click on a function that class should be toggled to an id,

here's the code which I implemented, I've got no errors, but not output too. Help me out please.

here's the fiddle code, in this to "wrapper-content" i would like to add the dynamic class "cntnt". jsfiddle.net/zeasts/jmr3L9hp/4 thanks — Riot Zeast Captain
– Riot Zeast Captain, Commented Apr 16, 2016 at 16:09

Przemysław Melnarowicz · Accepted Answer · 2016-04-16 16:11:18Z

1

$(window).load(function () {
    $('.cntnt').css('width', + windowwidth + 'px');
})

This is not class assignation, you just find elements with this class and set them style.

If you want to dynamically set class you should create new style element, something like:

$(window).load(function () {
    $('body').prepend('<style>.cntnt { width:' + windowwidth + 'px }</style>')
})

edited Apr 16, 2016 at 16:11

answered Apr 16, 2016 at 15:58

Przemysław Melnarowicz

1,0477 silver badges20 bronze badges

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

3 Comments

Riot Zeast Captain Over a year ago

the browser is firing an error in console that "Uncaught SyntaxError: missing ) after argument list", what does this means ? @meler.

Przemysław Melnarowicz Over a year ago

$(window).load(function () { $('body').prepend('<style>.cntnt { width:' + windowwidth + 'px }</style>') })

Riot Zeast Captain Over a year ago

yup it worked fine, I've basic knowledge in jQuery. Thanks @Meler

Kai Hao · Accepted Answer · 2016-04-16 15:58:59Z

0

In order to dynamically create a css class you can create a <style> element and append it to <head>.

$("<style>")
  .prop("type", "text/css")
  .html(".cntnt { width: " + windowwidth + "px; }")
  .appendTo("head");

Or, if you only need the windowidth, you can simply create a class in static css with vw and calc. Which 100vw is equal to $(window).width() and calc calculate the value between different units. In this way you get the advantage of dynamically re-calculate the width whenever user resize the window. With javascript, you need to put your code inside $(window).resize event to do so.

.cntnt {
  width: calc(100vw - 50px);
}

answered Apr 16, 2016 at 15:58

Kai Hao

6895 silver badges12 bronze badges

1 Comment

Kai Hao Over a year ago

you should point out which part is not working out so that we can help you, but I saw that you have it worked already, so... nvm.

Collectives™ on Stack Overflow

Creating & Assigning a css class in jquery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related