Variable doesn't work inside JQuery scroll function - javascript

my goal is to create and display variable which will record scroll position. While the scroll function seems to be working (for example i can alert a message inside it) but when I add a scroll_pos variable it just stops working. I have followed this tutorial https://www.youtube.com/watch?v=AwgODLLSgwU but i don't understand what's wrong with my code. I use <div id="'status> to display the variable. Any suggestions?
Here's the code https://jsfiddle.net/avxgeeah/
$(document).ready(function(){
$("#text_area").scroll(function(){
var scroll_pos = $(this).scrollTop();
alert(scroll_pos);
});
});

it works here https://jsfiddle.net/j5vg0fsj/
$("#target").scroll(function(){
var scroll_pos = $(this).scrollTop();
alert(scroll_pos);
});
I know that chrome will offer to disable alerts if they are firing too frequently. Perhaps you okayed that?

Related

Not Working - Header Slide up on scroll down page, and down again on scroll up - jquery

I have the following jQuery where I am attempting to hide the header on scroll down and appear on scroll up, but I cannot get it to work? All content that will be slideUp etc... is in a header tag
$(document).ready( function () {
$(window).scroll(function() {
var currentScrollTop = $(this).scrollTop();
if (currentScrollTop > 80){
$('header').slideUp(200);}
else {
$('header').slideDown(200);}
});
});
I can get the header to disappear with the following code but really struggling to make it functional
$(document).ready( function () {
$('body').scroll(function() {
$('header').slideUp(200);
});
});
Where am I going wrong? Thanks in advance
I don't get really what is the effect you want to achieve but what you are probably having wrong is the use of window as a referential for .scroll() instead of the use of document.
So try instead to use $(document).scroll(function(){...}); as I've tried in this jsFiddle.

jQuery Scroll Event Not Working With Section

I'm trying to make a simple scrollspy with jQuery Scroll event but it fails. Here is my JavaScript part:
<script>
$(document).ready(function(){
$("#credit_card").scroll(function(){
console.log('OK');
});
});
</script>
And HTML part:
<section class="method first-of-group" id="credit_card">
...
</section>
As you might have guessed, console.log is just for testing. This section is under a div and this div has "content" id. If I change my JavaScript code for "content" id, it is working. It's really weird.
If you want to see it live, please visit here.
Thanks in advance.
After reading the comments and actually understanding what you mean, this is the solution you are looking for.
$(document).ready(function(){
$("#content").scroll(function(){
// when the user scrolls, we want to detect at what section they currently are.
// This can be calculated, by comparing the current window scrolltop to the position and height of the section elements.
var currentTopOffset = $(document).scrollTop();
$('section').each(function(){
var min = $(this).offset().top;
var max = $(this).offset().top + $(this).height();
if(currentTopOffset > min && currentTopOffset < max){
// current section
// do something here, like getting a value from an input type hidden with the section name
}
});
});
});
I hope this is what you are looking for, or atleast something to get you started with.

Javascript Changing Css Elements

I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):
jQuery
if ($document).scrolltop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("navbar").css("position","static");
}
Is there something I am missing?
Thanks in advance,
Bradon
Edit:
I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:
<script type="text/javascript">
var navbar = $("#navbar");
navbar.on("scroll", function(e){
if (navbar.scrollTop() <= 0){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
}
});
</script>
I still can't get it to work properly.
Edit 2:
I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:
<script type="text/javascript">
var navbar = jQuery("#navbar");
jQuery(document).on("scroll", function(e){
if (jQuery(document).scrollTop() > 280){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
navbar.css("top", "auto");
}
});
</script>
this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!
There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:
wrap = $('#wrap');
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.
I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.
<script type="text/javascript">
if ( $(document).scrollTop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("#navbar").css("position","static");
}
</script>

How to do something when scroll to content or content appear on window?

I have a lot of pictures on my page. and I want to do some javascript and PHP processing when the user scrolls down to each image. I have come up with the follwing:
$(window).scroll(function(){
hT = $('.Picture-1A:eq(3)').offset().top,
hH = $('.Picture-1A:eq(3)').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if ((wS >= (hT+hH-wH))){
alert('you have scrolled to the h1!');
}
});
The above example only works if I reach to a certain image. And I want to do something when the scroll reach an image. I want to get it's ID and process that in PHP using AJAX.
Let's assume that the following are the images:
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
What I want to do is add 1 impression to the image that has appeared on the window. and I want to do that using AJAX every time the user scrolls down the page.
That's it
Update:
I have found a great library thanks to Eugenio Enko. and here is how it's done:
Include the library code in your project after jQuery:
If you want it to trigger for each image, then use each like so:
$('.Picture-1A').each(function() {
$(this).waypoint(function(direction){
alert($(this).html());
});
});
But I am having trouble getting the html of $(".Picture-1A").html() using this it returns undefiend
Here you can view an example using the old waypoint:
http://codepen.io/eugenioenko/pen/qZMqOW
$(document).ready(function(){
$('.spfx-scroll-p').waypoint(function(){
alert('scrolled');
},{offset:'90%'});
});
There are two libraries I know that could help you with that:
http://imakewebthings.com/waypoints/
http://scrollmagic.io/
The second one is more complete and has much more option, but for what you need, it seems that waypoint should work well enough.
best regards.

JQuery onscroll length/height

I have two textarea with approx. the same information how to make that if user scroll one than automatically another is scrolled. (textareas of same width)
I am thinking of onscroll event, but how to measure height?
P.S. I am using tinyMCE, if this info can help or change answer/approach.
Here is a start on how to do that, check my fiddle: http://jsfiddle.net/shahe_masoyan/2enVx/3/
$('#firstTextArea').on("scroll" , function (){
var sctop = $(this).scrollTop();
$('#secondTextArea').scrollTop(sctop);
});
you can do so using the scroll function
$(document.getElementById("txt1")).scroll(function(){
$(document.getElementById("txt2")).scrollTop($(this).scrollTop());
})
http://jsfiddle.net/GXaGD/

Categories

Resources