Develop Reference

jquery detect class and add css to div

This is an example of a scenario I have got:
<div id="portfolio">
<a class="show-project" href="#">
<!-- some content here -->
</a>
<div class="scrollable">
<!-- full height container with scroll -->
</div>
</div>
When link is clicked, additional class is added to "scrollable move-left".
I would like to detect when it is added and replace css "overflow-y: auto;" with "overflow-y: hidden;"
I am trying to achieve this with:
<script>
$(document).ready(function () {
$("#portfolio .show-project").click(function(){
if ($("#portfolio .scrollable").hasClass("move-left")) {
$("#portfolio").css("overflow-y", "hidden");
} else {
$("#portfolio").css("overflow-y", "auto");
}
});
});
</script>
Could you advice me how to fix this please?
Very appreciated!

You can use jQuery toggleClass and hasClass in order to toggle the class on the element and change the overflow-y attribute accordingly.
Ref:
Add or remove one or more classes from each element in
the set of matched elements, depending on either the class's presence
or the value of the state argument.
Code:
$(document).ready(function () {
$("#portfolio .show-project").click(function () {
$("#portfolio .scrollable").toggleClass('move-left');
var overflow;
($("#portfolio .scrollable").hasClass("move-left")) ? overflow = 'hidden' : overflow = 'auto';
$("#portfolio").css("overflow-y", overflow);
});
});
Demo: http://jsfiddle.net/IrvinDominin/n0d5jxe8/

Use JQuery each function to return element width

I currently have an ul with around 20 li. Each li is structured like this:
<li class="block">
<a href="#">
<div class="front">
<img src="..." />
</div>
<div class="back">
<p>Text</p>
</div>
</a>
</li>
I would like to go through each li.block, find its width, and set the anchor tag's width equal to this number.
This is the function I'm using now, but it isn't working:
$(document).ready(function() {
var $currentWidth = $("li.block").width();
$( "li.block a" ).css( "width", $currentWidth);
});
What is the proper way to use .each() and something similar to the code above to fix my problem?

