I am making a website that houses an animation and the resolution is 1024x768. The link for the website will be sent out as a Holiday greeting via email. Is there a way to prevent the website from loading in a different resolution than 1024x768 regardless of their screen resolution?
Thank you!
If You want to only hide the content I would use media queries:
http://css-tricks.com/css-media-queries/
But if You have tracking pixels which You don't want to download I would insert an iframe if the screen resolution fits Your requirements:
if ( ($(window).height() === 768) && ($(window).width() === 1024) ) {
$('body').append('<iframe src="http://your.url.com"></iframe>');
}
just embed your content in a div setting the width and height to your desired values.
But a more robust solution would be to use media queries. http://www.w3.org/TR/css3-mediaqueries/
Related
How do I turn Javascript off when my page is viewed on mobiles?
I need a sort of media query that will disable all javascript on a page when viewed on a specific device.
So far I have this but do not know how to actually disable all javascript
if(screen.width < 480) {
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}
Thanks
You could use matchMedia.js (found at https://github.com/paulirish/matchMedia.js) and check if the screen is below a certain size.
Eg.
if (matchMedia('(max-width: 480px)')) {
// Run Code Here
}
You can check the
navigator.userAgent
property with Javascript. This will show the used browser and you can determine if its mobile or not.
Documentation:
userAgent Docs
You can do it also width the viewport width of your users browser in pure Javascript:
var w = document.documentElement.clientWidth;
I have a div (#bob_show) that shows and another (#slider_mobile) that's hidden when open on a pc browser. I need there statement to be reversed when open on a mobile device...
Thanks a lot for your help!
Hugo
You can detect the navigator type and based upon that you can do the this as desired.
for more refference visit a link this question.
how ever if your concern is browser width then you can go with the below technique
// you can change the width condition as per your need
if(window.matchMedia('max-width:420px').matches || $(window).width() < 768){
// small devide
$('#slider_mobile').show();
$('#bob_show').hide();
}else{
$('#slider_mobile').hide();
$('#bob_show').show();
}
I have a jquery funciton which sticks the navbar to the top of the webpage, but I only want this feature in desktop and tablet mode (not in phone mode). How do I de-activate this function?
$(document).scroll(function(){
var elem = $('.navbar');
if (!elem.attr('data-top')) {
if (elem.hasClass('navbar-fixed-top'))
return;
var offset = elem.offset()
elem.attr('data-top', offset.top);
}
if (elem.attr('data-top') <= $(this).scrollTop() )
elem.addClass('navbar-fixed-top');
else
elem.removeClass('navbar-fixed-top');
});
Use CSS media queries to manipulate the nav bar. Browser/OS detection shouldn't factor into styling, just resolution and media type.
What is the syntax for a CSS media query that applies to more than one property (AND operator)?
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Based on your question, it seems like the real concern here is saving screen real estate on a mobile device. So as most of the other users have pointed out, you can rely on using media queries here instead. In order to make sure the listener isn't even attached in case of small screens, you can use Modernizr.mq to test a media query and use the returned value:
if( Modernizr.mq('only screen and (min-height: 640px)') ) {
// Case specific code here, only executed if screen height is > 640px
}
This is assuming you're willing to add Modernizr or are already using it. If you don't have it already included and only plan on using this single test, you can download a custom build(2kB) from modernizr.com which only includes the media query test.
Check this out -- It maybe what you're looking for they're Open source mobile phone detection
http://detectmobilebrowsers.com/
I'm trying to have an Edge animation resize based on screen resolution. I've made a high-res one for 1080p and higher-res screens, but since the project is reasonably complex, I was wondering if there was a way to export the animation at a different size from Edge, without having to redo everything a few times for smaller screens.
There is also this now which helps scale based on a parent bScaleToParent:
AdobeEdge.loadComposition('MyComp', 'EDGE-985368975', {
scaleToFit: "both",
centerStage: "horizontal",
minW: "0",
maxW: "undefined",
width: "1540px",
height: "3004px",
bScaleToParent: true
}, {dom: [ ]}, {dom: [ ]});
This was helpful: https://forums.adobe.com/message/6939673#6939673
I would try to do it in a DIV or a frame, and use CSS zooming options. Some tips here
I'm going to use CSS3's transform:scale, in conjunction with media queries, to solve this.
I found this to be a great solution.
Add a Resize trigger into your stage. Paste this code inside:
if ($(window).width() < 960) {
if ($(window).width() < 600) {
sym.stop("layout400");
} else {
sym.stop("layout600");
}
} else {
sym.stop("layout960");
}
Then make three different labels in the timeline with the names layout960, layout600 and layout400. Now you can avoid Edge from reloading every time and skip Edge Docks (at least for responsive).
Open up the hi res file, group everything in a div, resize that div to the desired width and height. If there are any image files, make sure to save them at the correct sizes to avoid poor quality browser re-sizes. Save out each version and upload it to a different location on your server.
then put this into the head of the document:
<script>
if ( (960 < screen.width < 1024) && (640 < screen.height < 768) ) {
window.location = 'www.YOURURL.com/ipad';
}
else if ( (screen.width < 960) && (screen.height < 640) ) {
window.location = 'www.YOURURL.com/iphone';
}
</script>
This would redirect based on the screen resolution of an ipad or iphone, but you could adjust it to whatever you like.
Store all your layouts as symbols if you are going to do it using labels and then add them to the stage at run-time. Anything you place on the stage's time line exists in the DOM even though you may not have arrived at a screen marker.
I have two images "image-big.jpg" and "image-small.jpg" I want to via javascript detect if screen width <= 699 and change the SRC of my image with class="imageswap" from image-big.jpg to image-small.jpg.
So basically if they are on a portable device it will display the smaller image.
I am novice at best with javascsript and any help is gratefully appreciated!
Bind to the window onresize event:
window.onresize = function(event) {
if(window.innerWidth && window.innerWidth===699)
document.getElementById('myImg').src = 'newSource';
else if(document.body.offsetWidth && document.body.offsetWidth===669)
document.getElementById('myImg').src = 'newSource';
};
The else if is for IE < v.9
Its no in specs but screen works fine in all browsers.
if(screen.width <= 699){
// do you logic
}
1st approach: client-side. Set classname to html tag on dom ready after detection device type. Use css:
html.big .image-div {background-image:url('big.jpg')}
html.small .image-div {background-image:url('small.jpg')}
2nd approach: redirect. Use 2 different URLs and redirect for small size by detection User-Agent. It's better to use User-Agent (navigator object) than window/screen width
Usually I preffer redirects, because you have better code and page look when you can customize it for specific device. It's the way how leaders behave.
Try media-query.
.imageswap{
background-image:url('small.jpg');
}
#media screen and (max-width: 699px) {
background-image:url('small.jpg');
}