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.
Related
So i've been looking around and i can't really find i good solution on this so i hope some of you could help me out...
I am trying to remove a div so it doesn't exist if my screen size is around the size of a mobile... I know there is display none which makes the div invisible but since i got a setInterval function on that div it stil load each 5 second... So my question is:
Can i remove a div completely if my screen is less than x pixels
or is it possible to only run my setinterval function when the width is more than x?
Thanks for your time!
setInterval(function(){
$( ".chatMessages" ).load( "getMeddelanden.php" );
},5000);
this is a naive implementation, the setinterval runs anyway and checks if it must "operate", the div is hidden under a certain window width, you can modify this logic by clearing and restarting the interval on desidered width, inside the resize function handler, and debouncing the resize event.
function isMobilewidth () {
return $(window).width() <= 800;
}
$(window).on('resize', function() {
$('.chatMessages').toggle(isMobilewidth());
});
setInterval(function(){
if (!isMobilewidth())
$( ".chatMessages" ).load( "getMeddelanden.php" );
},5000);
You can use CSS media queries:
#media only screen and (max-width: 800px) {
div {
display: none;
}
}
If you want to stick with javascript, try the .offsetWidth property of DOM elements
Use CSS #media rules:
#media (max-width: 800px) {
.div {
display:none;
}
}
https://fiddle.jshell.net/Luc2zrbd/
In this case, you can get the device's screen width as shown below and do your operations accordingly.
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
you may not need a setInterval, you can base your test on a window.resize which is triggered also on page load on device mobiles
See here for an explanation of mobile viewports:
http://www.quirksmode.org/mobile/viewports2.html
window.onresize = function(){
// set your business here
}
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'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.
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.
This is the JS code i'm using:
$("document").ready(function($){
var nav = $('#menu2');
$(window).scroll(function () {
if ($(this).scrollTop() > 90) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
But i can't seem to get this into my code.
function checkWidth(init){
/*If browser resized, check width again */
if ($(window).width() < 514) {
$('html').addClass('mobile');
}
else {
if (!init) {
$('html').removeClass('mobile');
}}}$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
And what i want is that when .f-nav is added to #menu2, when the screen is <1050 the classshould be removed.
To change html to #menu2, just replace one with the other. jQuery is pretty simple in this respect
if ($(window).width() < 514) {
$('#menu2').addClass('f-nav');
} else {
$('#menu2').removeClass('f-nav');
}
JSFiddle
There are a few ways to do that:
Javascript only
See it in action: Fiddle
$(window).resize(function() {
if ($(window).width() < 1050) {
$selector.removeClass('my-class');
} else {
$selector.addClass('my-class');
}
}).resize(); // trigger resize event initially
And don't forget: You don't have to place $(window).resize inside $(document).ready.
Mixed Javascript & CSS
See it in action: Fiddle
This technique is explained here: http://www.senaeh.de/media-query-variablen-javascript-auslesen/
Basic principle: set a variable with a CSS pseudo element and get it with javascript.
This workaround is good if you have to use Javascript even if media queries are used, because you don't have to declare the breakpoint twice.
CSS
#media screen and (max-width: 1050px) {
body:after {
content: 'tablet';
display: none;
}
}
Javascript
var mode = window.getComputedStyle(document.body,':after').getPropertyValue('content');
Be aware: IE < 9 doesn't support getComputedStyle. You have to use a polyfill like this one.
this is best achieved with a media query
#media screen and (max-width:1050px){
.mobile{
/* will only apply on devices narrower than 1050px */
}
}
EDIT: also possible to use media queries with javascript in modern browsers
if (matchMedia) { // check if browser supports media queries from JavaScript
var mq = window.matchMedia("(max-width: 1050px)");
WidthChange(mq);
// every time width changes, check the media query
mq.addListener(function WidthChange(mq){
if(mq.matches){
//we are in a mobile size browser
$('#menu2').addClass('mobile');
$('#menu2').removeClass('f-nav');
} else{
// desktop browser
$('#menu2').addClass('f-nav');
$('#menu2').removeClass('mobile');
}
});
}
When you load a website on a screen bigger than your breakpoint, the script wont work, because you need to re-calculate the screen size(refresh the page in this case). You need to get the width of the screen on resize. Use resize() method, and inside it place your test condition, and assign the class to your element. Reference to help you: http://api.jquery.com/resize/
If you want to change the class of a div in JS, you can do something like that:
document.getElementById("#YourId").className = "YourNewClass"
It will just change your class attribute :-)
Like that, you can also check which class is used and do what you want to do with that.
Edit thanks to Olaf Dietsche: this must be a duplicated post, here can be your answer: jquery, add/remove class when window width changes