To cycle through every block use
$("li.block").each(function() {//stuff});
Inside that function you can get the relevant block with this:
var width = $(this).width();
You can then apply that to the link inside that block:
$(this).children('a').css("width", $currentWidth);
Of course, that might be a little different if your html wasn't always like that - use whatever selector is appropriate.
So putting it all together, you would have something like this:
$("li.block").each(funtion() {
var width = $(this).width();
$(this).children('a').css("width", $currentWidth);
});

How about:
$('#your-ul').find('li.block').each(function(){
// inside here, 'this' refers to to a specific 'li.block' element
$(this).find('a').width( $(this).width() );
});
although I am a bit suspicious about why these aren't already the same width.

how to economize jquery selectors

Probably a stupid question, but I couldn't find a direct answer, so how can I change ":not('#home div, .nav')" in to something like ":not('this div, .nav')"? That would allow me reuse the same function for different objects.
$( "#home" ).click(function() {
$("#content .plates").children(":not('#home div, .nav')" ).fadeOut(700);
});
and here is the HTML if needed:
<div id="wrapper">
<div id="content">
<div id="home" class="plates">
<div class="nav"></div>
<div id="one"></div>
<div id="two"></div>
</div>
<div id="about" class="plates">
<div class="nav"></div>
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</div>
Thanks for your help!

In the handler, this will be the clicked element, so you could just use this:
$( "#home" ).click(function() {
$("#wrapper #content .plates").children(":not('#"+this.id+" div, .nav')" ).fadeOut(700);
});

The OP is asking for something generic that can be reused on both the "home" and the "about" divs (and maybe on others to be added later?). But, for each one, excluding the "nav" item from the fadeout. So try this:
function myFunc( clickableItem) {
$(".plates:not(" + clickableItem + ")").children( ":not('.nav')" ).fadeOut(700); }
$( "#home" ).click( function(){
myFunc( "#home");
});
$( "#about" ).click( function(){
myFunc("#about");
});

You are using CSS selector :not(), but you can also use jQuery chained function .not(), which subtracts matched elements from another set of matched elements.
The usage is like this:
$(selector1).not(selector2).fadeOut(700);
Where elements in selector2 will get substracted from set matched by selector1.

Let's start from the top. Provided you follow the spec and IDs are unique on your page (as they should be), your click event selector should be just
$("#home").click(function() {...});
Also, the inner selector should be
$("#content .plates").children(...);
There's no need to stack ID selectors in front of other ID selectors since IDs should be unique and selectors are parsed from right to left.

You can use jQuery not to exclude the clicked element.
Code:
$("#wrapper #content #home").click(function () {
$("#wrapper #content .plates").children(':not(.nav)').not($(this)).fadeOut(700);
});
Demo: http://jsfiddle.net/IrvinDominin/dms6u1ww/

$("#wrapper #content #home" ).click(function() {
$("#wrapper #content .plates").children().not($('div', this)).not('.nav').fadeOut(700);
});

How to add div dynamically inside a div by class - Jquery

I want dynamically add info div into every dynamic class.
HTML
<div id='container'>
<div class='dynamic'></div>
<div class='dynamic'></div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
I want like this.
<div id='container'>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
</div>
JS FIDDLE

You can use $.wrapInner method
$(".dynamic").wrapInner('<div class="info">info</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="dynamic"></div>
<div class="dynamic"></div>
<div class="dynamic"></div>
<div class="dynamic"></div>
</div>

To add an info div into every class using jQuery, simply use:
$( ".dynamic" ).append( "<div class='info'>info</div>" );
The JSFiddle demonstrates it.
If you want to continually check for .dynamic classes, you can use something like this:
$(document).ready(setInterval(function(){
$( ".dynamic" ).append( "<div class='info'>info</div>" );
}, 1000));
In the above case, you are checking for .dynamic classes every 1000ms (1 second).
Hope this helps.

Try using append():
$('.dynamic').append($('<div/>', { class: 'info' }).html('info'));
Update your fiddle:
http://jsfiddle.net/4cncLor7/2/
If your .dynamic div already contains content and you want to at the .info div at the beginning use prepend():
$('.dynamic').prepend($('<div/>', { class: 'info' }).html('info'));

I have updated it. Please check and give me feedback.
http://jsfiddle.net/4cncLor7/4/
jQuery('.dynamic').html('<div class="info">info</div>');

You could do something like this:
$('.dynamic').each(function() {
var newDiv = $('div');
newDiv.addClass('info');
newDiv.html('info');
//inject the new div
$(this).append(newDiv);
});

check this code : Example
Javascript:
var vof=$("#box1").val();
//$(".result-box").text(vof);
var e = $('<div class="result-box">'+vof+'</div>');
$('#box').append(e);
HTML :
<div id="box">
<!--<div class="result-box" id="rbx"></div>-->
</div>
here i am creating dynamic div so that every time button is clicked it create new div and you can add attribute id to them separately

jquery to change style attribute of a div class

I have a slider class like this and I wan to change the style attribute style="left: 336px"
<div id="range-cont">
<div class="slider">
<div class="progress" style="width: 350px;"></div>
<a class="handle" href="#" **style="left: 336px;"**></a>
</div>
<input id="percentage" class="range" type="range" value="14" name="percentage" min="0" max="100">
<p id="percent-label">%</p>
</div>
</div>
I tried
$('.handle').css({'style':'left: 300px'}) but its not working.
Not sure what I am doing wrong here

Just try $('.handle').css('left', '300px');

if you just want to set the style attribute use
$('.handle').attr('style','left: 300px');
Or you can use css method of jQuery to set only one css style property
$('.handle').css('left', '300px');
OR same as key value
$('.handle').css({'left': '300px', position});
More info on W3schools

$('.handle').css('left', '300px');
$('.handle').css({
left : '300px'
});
$('.handle').attr('style', 'left : 300px');
or use OrnaJS

Try with
$('.handle').css({'left': '300px'});
Or
$('.handle').css('left', '300px');
Instead of
$('.handle').css({'style':'left: 300px'})

$('.handle').css('left','300px') try this, identificator first then the value
more on this here:
http://api.jquery.com/css/

this helpful for you..
$('.handle').css('left', '300px');

Style is an attribute so css won't work for it.U can use attr
Change:
$('.handle').css({'style':'left: 300px'});
T0:
$('.handle').attr('style','left: 300px');//Use `,` Comma instead of `:` colon

You can't use
$('#Id').attr('style',' color:red');
and
$('#Id').css('padding-left','20%');at the same time.
You can either use attr or css but both only works when they are used alone.

In order to change the attribute of the class conditionally,
var css_val = $(".handle").css('left');
if(css_val == '336px')
{
$(".handle").css('left','300px');
}
If id is given as following,
<a id="handle" class="handle" href="#" style="left: 336px;"></a>
Here is an alternative solution:
var css_val = $("#handle").css('left');
if(css_val == '336px')
{
$("#handle").css('left','300px');
}