We Keep Coding

Select next div with jquery?

//$(document).ready(function(){
$('.next').click(function(){
$('.box').fadeOut();
$('.box').next().fadeIn();
});
//});
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
I have a div .box, and the next button. I need to select the next div if i click the next button but only the first div not all. For example if i click next button while it shown box 1 then the next box that should be appear is 2 and so on. But now it shown 2 3 4. How to do this ?

you can get the first visible div using $(.box:visible) and then fadeIn next div to it. you can also add a check for last element, in which case you can fadeIn the first element. something like this:
//$(document).ready(function(){
$('.next').click(function(){
var visibleBox = $('.box:visible');
$(visibleBox).fadeOut();
if(!$(visibleBox).next('div').length)
$('.box').first().fadeIn();
else
$(visibleBox).next().fadeIn();
});
//});
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>

It's showing 2 3 4 because you ares selecting ALL .box elements, i.e. 1 2 3 4
.next() of 1 = 2
.next() of 2 = 3
.next() of 3 = 4
.next() of 4 = nothing
You should find the box that is currently being shown, and then find it's next sibling.
// Filter by CSS rule
var $showing = $('.box').filter(function() {
return $(this).css('display') === 'block';
}).fadeOut();
// or using :visible
$showing = $('.box:visible').fadeOut();
$showing.next().fadeIn();

you can use another class to labeled, which div is on the display. for example, you add a class display. then you put that class, on the first box. when you click next, you can remove the class display from the current one, and move it into the next one.
HTML
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box display">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
CSS
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
.display{
display:block
}
JQuery
$('.next').click(function(){
var current = $('.box.display');
current.fadeOut().removeClass('display').next().fadeIn().addClass('display');
});
Demo : https://jsfiddle.net/dfaLnsmo/

If I understand your requirement this will work
$(document).ready(function(){
var i = 1;
$('.next').click(function(){
$('.box').fadeOut();
$('.box:nth-child(i)').fadeIn();
if(i >= $('.box').length)
i++;
else
i=1;
});
});

Try the following Jquery
var curr = 1;
$('.next').click(function(){
if(curr < $( ".box" ).length) {
$('.box').hide();
$( ".box" )[curr].style.display= "block";
curr += 1;
}
});
Here is the working jsfiddel : https://jsfiddle.net/Lv7yr820/1/

Getting divs next to each other when clicking on a button / JQuery

i am making a kind of storyboard where you can add and remove frames but i need to set divs next to each other, the code i now have it places the div's beneath each other. I want to make it with a loop
Here is my code:
HTML
<div id="storyboard">
<div id="container">
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
<div type="button" value="fade_in" class="add__button"> + </div>
</div>
</div>
</div>
</div>
JS
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').after('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};

Use append() instead of after() function. This should work:
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};
This works for keeping one .frame element and adding multiple divs to it of the structure:
<div class="container[i]">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
</div>
</div>

If you want to arrange elements side by side which normaly are block elements and thus are positioned underneath eachother by default use either css floats or css flexbox.
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

i need to set divs next to each other
Try this example to add new story container to all current .container
var i = 1;
$('.add__button').click(function() {
i++;
$(".container").each(function(x) {
$(this).after('<div id="container' + x + '_' + i + '" class="container"><div class="frame"><div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content">story ' + i + '</div></div></div></div>');
});
});
.frame__outer {
padding: 20px;
background: #222;
color: white;
border-bottom: solid 3px green;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="storyboard">
<input type='button' value='add story' class="add__button" />
<div id="container" class='container'>
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content">story 1</div>
</div>
</div>
</div>
</div>

How to use jquery to get style attribute of an element

I have a div which contains a h2 tag and a p tag.
i wan a case where if the div is hovered (moverenter), the background colors of the h2 tag and the p tag get exchanged and when move leave it resets.
I am looking at this solution because i have many of the panels with different h2 tag and p tags. my approve so far:
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
on the jQuery i tried
$(document).ready(function(){
$(".panel").mouseenter(function(){
exchange($(this));
}).mouseleave(function(){
exchange($(this));
});
function exchange(e){
var x = e.children(".title"),
y = e.children(".desc");
x.css("background", "y.css('background')");
}
});
I am sorry, just learning JS
NB: since i have not gotten it working, i was also looking for a smooth transition effect on the exchange

Do you mean something like
$(".panel").mouseenter(function () {
var $this = $(this),
$h2 = $this.children('h2'),
$p = $this.children('p'),
h2c = $h2.css('background-color'),
pc = $p.css('background-color');
$h2.css('background-color', pc);
$p.css('background-color', h2c);
}).mouseleave(function () {
$(this).children('h2, p').css('background-color', '');
})
.panel h2 {
background-color: lightgrey;
}
.panel p {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>

I didn't check everything but that won't work :
x.css("background", "y.css('background')");
Try something like :
var bgY = y.css('background');
x.css("background", bgY);

I made minor changes to your code
Hope it solves your problem.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$(".panel").mouseenter(function () {
$(".panel").toggle();
}).mouseleave(function () {
$(".panel").toggle();
});
})
</script>
</head>
<body>
<div class="panel" style="display:none" >
<h2 class="title" style="background-color:gray">This is the title</h2>
<p class="desc" style="background-color:lightgray">This is a decription</p>
</div>
<div class="panel" style="display:block" >
<h2 class="title" style="background-color:lightgray">This is the title</h2>
<p class="desc" style="background-color:gray">This is a decription</p>
</div>
</body>
</html>

