Develop Reference

How to make two elements appear and disappear on a top of each other in an infinite loop

I trying to make header one disappear, then header two appear and disappear and header one appear in a loop. The problem with my code is, that header two appears only for very short amount of time and empty screen follows for at least 2-3 seconds before header one appears.
JS:
var h1 = $('.header_one');
var h2 = $('.header_two');
setInterval(function(){
h1.fadeOut(1000);
h2.fadeIn(1000);
h2.fadeOut(2000, function() { h1.fadeIn(); });
}, 4000);
HTML:
<h1 class="header_one"> HEADER ONE </h1>
<h2 class="header_two"> HEADER TWO </h2>
CSS:
h1, h2 {
z-index: 10;
position: relative;
}
h2 {display: none;}
There is also a problem: when header two disappears, my two links underneath h1 and h2, that are set to position: relative; move to the top of the page.

Here's one way to do it: jsfiddle
$("#box1").hide();
function animate() {
$("#box2").fadeOut(1000, function() {
$("#box1").fadeIn(1000, function() {
$("#box1").fadeOut(1000, function() {
$("#box2").fadeIn(1000, animate);
});
});
});
}
animate();
div {
position: absolute;
left: 20px;
top: 20px;
background: red;
width: 50px;
height: 50px;
}
div:nth-child(2) {
left: 30px;
top: 30px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1"></div>
<div id="box2"></div>

The reason why your links are moving up when the headers disappear is because the fadeIn and fadeOut are manipulating the display property which removes it from the flow of the document. Only the visibility property would retain the element's position and reserve the space for it.
Assuming that your 2 headers look the same in terms of styling, why not use just one and change the text inside it while animating the color/transparency?
But if you really want to fire them in sequence given your code then you need to do what you did on the last line, where one is a callback when the other finishes; however, this won't fix your links moving up problem.
This is a really nasty/bad way of doing it, but it works...
setInterval(function(){
$('h1').fadeOut(function(){
$('h2').fadeIn();
});
}, 4000);
setInterval(function(){
$('h2').fadeOut(function(){
$('h1').fadeIn();
});
}, 8000);

this is my option to do a loop with jquery animate:
https://jsfiddle.net/vbw8jLko/
var h1 = $('.header_one');
var h2 = $('.header_two');
function loop(){
console.log('llop');
$( ".header_one" ).stop().css('opacity', 0).show().animate({opacity:1}, 700).delay(700).animate({
opacity: 0
}, 1000, function(){
$(this).hide();
$( ".header_two" ).stop().css('opacity', 0).show().delay(100).animate({
opacity: 1
}, 1000).delay(700).animate({opacity:0}, 1000, function(){
$(this).hide(); loop()});
});
}
loop();
Expect like it :)

Change DIV display value using Javascript/Jquery function

Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.

you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});

Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle

How to make a partially hidden div?

I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.
I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.
You can find the demo here: http://jsfiddle.net/8ZFMJ/394/
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": -430});
}
else
{
clicked=true;
$(".two").css({"bottom": "-200px"});
}
});

I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.
Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).
It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:
if(clicked)
{
$(".two").css("height", 10);
}
else
{
$(".two").css("height", 250);
}
clicked = !clicked;
clicked = !clicked just flips the boolean state of the variable.
Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle
Basically, all we had to do in between is use animate instead of css. Simple, really.
TL;DR
final JSFiddle

.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.
CSS:
html, body { height: 100%; }
.container {
position: relative;
height: 100%;
overflow: hidden;
}
.two {
position: absolute;
background-color: yellow;
width: 100%;
height:250px;
bottom: -200px;
transition: bottom 1s;
}
jQuery:
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": "-200px"});
}
else
{
clicked=true;
$(".two").css({"bottom": 0});
}
});
http://jsfiddle.net/8ZFMJ/398/

scrollTop & scrollLeft do not work on display:none elements

