We Keep Coding

Image scroll fadeIn, go to next section when done

Things I'm trying to accomplish:
Images go to the next one based on scroll.
The images will cycle through, and when they are all done the view will proceed to the bottom section. A problem with what I have right now is that, when I scroll, the view doesn't stay on the image, but moves on to the rest of the page--so even if the image changes, the image is no longer in the viewport.
fadeIn when it goes to the next image (or use another animation).
When scrolling up, it goes back up the image sequence.
If there is a jQuery plugin that does this, please feel free to refer.
jsfiddle: http://jsfiddle.net/jzhang172/gcSe8/145/
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$(".img-container > img").fadeIn("slow").attr('src',' http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449');
} else if ($(document).scrollTop() > 110) {
$(".img-container > img").fadeIn("slow").attr('src','http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508');
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
}
.img-container img{
height:100%;
width:auto;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>

Try this:
$(document).ready(function () {
var images_index = 0;
var act_cycle = 0;
var n_cycles = 5;
var images = ["https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg","http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449","http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508",]
$(window).on('DOMMouseScroll mousewheel', function (e) {
if ($(".img-container").is(':hover')){
if (e.originalEvent.wheelDelta < 0) {
if(images_index < images.length-1){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if(++act_cycle % n_cycles == 0){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[++images_index]).fadeIn("slow");
}
}
}
else {
if(images_index > 0){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if (--act_cycle == -n_cycles){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[--images_index]).fadeIn("slow");
}
}
}
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
z-index: 2;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
z-index: 1;
}
.img-container img{
height:100%;
width:auto;
z-index: 1;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>
Explanation:
Images go to the next one based on scroll.
To solve this I just put in an array all the images, changing the src depending on the index of the array that I'm updating depending on the scroll direction (see wheelDelta)
The images will cycle through, and when they are all done the view
will proceed to the bottom section. A problem with what I have right
now is that, when I scroll, the view doesn't stay on the image, but
moves on to the rest of the page--so even if the image changes, the
image is no longer in the viewport.
To prevent the normal scroll I used the DOMMouseScroll and mousewheel events, then preventDefault and stopPropagation and I only fire this logic if the img-container is hover.
fadeIn when it goes to the next image (or use another animation).
I just first fadeOut, the change src and finally fadeIn
When scrolling up, it goes back up the image sequence.
Solved with the array of images.
In adition, I add some z-index, because of the behavior of the jQuerys fadeIn/Out and a scrollTop to fix the view on the image when is changing
UPDATE: If you want to change the image in a certain numbers of 'cycles' you can add a var to control it (here is n_cycles, change his value to change the number of cycles you want wait until image changes, I set it to 5 as you say in comments).

Create div transition like Spotify

I would like to have some help about the transition of a div in CSS or JavaScript.
I have a <div> with dispay:none;.
With some JS, i change the display option on display:block.
All is working correctly.
But i would like to know how to make a transition when the <div> appear on the screen.
Like the player Spotify when you want to search something.
Thanks for you help.
And really sorry for my BAD english !

You can do it with a JQuery like this:
$(function() {
var open=false;
$('.menubar span').click(function(){
if(open==false){
$('.search').css('left','50px');
open=true;
}
else{
$('.search').css('left','-100px');
open=false;
}
});
});
.menu{
position:fixed;
left:0;
top:0;
width:50px;
height:100%;
background:#222021;
z-index:4;
}
.menubar{
width:50px;
height:100%;
color:white;
font-family:arial;
}
.search{
position:absolute;
left:-100px;
top:0;
width:100px;
background:lightgrey;
height:100%;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s ;
-webkit-transition:.3s;
transition:.3s ;
}
.search input{
margin:0;
width:75px;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
<div class="menubar">
<span>Home</span>
</div>
</div> <div class="search"><input type="search"></div>
Click "Menu" in the menu bar, and the search bar slides out, click again to hide it.
To use JQuery, you have to include the jquery library:
include this in <head>:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Or download it from:http://jquery.com/download/
Then, just use the script like normal JS, in a <script> tag.
EDIT:
With your problem in the comments below, #navbar had a static position, which means z-index will not work for it:
#nav-bar {
background-color: #23232C;
bottom: 0px;
left: 0px;
top: 0px;
width: 220px;
height: 100%;
margin-top: -17px;
z-index: 99;
position: absolute;
}

The following answers uses CSS Style Declarations to accomplish the transition effect.
if you declare the transition: all 1s style on an element. If the style property changes on that element your browser's (user-agent's) graphic device will calculate and update the frames (or visual changes) that occur between the two states (initial state, and end state). However, the property that is being changed must be scalar; that is, both the initial value and new value are scalar (like 0% being set to 100%). Additionally, if you're changing a property that is not scalar, but affects the rendering of other properties.. they will skip the transition effect (aka display:none being set to display:block).
Note: Instead of changing the inline style on the elements using Javascript, we're going to instead change the class of those elements; meaning, the following styles represent visual states, which we'll toggle between..
Again, the transition style declaration (or rather, the graphic device) will handle the incremental rendering of the frames between these two states.
Code Sample of changing 4 style properties (explicitly)
var str = 'hide';
var btn = document.querySelector("button#toggler").addEventListener('click', function(ev)
{
var elms = document.querySelectorAll('div.block');
for (var i = 0, lng = elms.length; i < lng; i++)
{
elms[i].className = elms[i].className.replace("hide", "").replace("show", "").replace(" ", "");
elms[i].className = elms[i].className + ' ' + str;
}
str = (str === 'show') ? str = 'hide' : 'show';
});
.block {
display:block; position:absolute;
top:0;
left:0;right:80%;
bottom:0;
background-color: rgba(0,0,0);
border:0.1em solid black;
min-width:5em;
transition: left 2s, opacity 2s, right 2s, background-color 1s;
}
.wrapper
{
display:block;position:relative;background-color:whitesmoke;
min-height:10em;
width:auto;
}
.show {opacity:1;left:0%;right:80%;background-color:rgb(255,0,0);}
.hide {opacity:0;left:80%;right:0%;background-color:rgb(0,0,255);}
<button id="toggler">Toggle Block</button>
<div class="wrapper">
<div class="block"></div>
</div>
The following is a fairly more complex slider, which ulitmately uses the same principal for rendering the transitions.
$("div.slide > button.show" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slidePrev = slide.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
})
$("div.slide > button.hide" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slideNext = slide.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slidePrev.toggleClass("hide").toggleClass("show");
})
html, body {display:block;position:relative;margin:0 auto;padding:0;height:100%}
div.wrapper {position:relative;
left:0;right:0;top:0;bottom:0;
width:auto;
background-color:whitesmoke;
display:block;
overflow:hidden; height:100%;
}
button {line-height:2em;padding:0.2em;display:block;}
div.slide {
display:block;
position:absolute;
border:0.2em solid black;
background-color:white;
top:0;
bottom:0;
right:0;
left:0;
opacity:1;
transition: left 1s, opacity 0.5s;
}
div.slide:nth-child(1) {
left: 1em;
z-index: 1;
}
div.slide:nth-child(2) {
left: 3.5em;
z-index: 2;
}
div.slide:nth-child(3) {
left: 6em;
z-index: 3;
}
div.slide:nth-child(4){
left: 8.5em;
z-index: 4;
}
div.slide.hide {
opacity:0.3;
left: 59%;
}
div.slide.show {
opacity:1;
}
div.show > button.show {display:none;}
div.hide > button.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
</div>

How to eliminate the flicker from this JQuery/CSS3 Animation

I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)

Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )

