JS(jQuery) make div not appear second time when scrolling - javascript

I'm only learning JS(jQuery), and so I have a question. I wrote script where div is being showed when user scroll page to bottom and I want to add close button, so the user click on it and it will not appear when user scroll to bottom again. So:
<script>
$(window).scroll(function() {
if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
$('#div-name').css('visibility', 'visible')
}
};
$('#close-button).click(function(){
$('#div-name').css('visibility', 'hidden')
});
</script>
Pretty simple, but I want close-button it hide forever(till refreshed or revisit) and scroll function don't show this div for second time.
So I thought, if I do like this:
<script>
var wasClosed = false;
if(!wasClosed) {
$(window).scroll(function() {
if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
$('#div-name').css('visibility', 'visible')
}
}
};
$('#close-button).click(function(){
wasClosed = true;
$('#div-name').css('visibility', 'hidden');
});
</script>
But I don't understand why it not working, it keep popup again and again after i clicked close button.

FYI: You have some syntax errors in your code - missing semicolons and a missing parenthesis.
Option 1: You can unregister the scroll listener after clicking the button. Then the function where you put the visibility to visible will not be called anymore at all. Of course this only works if you don't use any other scroll scripts.
$(window).scroll(function() {
if($(window).scrollTop() >
($(document).height() - $(window).height() - 200) ) {
$('#div-name').css('visibility', 'visible');
}
});
$('#close-button').click(function(){
$('#div-name').css('visibility', 'hidden');
$(window).off('scroll');
});
Fiddle: https://jsfiddle.net/kx6fkp7n/
Option 2: initialize a variable in which you save the status, if it has been closed already. As soon as the button is pressed, you set the variable to true and in the scroll listener you make sure that the visibility changing does not occur anymore by extending the condition.
var wasClosed = false;
$(window).scroll(function() {
if(!wasClosed && $(window).scrollTop() >
($(document).height() - $(window).height() - 200) ) {
$('#div-name').css('visibility', 'visible');
}
});
$('#close-button').click(function(){
$('#div-name').css('visibility', 'hidden');
wasClosed = true;
});
Fiddle: https://jsfiddle.net/6dk443zd/
Why is your code not working: The problem with your solution is that you placed the if-condition before registering the scroll handler. So once it's registered (which is actually always on every page load) you're actually doing nothing with the changed variable. The if condition would need to be placed inside the scroll listener as stated in option 2.

Related

Sidemenu toggle when div hits top

So I've got a side-menu which toggles open when a certain div hits the top of the window.
The menu also has a toggle button to open and close it.
I'm having a problem where the the script continues to close the menu on scroll after it's been opened manually via the toggle button.
Is there any way of opening and closing the menu only once the div has passed the top of the screen, rather than the script constantly checking?
My script:
var stickyTop = $('#section1').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.be-toggled').removeClass('toggled');
} else {
$('.be-toggled').addClass('toggled');
}
});
});
Move your function to a variable, then you can call $(window).off() to remove the window listening to the scroll event. My example isn't exactly what you need but it should give you the on/off concept when using a function.
var stickyTop = $('#section1').offset().top;
var doToggle = function() {
if ($(window).scrollTop() >= stickyTop) {
$('.be-toggled').removeClass('toggled');
} else {
$('.be-toggled').addClass('toggled');
}
$(window).off( 'scroll', doToggle);
});
$(window).on( 'scroll', doToggle);

Jquery ignores if-statement when resizing

