Jquery Slideup Function shows a bug - javascript

Im using the slideUp function to slideup and down an adblock message, but when you see the adblock alert, after you scroll down, it takes a second for the navigation bar to adjust to the top. It gives the whole process a buggy look--this change should be instant and perfect.
you can see an example here: https://www.mallyear.com/search?q=phone
the code Im using for the slideUp function is this:
jQuery(window).on("scroll", function(){
// adblocker is the Id for the ad message
// t3-header is the Id for the Nav bar
var startY = 1;
if(jQuery(window).scrollTop() > startY){
jQuery('#adblocker').slideUp("fast");
jQuery('#t3-header').css({position: 'fixed', top: '0px'});
}else{
jQuery('#adblocker').slideDown("fast");
jQuery('#t3-header').css({position: 'static', top: '80px'});
}
});
To see this adblock notification, is needed an extension like "Ad Blocker Plus" on Google Chrome, and you should have it running. The bug shows when scrolling down just for a second but is there. Many thanks for the help

I can't be sure that this is what you're looking for, but I imagine you want to have the css for t3-header be changed only after the slide has completed, right?
If so, anything you want to happen once the slide is finished should be in a function passed as an additional argument to the slideUp/slideDown function. For example:
jQuery('#adblocker').slideUp("fast", function() {
jQuery('#t3-header').css({position: 'fixed', top: '0px'});
});
If that's not the cause of the problem my apologies!
EDIT
After the comments I wonder if maybe you should cut out the slideUp animation all together, and just have the navBar stay fixed to the top once the user has scrolled beyond the adblock div (150px as I understand it). I would change the code to this:
if(jQuery(window).scrollTop() > 150){
jQuery('#t3-header').css({position: 'fixed', top: '0px'});
}else{
jQuery('#t3-header').css({position: 'static'});
}
EDIT 2
Ok one more option, but this would require changing how your elements are set up.
The problem with having the ad-blocker slide up is that by definition the user will already have scrolled down a bit, so by the time the ad-blocker div has fully slid up, the navbar will have already gone over scroll-top, only to snap back down again once its css has been changed to fixed.
So what you need is to have both the navbar and the adblocker div be in one fixed, container div. This will nullify the need to change the css of the navbar itself, and you can use the slideUp animation on adblocker with it ending in the correct place. So you have:
<div id ="navContainer" style="position:fixed; top:0px">
<div id = "adblocker" class = "container-fluid">
...
</div>
<div id = "t3-header" class="container t3-header">
...
</div>
</div>
(you could put that css in your css file once you're happy with what you have of course)
And in javascript you have:
if(jQuery(window).scrollTop() > 1){
jQuery('#adblocker').slideUp("fast")
}else{
jQuery('#adblocker').slideDown("fast")
}
I suspect that will provide the effect you're hoping for.

Related

Fading text+icon when scrolling down. Appears while again on top

I'm trying to create some sort of info "Scroll Down" button (not clickable) which has to be visible while scroll bar is up on top, fade out when scroll down a few pixels and fade back in when up again.
So far I was able to create the arrow and the message so far as well as the fading part.
Here is a fiddle: https://jsfiddle.net/8b3jL7r0/1/
var btn = $("#button");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn.addClass("show");
} else {
btn.removeClass("show");
}
});
var btn2 = $("#scrolltxt");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn2.addClass("showx");
} else {
btn2.removeClass("showx");
}
});
The problem with is that the arrow and the info text 'Scroll Down' does not appear right from the beginning, you have to scroll down a bit so they appear on top and then everything works smooth. Any clue how to make them visible right from the first load of the code?
Any idea how could I transfer all this code into one single code module in WordPress and have it work exactly like in the fiddle ? Because I've tried to insert it but it seems to not work at all, nothing appears on the page, not the arrow nor the info text.
I just added the inital classes to both elements:
https://jsfiddle.net/4e2cafju/
<div id="button" class="show"></div>
<div id="scrolltxt" class="showx">scroll down</div>
for 2:
You should be able to put these elements directly into a template. You should be able to add the css to the style sheet. And you could lnk to an external JS file. That would probably be best practice. You could also put all the code into a single page. I'm not sure how your wordpress install / theme is set up.

Jquery navbar animation not working properly

