Develop Reference

How to change the style of a div and reset it after 1000ms?

I have multiple (only 2 in this example) divs overlapping with each other...
What I'd like to do is to add buttons that represents each div, which when clicked, should increase their respective div's z-index for 1000ms only, in order to stay on top of all the other overlapping divs. This is the only purpose of the increase in z-index.
I was able to do some part of this, however, on second round of clicking, the secondary divs keep hiding behind the originally-on-top div.
Please check and run the snippet below:
function increaseDivOne() {
const box = document.getElementById('Div1');
box.style.zIndex = '999';
setTimeout(function () {
box.style.zIndex = '1';
}, 1000);
}
function increaseDivTwo() {
const box = document.getElementById('Div2');
box.style.zIndex = '999';
setTimeout(function () {
box.style.zIndex = '1';
}, 1000);
}
#Div1 {
position: absolute;
width: 300px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
}
#Div2 {
position: relative;
top: 130px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid black;
}
<button onclick="increaseDivTwo()">Increase Div 2</button>
<br><br>
<button onclick="increaseDivOne()">Increase Div 1</button>
<ul>Try this:</ul>
<li>Click "Increase Div 2"</li>
<li>Click "Increase Div 1"</li>
<li>Click "Increase Div 2" again and notice it will show up but will hide behind Div1 after 1s</li>
<p>My goal is to raise the z-index of a div for 1s, just enough to be on top of the other div and vice versa, but it should stay on top after the 1s set timeout. <br> Please note there's more Div in my actual project that will utilize this function.</p>
<div id="Div2">
<h1>Div 2</h1>
</div>
<div id="Div1">
<h1>Div 1</h1>
</div>
Thank you in advance for any help.

From the discussion in comments, I think it would be enough if you just reset the z-index for the currently on-top one, when a new one needs to be moved to the front - without any timers.
You could loop over all relevant div elements - or simply remember the previous one in a variable, and then reset z-index specifically for only that.
And then it would also be a bit nicer, if we did not manipulate inline styles for this, but simply set a class to apply the necessary z-index to the currently "active" element.
var previous = null;
function increaseDiv(num) {
if(previous) {
previous.classList.remove('active');
}
var div = document.getElementById('Div'+num);
div.classList.add('active');
previous = div;
}
#Div1 {
position: absolute;
width: 300px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
}
#Div2 {
position: relative;
top: 130px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid black;
}
div.active {
z-index: 999;
}
<button onclick="increaseDiv('2')">Increase Div 2</button>
<br><br>
<button onclick="increaseDiv('1')">Increase Div 1</button>
<div id="Div2">
<h1>Div 2</h1>
</div>
<div id="Div1">
<h1>Div 1</h1>
</div>

if the divs got the same index, then the childnode order takes relay on priority of display, that's the problem here, to keep priority on the last div selected, you should then rewrite your function as the following :
function increaseDivOne() {
const box = document.getElementById('Div1');
box.style.zIndex = '999';
setTimeout(function () {
box.style.zIndex = '1';
var elms=document.querySelectorAll('div[id^="Div"]:not(#Div1)');
for (var p in elms) {
elms[p].style.zIndex=-1;
}
}, 1000);
}

Animating Multiple Divs

The following code works, but I have a problem since I want to have multiple portfolio objects like this one. If I use the current code it would raise all of the hidden divs (.slide) with text instead of one at a time based on hover. I can't use "this" since that would just make the picture animate upward. I could give everything ids and write a lot of JavaScript code that is repetitive, but I am almost positive that isn't the best way to do things.
Basically, How would you target a div with a hover effect that causes another div to do something and still be able to reuse the code?
The HTML for this section:
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
The CSS for this section:
.high {
height: 200px;
overflow: hidden;
}
.port {
width: 100%;
height: 200px;
}
.slide {
background-color: rgba(74, 170, 165, 0.7);
color: white;
position: relative;
top: -34px;
height: 200px;
width: 100%;
padding: 20px;
text-align: center;
}
The JavaScript for this section:
$(document).ready(function(){
var portfolio = {
// moves div with text over portfolio picture on hover
hoverPort: function() {
$(".port").hover(function() {
$(".slide").stop().animate({"top" : "-110px"});
}, function() {
$(".slide").stop().animate({"top" : "-34"});
});
}, // end of hoverPort function
} // end of portfolio object
portfolio.hoverPort();
}); // end of document.ready

