I'm trying to get a simple conditional statement to work, and running into problems. The failing code:
$(document).ready(function(){
var wwidth = $(window).width();
if (wwidth < 321) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if (wwidth > 321) && (wwidth < 481) {
alert("I am between 320 and 480 pixels wide")
}
});
If I remove the else if part of the code, I get the alert. If I try to use && or || operators it will fail. I've Googled, I can't find a reason why it's not working. I've also tried:
((wwidth > 321 && wwidth < 481))
along with other ways, just in case it's some odd syntax thing.
Any help would be greatly appreciated. Thanks :)
((wwidth > 321) && (wwidth < 481))
This is the condition you need (http://jsfiddle.net/malet/wLrpt/).
I would also consider making your conditions clearer like so:
if (wwidth <= 320) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if ((wwidth > 320) && (wwidth <= 480)) {
alert("I am between 320 and 480 pixels wide")
}
if (wwidth > 321 && wwidth < 481) {
//do something
}
There are two issues. The first has already been answered, the second is "wwidth > 320" which should be "wwidth>=320". What if the window is larger than 480?
you can also implement "between" as follows:
Number.prototype.between = function(a, b) {
return this >= a && this <= b
}
$(document).ready(function(){
var wwidth = $(window).width();
if (wwidth < 321) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if (wwidth.between(321,481))
alert("I am between 320 and 480 pixels wide")
else alert("I am greater than 480 pixels wide.");
});
Related
I'm trying to add and remove some classes depending on the scroll position. The problem in my code is that it's not doing my else if conditions.
Also, can I use any other measurements? Such as document.body.scrollTop < 25%
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop < 800 || document.documentElement.scrollTop < 800) {
document.querySelector(".navbar").classList.add('nav-dark');
} else if(document.body.scrollTop === 0 || document.documentElement.scrollTop === 0){
document.querySelector(".navbar").classList.add('nav-transparent');
document.querySelector(".navbar").classList.remove('nav-dark');
}
}
</script>
0 will always be less than 800; as such, you need to change the order of your statements.
if(document.body.scrollTop === 0 || document.documentElement.scrollTop === 0){
document.querySelector(".navbar").classList.add('nav-dark');
} else if (document.body.scrollTop < 800 || document.documentElement.scrollTop < 800) {
document.querySelector(".navbar").classList.add('nav-transparent');
document.querySelector(".navbar").classList.remove('nav-dark');
}
Your code can be simplified by using window.pageYOffset instead to get the vertical amount scrolled. See my answer here if you want a robust cross browser solution.
if(window.pageYOffset === 0){
document.querySelector(".navbar").classList.add('nav-dark');
} else if (window.pageYOffset < 800) {
document.querySelector(".navbar").classList.add('nav-transparent');
document.querySelector(".navbar").classList.remove('nav-dark');
}
Reverse the condition i..e move condition with 0 first and then < 800. Since 0 is also less than 800 that's why it is not going into else if block.
I am trying to show 3 divs (sequentially and when scrolling), and only between two pixel values for each div, but there is something about my script that I don't understand:
What I want to show is:
div-1 only visible between 200 and 500 px
div-2 only visible between 900 and 1200 px
div-3 only visible between 1600 and 1900 px
What am I doing wrong here?
DEMO (JSFiddle)
And on the other hand, is there any simpler and more elegant way to do this?
Thanks in advance!
SCRIP:
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
//if (document.body.scrollTop > 200 || document.documentElement.scrollTop < 500) {
$('#div-1').fadeIn();
}
else {
$('#div-1').fadeOut();
};
if ($(this).scrollTop() > 900) {
//if (document.body.scrollTop > 900 || document.documentElement.scrollTop < 1200) {
$('#div-2').fadeIn();
}
else {
$('#div-2').fadeOut();
};
if ($(this).scrollTop() > 1600) {
//if (document.body.scrollTop > 1600 || document.documentElement.scrollTop < 1900) {
$('#div-3').fadeIn();
}
else {
$('#div-3').fadeOut();
};
});
HTML:
<div id="div-1">Radio</div>
<div id="div-2">Blog</div>
<div id="div-3">Store</div>
<div id="content"></div>
CSS:
#div-1,#div-2,#div-3 {
display:none;
position:fixed;
width:200px;
height:60px;
margin:0 auto;
text-align:center;
font-size:20px;
line-height:60px
}
#div-1{background:#ff0;color:#000}
#div-2{background:#000;color:#fff}
#div-3{background:green;color:#fff}
#content{text-align:center;height:2500px}
You were just missing &&.
if ($(this).scrollTop() > 200 && $(this).scrollTop() < 500) {
// ...
}
if ($(this).scrollTop() > 900 && $(this).scrollTop() < 1200) {
// ...
}
if ($(this).scrollTop() > 1600 && $(this).scrollTop() < 1900) {
// ...
}
"If scrolling is greater than 200 AND at the same time the scrolling is less than 500, then show div-1"...
Here is a working example: JSFiddle
You are missing a couple things:
All of your logic should use && instead of ||
You should check the visibility of items before showing or hiding them.
You should always store references to commonly accessed DOM elements, especially if you are accessing them inside a scroll event handler (which fires A BUNCH).
OK, that last point is just a performance thing... but you should know it!. Here is an updated fiddle:
http://jsfiddle.net/xebgpduv/
Here's what a block of logic looks like:
if (scrollTop > 200 && scrollTop < 500) {
if(!$div1.is(':visible')) {
$div1.fadeIn();
}
} else if($div1.is(':visible')) {
$div1.fadeOut();
};
I used this seemingly fancy CSS-Element-Queries tool for some basic element manipulations that will be started every time a window is resized.
Briefly, I wanted to change the value of an element's attribute based on current window width i.e. every time when the window is somehow resized I want to check its width and subsequently do something with a certain element.
I did everything like it is in the tutorial but something must be wrong since it is not working at all. Here is the code:
<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>
<script>
new ResizeSensor(jQuery(window), function(){
var a = $(window).width();
if (a < 1024 && a > 768) {
$(".slideshow").attr("data-cycle-carousel-visible", 4);
}
if (a <= 768 && a > 480) {
$(".slideshow").attr("data-cycle-carousel-visible", 3);
}
if ((a <= 480) && (a > 320)) {
$(".slideshow").attr("data-cycle-carousel-visible", 2);
}
if (a <= 320) {
$(".slideshow").attr("data-cycle-carousel-visible", 1);
}
});
</script>
You need to be watching for the window resize, and then call your resizer function on resize.
//watch for resize
$( window ).resize(function() {
//call function each time window is resized
resizr();
});
var resizr = new ResizeSensor(jQuery(window), function(){
var a = $(window).width();
if (a < 1024 && a > 768) {
$(".slideshow").attr("data-cycle-carousel-visible", 4);
}
if (a <= 768 && a > 480) {
$(".slideshow").attr("data-cycle-carousel-visible", 3);
}
if ((a <= 480) && (a > 320)) {
$(".slideshow").attr("data-cycle-carousel-visible", 2);
}
if (a <= 320) {
$(".slideshow").attr("data-cycle-carousel-visible", 1);
}
});
Have this code:
$(window).resize(function () {
if ($(window).width() >= 320 && $(window).width() <= 480) {
$(".projects").slice(0, 8).css("margin", "10px");
} else if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
};
})
My question is:
The slice 3,6 the default. How can make this display without window resize as default on page load.
And how can do that if width greater than 480px then only do slice 3,6 all other slice is default option?
Put it in a named function.
Fiddle.
function slice_it() {
if ($(window).width() >= 320 && $(window).width() <= 480) {
$(".projects").slice(0, 8).css("margin", "10px");
} else if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
};
}
$(window).resize(slice_it);
slice_it(); // <--- on load
And if I read your second bullet point correctly:
function slice_it() {
if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
} else {
$(".projects").slice(0, 8).css("margin", "10px");
}
}
Edit:
As per last fiddle in comment. If that is correct you should consider using each as in:
function slice_it() {
if ($(window).width() > 480) {
$(".projects").slice(0, 8).each(function(i) { // Pass index "i"
if (i < 3 || i > 5) { // Here you check for index
$(this).css("margin", "");
} else {
$(this).css("margin", "10px");
}
});
} else {
$(".projects").slice(0, 8).css("margin", "10px");
}
}
In general, using .css("margin", ""); in effect resets style to default.
You could also drop the slice all together and loop by each on $(".projects").each(....
To break a jQuery .each loop return false. Example:
$(".projects").each(function(i) {
if (i > 7)
return false; // This aborts the each loop.
... do other stuff ...
});
I need the page reload only if the browser window passing width 300px or 769px or 1024px
There is a similar question to my request (http://goo.gl/46jjzH) but the only problem with the approved answer is that the page reload after passing just 769px, I need to do the same with 3 different sizes 300px or 769px or 1024px not just 769px.
The two codes that works only with one certain width from http://goo.gl/46jjzH
First code by #Roko C. Buljan
var ww = $(window).width();
var limit = 769;
function refresh() {
ww = $(window).width();
var w = ww<limit ? (location.reload(true)) : ( ww>limit ? (location.reload(true)) : ww=limit );
}
var tOut;
$(window).resize(function() {
var resW = $(window).width();
clearTimeout(tOut);
if ( (ww>limit && resW<limit) || (ww<limit && resW>limit) ) {
tOut = setTimeout(refresh, 100);
}
});
And the second code by #gdoron
var width = $(window).width();
$(window).resize(function() {
if (width > 769 && $(window).width() < 769) {
location.reload();
}
else if (width < 769 && $(window).width() > 769) {
location.reload();
}
});
Going with the second code sample, you can check for the alternate conditions using an or operator.
var prevWidth = $(window).width();
$(window).resize(function() {
var currentWidth = $(window).width();
if (
(prevWidth > 769 && currentWidth < 769)
|| (prevWidth > 300 currentWidth < 300)
|| (prevWidth > 1024 currentWidth < 1024)
)
{
location.reload();
}
});