I looked through this website for similar question, but couldn't find any.
So I've been working on a website with bootstrap3 for a little bit now and most of the formatting/design part is done, but have one problem I can't solve myself.
I added Jquery to make the navbar shrinks and changes background color when users scroll down to a certain point.(Thanks to peeps helped me out here)
It kind of works, but the movement of it is really weird.
When load the page, the navbar is already shrunk and background is colored, but when scrolled a little bit it blows up in size and the background disappears, and when scrolled even more to the point where I set Jquery to start working, navbar shrinks back and background color changes again.
It's hard to explain in writing, so please see the website and see what I'm talking about.
Below is the website I'm working on.
Test website
I'm assuming its the Jquery not working when loaded, so the CSS setting supposed to be hidden(shorter navbar height and background color) isn't hidden initially.
Below is the jquery code:
$(document).ready(function(){
$(window).scroll(function () {
if ($(window).scrollTop() > 70) {
$("#top-bar").addClass('animated-header');
} else {
$("#top-bar").removeClass('animated-header'); }
});
$("#clients-logo").owlCarousel({
itemsCustom : false,
pagination : false,
items : 5,
autoplay: true,
})
});
Thanks for the help in advance!
Nice website!
Take a look at your header element, you will see that you already put the animated-header class there which causes the problem. Here is your code:
<header id="top-bar" class="navbar-fixed-top animated-header">
What you can do is simply remove that class, and your script above will help deal with adding/removing this class base on the scrollTop value. Something like this will help:
<header id="top-bar" class="navbar-fixed-top"> <!-- without animated-header -->
We are setting our scroll position back to zero, so this works fine. Add this,
$(document).ready(function () {
$('html,body').animate({
scrollTop : 0
},10);
});
$(document).ready(function () {
$(window).scroll(function(){
if($(window).scrollTop() >= 70){
$("#top-bar").addClass("animated-header");
}
if($(window).scrollTop() <= 70){
$("#top-bar").removeClass("animated-header");
}
});
});

Slide old page out as current page slides in

I'm using jquery on a single page web site to slide the next "page" onto the screen when the user clicks a button. I would like the current page to slide out to the left as the new page slides in from the right, so that there is no empty space shown, but currently I am only able to get the current page to disappear as the next page slides in. The code I'm using is here: http://jsfiddle.net/xoa029jz/5/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
$(nextPage).css('display', 'block');
$(currentPage).animate({left: '-100%'});
$(currentPage).removeClass('current-page');
$(nextPage).addClass('current-page');
$(nextPage).animate({left: '0%'});
}
Your CSS transitions are fighting with the jQuery animation. Until I hear which you prefer I have turned off the CSS transition.
The other fixes are to set the initial position of the elements about to animate and to wait for the panel to leave completely before removing the current-page class.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/xoa029jz/8/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
currentPage.css('left', '0%').animate({
left: '-100%'
}, function () {
currentPage.removeClass('current-page');
});
nextPage.css({'display': 'block', 'left': '100%'}).addClass('current-page').animate({
left: '0%'
});
}
I also cleaned up a few redundant items (chained selectors etc).
You are better off just using jQuery animation, initially while you get it working, then adding a plugin (like velocity.js) to make the animations use CSS transitions, rather than try to mix the two.

Disable page scroll until page loads - JQuery

I have built a parallax scrolling intro for a clients website - the site contains many high res images - so I have created a quick loader which blanks out the screen with a full screen high z-index div and then uses the setTimeout method to fade in the page 4 seconds after document ready (not sure if this is the best way to do this but it works in every test I've tried).
I would like to disable the scroll to prevent users scrolling through the animation before it appears -can anyone recommend a good cross-browser method to do this?
If you want to fade in when all images are loaded, you can try this
var images = $('img');
var images_nbr = images.length;
images.load(function() {
images_nbr--;
if (images_nbr == 0) {
$('body').css('overflow','auto');
$('...').fadeIn();
}
});
Set
#mydiv {
overflow:hidden
}
in your parent div in CSS. Then, in your document, add this...
$('#mydiv').css('overflow', 'auto');
...in the function that fades in your content.
Thus, on load the page will be unscrollable, but when you fade in, the overflow property will be overwritten and allow the content to scroll.
.scrolldiv{
overflow:hidden;
}
$(window).load(function(){
$(".scrolldiv").css("overflow","auto");
});
You can try like,
initially add the below css on body
body {overflow:hidden;}
and after your setInterval function complete execution (whatever your loading function) just remove the style from body, like
$('body').css('overflow','auto');

How to make div appear from the top when scrolling down?

I would like a div to appear and slide down once you scroll pass the header.
Here's what it should look like:
http://www.space.com/11425-photos-supernovas-star-explosions.html
Here's what I got so far but it's not working.
http://jsfiddle.net/nHnrd/
You'll need to find out the height of the header and its position on the page then just show or hide the div depending on the scrollTop value using jquery.
For example:
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
Then you'll just need to set the .fixedDiv to position:fixed: top: 0; left: 0;
Edit: I've added a checkY() function that you can call whenever the page loads as well as on scroll. To hide it initially though, just use CSS.
You might want to just show and hide your div rather than pseudo class AND hide and show
initially:
$("#mydiv").hide();
then (on scroll):
$("#mydiv").show();
set what you want your div to look like i.e. 0,0 and fixed
Use the Keep It Simple method!
I've updated your jsfiddle with something you can try.
Try this:
http://jsfiddle.net/nHnrd/10/
Also, this article was helpful:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Categories