Different design desktop/mobile devices - javascript

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

Related

Multiple Homepages for single website according to screen size

I have made font end of website(static website). I want to make multiple home pages for this website according to screen size. for example homepage1.html for mobile screen size and homepage2.html for desktop, and remaining pages(services, contact) would be same for all screen size.
so please help me how to do this without using php?
in php we can import like this
<?php include('homepage1.php') ?>
i want to do this same thing using html or js, then i can write function in js like if screen size is less than 700px then import homepage1.html.
If you have any other idea to do this same thing then please guide me..
Thank you in advance :)
You can do it by adding a simple code. You can add more screen width.
<script type="text/javascript">
$(window).on('load resize',function(){
if($(window).width() < 950){
window.location = "https://www.google.com"
}
});
</script>
Such as
// In index2.php
if (window.innerWidth < 960) {
window.location = "index1.php";
}
// In index1.php
if (window.innerWidth >= 960) {
window.location = "index2.php";
}

Turn off JavaScript when screen is a set size

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;

change image source based on mobile devices

I am trying to change the image source for devices with small screen size.
I want to target only mobile devices (not desktop browsers) smaller than 1024px width.
I don't want to use media queries since they are going to load both hi and low resolution versions of the image if I change the browser size on desktop. I can target devices separately but it's gonna be huge mess on my css file.
Any proper solution to load smaller images for mobile devices only? (especially smaller than tablets). Also with userAgent it's not easy to target devices like android tablets and android smartphones.
I am using this code but it also causes duplicate file load after I refresh the page.
$(function() {
if($(window).width() <= 1024) {
$(".slides-container li img").each(function() {
$('.slides-container li img').attr('src',function(i,e){
return e.replace("img/galeri/large","img/galeri/medium");
});
});
}
});
Try doing an event handler for window resize:
<body onload="window.addEventListener('resize', setPanels); setPanels();">
function setPanels()
{
var windowWidth = window.innerWidth;
if(windowWidth < 500)
{
document.getElementById('your image').src = 'new image source';
}
else
{
document.getElementById('your image').src = 'new image source desktop';
}
}
$(function() {
if($(window).width() <= 1024) {
$(".slides-container li img").each(function() {
if($(this).attr('src').indexOf("large") > -1){
$(this).attr('src',function(i,e){
return e.replace("img/galeri/large","img/galeri/medium");
});
}
});
}
});
Your issue (as I understand it) is that when the page initially loads, all the images have src="img/galeri/large/...", and you're trying to conditionally change that to be instead src="image/galeri/medium/..." if appropriate for the viewport's width.
Unfortunately, as soon as the img is loaded in the dom, the browser will begin to load the src file, all before your jQuery ever runs.
Given that you evidently have some control over the backend, the lightest weight (albeit quite hacky) solution may be to nuke the src attribute on all imgs on the page, replaced with some other attribute isrc that contains the asset name (the bit after the img/galeri/large or img/galeri/medium), and then step through your image tags on page load like this
$(function() {
var assetLoc = "img/galeri/large";
if($(window).width() <= 1024) {
assetLoc = "img/galeri/medium";
}
$(".slides-container li img").each(function() {
var assetSrc = assetLoc + $(this).attr('isrc');
$(this).attr('src', assetSrc);
});
});
Again, hacky, but it will allow for the asynchronous loading you're looking for with a minimal amount of work.

Specific JS for ipad portrait is also firing in landscape

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

Is it possible to resize an Adobe Edge animation?

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.

Categories