Of course you can use this, not to animate the element itself but to refer another "closest" element based on that:
$(".port").hover(function() {
$(this).next('.slide').stop().animate({"top" : "-110px"});
}, function() {
$(this).next('.slide').stop().animate({"top" : "-34"});
});
Demo Snippet
$(".port").hover(function() {
$(this).next('.slide').stop().animate({
"top": "-110px"
});
}, function() {
$(this).next('.slide').stop().animate({
"top": "-34"
});
});
.col-md-6 {
float: left;
width: 50%;
padding:25px;
box-sizing:border-box;
}
.slide {
position: relative;
top: -60px;
color: white;
background: red;
font-size: 2em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>

You can use jQuery "eq" selector.
$(".port").eq(0).hover(function() {
$(".slide").eq(0).stop().animate({"top" : "-110px"});
});
Hovering over the first "port" will animate the first "slide".

How to animate the caption for each slide individually

I have made a custom jquery slideshow which is working as required. The only thing remaining is animating the caption inside the slide. I want the caption to respond to the current slide but the problem is all of the captions respond no matter which slide is showing. I cannot seem to fix this issue.
<body>
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
</body>
</html>
CSS
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
position:relative;
}
.holder{
overflow: hidden;
position: relative;
width: 9999px;
height: 350px;
}
.slide{
width: 700px;
float: left;
position:relative;
}
.marquee_photos {
overflow:hidden;
}
.marquee_photos img{
display:block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav{
position:absolute;
bottom:5px;
right:0;
}
.marquee_nav .marquee_nav_item{
color:#fff;
text-decoration:none;
background:url(images/template/nav_buttons.png) no-repeat;
text-indent:-9999px;
overflow:hidden;
display:block;
width:17px;
height:18px;
float:left;
margin:0 4px;
}
.marquee_nav .marquee_nav_item:hover{
background:url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item.selected{
background:url(images/template/nav_buttons.png) no-repeat -50px 0;
}
JQUERY
$(document).ready(function(){
//1st STEP
//generating nav links automatically
//for each slide there should be a nav item
$('.slide').each(function(index, value){
$('.marquee_nav').append('');
});
//2nd STEP
//setting the nav links and running the slide
$('.marquee_nav .marquee_nav_item').on('click', function(){
$('.marquee_nav_item').removeClass('selected');
$(this).addClass('selected');
//3rd STEP
//animating the slideshow
//getting the index value of the clicked nav
var navClick = $(this).index();
/* holder width set to the parent width because the holder width is 9999px and we will use that to change
the margin-left position of the images */
var holderWidth = $('.marquee_container').width();
/* position of the new img according to the nav item clicked. If the 3 nav item is clicked jquery will get that
index value and will multiply it with the holder width to know how much distance it has to move for eg.
if the 2nd nav is clicked, the index is 1, so 1 * with the holderWidth which is 700 = 700. So it will move margin-left
-700px. See the animate function below */
var photoPosition = navClick * holderWidth;
//alert(photoPosition);
//slideshow animation
$('.marquee_container .holder').animate({'margin-left' : -photoPosition}, 1000);
//animating the caption
$('.marquee_caption').animate({'top':275}, 500);
});
});

Perhaps you need to first send all the .marquee_caption elements back to their original position and then bring only the selected one into the view.
Something like:
...
$('.marquee_caption').not(':eq(' + navClick + ')').animate({ 'top': 200 }, 500);
$('.marquee_caption').eq(navClick).animate({ 'top': 100 }, 500);
...
where navClick is the variable you already have in your code which stores .index() of the selected navigation element. And .eq() is the jQuery method you pass this navClick value into.
Here is a modified jsFiddle as an example using your own code for simplicity sake.
Hope this is what you were looking for.
Update:
The .eq() method of jQuery takes an index parameter to retrieve only one element out of a set of elements.
The .not() method selects everything except the selector rule passed to it.
So in the first line above, out of the 3 .marquee_caption elements, we are selecting all elements except the currently selected one as per the navClick index. So the resulting jQuery object contains 2 out of 3 elements. And then we .animate() them as usual.
Finally, you can simply trigger the click event on the respective .marquee_nav_item element by utilising the same .eq() method i.e. just before your $(document).ready(...) function closes, add this: $('.marquee_nav .marquee_nav_item').eq(0).trigger('click');.
This is one of the options by the way, and probably the quickest and dirtiest. What is happening is that you are triggering the click event manually and hence everything, defined in the click function above, follows.

//animation the caption
$(this).parents('.slide').find('.marquee_caption').animate({'top':275}, 500);
Is this what you mean?

JavaScript Wrap Around Carousel

I am looking for some information from some front end experts on how to go about creating a custom wrap around js carousel gallery. The idea is simple really I have a carousel of images, text, or whatever and when I get to the end I want it to wrap around. I don't want the content to simply fadeIn and out to the next piece of content. This is a gallery of div's currently but suppose it's images or whatever have you.
HTML
<div id="outside-container">
<div id="inside-container" class="cf">
<div class="items" id="item1"></div>
<div class="items" id="item2"></div>
<div class="items" id="item3"></div>
<div class="items" id="item4"></div>
</div>
</div>
<div id="directions">
<h4 id="left-button">Left</h4>
<h4 id="right-button">Right</h4>
</div>
CSS
#outside-container{
display: block;
width: 400px;
height: 125px;
overflow: hidden;
border: 1px solid #000;
margin: 0px auto;
}
#inside-container{
display: block;
width: 800px;
overflow: hidden;
height: 100%;
}
.items{
float: left;
margin: 0px;
width: 200px;
height: 100%;
}
#item1{ background: green; }
#item2{ background: red; }
#item3{ background: blue; }
#item4{ background: yellow; }
#directions{
display: block;
width: 400px;
margin: 0px auto;
text-align: center;
}
#left-button, #right-button{
display: inline-block;
cursor: pointer;
margin: 10px;
}
JS
var move = 0;
$("#left-button").click(function(){
move += 200;
$("#inside-container").animate({
marginLeft: move+"px"
}, 500);
});
$("#right-button").click(function(){
move -= 200;
$("#inside-container").animate({
marginLeft: move+"px"
}, 500);
});
Here is the codepen. So to sum all this up. I am asking for a way to create an infite loop for a gallery. I have always programmed these sorts of things to come to an end and then the user has to go back the other way. If this sounds confusing follow check out the codepen. Thanks in advance.