For only exchanging CSS of p and h2 elements :-
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').css('background-color','green');
$(this).find('.desc').css('background-color','blue');
});
Now suppose , Lets say you set some background-color to your p and h2 elements .
CSS
.title{
background-color: green;
}
.desc{
background-color: blue;
}
SCRIPT
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').removeAttr('style');
$(this).find('.desc').removeAttr('style');
});

You can find all the children of the panel and change their backgroundcolor.
You can do this on mouseEnter:
$(".panel").children().css("background-color","red");
And on mouseLeave take another backgroundcolor.

And for the animation part, if you're working with simple background colors you could use animate().
...
function exchange(e)
{
var x = e.children(".title"),
y = e.children(".desc");
bg1 = x.css('background-color'),
bg2 = y.css('background-color');
x.animate({ "background-color": bg2 }, 1500);
y.animate({ "background-color": bg1 }, 1500);
}
...

Here you are a working example http://jsfiddle.net/9a1qe9q9/2/
jQuery
$(".panel").mouseenter(function () {
exchange($(this));
}).mouseleave(function () {
exchange($(this));
});
function exchange(e) {
var x = e.children(".title"),
y = e.children(".desc"),
xColor = x.css('background'),
yColor = y.css('background');
x.css("background", yColor);
y.css("background", xColor);
}

How to avoid the particular class from applying css

My HTML
<body>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
</div>
</div>
</div>
</div>
<div class="abc"></div>
</body>
My Script
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$(".abc").css({position: "absolute", top: top_pos, left: left_pos });
$(".abc").show();
$(".popup").show();
});
});
I want to apply the left and top to abc class which is without parent and not to the class which is under id="txt_blog_editor"

According to this answer here is a working snippet:
jQuery.expr[':'].noparents = function(a,i,m){
return jQuery(a).parents(m[3]).length < 1;
};
var elts = $(".abc").filter(":noparents(#txt_blog_editor)");
elts.css({ "background-color": "green" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
ABC With Parent
</div>
</div>
</div>
</div>
<div class="abc">ABC WITHOUT Parent</div>
Basically, you create a new jQuery expression :noparents which returns elements not having selector given parents

You need to check if .abc has a parent #txt_blog_editor http://jsfiddle.net/ugv2pxdw/4/
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$('.abc').each(function(){
if (!$(this).parents('#txt_blog_editor').length) {
$(this).css({position: "absolute",top: top_pos, left: left_pos });
$(this).show();
$(".popup").show();
}
});
});

If abc classes are only direct childs of body, why not using body > .abc as your selector?

three small absolutely positioned divs in my homepage

I have three small absolutely positioned divs in my homepage. i want only one div to appear at a time, so that the page should start with only the first div and after 3 seconds, the second div and after 3 seconds the third div and this process should continue infinitely. this is the for-loop I've come up with for doing this 10 times. how can i make the same happen infinitely?
// this for not making infinite loop
var nb_loop=0;
var max_loop=10;
var j=0;
for (var i=2; i<=3 ; i++){
nb_loop++;
j++;
console.log("i="+i+", j="+j); // or alert if you want
if (j>=3)
j=0;
if (i>=3)
i=0;
if (nb_loop>max_loop)
break;
}

JS:
var counter = 1;
function showDiv(){
$('.display').hide();
$('#div'+counter).show();
(counter == 4 ? counter = 1 : counter++)
}
showDiv();
var timer = setInterval(showDiv, 3000);
HTML:
<div id='container'>
<div id='div1' class='display' style="background-color: red;">
div1
</div>
<div id='div2' class='display' style="background-color: green;">
div2
</div>
<div id='div3' class='display' style="background-color: blue;">
div3
</div>
<div id='div4' class='display' style="background-color: yellow;">
div4
</div>
</div>
CSS:
.display { display: none; }
Use Jquery setInterval function use for infinite time

use JQUERY SETTIMEOUT() function
like this
jQuery(document).ready(function () {
//hide a div after 3 seconds
setTimeout(function(){ jQuery("#div").hide(); }, 3000);
});