I'm trying to scroll an hidden element before I show it. This is the code i'm working with:
<div class="main">
<div class="bg">
</div>
</div>
.main {
display:none;
position:abolsute;
width:250px;height:250px;
overflow:scroll;
}
.bg {
background: blue url(http://defaulttester.com/img/bg-landing-mario.jpg);
width:1200px;
height:800px;
}
$(".main").scrollTop($(".bg").height()/2);
$(".main").scrollLeft($(".bg").width()/2);
IT works fine if its showing but if its display:hidden it will simple not work. Is there anyway to avoid this and make it work?
JSFiddle: http://jsfiddle.net/dpjzJ/

Use visibility: hidden; or some class like this instead:
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
Or this (from Boilerplate):
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Something with display: none; has no location on the page, as you probably knew.
Check out this article on the subject.

If your goal is to just set scrollLeft and scrollTop to 0(since that was my goal), one very hacky solution is to follow these steps:
Get a reference to the element you want to reset.
Get a reference to the element's parent.
Remove the element from the parent.
Append the element back to the parent.
scrollTop and scrollLeft will now be set back to 0 even though they are invisible.

function resetScroll(element) {
element.parentElement.replaceChild(element,element)
}
This will set both scrollTop and scrollLeft to 0 even if display none.
Example use:
resetScroll(document.getElementById("my_scroll"))

It's not ideal, but the way I solved this is to add a one-time IntersectionObserver that triggers the first time the element becomes visible. Here's a function to add a callback for when an element first becomes visible:
function onVisible(element, callback) {
new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.intersectionRatio > 0) {
callback(element);
observer.disconnect();
}
});
}).observe(element);
}
And use it like this:
let myElement = document.querySelector("#myElement");
// When the element first becomes visible, scroll it to 500px:
onVisible(myElement, el=>el.scrollTop=500);
Example: https://jsbin.com/gigumewemo/edit?html,output

JQuery slider: slide down the whole page

The source code is here: JSfiddle
$(document).ready(function () {
$("#slide-link").click(function ()
{
$("#slider").hide("slide", { direction:"down" }, 1000);
});
});
The problem is:
How to make "Click here" link to fall down with that green block and stayed on the very bottom (green block disappeares, "click here" link stays on the bottom)?
Once "Click here" pressed the second time (on the very bottom), everything goes up (the second click on the link eliminates the first click). As result, there are no changes on the page after two clicks.

First of all; your problem start when height value became to decrease, you should change your css structure. Second you need to use an external class to understand that object is active or not.
Here is jsFiddle example.
jQuery:
$("#slide-link").click(function (){
if (!$(this).hasClass('active')) {//if clicked object has not got class active
$("#slider").stop().animate({'bottom':'-401px'}, 1000);
$(this).addClass('active');
}else{
$("#slider").stop().animate({'bottom':'0px'}, 1000);//added stop to prevent
$(this).removeClass('active'); //create an animate conflict
}
});​
css:
#global-container {
background-image : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
height : 400px;
overflow:hidden;
}
Edit:
If you want to slide down click text too, inspect this jsFiddle example.

Try the following code.
jQuery:
$("#slide-link").click(function () {
if($("#slider").is(":visible")){
$("#slider").hide("slide", { direction:"down" }, 1000);
$("#slide-link").animate({top: '380px'}, 1050)
} else if($("#slider").is(":hidden")) {
$("#slider").show("slide", { direction:"down" }, 1000);
$("#slide-link").animate({top: '0px'}, 950)
}
});
Modification in CSS:
#global-container
{
background-image : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
height: 400px; /* Added Height */
overflow: hidden; /* Added Overflow Property */
}
#slider
{
margin : 20px 0 0 0; /* Added Top Margin */
width : 100px;
height : 400px;
background : green;
position : relative;
}
/* Added New Style */
#slide-link
{
position: absolute;
top:0;
left:0;
z-index:9999;
height: 20px;
}
SEE DEMO