Here you go
http://codepen.io/nickavi/pen/cpFCE
But for the love of god, please don't use jQuery animate... at least add velocity.js to it, or the GSAP plugin, you don't even have to alter your JS you just add it in and it replaces the animate function with a more efficient one.
Cheers JBSTEW

First set move to the default slider and margin reset amount:
var move = 200;
Then, set the container margin to slide left by the move amount:
var margin_reset = (move * -1) + 'px'
$("#inside-container").css('margin-left', margin_reset);
Then, adjust the animation margin slide using move variable again, and execute a function when the animation is complete that moves the last/first item to the beginning/end of the container using prepend/append.
$("#left-button").click(function(){
$("#inside-container").animate({
marginLeft: 0
}, 500, function() {
$(this).prepend( $(this).find('.items:last') )
.css('margin-left', margin_reset);
});
});
$("#right-button").click(function(){
$("#inside-container").animate({
marginLeft: (move * -2) +"px"
}, 500, function() {
$(this).append( $(this).find('.items:first') )
.css('margin-left', margin_reset);
});
});
To avoid an initial draw jump, you could change the default css #inside-container as:
#inside-container{
...
margin-left: -200px;
}
see: Codepen

Changing image within div when clicked

Spent a couple of days on this now and need some guidance. I have a toggle with an image within the div. Basically when the div is clicked the image within it should change to a different image.
Here is a link to the jsfiddle, so you can see the image at the top which should change once the whole toggle area is clicked.
http://jsfiddle.net/VLe8g/
Also here is the code
HTML
<div class="toggle-wrap">
<div class="trigger">
<div class="one-third"><img src="http://placehold.it/200x200" /></div>
<div class="two-thirds column-last">This is where the heading goes <br />
This is where the description goes<br />
Toggle Open</div>
</div>
<div class="toggle-container">
<div class="one-third">First column This is where the heading goes This is where the heading goes</div>
<div class="one-third">Second column This is where the heading goes This is where the heading goes</div>
<div class="one-third column-last">Third column This is where the heading goes This is where the heading goes</div>
</div>
</div>
CSS
.toggle-wrap {
float: left;
width: 100%;
margin-bottom: 5px;
}
.trigger {}
.trigger a {
display: block;
padding: 10px;
padding-left: 15px;
text-decoration: none;
font-weight: bold;
color: #1D1D1B;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
background: url(tobeadded) no-repeat right 15px #F3F3F3;
}
.trigger.active a {
background: url(tobeadded) no-repeat right -20px #F3F3F3;
}
.toggle-container {
overflow: hidden;
float: left;
padding: 15px 15px 0 15px;
}
.one-third, .two-thirds {
display: inline;
float: left;
margin-right: 4%;
}
.one-third {
width: 30.66%;
}
.two-thirds {
width: 64%;
}
JAVASCRIPT
$(".toggle-container").hide();
$(".trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$(".trigger").click(function(){
$(this).next(".toggle-container").slideToggle();
});
Hope you guys can help me out.
Thanks.

Demo here
Try this:
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://jsfiddle.net/favicon.png');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://placehold.it/200x200');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});

$(this).find("img").attr("src", "http://placehold.it/400x400");
will change the image from a 200x200 to a 400x400. You can add a class to both of them (i.e. class=small, class=big) which jQuery can use to identify which one is currently being displayed and toggle between them.

assign an id to image tag like i did
<img id="test" src="http://placehold.it/200x200" />
and use the following code:
$(".toggle-container").hide();
$(".trigger").toggle(function(){
$(this).addClass("active");
$('#test').attr('src','http://placehold.it/200x200');
}, function () {
$(this).removeClass("active");
$('#test').attr('src','https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/s200x200/851558_201013993381868_2094147002_n.png');
});
$(".trigger").click(function(){
$(this).next(".toggle-container").slideToggle();
});

Add the id attribute to your img, and then change the src attribute every time the toggle handler is executed.
The img definition should something like this:
<img id="myImage" src="http://placehold.it/200x200" />
and your toggle handler should look like this:
$(".trigger").toggle(function(){
$(this).addClass("active");
$("#myImage").attr('src', 'http://placehold.it/some_other_image');
}, function () {
$(this).removeClass("active");
$("#myImage").attr('src', 'http://placehold.it/200x200');
});