I've written a function which makes my top-bar ($header) fixed if you scroll down on device ( < 992 ) which works fine. And when I resize, I use the function fixedTopCheck() again and it removes the .fixed class (in the else statement). This also works fine. But then when I scroll, it suddendly gives top the class .fixed again. So this part is getting ignored if ($(window).width() < 992) (which only happens when resizing, if I refresh with a window above 992px it works fine).
So is this resizing messing with the recognition of $(window).width()? (When I console log it, it shows the correct width size).
My code:
$(function()
{
var $header = $('header.top');
var $input = $header.find('input[type=search]');
var $search = $header.find('div.search');
var $container = $('main#content');
var $searchBtn = $search.find('button.icon-search');
var $closeBtn = $search.find('span.icon-cross');
$closeBtn.css('display', 'none');
function fixedTopCheck()
{
if ($(window).width() < 992)
{
$(window).on('scroll', function()
{
if ($(window).scrollTop() > 75)
{
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
// Turn top into fixed menu
$header.addClass('fixed');
$container.addClass('fixed');
// Hide search bar and make it smaller
$input.css('display', 'none');
// Prevent search button to search
$searchBtn.on('click', function(e) {
e.preventDefault();
});
// Open search bar when clicking button
$(document).on('click','.icon-search',function()
{
$searchBtn.unbind('click');
$input.css('display', 'inline-block');
$searchBtn.css('display', 'none');
$closeBtn.css('display', 'inline-block');
$input.focus();
});
// Close search bar when clicking button
$(document).on('click','.icon-cross',function()
{
$searchBtn.on('click', function(e)
{
e.preventDefault();
});
$input.css('display', 'none');
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
});
}
else
{
// Reverse fixed menu
$header.removeClass('fixed');
$container.removeClass("fixed");
$input.css('display', 'inline-block');
// Return search function
$searchBtn.unbind('click');
// Reset search form when going top and search form is still opened
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
}
});
}
else
{
console.log("hello");
// Remove fixed top
if($header.hasClass("fixed"))
{
$header.removeClass("fixed");
}
if($container.hasClass("fixed"))
{
$container.removeClass("fixed");
}
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
}
}
fixedTopCheck();
// if window is resized check again
$( window ).resize(function() {
fixedTopCheck();
});
});
Your code is following a lot of bad practices.
dont nest your event listeners inside each other. this will cause setting an event listener on the same component everytime its container event triggers (on each resize is VERY heavy aswell).
instead of using bind and unbind, make a check the width inside each event and follow actions depending on that.
another solution for replacing bind and unbind in your case is to keep the default button events, but disable the button so it cannot be clicked instead of unbind.
This will answer your question:
adding events inside resize, will not make them only work on that size in the if statement, you have to put the event outside the resize event and check whenever that event happens on the scroll and size.
When the page is loaded and the width of the page is <992px, the scroll event is created. When you resize to >992px the scroll event will still exist.
I would recommend binding the scroll event only once on page load (not after each resize) and check the width inside of that method to decide what it should do when it's scrolling.

Back to top button not triggering properly

I have a back to top button that appears when you scroll a little bit .It's working fine but when scrolling if I get to the footer i want the button to go above the footer.
I used the jquery animate method to change the bottom css rule of the button when I get to the bottom of the page.But that effect doesn't happen instantly on my website because i have more javascript and i think it needs to go through all the code before it runs the effect and It's just not working properly.
Where is the problem ? .Here is what I have done : JSFIDDLE
var offset = 250;
var duration = 500;
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
} else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').on('click', function () {
event.preventDefault();
$('html,body').animate({ scrollTop: 0 }, duration);
return false;
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('.back-to-top').animate({ 'bottom': '400px' });
} else $('.back-to-top').animate({ 'bottom': '10%' });
});
It seems like adding a class that changes the position of the div, and toggling it when the condition is true solved the problem .

Only want the function to work when the screen size is a certain width

I have this landing page that has a left navigation when it the screen with 1024 or larger but when the screen goes below 1024 the left navigation appears on the top of the main content of the page and the "Walmart Leverage becomes a button with on click event for the rest of the navigation to come down. the code works until I put the if statement to detect what size the screen is. Probably missing something to the code. Below is the link for the page.
http://dl.dropboxusercontent.com/u/2399619/walmartmilitary/talentbrew-LeverageHome.html
This is the code for the jQuery
$(window).resize(function() {
if( $(this).width() < 1024) {
var $showSubBtn = $("#sn-walmartleverage");
$showSubBtn.click(function(){
if($(this).hasClass("active")) {
$(this).parent().next().hide();
$(this).removeClass("active");
} else {
$(this).addClass("active");
$(this).parent().next().show();
}
return false;
});
}
});
Any help would be much appreciated.
Thanks
You can't put the click event handler inside the window resize event handler, you should just check the window size when the click happens
$("#sn-walmartleverage").on('click', function(e){
e.preventDefault();
if ($(window).width() > 1024) {
$(this).toggleClass('active').parent().next().toggle();
}
});

how can Change target from tinyscrollbar to body when reaches top/end of it?

I am trying to implement tiny-scrollbar into my website and, i want to change target from tiny-scrollbar to body when it reaches top or end of body, how can i do this,please help.
not able to understand your question completely...but is this what you want?
FIDDLE DEMO
$(document).ready(function () {
$(window).scroll(function(){
var ScrollTop = parseInt($(window).scrollTop());
console.log(ScrollTop);
if (ScrollTop == 0) {
alert("i just hit the t0p");
}
else if(ScrollTop == 1574){
alert("i just hit the bottom");
}
});
});
UPDATE:
UPDATED FIDDLE
Just use console log to check the scrollTop and give your conditions accordingly.Hopw this helpps

Categories

Resources