I looked at other threads, and their mistakes had to do with typos, I'm not sure where I'm going wrong.
I don't see the scroll button at all. It works when I call the function showScroll() from the body of my html using <body onscroll="showScrol()"> but that doesn't work in IE so I'm trying to use this function but it's not working:
// SCROLL TO TOP
$(document).ready(function() {
$(window).scroll(showScroll());
function showScroll() {
if ($(window).scrollTop() > 50) {
$("#top-btn").show();
} else {
$("#top-btn").hide();
}
}
function scrollToTop() {
$(window).scrollTop(0);
}
});
$(window).scroll(showScroll()); means you're executing the function instantly and the return value is being passed into the scroll event.
Instead make it $(window).scroll(showScroll); so it's the function that is passed in.
I created an example for you to illustrate. I guessed the html a bit but you get the point. Start scrolling the below example and see the div appear and disappear.
// SCROLL TO TOP
$(document).ready(function() {
$(window).scroll(showScroll); // <-- this was changed
function showScroll() {
if ($(window).scrollTop() > 50) {
$("#top-btn").show();
} else {
$("#top-btn").hide();
}
}
function scrollToTop() {
$(window).scrollTop(0);
}
const button = document.querySelector('button'); // <-- added this for completeness
button.addEventListener('click', scrollToTop);
});
main {
height: 600px;
}
#top-btn {
position: fixed;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<button id="top-btn">Show me</button>
</main>
Related
i am trying to fix the button on top when we scroll the window ,as soon as the button reach on the top then to be fixed, please need your help, i am using javascript code for this or if you have suitable code related to javascript or jquery then please suggest me,
i am showing a snapshot that clear you that what i want to do in this images,
image is here please click to see clearly my problem
This is my button code
HELPLINE NUMBER
and
This is javascript code what i have tried:
<script>
window.onscroll= function(){ myfunc(); }
var location_v=document.getElementById("NUMBER");
var pixtop=location_v.offsetTop;
function myfunc()
{
if(window.pageYOffset >= pixtop )
{
//var a=document.getElementById('NUMBER');
location_v.classList.add('stick');
}
else
{
a.classList.remove('stick');
}
}
</script>
and the css code is below:
.stick {
position:fixed;
top: 10px;
width: 100%;
}
and please also don't forget to tell me what i am missing, if you have any conceptual javascript or jquery code...
Here is a script that can do the trick for you:
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 90) {
$('#NUMBER').addClass('stick');
}
if ($(window).scrollTop() < 91) {
$('#NUMBER').removeClass('stick');
}
});
});
And what it does is on each scroll event it checks the scrolling position from top of a window and using if check it either adds or removes your pre-made stick class. But of course you have to chose your own numbers in this if check.
I have also played around with a code snippet, so you can see how it works
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('#NUMBER').addClass('stick');
}
if ($(window).scrollTop() < 11) {
$('#NUMBER').removeClass('stick');
}
});
});
body {
height: 600px;
}
.stick {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="NUMBER">Press me</button>
I have Jquery code to fade certain divs when the page loads. how would i edit this code to trigger this when the user scrolls 2000px on my webpage.
JQUERY
$(function () { $(window).load(function() {
$('.welcome-image').addClass('animated fadeInRightBig');
})
var reset = function reset() {
console.log($(this).scrollTop());
// do stuff when window `.scrollTop()` > 75
if ($(this).scrollTop() > 2000) {
// turn off scroll event so `fx` not called
// during ongoing animation
$(this).off("scroll");
// when all animations complete
fx()
}
};
// if `fx` should only be called once ,
// change `.on()` to `.one()` ,
// remove `.then()` callback following `fx()`
// within `reset`
$(window).on("scroll", reset);
});
try this
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
body{
height: 1000px;
}
</style>
<body>
<h2>scroll the body to see the magic</h2>
</body>
<script type="text/javascript">
$(window).on("mousewheel", function() {
var the_position = $(document).scrollTop();
if (the_position > 200)
{
$('body').css({"background-color":"red"});
}
else
{
$('body').css({"background-color":"white"});
}
});
</script>
</html>
chagne the function and other things as your need. this is an example to get you and idea.
$(window).load(function() {
$(window).on('scroll', function () {
if ($(window).scrollTop() > $("#section").scrollTop()) {
$('.welcome-image').addClass('animated fadeInRightBig');
}
});
})
It might help you
Hi I'm new to jquery and just trying to put a simple script together to show/hide my mobile menu on click. It works fine however, it only works once until you refresh your browser.
Jquery:
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("hidenav").addClass("slidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("slidenav").addClass("hidenav");
});
});
});
CSS:
#media (max-width: 767px) {
.slidenav {
display: block;
}
.hidenav {
display: none;
}
}
It is because you are defining multiple click events
This should work
$(document).ready(function()
{
//your code here
$(".nav").addClass("hidenav");
var flag = 0;
$(".menutrigger").click(function()
{
if(flag == 0)
{
flag = 1;
$(".nav").removeClass("hidenav").addClass("slidenav");
}
else
{
flag = 0;
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
declaring multiple onClick events won't work and will be overridden by last one. you can do all those things in on onclick callback by checking whether your class is there or not
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
if ($(".nav").hasClass("hidenav")){
$(".nav").removeClass("hidenav").addClass("slidenav");
} else if ($(".nav").hasClass("slidenav")){
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
Have you tried toggleClass ?
$('.menutrigger').click(function (e) {
$('.demo').toggleClass("hidenav");
});
it will compress your code to just 1 line.
have a look at this fiddle
To know more about .toggleClass(). see the jQuery API doc
I'm having an issue with this jQuery that is blowing my mind. I've tried three different JS and jQuery functions people suggested online for accomplishing this and can't seem to get anything to work.
I'm trying to hide the class .arrow-up when .first is actually visible on the screen and hide the class .arrow-down when .last is visible on the screen.
Sounds simple enough, right?
Well the parent element has overflow: hidden on it (like most carousels–they really are from hell). Anyone know how to do this? I'd really appreciate any help, JS really isn't my strongest by any means...
Here's my current jQuery–
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=300"
}, 300);
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=300"
}, 300);
});
});
In this, .vid-list-container is the parent with overflow: hidden on it and .first and .last are both inside the container. The arrow classes are both outside of the container.
Built this pen for anyone who wants to play around with it.
http://codepen.io/seancrater/pen/waPNEW
Thanks!
This should work. Notice however that I used opacity:0, so the arrow can still be clicked. You need to change that!
function checkDownArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() != 0){
$('.arrow-up').css('opacity',1);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) >= $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',0);
}
},350);
}
function checkUpArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() == 0){
$('.arrow-up').css('opacity',0);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) < $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',1);
}
},350);
}
checkDownArrow();
checkUpArrow();
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=173"
}, 300);
checkDownArrow();
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=173"
}, 300);
checkUpArrow();
});
});
EDIT
Okay, I see you have a different problem... may I suggest using a different approach? Something like this.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="vid-item">
...
</div>
<div class="vid-item">
...
</div>
</div>
</div>
CSS:
.outer-wrapper {width:200px; height:150px; overflow:hidden;}
.inner-wrapper {height:auto; margin-top:0;}
.vid-item {width:200px; height:150px;}
JS:
var itemHeight = $('.vid-item').first().height();
var wrapperHeight = $('.inner-container').height();
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(itemHeight - margin > wrapperHeight) {
$('.inner-container').css('margin-top', (itemHeight-wrapperHeight) + 'px');
$('.arrow-down').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin-itemHeight) + 'px');
}
$('.arrow-up').removeClass('hidden');
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(margin + itemHeight >= 0) {
$('.inner-container').css('margin-top', '0');
$('.arrow-up').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin+itemHeight) + 'px');
}
$('.arrow-down').removeClass('hidden');
});
Please see https://jsfiddle.net/cot33dxa/
setInterval(function() {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
}, 0);
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
#one {
width: 200px;
height: 200px;
background-color: yellow;
}
#two {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
Why is it that for div one, the hover check works just fine, whereas it doesn't in div two?
I have the same issue when using if ($('#element:hover').length != 0) (taken from ivo's solution).
JS fiddle for that: https://jsfiddle.net/q8dfLc6s/
In a more general sense, I am looking for the simplest, most reliable way to know if the mouse is over a div in JQuery 1.11.0. As it stands, I can't even get the boolean check to work at all aside from this SetInterval oddity.
The problem with your fiddle is that your second check is outside of your interval function. Try this:
setInterval(function(){
if($("#one").is(":hover")) {
$("#one").css("background-color","red");
}
else {
$("#one").css("background-color","");
}
if($("#two").is(":hover")) {
$("#two").css("background-color","blue");
}
else {
$("#two").css("background-color","");
}
},0);
The scond one doesn't work because it's not inside the interval timer and that code only runs on page load therefore
Change to
setInterval(function () {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
}, 0);
I have no idea why you need this and don't just use hover events or hover css
DEMO
Good question! By putting your code in a setInterval you are essentially mirroring what the browser is doing in the background in the event loop.
This behavior should generally be avoided and instead replaced by an actual event.
in jQuery this would look like:
$('#element').on( 'hover', function (this, event) {
$element = this;
/*handle event*/
});
More here: https://api.jquery.com/on/
Edit: The code you are running would be best done in CSS using the :hover selector as such:
#element {
background-color: blue
}
#element:hover {
background-color: red
}
Instead of moving your code inside setInterval:
the reason why your second example 'doesnt work', is the fact that it will execute only once the page has loaded. setInterval on the other hand, executes every ~0s which 'works'.
However to achieve what you're trying to do, consider to use .hover() as it is listening for the actual event of moving the cursor in or out of the selector and will not execute your else block all of the time:
$(function() {
$("#two").hover(function() {
$("#two").css("background-color","blue");
}, function() {
$("#two").css("background-color","");
});
});
jsfiddle