i wonder if someone can help, basically i have this javascript which fades in a div when the user scrolls down a page, however, i want to put a condition on the javascript to say only fade after the user has clicked another div element.
for instance i need the user to read a piece of text before they scroll down the page and this div fades in, on this piece of text is a div called
so once the user has read the text they will click 'exit_profile_intro4' which will close the text box,
only then do i want the javascript for the scroll and fade in div to work. can someone please show me how i can do this: i've tried
<script>
$('div.exit_intro4').click(function(){
$(window).scroll(function(){
var leftToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
var distanceFromTop = $(window).scrollTop();
if( distanceFromTop > 300 && !$("profile_intro_case5").is(":visible")
&& leftToBottom > 1000 && !$(".profile_intro_case5").is(":animated")) {
$(".profile_intro_case5").fadeIn(1000);
}else if($(".profile_intro_case5").is(":visible") && (distanceFromTop < 300 || leftToBottom < 1000) && !$(".profile_intro_case5").is(":animated")){
$(".profile_intro_case5").fadeOut();
}
});
});
</script>
original:
<script>
$(window).scroll(function(){
var leftToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
var distanceFromTop = $(window).scrollTop();
if( distanceFromTop > 300 && !$("profile_intro_case5").is(":visible")
&& leftToBottom > 1000 && !$(".profile_intro_case5").is(":animated")) {
$(".profile_intro_case5").fadeIn(1000);
}else if($(".profile_intro_case5").is(":visible") && (distanceFromTop < 300 || leftToBottom < 1000) && !$(".profile_intro_case5").is(":animated")){
$(".profile_intro_case5").fadeOut();
}
});
</script>
Add a state to the scroll event.
(function() {
var user_can_scroll = false;
$("div.exit_intro4").click(function(e) {
/* do your thing */
user_can_scroll = true;
});
$(window).scroll(function(e) {
if (user_can_scroll) {
/* do your scroll thing */
}
});
})();
I see no reason why your code would be incorrect (without actually running it), however you assign a click like this
$('div.exit_intro4').click( // Function
Yet, you say you want to trigger it when "exit_profile_intro4" is clicked. Perhaps it should be this.
$('div.exit_profile_intro4').click( // Function
Related
I have some javascript being fired when the screen reaches certain widths... I am trying to make it mobile responsive and need it to fire at different points on different devices...
var screenWidth = window.innerWidth;
if (screenWidth <= 812 && screenWidth > 414) {
$(window).scroll(function() {
var fromTopPxFirstBgChange = 2300;
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > fromTopPxFirstBgChange) {
$('body').addClass('secondBg');
}
else {
$('body').removeClass('secondBg');
}
});
}
if (screenWidth <= 414 && screenWidth > 375) {
$(window).scroll(function() {
var changeBg = 2190;
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > changeBg) {
$('body').addClass('secondBg');
}
else {
$('body').removeClass('secondBg');
}
});
}
if (screenWidth <= 375 && screenWidth > 320) {
$(window).scroll(function() {
var changeBgImage = 2380;
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > changeBgImage) {
$('body').addClass('secondBg');
}
else {
$('body').removeClass('secondBg');
}
});
}
So for the first one for example, I would like the screen to apply those changes at 414-812px.
Basically the background image is supposed to change when I am scrolled to the position on the page that I specified in each if statement (the class "secondBg" is a class I specified in the CSS with the new background image... I don't know if this is a JS error or a problem with other code. It seems to work uniform when I just have one if statement but when I add the three they sort of work and overwrite one another. I think the if statements are pretty clear and cannot see the problem.
You shouldn't be binding your listeners inside the if statements. You should instead have 1 listener and do checks inside like so:
$(window).scroll(function() {
if($(window).scrollTop() < 500) {
// Your code here
}
// add more checks here
});
Also, I'd throttle that as it's a really heavy operation. Take a look at this.
I would like to execute an action when a user scrolls and a button reaches the top of the screen. My original script works when I only use one button. But when I add multiple buttons my script doesn't work.
My original script that works is:
jQuery(document).ready(function ($) {
var distance = $("button[data-page='2']").offset().top;
$(window).on("scroll",function() {
if (checkVisible($("button[data-page='2']"))) {
console.log('button 2 scrolled to the top');
$(window).off('scroll');
}
else {
// do nothing
}
});
function checkVisible( elm, eval ) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
});
The HTML is
<button data-page="2">
Load More
</button>
<div>
content
</div>
But when I add multiple buttons my script doesn't work and I get the following error message in my console: Uncaught TypeError: Cannot read property 'top' of undefined
I figure that I may need to create multiple functions? Not sure why it's not working
jQuery(document).ready(function ($) {
var distance = $("button[data-page='2']").offset().top;
$(window).on("scroll",function() {
if (checkVisible($("button[data-page='2']"))) {
console.log('button 2 scrolled to the top');
$(window).off('scroll');
}
else if (checkVisible($("button[data-page='3']"))) {
console.log('button 3 scrolled to the top');
$(window).off('scroll');
}
else if (checkVisible($("button[data-page='4']"))) {
console.log('button 4 scrolled to the top');
$(window).off('scroll');
}
else {
// do nothing
}
});
function checkVisible( elm, eval ) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
});
The HTML is:
<button data-page="2">
Load More
</button>
<div>
content
</div>
<button data-page="3">
Load More
</button>
<div>
content
</div>
<button data-page="4">
Load Mo
<div>
content
</div>
I should mention that data-page="3" and data-page="4" may not be in the DOM and not display until button data-page="2" is clicked.
I've included an image example to display my layout
Is this what you are looking for?
$(document).ready(function() {
var hasRun = false
$(window).on('scroll', scrollHandler)
})
var scrollHandler = function() {
if (hasReachedTop('button[data-page="2"]')) {
console.error('button 2 has reached the top')
$(window).off('scroll', scrollHandler)
}
}
var hasReachedTop = function (selector) {
return $(document).scrollTop() >= $(selector).offset().top
}
Edited the code to remove the scroll listener if the button hits the top.
Here is an example of loading content dynamically upon scroll via AJAX. You can put a a button to load content manually too. but the example is without a button at the end.
JQuery Example:
$(document).ready(function(){
$(window).scroll(function(){
var position = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
if( position == bottom ){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
var rowperpage = 3;
row = row + rowperpage;
if(row <= allcount){
$('#row').val(row);
$.ajax({
url: 'fetch_details.php',
type: 'post',
data: {row:row},
success: function(response){
$(".post:last").after(response).show().fadeIn("slow");
}
});
}
}
});
});
Complete Code and example demo available on page:Load content on page scroll with jQuery and AJAX. See the demo at the end of the page and see the JQuery part and solve your problem on your own.
This is my current solution to check if a specific div reaches the top of the page, which i got from here https://stackoverflow.com/a/5279537/4671165
document.addEventListener("scroll", Scroll, false);
function Scroll() {
var top = $('.element').offset().top - $(document).scrollTop();
if (top < 150){
var textvariable = $('.text').text();
}
}
But i want this to do something each time a different div reaches the top of the page, therefore i currently have
var top1 = $('.element1').offset().top - $(document).scrollTop();
var top2 = $('.element2').offset().top - $(document).scrollTop();
var top3 = $('.element3').offset().top - $(document).scrollTop();
if (top1 < 150 && top2 > 150){
var textvariable = $('.text1').text();
}
if (top1 < 150 && top2 < 150 && top3 > 250){
var textvariable = $(.text2').text();
}
if (top2 < 150 && top3 < 250){
var textvariable = $(.text3').text();
}
However, this doesn't seem the most effective way but i can't figure out what is. Especially since i have more elements then just 3 in the project. So i am looking for a more effective way.
I put this together using ES6. I believe this should work. It's been a while since I've used getBoundingClientRect() though.
var divs = document.querySelectAll('div');
document.addEventListener("scroll", Scroll, false);
function Scroll() {
divs.forEach((memo,index) => {
let divTop = memo.getBoundingClientRect().top;
if (divTop <= 0) {
var textvariable = $('.text' + index).text();
});
}
Hope this helps. It should be easier to use and it has a lot of bugs already fixed for you. It's a 1.82 kb file so there's not really much useless stuff into it if added.
I found a jquery solution
function ScrollStart() {
var scrolled = $(this).scrollTop();
/*filter current element at the top with a certain class & give it active class*/
$('.step').removeClass('activetext').filter(function() {
return scrolled <= $(this).offset().top + $(this).height() - 50 && scrolled >= $(this).offset().top - 50;
}).addClass('activetext');
/* make exclusion for first element */
var boven = $('.first').offset().top - $(document).scrollTop();
if (boven > 0){
$('.first').addClass('activetext');
}
/*make exclusion for last element*/
var bottom = $('.last').offset().top - ($('.last').height()/5) - $(document).scrollTop();
if (bottom < 150){
$('.step').removeClass('activetext')
$('.last').addClass('activetext');
}
else{
$('.last').removeClass('activetext')
}
/* give variable 'text' the text of the active class & append it */
var text = $('.activetext .headertekst').text();
$('.dropbtn').empty();
$('.dropbtn').append(text);
$('.dropbtn').append('<img src="images/downarrow.svg" galleryimg="no"></img>');
}
$(function() {
$(document).scroll(function() {
var windowscroll = $(this).scrollTop();
if($(window).scrollTop() >= 900)
{
$("#scrollhome").css("opacity",(1-($(window).scrollTop()-900)/75))
}
else
$("#scrollhome").css("opacity",1)
if(windowscroll > 900 && windowscroll < 1300)
{
$("#scrollabout").css("opacity",($(window).scrollTop()-900)/75)
}
else
$("#scrollabout").css("opacity",0)
if(windowscroll > 1200 && windowscroll < 1500)
{
$("#scrollabout").css("opacity", (-1($(window).scrollTop()-1200)/75))
$("#scrolldesign").css("opacity",($(window).scrollTop()-1200)/75)
}
else
$("#scrolldesign").css("opacity",0)
});
});
the first overlap between scrollhome and scrollabout works nice but when it comes to the second overlap between scrollabout and scroll design i don't know how to hide the scrollabout funktion in a smooth way again, i need help! how can i make the scrollabout hidden again using scrolltop?
you misstyped it as -1($(window)...... it should also be 1-($(window)
I'd like to add a class to an element when a user first scrolls away from the top of the page. If the user then scrolls back up and hits the top of the page I'd like that class removed.
Use of jQuery in the solution is fine.
try
$(window).scroll(function() {
$("id or class").removeClass("active");
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$("#one").addClass("active");
}
else if (scroll <= 1000) {
$("#tow").addClass("active");
}
else {
$("#three").addClass("active");
}
}
So here is the solution you're looking for. Just customize it with your div tags.
$(document).ready(function () {
$(window).scroll(function(){
// get the height of #wrap
var h = $('#top').height();
var y = $(window).scrollTop();
if( y > (h*.25) ){
$("#sidef").fadeIn(1100);
} else {
$('#sidef').fadeOut(75);
}
});
});
var notAdded = true;
$(window).scroll(function(){
if( $(this).scrollTop() == 0){
$(elem).removeClass('classname');
notAdded = true;
}
else if(notAdded){
$(elem).addClass('classname');
notAdded = false;
}
});