Is there any way I can restrict the execution (if statement) of javascript so that it only applies to desktop computers, It needs to be off when the user is on a mobile/tablet device.
Below is the code, however obviously it applies for any device at the moment when the document is ready.
<script type="text/javascript">
$(document).ready(function(){
main_parallax();
main_scrolling();
sauces_slider();
});
</script>
Only the main_parallax(); function should be omitted when on a mobile/tablet device.
One method is using the user agent, which you could do like this:
$(document).ready(function(){
if (/Android|BlackBerry|iPhone|iPad|iPod|webOS/i.test(navigator.userAgent) === false) {
main_parallax(); //Run main_parallax() not a mobile device
}
main_scrolling();
sauces_slider();
});
I would recommend using feature detection instead, try looking into: Modernizr
Related
So I’m trying to figure out how to make a click effect work on mobile. I want the hover effect on desktop/laptop and the click effect on mobile.
Currently the hover effect is implemented. As you can see on my website's homepage: http://otownsend.ca/
What I need to figure out is how to implement the click effect at a certain screen size (e.g. 800px). So instead of the card flipping as soon as the curser hovers over ".flipper", the click effect would require the user to click ".flipper" in order for the card to flip. This would require me to place in a conditional statement - however, it isn’t working. I’m not so familiar with JQuery so it has been quite the challenge. This is what I currently have:
if (window.matchMedia('(max-width: 800px)').matches)
{
$('.flipper').click(function (e) {
$(this).toggleClass('flipped');
});
}
".flipper" is the parent element to the front and back. All the css and html is the same. I just need to integrate this JQuery stuff and then I’m set.
Any suggestions would be appreciated :)
You can use removeClass() and addClass(). I've also changed your click event with .on('click'). I recommend you to use it that way. Also, add the code in $(document).ready(). I hope this is what you need. If not, please let me know and I will try a different approach:
$(document).ready(function() {
$('.flipper').on('click', function(e) {
$('.flipped').removeClass('flipped');
$(this).addClass('flipped');
});
});
Regarding matchMedia you can see by running the test snippet that it works:
if (window.matchMedia('(max-width: 800px)').matches) {
$('.flipper').css('color', '#f00');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
testing matchMedia
</p>
Also, I've seen that in your code, you are doing something wrong. You are adding a <script> tag which contains jQuery source, inside another <script> tag(or you forgot to close the </script> tag). This is wrong. Please correct this:
<script type="text/javascript">
$(function(){
$(".flipper").flip({
trigger: "hover"
});
});
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
To this:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
if (window.matchMedia('(min-width: 801px)').matches) {
$(".flipper").flip({
trigger: "hover"
});
}
});
</script>
Notice the media query added for desktop only, from 801px up.
As a suggestion, I would like to recommend you to use a library like Modernizr for the media query part. Using Modernizr's way of using media queries, you won't have to refresh the page to see the changes like when using matchMedia. This also helps when you switch from portrait to landscape on mobile devices. You can read the docs about Modernizr media queries here.
I recently updated my phone to iOS 8 and now I am experiencing really unusual behavior.
Here is a demo of the problem:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
alert("A");
jQuery(window).load(function(){
alert("B");
});
</script>
In Safari iOS 7, this brings up the dialog boxes "A" and "B". But when viewed in Safari iOS 8, only dialog box "A" shows up.
Any ideas on why window load would not be working in iOS 8?
I don't have a real solution for this, but if you have any or in your page, Safari on iOs8 do not trigger the load event.
So you have at least 2 solutions:
count your externals files like images, css, scripts and attach a
load event on them and wait for the last .load of those files
write your tag video/audio after the load events
//EDIT:
So I write this that helped me to still use video:
var $video = $('.player');
$video.each(function(){
this.outerHTML = this.outerHTML.replace('div', 'video')
});
$video = $('.player');
See Browser compatibility here to see if outerHTML fits with your compatibility https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML#Browser_compatibility
Use window.onload = function(){ }; on the behalf of jQuery(window).load(function(){ }); I am able to fix this issue on my project.
How can I run a jquery function only on #media screen?
Background:
I have a screen.css stylesheet and a print.css stylesheet. I have two javascript functions, one of which I do not want to run on the printed version want of the page.
Any script would be ran when the page loads, so using if (Modernizr.mq('only screen')) {$('h1').text('media screen');} is pointless as it runs your script while you're on #media screen.
Instead, you have to detect whenever the media query changes, and change the page accordingly. You could use something like enquire.js to do so easily:
// This is just an example, be more creative!
enquire.register("screen", {
match: function() {
$('#only-show-on-screen').show();
},
unmatch: function() {
$('#only-show-on-screen').hide();
}
});
In latest browsers you can use matchesMedia:
if (window.matchMedia("screen").matches) {
....
}
If you want to support older browsers too you can use a polyfill like matchMedia.js
I think you could use Modernizr. Although, there must be a native way to do it in javascript.
http://modernizr.com/docs/#mq
I have never tried it but it is something like this:
if (Modernizr.mq('only screen'))
{
..
}
beware with old browsers not supporting media queries.
I have a webapp saved to the iPhone homescreen, and I need to run some JavaScript when the device changes orientation.
I tried this, but it only seemed to work in a desktop browser and not on the iPhone.
window.onresize = function() {
alert('rotation change!');
};
Is there some special event I'm supposed to hook into?
You're looking for onorientationchange.
Use this together with jQuery:
$(document).ready(function () {
function reorient(e) {
alert('rotation change!');
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
Or you can just use onorientationchange in your code.
You don't need to use jQuery in case you dont need to know when the DOM document is ready.
How can I hide a div with javascript if the browser is firefox only?
To check Firefox browser
//Javascript
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
document.getElementById("divId").style.display="none";
}
<!-- HTML-->
<div id="divId" />
Just check a FF-specific JavaScript property. E.g.
var FF = (document.getBoxObjectFor != null || window.mozInnerScreenX != null);
if (FF) {
document.getElementById("divId").style.display = 'none';
}
This is called feature detection which is preferred above useragent detection. Even the jQuery $.browser API (of which you'd have used if ($.browser.mozilla) for) recommends to avoid useragent detection.
“Is the browser Firefox” is almost always the wrong question. Sure, you can start grovelling through the User-Agent string, but it's so often misleading that it's not worth touching except as a very very last resort.
It's also a woolly question, as there are many browsers that are not Firefox, but are based around the same code so are effectively the same. Is SeaMonkey Firefox? Is Flock Firefox? Is Fennec Firefox? Is Iceweasel Firefox? Is Firebird (or Phoenix!) Firefox? Is Minefield Firefox?
The better route is to determine exactly why you want to treat Firefox differently, and feature-sniff for that one thing. For example, if you want to circumvent a bug in Gecko, you could try to trigger that bug and detect the wrong response from script.
If that's not possible for some reason, a general way to sniff for the Gecko renderer would be to check for the existence of a Mozilla-only property. For example:
if ('MozBinding' in document.body.style) {
document.getElementById('hellononfirefoxers').style.display= 'none';
}
edit: if you need to do the test in <head>, before the body or target div are in the document, you could do something like:
<style type="text/css">
html.firefox #somediv { display: none }
</style>
<script type="text/javascript">
if ('MozBinding' in document.documentElement.style) {
document.documentElement.className= 'firefox';
}
</script>
if(document.body.style.MozTransform!=undefined) //firefox only
function detectBrowser(){
....
}
hDiv = .... //getElementById or etc..
if (detectBrowser() === "firefox"){
hDiv.style.display = "none"
}
You might try Rafeal Lima's CSS Browser Selector script. It adds a few classes to the HTML element for OS, browser, js support, etc. You can then use these classes as hooks for further CSS and/or JS. You might write a CSS (or jQuery) selector like html.gecko div.hide-firefox once the script has run.