I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.

Absolute Positioned img inside absolute div doesnt position as expected

I have the following html
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="images/internal_banner_holder.png" />
<img class="internal_banner" src="images/about-banner.jpg" />
<div id="overlay">
<img class="internal_banner_overlay" src="images/about-banner_hover.jpg" />
</div>
</div>
</div>
css
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:340px;
height:200px;
z-index:-1;
border:2px #aeaeae solid;
}
#overlay_field
{
position: relative;
width:1000px;
height:250px;
overflow:hidden;
}
and the following script as mentioned by #rkw
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
$("#overlay").css({left:e.pageX-360, top:e.pageY-280});
});
});
The Effect I'm trying to achieve here is:
An image appears in as a banner "internal_banner"
When the mouse hovers over this image(or rather "overlay_field") a small div appears which follows the mouse. Now the contents of the div is another image "internal_banner_overlay"
I want this image to be positioned exactly as "internal_banner", i.e stay in the same place so it appears like the mouse let's you see another underlying image. The problem is the image doesn't stay at one place, it positions within the div and moves with the mouse rather than the document even though it's position is set to absolute.
In simple words, when the mouse moves over the banner area, it should appear like the cursor changed to a small box that let's you see through the banner at another image.

Just add the temp banner in the upper div and change its opacity on mouseover and mouseout events.
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="abcd.png" />
<img class="internal_banner permBanner" src="permBanner.png" />
<img alt="" src="tempBanner.jpg" id="temp" style="height: 250px; width: 1000px; opacity: 0; position: absolute">
</div>
</div>
JS:
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
var width = 250;
var height = 250;
var left = parseInt(e.pageX)-parseInt(pageXOffset);
var top = parseInt(e.pageY)-parseInt(pageYOffset);
var a = document.getElementById("temp");
a.style.opacity = 1;
a.style.left = "0px";
a.style.top = "0px";
a.style.clip = "rect("+top+","+(left+100)+","+(top+100)+","+left+")";
});
});
Style
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block;
}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:250px;
height:250px;
border:2px #0000bb solid;
}
#overlay_field
{
position: absolute;
width:1000px;
height:250px;
overflow:hidden;
}​
#temp{position:absolute;}
Alternate:
Or alternatively you can add and remove the temporary banner on the mouseover and mouseout events.

