Develop Reference

remove and add class with javascript on page load issue

When i add or remove a class with javascript then reload the page ..
it wont work
I tried this code, and put it in on the header
<script>
$(document).ready(function() {
$('.boxAdRight').removeClass('boxAdRight').addClass('active');
});
</script>
and this is my HTML I want to remove the class boxAdRight and change it with .active class
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="data">
<div class="getData">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="servers">
<ul>
<li class="active"
id="s_0"onclick="getServer(this.id,0);">
<i class="fa fa-video-camera"></i> server1
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12 fRight">
<div class="episodes boxAdRight">
<h2>episodes</h2>
<ul>
<li>
episode 1
</li>
<li class="active"> episode 2
</li>
</ul>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12 fRight">
<div class="boxVideos">
<div class="getCode"><iframe src="https://*******" scrolling="no" frameborder="0" width="700" height="430" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
thank you

As a first observation I would like to mention the fact that JQuery's removeClass function returns one or more space separated class names that should be removed. As a consequence, you should not apply addClass over the result of removeClass.
There might be other issues also in your code though...

Replace your .boxAdRight class with .episodes class and it'll work as you want.
<script>
$(document).ready(function() {
$(".episodes").removeClass("boxAdRight").addClass("active");
});
</script>

I believe that the order of the method calls should be
$('.boxAdRight').addClass('active').removeClass('boxAdRight');
In the original example $('.boxAdRight').removeClass('boxAdRight').addClass('active'); the selector .boxAdRight is being used, but then that class is being removed with .removeClass('boxAdRight'), so .addClass('active') is being called on a selector with no matching elements.

get it like that will solve it
$('.episodes').addClass('active').removeClass('boxAdRight');
in normal case yours too must work ?

You can also simplify this code by replacing of class instead of removing it.
$('.boxAdRight').className = 'active';
how to replace class HTML name with javascript

Mixitup filter disappears and adds "fail" class

In my mixitup, i am doing a basic filter but when i click one of the filter buttons, filtered items comes and disappears after a second. I can see in firebug, it adds “fail” class to the container of these items. But i can’t see what kind of error is that.
In codepen: http://codepen.io/anon/pen/PPOgwr
Here is my HTML for filter buttons:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li>Hepsi</li>
<li>/</li>
<li>Basılı İş</li>
<li>/</li>
<li>Kurumsal Kimlik</li>
<li>/</li>
<li>İlan</li>
<li>/</li>
<li>Ambalaj</li>
<li>/</li>
<li>Stand</li>
<li>/</li>
<li>Film</li>
</ul>
</div>
</div>
Here is the container:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
JS code:
$('#grid').mixItUp();
$('.filter-section').on( 'click', 'a.filter', function() {
var filterValue = $(this).attr('data-filter');
$('#grid').mixItUp('filter', filterValue, false);
$('#grid').on('mixFail', function(e, state){
console.log(state);
});
});
I need your helps

It's probably a bit late to give you an answer on this, but I ran into a similar problem and as part of that I managed to sort yours, too.
To cut it short, your issue is that you applied the 'filter' class on the <ul> as well as the <li> tags. Removing the class from <ul> in the CodePen you provided solves the issue - although messes up your layout.
Hope this helps.

jQuery individual lists sliding up and down

I'm not really experienced with jQuery but I couldn't find an answer for this. What I exactly want to do is when people click on the img with the class machine-dropdown that the div overview does slideToggle. I got multiple lists on this page with the same construction so I need them to work individual.
<img class="machine-dropdown" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
I tryed it with many methods that jquery already has. .closest .first .find but still when i click it slides all lists.
Thanks for the help already!

You could do it like this:
Change your HTML to this:
<img class="machine-dropdown" data-target="#overview-1" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview" id="overview-1">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
Note that I've added data-target="#overview-1" to the machine-dropdown image and id="overview-1" to the overview div.
Now use the following javascript/jquery:
$(function(){
$(".machine-dropdown").each(function(){
$(this).click(function(){
var target = $(this).data("target");
$(target).slideToggle();
});
});
});

use this attribute in your code.
$('.machine-dropdown').click(function(){
$(this).next().next().next().find('.overview').slideToggle();
});
I think it will solve your problem.

jquery: run script without affecting divs with same classes

Got a product loop, where I need to change images on click. Like in every product loop, there is a whole bunch of divs with same classes. Which in my case get affected. Can't isolated them. Initial image does disappear. But not a single one, that's intended, but all of them. And no new images appear
html of the single product
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1"></div>
<div class=" galitem galitem2"></div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2"></div>
</div>
</div>
and jquery
$(".product").each(function () {
$(this).find(".galcolor2").click(function () {
$(".galitem").hide();
$(this).parent().find(".galitem2").show();
});
});
http://jsfiddle.net/h1twaf1y/

http://jsfiddle.net/q72nw00t/2/
Javascript:
$(".galcolor2").click(function(){
$(".galitem").hide();
$(this).parent().parent().find(".galitem2").show();
});
HTML: (this is just a section repeated over and over again)
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
----------
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
----------
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
Basically you want to listen for any clicks on ALL .galcolor2, then when that is clicked, hide all .galitem, and then only show the RELATED .galitem2 by going up two levels to the div.product and finding the correct item
The problem in your initial code, is that you only went up ONE level with parent() to div.galcolors where you should have instead went up TWO levels with parent().parent(), up to div.product.

You want to find .galitem relative to the item clicked, the way you can find that is to use $.closest(). Closest will travel up the DOM tree (starting with the current node) until it finds a matching selector, which is much better than using parent because you're not dependent on the DOM structure making your code less brittle and easier to read. So your code would look like this instead:
$(".product").each(function(){
$(this).find(".galcolor2").click(function(){
$(".galitem").hide();
$(this).closest(".product").find(".galitem2").show();
});
});

remove parent of parent div

<div class="row-fluid">
<div class="span12 clearfix">
<div class="span1">{1}</div>
<div class="span3">{2}</div>
<div class="span7"><input type="text" name="image_url[]" class="text required img_url" value="{0}" /></div>
<div class="span1">remove</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 clearfix">
<div class="span1">{1}</div>
<div class="span3">{2}</div>
<div class="span7"><input type="text" name="image_url[]" class="text required img_url" value="{0}" /></div>
<div class="span1">remove</div>
</div>
</div>
When I click remove link,I want remove it main container div(row-fluid).
I tried but it doesn't work.
$(this).closest('div').closest('div').closest('div').remove();

Have you tried
$(this).parents('div.row-fluid').remove();
Demo
You function doesn't work because closest begins with the current element, so looking for a div starting from a div will always return...itself!