I've got some very simple code:
$(function() {
$(window).resize(function () {
if ($(window).width() < 500) {
$("#foo").show(); $("#foo2").hide();
} else if ($(window).width() > 501) {
$("#foo2").show(); $("#foo").hide();
}
}).resize();
});
All was working fine on desktop (all major browsers) and mobile (as many as I could test), till iOS 8 came out. Now when a users scrolls in Safari the javascript falls back to 'else if', creating 'foo2' and hiding 'foo' despite the browser not resizing. This is for a menu, as such the menu closes if the user scrolls which shouldn't be happening.
If I remove the window resize function all works as it should, however the menu doesn't update in real time if the user resizes the browser window.
Is there an alternative to window resize I can use to achieve the same effect?
...so, considering I get the problem as you describe it, you can avoid javascript and do it using pure css and media queries:
#media (max-width:500px) {
#foo {
display:block;
}
#foo2 {
display:none;
}
}
#media (min-width:501px) {
#foo2 {
display:block;
}
#foo {
display:none;
}
}
edit: ..this will definately have nothing to do with scrolling and will certainly be faster and cleaner
This might be a little late, but I'd store the width of the window on load and then check against that on the resize to ensure an actual resize took place horizontally. That would ensure that the code only fired when the browser changed size on the x axis.
var windowWidth = $(window).width();
$(window).resize(function(){
if (windowWidth !== $(window).width())
{
windowWidth = $(window).width();
// rest of your code goes here
}
});
Remember that the resize event could fire quite a lot while someone is resizing, so you may want to limit the whole thing using setInterval, but that's a separate discussion.
Related
Been struggling with this one, can't get it to work. I only want this script to work for desktop.
Thanks.
<script type="text/javascript">
$(document).ready(function() {
$('#scroll_top').hide();
});
$(window).scroll(function() {
if ($(this).scrollTop() == 0) {}
if ($(this).scrollTop() >= 1000) { // If page is scrolled more than 50px
$('#scroll_top').fadeIn(300); // Fade in the arrow
} else {
$('#scroll_top').fadeOut(300); // Else fade out the arrow
}
});
$('#scroll_top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop: 0 // Scroll to top of body
}, 500);
});
</script>
I would test for window size, not device type. Testing for window size is more accurate than testing for device and besides, if someone does have a big screen with 15 thousand (yes, I'm exaggerating on purpose:) ) windows open and resized very small, would you want this script to run? Probably not.
BUT . . .
I recognize this script as a "scroll to top" buttons script, perhaps you DO want it to work on smaller devices, just with a smaller image? I personally find them very useful as long as they are sized small enough to not block content . . just my 2 cents,. I'm sure you know your website better than me.
Good luck!
What do you mean by desktop? like computers ?
If yes add the if condition below :
if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
// Your code
}
The condition bellow spot all the smartphone or tablet browser.
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
The "!" before the condition make it spot all the others : so computers ones.
You can also try with window width if the window width is lower than 1024px you can assume that the device would be a tablet or a smartphone.
if (window.innerWidth <= 1024){
//your code
}
Feel free to ask if needed.
If you want to depend on css media query you can add 3 invisible elements to your HTLM and then test if the display is set to block.
Add thes elements to your footer
#isMobile,#isTablet{
Display:none;
}
#media (max-width: 500px){
#isMobile{
Display: block;
}
}
#media (min-width: 501px) and (max-width: 1024px){
#isTablet{
Display: block;
}
}
Js
If( $("#isTablet").css("display") == "block") {
// do code
}
I don't guarantee my code works but you should get the basic idea how to use css media query in js. This way if you change breakpoint sizes you won't need to update javascript.
On other hand you can always do a simple window width test with
if( $(window).width() > 1024 ){
//do code
}
I want to make my site mobile friendly but I run into one problem.
I have an player of a streaming plattform on my main page, which is invisible/hidden on a certain width by using media queries in CSS, but it still gets loaded.
I want to remove this container/iframe completly for any width lower than 1280px or 768px.
I've tried to fiddle around with jquery/javascript a bit but it's not working for me and I need some help :D
This is what I tried to use:
$(window).resize(function() {
if ($(window).width() < 1280) {
$(container_selector).document.getElementById("video-container"){
this.pause();
delete(this);
$(this).remove();
});
$(container_selector).empty();
}
});
This is the container/iframe I want to remove:
<div id="video-container"><iframe src="http://www.hitbox.tv/embed/kazuto" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
Thanks in advance :)
You can use media queries.
For instance, like this:
#media (max-width: 1280px) {
#video-container {
display: none;
}
}
Here is the code to remove the whole div and the iframe inside.
$(window).resize(function () {
if ($(this).width() < 1280) {
$("#video-container").remove();
}
});
But since you trigger it on resize, what's when the window width increases again? If you just want to hide the iframe on lower resolutions and show it again when user resizes back to higher resolution, then I would recommend to use hide() and show() (or use the answer proposed by #Sergey Kopyrin)
Code sample
$(window).resize(function () {
if ($(this).width() < 1280) {
$("#video-container").hide();
} else{
$("#video-container").show();
}
});
You can also specify a duration parameter inside those methods (e.g. $("#video-container").hide(500) ) so it will not be hidden abruptly.
Ok so I am using bootstrap 3 and skrollr.js and I have a fullscreen hero unit at the top of my page, which has a simple skrollr parallax effect on it. I also have some js which "activates" and "destroys" skrollr at 768 width. This works fine, but when I size the browser window down the height:100% just is not applied to the body for some reason.
I believe the issue is somewhere within my js for skrollr which is:
$(function () {
// initialize skrollr if the window width is large enough
if ($(window).width() > 768) {
skrollr.init({forceHeight: false,smoothScrolling: true, smoothScrollingDuration: 1500});
}
// disable skrollr if the window is resized below 768px wide
$(window).on('resize', function () {
if ($(window).width() <= 768) {
skrollr.init().destroy(); // skrollr.init() returns the singleton created above
}
});
});
I have tried adjusting the js in various way and still have not found a solution, I am currently looking for different ways to disable skrollr on touch devices.
You can view the js fiddle here.
If you size the window down to mobile size you will see the hero unit get smaller and not fullscreen. But if you refresh it works fine, anyone have any ideas?
I fixed this by adding !important to height:100%; on the body and html tag.
And also changing my start-skrollr.js to:
$(function () {
if ($(window).width() > 767) {
skrollr.init({forceHeight: false,smoothScrolling: true, smoothScrollingDuration: 1500});
}
});
The last part of my .js file was not needed.
Disclaimer: I am not a javascript or jQuery expert.
This is probably an easy problem to solve, as it's just a small fix I can't figure out. I am implementing a site that is horizontal if the browser is in landscape mode, and vertical if in portrait. CSS changes are not an issue as that is easy with media queries. The problem I run into is when I want to only run a specific script when the screen is in landscape mode. Next problem I run into is that I don't just want this to work on mobile, but I also want it to be responsive in a standard browser as well; i.e. detect when the screen width > screen height and run said script. Here is my code so far:
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
This is working just fine to detect orientation when the page loads, but it doesn't change when the screen is resized since the script is not bound to window.resize. That being said, it is also not working when I bind it to window.resize.
Is there a better way to go about this? Or do I just need to fix up what is already here?
In case somebody else runs into this problem in the future, I'll post what solved my problem.
When I attempted to add the resize event to the function, my code looked like this:
$(window).on('resize', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};
This worked just fine, but it did not appear that way because the script was only being fired when the browser resized. While this is essential, the script also needs to fire when the page loads. My solution was just to add 'load' to the event:
$(window).on('resize load', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};
I want a function to load only when the browser window width is greater than 940px.
I can do this on initial page load with:
if ( $(window).width() > 940) {
// my function
}
However, doing it the above way won't work on browser resize. I've been able to somewhat get it working on browser resize with the following:
$(window).resize(function() {
if ($(window).width() < 940) {
return;
}
else {
// my function
}
});
The problem with this, however, is once the function is loaded, it stays loaded whether the browser window is resized smaller or not. I need to clear the function out or un-load it whenever the window is smaller.
Is there a way to only load a function if the window is larger than 940px and completely remove it if the window is smaller than 940?
Any help would be much appreciated.
Do what you need in the first branch where you have return.
http://jsfiddle.net/KQSNE/
Take a look at Managing JavaScript on Responsive Websites.