Conditionally serve javascript with Foundation Framework - javascript

I'm working with the Foundation Framework and I was wondering if there are any callbacks or functions that will deliver jQuery or javascript based on the current screen size or media query.
For example
if ('screen_size' =< 'small') {
// do some jquery
}
Not sure if this is possible.
Any Ideas?

I am not sure if there are any mixins for it, but you can manually load a script via jquery, based on the window width (maybe attach it to a resize event as well as to onload?)
if( $(window).width() <= 1024 ){
$.getScript("test.js", function(){
alert("Running test.js");
});
}

I really love the jRespond plugin. Very useful for this sort of thing.
https://github.com/ten1seven/jRespond

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.
});

If true, execute the rest of jQuery

I've got a jQuery file, some of which determines the layout and some of which determines events to be clicked later.
The code that determines the layout, I can't put in a CSS file because it's dependent on the .width() of some elements — so I'm stuck with JS for now.
What's the best way to make sure these layout changes happen first, and if so, run the rest of the file? Here is an example of the code which determines the layout:
archive.css({left: archivePosition});
films.css({right: - filmsPosition});
index.css({left: (nw / 2) - (iw / 2) });
And is it worth me separating these into two different JS files?
Try this out:- http://jsfiddle.net/adiioo7/6xSC5/
JS:-
jQuery(function($){
$("#test").width(function(index, width){
if(width)
{
//your conditional code.
}
});
});

Remove rel attribute using jquery based on screensize?

I am using lightbox for a group of images on 3 seperate pages. I have just made the website responsive for mobile but need to disable the lightbox on mobile.
I believe the best way for this is to remove the rel attribute for smaller screens.
The rel attribute is: rel="lightbox[page-name]" and these are in the anchors within unordered lists with classes of brandingsamples, marketingsamples and webdesignsamples.
I havent got a clue where to start with this so any help appreciated.
Instead of removing the attribute I would rather execute the lightbox script (and load all necessary assets) only if your page is not viewed on a mobile context. This would allows you to save precious bandwidth and make your page faster to load.
You could use a light script/assets loader like yepnope that loads the lightbox assets only if a given condition is satisfied (e.g. you may look at screen resolution, or your screen dpi value)
A simple example could be
<script src="/assets/yepnope.min.js"></script>
<script>
yepnope([{
test: (screen.width > 1024), // if we're on a large screen
yep: ["/css/lighbox.css", "/assets/lightbox.js"]
}]);
</script>
to simply remove an attribute you can try this:
$('selecter').attr('attrname', 'valueifany');
In your case it would be:
$('body').attr('rel[lightbox]', '');
Or a simple one:
$('body').removeAttr('rel[lightbox]');
To give the condition you can apply the screen-width condition as:
if($(window).width() >= 'value' && $(window).height() >= 'value') {
// write the code here..
}
http://api.jquery.com/removeattr/
Detect mobile device and then remove attribute in it.Use:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('selector').removeAttr('rel');
}
You could try
<script type="text/javascript>
$(document).ready(function(){
if(screen.width<600){
$('a').removeAttr('rel[lightbox]');
}
});
</script>

How To "Endless Document" Script (like Skittles.com)

How did they accomplish this? Have you guys seen: http://www.skittles.com? The site never ends!
Well, here's one way of doing it:
$(document).ready(
function(){
$(window).scroll(
function(){
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
$('div').clone().appendTo('body');
}
}
);
}
);
With the requisite JS Fiddle demo.
Bear in mind that any interactive content that's cloned/appended/inserted dynamically will require some kind live() or delegate() for jQuery to interact with them.
That said, there are caveats:
Infinite scrolling isn't necessarily a pleasant navigation aid, particularly if the user is likely to want to view some of the content half way down an infinite page.
There comes a point at which a browser will crash or become sluggish/unresponsive due to the sheer volume of content it's required to maintain in memory.

Categories