Animation in jQuery works on desktop but not in mobile - javascript

I have an animation that triggers when the page load and it is an image going from right to left, very straightforward. Now, it works very well on desktop but not so good in mobile. Is there any way to apply something like a media queries as it is done with css but for jQuery?

You can actually try to combine CSS media queries and JS, by using a hidden element and setting a specific value for some CSS property like z-index. You can then check the value of this property with JS and set a mobile variable accordingly.
I've found that this works more accurate than trying to get the viewport width in JS. Or at least it makes sure that the point at which the variable is true in JS is exactly the same as when the changes to the CSS occur.
CSS
#test {
display: none;
z-index: 1;
}
#media only screen and (max-width: 400px) {
#test {
z-index: 2;
}
}
JS
(function($) {
var $test,
isMobile = false;
function checkTest() {
if ($test.length) {
isMobile = $test.css('z-index')=='2';
}
}
$(function() {
$test = $('#test');
checkTest();
});
$(window).on('resize',function() {
checkTest();
});
// in the rest of your code you can now simply check if isMobile is true
})(jQuery);
Edit
Preferably you should not be using an extra hidden element just for this purpose. You should usually have some existing element that is altered in some way by the media query and you can check for that. Like a header that is fixed in desktop view but not for mobile, or perhaps a logo that is 200px wide for desktop and only 100px for mobile. You get the idea.

Related

JavaScript code not responding to CSS change by media query

I have a javascript function that is called when the user resizes the window and that does different things depending on whether a CSS media query (max-width) is true. In order to do that, I have a div that is made visible when the media query is triggered. The javascript code then checks the div's visibility (inside the resize event). This works great in Chrome and Firefox, but is giving me minor issues in Safari (7.0.5). If the window is resized and is around the width at which the condition is triggered, the js code is sometimes out of sync with the CSS: when I inspect the div I can see that it's showing (meaning the media query is working correctly), but the js conditional that checks visibility still returns false. The code is pretty simple:
JQuery:
if ($("#is-mobile").css("display") === "none") {
$("#site-nav").show();
} else {
$("#site-nav").hide();
}
CSS:
#is-mobile {
width: 0;
height: 0;
display: none;
}
#media screen and (max-width: 500px) {
#is-mobile {
display: block;
}
}
This mismatch only happens if the CSS width of the window is roughly between 485px and 499px. That makes me thing it's related to the ~15-20px mismatch between $(window).width() and the CSS viewport width that can occur when a vertical scrollbar is visible (see e.g. here). I do have a vertical scrollbar in my window so I wonder if that's what is causing the issues. Ironically, that scrollbar weirdness is why I'm checking the visibility of the div instead of using $(window).width() in the first place!
EDIT: just tested this code in an otherwise empty html (so no vertical scrollbar), and the problem is indeed gone. So must be related to the scrollbar.

How to use .load to .prepend content without page refresh?

