Run javascript/jquery only on screen media, not print - javascript

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.

Related

How to add Media Query in jQuery

This is the jQuery code that I am using in my WordPress website, and it's working fine.
jQuery(document).ready(function($){
$(document).on("click",".selected",function() {
$('.wvg-single-gallery-image-container').css('display','none');
})
});
I just want the code to stop working at the screen width of 766, on 766 the code does not have to work.
Let me know if there is something that can make this possible.
Thanks,
Abdullah
Consider the following.
jQuery(document).ready(function($){
$(document).on("click", ".selected", function() {
if($(window).width() < 766){
$('.wvg-single-gallery-image-container').hide();
}
});
});
If the document is not very wide, less than 766, the button will perform the action. Otherwise, nothing will happen.
See More: https://api.jquery.com/width/
You can use mediaMatch to test against a media query…
if (window.matchMedia('(max-width: 766px)')) {
$('.wvg-single-gallery-image-container').css('display','none');
}
…but that approach isn't a great one. Consider what would happen if the user resized the window after the JS had run. The inline style you are adding would still be there, but based on the wrong window size.
Instead, use JS to add and remove classes from elements. Then use those classes in your CSS with media queries.
$('.wvg-single-gallery-image-container').addClass('a-suitably-semantic-class-name);

Conditionally serving different javascript for different screen sizes

As far as I can see, there doesn't seem to be a consensus or definitive answer for this.
I am building a responsive site that, when loaded on a full screen, I want to have a lot of bells & whistles (specifically the Themepunch 'revolution slider' which will display a fancy slideshow of 12 or so slides). I want to completely hide this from mobile screens, and as such, I don't want to waste bandwidth by serving or executing any of the javascript pertaining to it.
I am looking at using Modernizr for this, I guess using the Modernizr.mq() method, something like:
if(Modernizr.mq('all and (min-width: 320px)')) {
// Import external javascript files and execute code relating to slider
}
I would welcome anyone's views on:
a) Is this a viable option? Is there a better way?
b) Can I combine this with Modernizr's load function, eg:
Modernizr.load({
test: Modernizr.bigScreen, // or.. something? Is there anything in the Modernizr object regarding screen size? Can I add my own using the mq() method first?
yep : 'rev-slider.js',
nope: 'basic.js'
});
Thanks in advance.
you can use wurlf to check in what platform you are. and use require.js to load the module.
You may try this code
<script>
window.onload = function(){
function loadJs(filesrc){
var ele = document.createElement("script");
ele.setAttribute("type","text/javascript");
ele.setAttribute("src", filesrc);
document.getElementsByTagName("head")[0].appendChild(ele);
}
if(window.innerWidth > 320){ //your screen size conditions
loadJs("js/test1.js");
}else{
loadJs("js/test2.js");
}
};
</script>
test1.js code
alert("test1");
test2.js code
alert("test2");
I am now using the following method which seems to do the required job nicely:
var bigScreen = false;
if(Modernizr.mq('all and (min-width: 500px)')) {
var bigScreen = true;
}
Modernizr.load({
test: bigScreen,
yep : 'scripts/desktop.js', // put all your JS for fullscreen magic in this file.
nope: 'scripts/mobile.js' // ...and all your mobile-specific stuff here.
});

Detect CSS Style Rendered

I have a application that loads CSS styles dynamic based on user preference. I use requirejs to load these like:
require(['css!dir/styles'], function(){ .... });
this works great but I don't want to show the screen until all the styles have fully initialized.
I've added a CSS class to the body of the page called hide-page and then remove that class when the callback occurs. Like:
setTimeout(function() { $(document.body).removeClass('hide-page'); }, 100);
but even with the settimeout, the page still loads jumbled until everything has initialized. I was thinking about doing a setInterval and checking if a particular style has been applied to a node like:
setInterval(function(){
if($(document.body).style('background'') === "#FFFFFF"){
$(document.body).removeClass('hide-page');
}
}, 10);
but thats kinda hackey. Is there a better solution anyone has to accomplish this?
You don't say how you're hiding the page content, but that could be the problem if you're using display:none.
Try visibility:hidden instead. This will allow the browser to allocate the space needed to construct the page, so you shouldn't see the jumbled FOUC.

Problems with option selection in Chrome and Opera

I've Problems with thise Code, it's working fine in Firefox and Internet Explorer but it doesn't work with Opera and Chrome Browsers...
<script>
function planetselect()
{
optionen=document.getElementById('pstart').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
optionen=document.getElementById('pdest').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
}</script>
Change
optionen[i].setAttribute('selected','selected');
to
optionen[i].selected = true;
More generally, avoid the use of setAttribute to change DOM properties. Sometimes it works, sometimes it doesn't.
From the MDN :
Using setAttribute() to modify certain attributes, most notably value
in XUL, works inconsistently, as the attribute specifies the default
value. To access or modify the current values, you should use the
properties. For example, use elt.value instead of
elt.setAttribute('value', val).
Did you make sure you close the <script> tag? I can't really see a problem with your code that you posted, so either you didn't close your tag, or your optionen or options variables aren't there or valid
Also too, you should know that chrome has a javascript console that should show you any errors you have. To open it, it's ctrl-shift-j. That should help you a lot.

Hide an html element using javascript only if browser is firefox

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.

Categories