Is it possible to resize an Adobe Edge animation? - javascript

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.

Related

How to reload an webpage just once using Javascript?

I use resize to reload my page, but I want just reload once when page size small to bigger than 768px or big to simmer than 768px.
that my code now
$(window).resize(function(){
// if(document.body.clientWidth <= ipadWidth && x = 1){
location.reload()
// }
});
I am not entirely sure if that is what you are looking for but the code below will trigger each time only once on resize when the innerWidth is bigger than 768px and once if it is smaller than 768px.
Note: reloading the page is not an option in this case as all the values will reset after refreshing the page.
If you still wanted to reload the page then you would need to save these variables in your database but that is not enough since then you would need to track sessions for each user (even with that there are many scenarios to consider) which is definitely an overkill.
My suggestion is to ultimately avoid force refreshing.
If you provide more information on why you would want to force reload the page then possibly I could suggest a better solution to your problem.
If your issue is with styling the page according to the screen size then use media queries instead.
For example:
#media screen and (max-width: 768px) {
your CSS here
}
In above case your CSS rules would be active until the browser resizes to above 768px. After that, the default CSS rules in your code would be active.
let isSmall = false
let isBig = false
$(window).resize(function(){
if (window.innerWidth >= 768 && !isBig) {
isBig = true
//location.reload()
console.log('big once')
}
if (window.innerWidth < 768 && !isSmall) {
isSmall = true
//location.reload()
console.log('small once')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
EDIT
I updated the answer in order to give you a few examples of how you can use JS to conditionally show and hide elements.
I included two examples.
The first example on resizing the window - which is a bit expensive in terms of performance.
The second one is when the page loads - the check happens only once, on the first load.
$(window).resize(function(){
if (window.innerWidth < 768) {
$(".choiceSubject_btn").show();
}else {
$(".choiceSubject_btn").hide();
}
})
$( document ).ready(function() {
if (window.innerWidth < 768) {
$(".choiceSubject_btn").show();
}else {
$(".choiceSubject_btn").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="choiceSubject_btn">my button<h4></h4><i class="fas fa-caret-down"></i></button>

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

Swap image src if screen width <= 699

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

Categories