JS
if (screen.width <= 768 && screen.width != 1024) {
jQuery('.menu-link').bind("click touchstart", function() {
if (jQuery('#wrap3').css("left") === "0px"){
jQuery('#wrap3').animate({"left":"17%"}, 50);
}
else {
jQuery('#wrap3').animate({"left":"0"}, 50)
}
});
}
I originally tried it like this
if (screen.width <= 768)
It works fine in portrait, but it works in landscape, when it shouldn't.
How can I fix this?
It also doesn't work on desktop which is what I wanted.
On a side note - is this the common practice for creating different JS for different mobile widths? The reason I am using JS instead of CSS3 is because the animations I'm trying to do did not work on ipad.
Could you do something like checking the height vs width?
if (window.innerheight>window.innerWidth)
{
alert("Landscape Please!");
}
Source: Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions
Related
I hope there is an answer for this question.
I'm not good at codeing and I hope someone will understand my question.
Is there any way to have 2 different designs..
I have a design for a desktop/ipad and one for mobile devices.
The one for the mobile device is more like the design of an application.
So what I want now is if my javascript code find out that the website is opened on a mobile device, the website turn into the version for the mobile device.
For example:
The desktop/ipad version is the index.html and the mobile version is the mobile.html
is there a way to make a javascript code to go to the mobile version if
if(!is_mobile) {
(function(XXXXX) {
XXXXXX
}
The best practice would be to use a responsive html + css. That would automatically restyle the page based on the device type or screen size.
But if you prefer to do it this way, you can do it like this:
In the header of index.html (before any styles or scripts) you can filter the device that is currently opening the page and forward the user to the mobile html (if he's coming from a mobile device).
<script>
if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = 'mobile.html';
}
</script>
Hope it helps.
The following javascript code will be useful:
function adjustStyle() {
var width = 0;
//getting width of webpage
if (window.innerHeight) {
width = window.innerWidth
} else if (document.documentElement && document.documentElement.clientHeight) {
width = document.documentElement.clientWidth;
} else if (document.body) {
width = document.body.clientWidth;
}
//loading css if width less than 600. Make sure your link tag has id "myCSS"
if (width < 600) {
document.getElementById("myCSS").setAttribute("href", "css/mobile.css")
} else {
document.getElementById("myCSS").setAttribute("href", "css/desktop.css")
}
}
//calling the function
window.onresize = function () {
adjustStyle();
}
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'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 the following situation. I'm having a really long webpage where I want to have a little "back to top link" at the side of the page (absolute positioned). I want to show the link only if the user is scrolling and the scroll position is larger than 100px from the top. Moreover I'm constrain the behaviour only to screens larger than 300px and Non-iOS devices.
This is my code:
//Back to top
$(window).scroll(function () {
if ( $(window).width() > 300 || !isiOS ) {
if ($('body').scrollTop() > 100) {
$('#back-to-top').fadeIn('fast');
} else {
$('#back-to-top').fadeOut('fast');
}
}
});
$(window).scroll();
The problem is it works fine on my mac. However it does not work on Windows machines. It works in Chrome on windows, but doesn't in any IE version, nor Firefox, nor anything else. It works in every major browser on my mac.
Any idea what could cause that or why it's buggy?
Thank you for your help!
Try $(window).scrollTop() instead of $('body').scrollTop()
Has anyone noticed this behavior? I'm trying to write a script that will trigger upon a resize. It works fine on normal browsers, works fine on iPhone, but on iPad, will only trigger going from horizontal to vertical viewport, not vice versa.
Here's the code:
$(window).resize( function() {
var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf('iphone') != -1));
var is_ipad = ((agent.indexOf('ipad') != -1));
if(is_iphone || is_ipad){
location.reload(true);
} else {
/* Do stuff. */
};
});
If I understood you correctly, you want to do something when the user tilts the iPad. Here you go:
window.onorientationchange = function(){
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0){
// iPad is in Portrait mode.
}
else if (orientation === 90){
// iPad is in Landscape mode. The screen is turned to the left.
}
else if (orientation === -90){
// iPad is in Landscape mode. The screen is turned to the right.
}
}
I think what you want would be to use the iPad Orientation CSS, which looks like this:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
Also, the orientationchange event fires when the orientation is changed, according to iPad web development tips.
Together, that should give you tools enough to deal with the change.
This includes all orientations.
Here are two options:
window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}
or
// Checks to see if the platform is strictly equal to iPad:
if(navigator.platform === 'iPad') {
window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}
}
The only thing I could find from apple:
Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position "fixed" to the viewport can end up outside the viewable content area, offscreen.
I understand the "works on the iPhone" part...but maybe it doesn't anymore? This could be a change in OS/mobile Safari since the latest public iPhone OS release shipped (the above documentation is from March 2010).
I'm going to re-tag this question adding iPhone to it, maybe one of the guys with the developer 4.0 OS release can test this? If it is the case it's been removed, this should be a bug filed/fixed before it goes live...I'm not sure on how the procedures are on this with Apple are though.
You want this fix for the orientation bug on iphone and ipad.
read about it here:
http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
github newest version here:
https://gist.github.com/901295
use the second version on the page.
Check your version of iOS.
The "orientationchange" event does not work in iOS 3.*, but it does in 4.*
do a nice check if your platform is iPad,
handle the iOS specific event orientationchange by catching window.onorientationchange
if(navigator.platform == 'iPad') {
window.onorientationchange = function() {
// handle orientationchange event
// (here you can take advantage of the orientation property
// - see the good answer above by Vincent)
}
}