Riot Zeast Captain Riot Zeast Captain - 7 months ago 13
Javascript Question

Creating & Assigning a css class in jquery

//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.

Answer
$(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>')
})
Comments