how to prevent javascript div popup from jumping back to the top of the page?

I have the following neat code that opens a small popup box when the link is clicked ...the problem is that I use it on a very long page with lots of content, and whenever someone opens the popup, the actual content page jumps back to the very top, which is annoying if someone just spent a while scrolling down. How can I force the page to stay there even though the popup window is opened/closed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display:none;
position:absolute;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br>[Close]
</div>
Show
</body>
</html>

change this code:
from [Close]
to
[Close]
and also:
Show
to:
Show
Try that.

Try changing this
[Close]
to
<a onclick="closePopUp('dialog');">[Close]</a>
and this
Show
to
<a onclick="showPopUp('dialog');">Show</a>

When you click on the link to open the popup, you are actually navigating to "#" which causes the scrollbar to go back to the top of the page. You really shouldn't use the onclick attribute anymore, it's better to attach an event listener to an element with Javascript.
As mentioned by user Sammy above, using href="javascript:void(0)" should prevent this behavior. Personally I like to just leave the href attribute off of the <a> tag if I'm not actually using it as a standard link. The only downside is that you need to re-style the link to look like a normal link as it will be styled differently if it's missing the href attribute.
I've made a JSFiddle with a solution. As you can see, I removed the href attribute and re-styled the links, using Javascript to add event handlers for the links. You can scroll down a bit and click the link; the popup will open and the scrollbar will remain in the same position.
The code:
HTML:
<div class="container">
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br><a class="close-button" data-popup="dialog">[Close]</a>
</div>
<a class="show-button" data-popup="dialog">Show</a>
</div>
JS
var showButton = document.getElementsByClassName('show-button');
var closeButton = document.getElementsByClassName('close-button');
showButton[0].addEventListener('click', showPopUp);
closeButton[0].addEventListener('click', closePopUp);
function showPopUp(e) {
e.preventDefault();
var dialogId = e.currentTarget.getAttribute('data-popup');
var scrollPos = window.scrollY;
var cvr = document.getElementById("cover")
var dlg = document.getElementById(dialogId)
cvr.style.display = "block"
dlg.style.display = "block"
window.scroll(0, scrollPos);
}
function closePopUp(e) {
e.preventDefault();
var dialogId = e.currentTarget.getAttribute('data-popup');
var cvr = document.getElementById("cover")
var dlg = document.getElementById(dialogId)
cvr.style.display = "none"
dlg.style.display = "none"
}
CSS
.container {
height: 5000px;
}
.show-button,
.close-button {
position: fixed;
color: blue;
text-decoration: underline;
}
.show-button:hover,
.close-button:hover {
cursor: pointer;
}
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display: none;
position: fixed;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}

try using position:fixed instead of position:absolute.
For more read: http://www.w3schools.com/Css/css_positioning.asp