I've created some divs fading in with jQuery, I have a problem if the user scrolls a bit down though. If you are not at the top of the page, it will always jump to the bottom when a new div fades in.
Here's my code:
<style>
#overflowwrap {
overflow:hidden !important;
}
</style>
<div id="overflowwrap">
<div id="five" style="display: none;">a lot of content</div>
<div id="four" style="display: none;">a lot of content</div>
<div id="three" style="display: none;">a lot of content</div>
<div id="two" style="display: none;">a lot of content</div>
<div id="one" style="display: none;">a lot of content</div>
</div>
<script>
$('#overflowwrap').css('max-height',$(window).height());
$("#one").fadeIn(500);
setTimeout( function show() {
$("#two").fadeIn(500);
}, 3000);
setTimeout( function show() {
$("#three").fadeIn(500);
}, 6000);
setTimeout( function show() {
$("#four").fadeIn(500);
}, 9000);
setTimeout( function show() {
$("#five").fadeIn(500);
}, 12000);
</script>
Update: Example fiddle: https://jsfiddle.net/6qj1hbp0/1/
This wouldn't be a problem, if this was the only element on a page and the user couldn't scroll. However, it's integrated on another site (survey software), so the user is able to scroll.
Is there anything I can do to prevent the site from jumping to the bottom?
Try a different approach.
Instead, of display: none on every element, try opacity: 0;
Then instead of:
setTimeout( function show() {
$("#two").fadeIn(500);
}, 5000);
use:
setTimeout( function show() {
$("#two").addClass('is-visible);
}, 5000);
and add:
.is-visible { opacity: 1 !important; }
within your <style> tags.
you cannot “freeze” scroll, but you can read and change the scroll position, especially because you are using jQuery.
My solution consists in saving the current position of the scroll immediately before the fadeIn instruction then reassign the same value immediately after, with this function:
function fadeInElement(id, time) {
var currentScroll = $(window).scrollTop();
$('#' + id).fadeIn(time);
$(window).scrollTop(currentScroll);
}
Then you may call the same function several times with different ids and duration time, something like this:
fadeInElement('one', 500);
or this:
setTimeout(function() {
fadeInElement('two', 500);
}, 5000);
You may look a working example on CodePen or on JSFiddle
In short, the easiest thing you can do is hide the previous div every time you show a new one.
https://jsfiddle.net/6qj1hbp0/2/
$("#one").fadeIn(500);
setTimeout( function() {
$("#one").hide();
$("#two").fadeIn(500);
}, 3000);
setTimeout( function() {
$("#two").hide();
$("#three").fadeIn(500);
}, 6000);
setTimeout( function() {
$("#three").hide();
$("#four").fadeIn(500);
}, 9000);
setTimeout( function() {
$("#four").hide();
$("#five").fadeIn(500);
}, 12000);
If you want to fade from one box to the other (which creates a much smoother looking effect), you will need to do some other stuff - most notably:
put the boxes in order, top to bottom, #one to #five (you should do this anyways - it just makes sense congnatively)
set the position to absolute for each of the boxes
set some other styles (see the fiddle below)
use a special class while a box is fading in
https://jsfiddle.net/6qj1hbp0/3/
It's simple. Just reorder your div's to the order you want to show them instead of "five, four, three, two, one".
Your browser doesn't have any intention to take you to the bottom, it's just trying to keep your view point fixed on the current hash navigation. As your fading div is always above, your scrollTop will just jump to the bottom.
Another solution - if you don't want to reorder - is to remove all div id's and creating other way to recognize them, something like "data-id".
PS: look for some id's after too!
Do you need to restrict the overflow with hidden?
You can just set overflow: auto and browser will automatically take care of ensuring scrollTop remains the same after the fade in. The element user is looking at after scroll will remain at the same offset. If user hasn't scrolled then it will show the latest faded element at the top
Here's a jsfiddle: https://jsfiddle.net/sm2qaa3c/2/
After re-reading your comment, it seems you always want to display the latest faded div at the top. In that case you want a function to reset scrollTop to 0. You want to do it on overflowwrap not window since that's where the overflow scrolling will happen.
['#one', '#two', '#three', '#four', '#five'].forEach((id, idx) => {
setTimeout(() => {
$(id).fadeIn(500);
$('#overflowwrap').scrollTop(0);
}, idx * 5000);
});
See jsfiddle: https://jsfiddle.net/sm2qaa3c/3/
Thanks for the answers, they didn't work for my purpose though.
However, I've got a solution from another forum which doesn't require changing the functionality. This seems to work:
$('#overflowwrap').css('max-height', $(window).height());
fadeIn("#one", 0)
fadeIn("#two", 5000)
fadeIn("#three", 10000)
fadeIn("#four", 15000)
fadeIn("#five", 20000)
function cs() {
console.log(document.scrollingElement.scrollTop)
}
document.scrollingElement.scrollTop = 16
function fadeIn(el, when) {
setTimeout(function show() {
var t=document.scrollingElement.scrollTop
$(el).fadeIn(500);
document.scrollingElement.scrollTop = t
}, when);
}
Here is a working example on JSFiddle: https://jsfiddle.net/6qj1hbp0/4/
Related
In a web page I'm writing a user plays a game, once they win, text is supposed to flash. Once the user hits restart the text flashes. I would like to know how I can use Jquery(I have to use jquery as a requirement) to do this?
Thank you for your help!
Below is a snippet that I believe exhibits the requirements you're looking for.
This depends on setInterval and clearInterval to handle a a repeating callback that toggles a CSS class. You can use further css animations / transitions to spruce up the effect more.
(function() {
var flasherInterval = 0,
$flasher = $('#flasher');
$('#win').on('click', function() {
if (!flasherInterval) {
flasherInterval = setInterval(function() {
$flasher.toggleClass('hidden');
}, 250);
}
});
$('#restart').on('click', function() {
console.log(flasherInterval);
clearInterval(flasherInterval);
if (!$flasher.hasClass('hidden')) {
$flasher.toggleClass('hidden');
}
flasherInterval = 0;
});
}());
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="win">Win</button>
<button id="restart">Restart</button>
<p id="flasher" class="hidden">Flashing text!</p>
$(function(){
// loop showing and hiding for 1.5 seconds
while(blink){
setTimeout(function(){ $('#myDiv').hide() , 1500);
setTimeout(function(){ $('#myDiv').show() , 1500);
}
});
don't actually use this code - it's pretty bad , and meant to get you started ... just an idea - this shows for to set a delay , how to show and hide
You could also use the blink plugin. http://antiyes.com/2009/08/24/jquery-blink-plugin/
JSFiddle: Fiddle
The way it is supposed to work is as follows:
1 - the red blocks slide from top to bottom
2 - once that is done then the red boxes fadeOut
3 - then blue boxes fadeIn
Following is the html :
<div class="posRel">
<div class="trans1"></div>
<div class="trans2"></div>
<div class="trans3"></div>
<div class="trans4"></div>
<div class="trans5"></div>
<div class="trans6"></div>
<div class="trans7"></div>
</div>
Following is the js :
for (i = 1; i <= 7; i++) {
$('.trans' + i).toggleClass('toggle');
}
setTimeout(function () {
$('.toggle').fadeOut('slow', function () {
$(this).addClass('fSmall1').fadeIn('slow');
});
}, 2000);
Link to the project: http://50.87.144.37/~projtest/team/design/EO/page-2.html
Link to the JSFiddle
Issues that i am facing :
fadeOut and fadeIn are not working
anything better than settimeout to do this?
I am rather inexperienced when it comes to js/jQuery so feel free to point out any silly mistake(s) too. Thanks.
i had used fadeto property, try the link. http://jsfiddle.net/zcYLM/10/
[http://jsfiddle.net/zcYLM/10/][1]
[1]: http://jsfiddle.net/zcYLM/10/
If you're using jQueryUI, this will work:
http://jsfiddle.net/zcYLM/11/ (this is an updated one)
This is a basic, stripped down example of your problem, but you can apply it to your code.
JS:
$(document).ready(function() {
$('div[class*=trans]')
.toggleClass('toggle', 2000)
.promise()
.done(function() {
$(this)
.fadeOut(2000)
.promise()
.done(function() {
$(this)
.addClass('blue')
.fadeIn(2000);
});
});
});
CSS:
.posRel {
position:relative;
}
div.posRel > div {
background-color:red;
position:absolute;
top:0px;
width:100px;
height:100px;
}
div.posRel > div.trans1 { left:-50px; }
div.posRel > div.trans1.toggle { left:100px; top:150px; }
div.posRel > div.blue { background-color:blue; }
I'll try and attack most of your problems in one hit, but I suspect we may need a little back and forth to completely solve it.
Firstly, your fade in / out issue is tied to the way your animation is being fired. You're essentially calling the fade out on every element individually and then the fade in, but from the functionality you described in your requirements you should be firing one fade on the container instead:
for (i = 1; i <= 7; i++) {
$('.trans' + i).toggleClass('toggle');
}
setTimeout(function () {
$('.posRel').fadeOut('slow', function () {
$('.toggle').addClass('fSmall1');
$('.posRel').fadeIn('slow');
});
}, 2000);
Fiddle
Smooth Transition
If you'd like to have a smooth fade without it blinking out and then back in you can use the fadeTo() method instead. A FadeTo() example can be found below, this will have all of the shapes fall down, pause for a fraction of a second, and then change colour. You can experiment with removing the setTimeout now that the fadeTo controls the animation time, but I've left it as close to the original as possible.
for (i = 1; i <= 7; i++) {
$('.trans' + i).toggleClass('toggle');
}
setTimeout(function () {
$('.posRel').fadeTo('slow', 2, function () {$('.toggle').addClass('fSmall1');});
}, 2000);
fadeTo() Example Fiddle
I'm working on a web site that uses the jquery animate function to expand the web site from the top left corner when it is loaded. I wasn't actually the one who wrote the code for that feature so I'm not overly familiar with it. It did work at one point but at the moment it doesn't seem to be working at all. I know the .js file is being loaded and is running because the first bit of code in it is a time delay that shows a "Page is being loaded" message. But then it just shows the page already loaded instead of animating the page appearing from the top left and sliding in. I included the CSS and mark up also although I don't believe that's where the problem lies. Any help would be appreciated! Thanks!
Note: We're using Jquery version 1.7.2
The CSS:
#builder
{
position:relative;
min-height:100%;
min-width:100%;
z-index:999;
}
The JavaScript:
function hideIt() {
document.getElementById("wait").style.display = "none";
}
setTimeout("hideIt()", 1000);
function showIt() {
document.getElementById("builder").style.display = "block";
}
setTimeout("showIt()", 2500);
function build() {
$(document).ready(function () {
$("#builder").animate({ height: '0%', width: '0%' }, 1);
$("#builder").animate({ height: '100%', width: '100%' }, 2000);
});
}
The mark up:
<body onLoad="build()">
<img src="wait.gif" id="wait" style="display:block;" />
wait.gif is just a picture that says "page is loading"...
And the page is wrapped in these:
<div id="builder" align=center style="display:none;">
If the #builder element is hidden for 2.5 seconds before it's shown, the animation will be completed by the time the element is shown. Remove the inline function on body onLoad and try:
function hideIt() {
$("#wait").hide();
}
function showIt() {
$("#builder").show(2000); //should do somewhat the same as animating from the top left
}
$(function() {
setTimeout(hideIt, 1000); //no need to quote the functions and eval them
setTimeout(showIt, 2500);
});
or just
$("#wait").delay(1000).hide(10);
$("#builder").delay(2500).show(2000)
Likely that it's being animated long before your show() is invoked. So by the time it's displayed, the animation is done.
Try adjusting your code like so:
$(document).ready(function() {
$('#wait').hide(1000, function(){ // hide the #wait
$("#builder").show().animate({ // then show, then animate #builder
height: '100%',
width: '100%'
}, 2000);
});
});
Side Note: Remember that when you're using percentages and the element containing #builder, also needs to have it's height and width set.
Have a few divs that need to show/hide and the buttons within need to know when it's on and when it's off. Somehow they need to "communicate with another" to know when to be hidden or visible. Oh yeah, I'd like to keep the smooth fadein/fadeout effect on all elements.
Thanks!!
My fiddle is here:
http://jsfiddle.net/Pe9jn/
Here's the code I've got that mostly works, but it's a bit quirky:
//hide maximize link on page load
$('.maximize_menu').css('display','none');
//settings
var opacity = 1, toOpacity = 0, duration = 350;
//set opacity ASAP and events
$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
}, function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
}
);
// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
}, function() {
$('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
$('.maximize_menu').show(duration,toOpacity);
$('.maximize_menu').css('display','block');
}
);
// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
}, function() {
$('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
}
);
I think that you should rethink all the logic, because you are not actually hiding the elements, you are just setting the opacity to 0. What you should really use is fadeOut() and fadeIn()
Live Example Here
Press any of buttons. Can you see shaky slideDown effect? In fact it must be smooth and slow slide down.
If you've pressed for 1 time any of buttons try to press another one. The show and hide animation of forms is awful.
During anim.
After anim.
How to fix this problems?
The shakiness seems to be happening when each of the elements in the tab is hidden or displayed.
Get the height of each of your tabs and implement your resizing animation to those heights rather than individually animating after each element is hidden or displayed.
Try to play with .animate() and .fadeIn() .fadeOut() .fadeTo(time,opacity) instead of just .show() or .hide()
It's loading quite well for me. However it did take a long time for it to load in the first place. If you go to: http://gtmetrix.com/reports/tural.no-ip.org/ANBNA45n You'll see that your page is loading quite slowly and the stuttering effect you are seeing is probably coming from your computer having issues with the amount of information coming in.
You can try and speed things up a bit by making less $(selector) calls.. cache some of your jQuery objects when you are using them multiple times... also remember you can chain functions on jQuery objects.. jQO.addClass("foo").removeClass("bar"); is the same as jQO.addClass("foo"); jQO.removeClass("bar");
like so...
(function(){
var signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container");
$(".button").click(function () {
if (counter === 0) {
signin.removeClass('default_radius').addClass('right_radius');
signup.removeClass('default_radius').addClass('left_radius');
$("#first").animate({
marginTop: "-=150px",
}, 500);
}
});
signup.click(function () {
if (counter === 0) {
holder.addClass('red_border').slideDown("slow");
f_container.show();
signup_f.show(0);
} else {
signin_f.hide(0);
holder.switchClass( "green_border", "red_border", 1000 );
f_container.animate({height:"260px"},1000);
signup_f.show(0);
}
counter++;
});
signin.click(function () {
if (counter === 0) {
holder.addClass('green_border').slideDown("slow");
f_container.show();
signin_f.show(1000);
} else {
signup_f.hide(0);
holder.switchClass( "red_border", "green_border", 1000 );
f_container.animate({height:"110px"},1000);
signin_f.show(0);
}
counter++;
});
})();