I have made this jQuery script. Its purpose is to add a class to <body> when body is scrolled a certain amount. However nothing happens on scroll. DOM console doesnt show any error messages. I am a complete Javascript-newbie, so I would not be surprised if the problem is a simple markup mistake.
Any help is appreciated.
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33){
$(document.body).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$(document.body).addClass('fix');
} else {
$(document.body).removeClass('fix');
}
});
};
});
body{
height:200vh;
background-color:blue;
}
.fix{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you want to listen to scroll event on window
Try
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33) {
$(window).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$('body').addClass('fix');
} else {
$('body').removeClass('fix');
}
});
};
});
Related
I'm trying to hide the navbar on a Wordpress front-page only, and only until the user scrolls a certain amount of pixels, after which the navbar re-appears. All other pages should have a normal, always visible navbar.
I have this code in header.php:
<head>
<script>
(function ($) {
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.navbar-bg').css("background-color", "#3d3938");
} else {
$('.navbar-bg').css("background-color", "transparent");
}
});
});
}(jQuery));
</script>
</head>
On its own, the above code works exactly as intended for hiding the navbar, but since the navbar is in header.php, it hides it on all pages.
So I add an if condition that checks if we're on front-page:
<head>
<script>
if ( window.location.pathname == '/' ){
// Front-page
alert('Hello');
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.navbar-bg').css("background-color", "#3d3938");
} else {
$('.navbar-bg').css("background-color", "transparent");
}
});
});
} else {
// Other pages
console.log(window.location.pathname);
}
</script>
</head>
the condition works, as the alert() is shown only on front-page, but the hide/scroll effect no longer works. I'm guessing I am not properly inserting the code into the if condition, I've tried like a million combinations but nothing works. Please help.
You didn't reference JQuery as $.
Do the following:
<head>
<script>
(function ($) {
if ( window.location.pathname == '/' ){
// Front-page
alert('Hello');
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.navbar-bg').css("background-color", "#3d3938");
} else {
$('.navbar-bg').css("background-color", "transparent");
}
});
});
} else {
// Other pages
console.log(window.location.pathname);
}
}(jQuery));
</script>
</head>
I have a mute button that I only want to work above screen width 1024.
The function should not be available below the mentioned break point. I have tried a couple of ways but still not able to achieve this. Any pointers would be helpful. Please see my snippet below:
if($(window).width() > 1024) {
$("#mute").click(function() {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Removed javascript error, It should work now.
if($(window).width() > 1024) {
$("#mute").click(function() {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
});
}
I think, You should check for the window width if there was a resize and then perform the necessary action.
Something like this:
$(document).ready(function(){
$( window ).resize(function() {
if(window.width < 1024)
{
$("#mute").off("click");
}
else
{
$("#mute").click(function() {
. . .
})
}
});
$("window").trigger("resize"); // On trigger resize to make button active if window is already > 1024
})
You're adding click handler when executing the code, not when doing the click. when width > 1024px at the time you execute that code the handler gets created and will still work when width drops below 1024px. Similarly when execute that code and width < 1024px then the click handler will never be created!
So, try this code (inside $.ready or similar):
$("#mute").click(function() {
if ($(window).width() <= 1024) return; // maybe return false;
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
});
EDIT: as already commented above while I was answering...
Just try to swap the if statement with the click event handler.
$(document).ready(function() {
$("#mute").click(function() {
if ($(window).width() > 1024) {
alert("Clicked");
}
});
});
Here's a Fiddle for you to test.
i want show a div after scrolling 150px just in mobile devices.
this is my code but it doesnt work :
$(document).load($(window).bind("resize", checkPosition));
var phonebox = $(".phonebox");
function checkPosition()
{
if($(window).width() < 460)
{
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
phonebox.show();
}
else {
phonebox.hide();
}
});
}
}
can somebody help me to fix this problem.
thank you
You should not use bind but on instead. And use both resize and load in the same function.
bind is an old version of new added on see here > bind vs on
See jsfiddle
or snippet below ( i used 700 for example purposes only. so it works in snippet )
$(window).on("load resize", checkPosition)
var phonebox = $(".phonebox");
function checkPosition() {
if ($(window).width() < 700) {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(phonebox).show();
} else {
$(phonebox).hide();
}
});
}
}
.phonebox {
top:200px;
height:300px;
width:100px;
position:absolute;
background:red;
display:none;
}
.for_scroll {
height:1000px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phonebox">
</div>
<div class="for_scroll">
</div>
Please try this one,
$(function(){
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll >= 150){
phonebox.show();
}else{
phonebox.hide();
}
});
});
you can try this one as show() and hide() functions are not supported by some of the browsers so this could be a reason.
To hide:
$(".phonebox").css("display", "none");
To show:
$(".phonebox").css("display", "block");
I ask for help, why my script is not working,
$(window).scroll(function() {
if ($(window).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
I tried to replace $(window).scroll(function() { with $(document).ready(function() { ,still does not work
for more details, you can open my page in versbubble.blogspot.com
You can use the following to make it work.
$(document).ready(function () {
if ($(window).scrollTop() > 1) {
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
Hope I am not too late, I had the same issue lately so I did something like this
$(document).ready(function () {
$(window).scroll(function() {
if ($(window).offset().top > 50){
$('header').addClass("sticky");
}
if ($(window).scrollTop() < 50){
$('header').removeClass("sticky");
}
});
});
I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});