I'm trying to use jQuery to only load certain content if the viewport is above a specified width.
This works, but not quite right. Check out the JsFiddle link at the bottom for a working demo.
Here's what I have so far;
If the viewport is below 500px #wrapper is hidden with a media query.
Above 500px #wrapper is set to visibility: visible;
jQuery is looking for element.is(':visible'). When this happens jQuery loads the image.
Resizing the browser window activates the media query, but not the jQuery.
The jQuery only fires on a page refresh.
I've tried using $( window ).resize(function() but this fires every time the viewport changes size, duplicating the content.
Is there a way to activate jQuery without a page refresh?
The ideal solution would be;
up to 500px load nothing,
when the viewport is resized above 500px load the jQuery.
If the viewport is resized below 500px unload the jQuery content.
HTML
<p>CSS hides <strong>#wrapper</strong> if viewport is below 500 pixels.</p>
<div id="wrapper">
<p>jQuery checks CSS to see if <strong>#wrapper</strong> is visible and loads image on page refresh.</p>
<p>I'm looking for a way to run this function without needing to refresh the page. I've looked into using (resize) function, but this duplicate the content.</p>
CSS
#wrapper {
visibility: none;
display: none;
}
#media only screen and (min-width: 500px){
#wrapper {
visibility: visible;
display: block;
}}
JQuery
$(function() {
var element = $(this).find('#wrapper');
if (element.is(':visible')) {
$('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
}
JsFiddle link:
https://jsfiddle.net/tu60wbbu/13/
You can use window.matchMedia() instead of $(window).resize() to have your javascript respond to a media query match in your CSS.
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
It's fairly well supported across browsers.
http://caniuse.com/#search=matchmedia
If you need to support IE 9 or lower, you might have to fall back to using $(window).resize() for those browsers.
Here is the code for my comment:
$(function() {
var large = false;
var barrier = 1000;
$( window ).resize(function() {
if(!large && $(window).width() > barrier) {
large = true;
$('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
} else if(large && $(window).width() < barrier) {
large = false;
$('#wrapper img').remove();
}
});
});
Working Fiddle: https://jsfiddle.net/tu60wbbu/14/
I used 1000px as the barrier in the demo.
You should initialize large properly by the window width on load. For demo purposes i used false as initial value.
Sorry for the long time, I was at vaccation :-)

How to show mobile screen design on large screen size?

I am having an issue while switching a design between devices. I know that css3 #media queries are use to handle on the bases of device width, orientation etc.
As far as concern with the device size css media queries are working perfectly fine when am on large screen size or on mobile screen size.
e.g
This is the design for mobile screen size.
and this is the design for large screen
the media queries are working fine to switch the design. But i want to show the mobile screen design on desktop screen when the parent div size is small e.g equals to mobile screen size?
In the below situation i need to shown the mobile screen design on desktop screen size.
I googled it but didn't find any luck. I also try with different options of media queries. Is there any way to resolve this issue?
Sorry I forget to mention that am using foundation framework for responsive design.
Media queries target the screen. Let's suppose you have the following structure:
<div id="foo">
<div id="bar">
</div>
</div>
If you check the width with media query, you are essentially checking the screen width. However, if you check the width:
function isLarge(element, limit) {
return element.width() >= limit;
}
and you add a class based on the size:
function addSizeClass(element, limit) {
element.addClass(isLarge(element, limit) ? "large" : "small");
}
and you call the function for the parent of your element:
addSizeClass($("#bar").parent(), 700);
then, you can design .large and .small, like this:
.large div {
/*your rules*/
}
.small div {
/*your rules*/
}
You can not link your media queries to the div size.
The usual way to handle this is to link them to screen-width, and set the div width to some percentage of the screen width.
Now, you only need to do some math ..
The basic issue here is that you should do a variable/responsive design for all your page, not only the list
I have not used foundation framework. But in media query you can give condition of screen max width :
#media screen and (max-width: 320px) {
// write your code here of css for mobile device
}
Now , suppose if u want make differentiate with mobile device or large device
you can use width property for both of them in css.
So that you can make margin between
name : Collette Simko
Events by Collete
You can always use an iframe to display the page on your development version, instead of altering your browser settings. Might make it easier for universal testing as well.
JavaScript
function iframe( ) {
try { return window.self !== window.top; }
catch( e ) { return true; }
}
if ( !iframe( ) ) {
theParent = document.getElementsByTagName( "body" )[ 0 ];
theIframe = document.createElement( "iframe" );
theIframe.className = "smallScreen";
theIframe.src = "http://example.com/"; // Replace the address with your site address
theParent.insertBefore( theIframe, theParent.firstChild );
}
CSS
iframe.smallScreen {
position: absolute;
z-index: 1000;
border: 1px solid #000000;
height: 800px;
width: 500px;
right: 500px;
top: 50px
}
We use this technique at work when doing Facebook applications, works very well for testing and no need to resize your window all the time – can see both sizes simultaneously and everything works on both ends.
If you are using jQuery, you might as well do something like the following (use the CSS code above in conjunction with this).
JavaScript (jQuery implementation)
function iframe( ) {
try { return window.self !== window.top; }
catch( e ) { return true; }
}
if ( !iframe( ) )
$( "body" ).prepend( '<iframe class="smallScreen" src="http://example.com/" />' ); // Replace the address with your site address
Frame detection picked from this Stack Overflow answer.
Not exactly bulletproof, depends which libraries you use, but certainly worth a shot and works for the most part.

How can i do this if statement without refreshing the page?

I'm building a responsive website using css medias and JQuery.
I created a script to check the page width:
if ($(window).width() < 1240) {
$("#menu").toggle(); //hide menu
$('#body-wrap').toggleClass('shifted'); //puts the body width to 100%
$('#navbar').toggleClass('shifted'); //puts the navbar width to 100%
}
But this code only works when I refresh the page.
How can I do it automatically?
Thanks.
Put it in a resize event.
window.addEventListener('resize', function () {
// Your code
});
You may want to consider using CSS to do this instead, though (look at media queries for that)
You have to add it to the onresize event:
https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize
This event will be called each time when you resize the window, so you can respond to those changes.
But I think a better option would be to use CSS media queries, like so:
#media only screen
and (max-device-width : 1240px) {
#menu {
display: none;
}
}
Example and info on: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

variable image width/height based on screen size

I'm working on a touch panel web page (for my home automation) that is going to run on both the iPad and the iPhone. What I'm wondering about is the ability to dynamically set the size of my touch icons based on the screen size.
If I'm on the iPad, I need the icons to be 150px by 150px, but if I'm on the iPhone, I need the icons to be 75px by 75px.
Is there a way to dynamically set the image sizes using jQuery?
Look in the user agent string, and then set them accordingly.
I'd do it like...
JavaScript / jQuery
if (navigator.userAgent.match(/iPhone/)) {
$('body').addClass('iphone');
} else if (navigator.userAgent.match(/iPad/)) {
$('body').addClass('ipad');
}
If you are using jQuery only for this, you could cut down on some bloat by replacing those addClass() lines with...
var body = document.getElementsByTagName('body')[0];
body.className = body.className + ' iphone';
...or to make sure it always looks pretty in the source...
var body = document.getElementsByTagName('body')[0];
var bodyClasses = body.className.split(' ');
bodyClasses.push('iphone');
body.className = bodyClasses.join(' ');
Check it out.
CSS
.ipad #nav button {
width: 150px;
height: 150px;
}
.iphone #nav button {
width: 75px;
height: 75px;
}
This is assuming your buttons will scale by default in the browser - if you have two different images, you could change the background-image CSS property.
http://jquery-howto.blogspot.com/2010/09/iphone-ipod-detection-using-jquery.html
Just change iPod to iPad.
You can check whether the strings iPad or iPhone appear in navigator.userAgent, and set the image URL accordingly.

Categories

Resources