I am having issues in Adobe Edge CC 2014. How can I change the Stage ID so that I can have multiple animations on the one web page? I am doing all of this in asp.net and am pulling my hair out.
My animation would play and then I have an update panel that has C# codebehind to adjust the CSS to play a different animation based on a query.
When I put the below code in, it places 1 of the animations correctly then shows me the second one but it's all at the top of the page and really large. I believe the issue is that they are both set at "Stage" in the animation and I need to have 1 as Stage1 and the other as Stage2 somehow.
Please tell me how I can accomplish this in adobe animate.
`<div id="StageA" class="SECONDTRAIN">
</div>
<div id="StageB" class="FirstTrain">
</div>
<script type="text/javascript" charset="utf-8"
src="TrainAnimates/SecondTrain/SecondTrain_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8"
src="TrainAnimates/FirstTrain/FirstTrain_edgePreload.js"></script>
<style>
.edgeLoad-FIRSTRAIN{display:none;}
.edgeLoad-SECONDTRAIN { display:none; }
#StageA, #StageB
{
position:absolute;
left:10px;
top:10px;
}
#StageA
{
display:none;
}
</style>'
Maybe nesting compositions could help instead of different Stage id-s.
http://edgedocks.com/content/2013/12/nesting-animate-compositions-composition-loader-edge-commons
Related
I am trying to learn Laravel and Vue properly, after an initial attempt back in the spring. I'm still pretty new to both though.
I am using Laravel 8.x in Windows 10 along with Vue 2.6.12. I am working my way through a video on combining Vue with Laravel. The video is for an older version of Laravel, probably 5.5, and probably a slightly older Vue as well so that may well be the nature of my problem. Here's the link to the video. I'm at about the 8:00 minute mark.
The problem I'm having is that when I try to execute my code, Laravel doesn't see my Articles component.
My app.js file is at /resources/assets/js/app.js. Here is the code:
require('./bootstrap');
window.Vue = required('vue');
Vue.component ('Articles', require('./components/Articles.vue'));
const app = new Vue({
el: '#app'
});
The file that contains the script tag is at /resources/views/welcome.blade.php. Here is the code:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Larticles App</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<div class="container">
<Articles></Articles>
</div>
</div>
<script src="{{ asset('js/app.js') }}">console.log("Made it to here!");</script>
</body>
</html>
The Article component is at /resources/assets/js/components/Articles.vue. Here is the code:
<template>
<div>
<h2>Articles</h2>
</div>
</template>
<script>
export default {
name: "Articles",
beforeCreate() {
console.log("Articles - beforeCreate()");
},
created() {
console.log("Articles - created()");
},
beforeMount() {
console.log("Articles - beforeMount()");
},
mounted() {
console.log("Articles - mounted");
}
}
</script>
<style lang="scss" scoped>
#app {
background-color: gold;
color: blue;
}
</style>
What do I need to change to make this work? I think the issue is the require portion of the Vue.component statement in app.js but I've tried every variation I can think of without success. I can't think of anything else to try! I can't find anything in the Vue manual on special syntax for this statement in Vue or Laravel.
I should mention some things. I've deviated slightly from what he does in the video as part of my troubleshooting. I've capitalized Articles in the first parameter of the Vue.component statement and I've also capitalized it in the container div of the welcome.blade.php file. (Initially, I wrote it all lower case in each of those places but it didn't work that way either.) I've also added several console.log statements in the components lifecycle hooks and in the script tag. Absolutely none of them appear in the console though.
Also, for some reason, my IDE, VS Code, insists on displaying in red in the welcome.blade.php. Red always makes me think of errors but there is no error message of any kind. If I write those tags as (and change the app.js accordingly), they stay red so I don't think this is a casing issue.
I should also mention that the Inspector shows the as . Shouldn't it be showing exactly what I have in my welcome.blade.php file?
Use lower case letters when importing the component
<articles></articles>
Try to set each component you're reuire as default. Then use lower case as mentioned above. See below.
Vue.component ('Articles', require('./components/Articles.vue').default);
<articles></articles>
Using paperjs if I rotate p.view.rotate(update.deg); it is working fine with out issue.
If I refresh the page and call the above function p.view.rotate(update.deg); onload then the view is different. it is displaying a slight zoom.
default image rotation
After reloading the page I am rotating p.view with the previous value. then it is displaying as
Here is my js file
https://github.com/muralibobby35/annotateJs/blob/master/opentok-whiteboardnew.js
I was not able to run your code but I would suggest, for an easier project state preservation, that you use transformations (scale, rotation, ...) through layer rather than through view.
That would allow you to easily export/import your project whithout having to manually restore state by calling view.rotate() like methods on window reload.
Here is a fiddle demonstrating the solution.
It simulates window reload by exporting/importing a project from one canvas to another empty one.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
main {
display : flex;
height : 100vh;
}
canvas {
flex : 1;
border : 1px solid;
}
</style>
</head>
<body>
<main>
<canvas id="canvas1" resize></canvas>
<canvas id="canvas2" resize></canvas>
</main>
<script type="text/paperscript" canvas="canvas1">
// draw a square
var rectangle = new Path.Rectangle({
from: view.center - 50,
to: view.center + 50,
fillColor: 'orange'
});
// rotate layer rather than view so transformations are persisted when exporting
project.activeLayer.rotate(30);
// export datas and store them in global variable just for the demo, to simulate a page reload
window.exportedDatas = project.exportJSON();
</script>
<script type="text/paperscript" canvas="canvas2">
// import the exported datas
project.importJSON(window.exportedDatas);
// see that rotation is preserved
</script>
</body>
</html>
I'm using wkhtmltopdf 0.10.0 rc2 for Mac
I have an html like this one :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="print.css" rel="stylesheet">
<style type="text/css" media="screen,print">
.break{
display: block;
clear: both;
page-break-after: always;
border :1px solid red
}
.page-breaker {
display: block;
page-break-after: always;
border :1px solid red
}
</style>
</head>
<body>
<div class="container break">
page 1
</div>
<div class="page-breaker"></div>
<div class="container">
page 2
</div>
</body>
</html>
I simply try :
wkhtmltopdf test.html test.pdf
But it didn't produce a page-break, I doing something wrong ?
Possibly unrelated as your pdf generated ok with an earlier version of wkhtmltopdf. Either way, I had similar issues with page breaks not being applied correctly. My problem was parent elements of the page-breaked element having an overflow other than visible.
This fixed my issue:
* {
overflow: visible !important;
}
Of course, you can be more specific about the tags this applies to ;)
try using as follows
<div style="page-break-before:always;">
//your content
</div>
this should work.
I am usinf wkhtmltopdf 0.12.3.2
For me page-break-after works when a border is set, and when the breaker div is an immediate child of body.
.page-breaker {
clear: both;
display: block;
border :1px solid transparent;
page-break-after: always;
}
break-break-before does not work.
--print-media-type not needed.
I am using version wkhtmltopdf 0.12.0
For me, page breaks ONLY work with --print-media-type.
Without it, page break protection for images works, but not page-break-after or before.
I had to make a special css file for print media to get it work.
Setting the paper size to 'A3' or using the 'overflow: visible' didn't make any difference.
Also see WKHTMLTOPDF with pdfkit on Rails ignoring table page breaks
It is working fine after remove media print
Before:
#media print {
.page-break { height:0;page-break-after: always; margin:0; border-top:none;}
}
above code not working in new version.
Now
.page-break { height:0;page-break-after: always; margin:0; border-top:none;}
Update the wkhtmltopdf to version 0.12.5. Page break issue not occuring for me after updating.
Use --disable-smart-shrinking to avoid empty white space ( If you have any)
Use --zoom <value> to avoid page page (If entire page not showing)
I try a simple css3 media queries that will change background color when I change the browser to 480px width. It works fine when i put the files on my site, here: http://www.kangtanto.com/css3/ . But when I try the same files on my other site, with https, the media queries just won't work, the background color won't change when I change my browser size to 480px width. it is on my other site at https://dosenjaga.eepis-its.edu/home.html
this is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="css3.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Ini hanya mencoba saja lho</h1>
</div>
<div id="content">
Adding the specific code for devices inline might be a good way to use media queries if
you only need to make a few changes, however if your stylesheet contains a lot of
overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
</div>
</div>
</body>
</html>
and this is my style.css file. On my other site I use style2.css, because there is a file with the same name on my server, so I gave it other name but the code is the same.
div#wrapper { width: 800px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#CCC;
}
#navigation{
float:none;
width:auto;
}
and this is my css3.css code
#media only screen and (max-width:480px){
div#wrapper { width: 400px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#8787C1;
}
#navigation{
float:none;
width:auto;
}
}
Thanks,
It is the problem of older versions of IE not the https, CSS3 is not supported in less then IE9. in IE9 it is working fine.
It's solved!!! I need to delete all my browser history by pressing Shift+ctrl+del on my fire
Noticed a problem with a simple splash page using jquery.cycle.
http://www.rynicdesign.com/
With firefox (firebug installed), the rotating images will not display the first time the page is accessed (without cache - ctrl-f5) yet will load properly on subsequent requests.
Not seeing this condition with other browsers (ie, chrome, safari).
Any ideas why?
(page is small - but here is relevant info)
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0r4/build/base/base-min.css" />
<link rel="stylesheet" type="text/css" href="/templates/splash/css/splash.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
$(document).ready(function() {
$('.middle').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
autostop: 1,
timeout: 2500 // milliseconds between slide transitions (0 to disable auto advance)
});
});
//--><!]]></script>
</head>
<body id="page">
<div id="doc4" class="main-frame">
<div class="top"></div>
<div class="middle" align="center">
<img src="/templates/splash/images/rynic-design.gif" alt="Welcome to RYNiC Designs" />
<img src="/templates/splash/images/enter.gif" alt="click to enter website" />
</div>
<div class="bottom"></div>
</div>
</body>
</html>
And here is splash.css
html, body, #page, #doc4 {height:100%;margin:auto;}
.top, .middle, .bottom {clear:both;overflow:auto;display:block;}
.middle {background-color:#ffffff;overflow:hidden;}
.top, .bottom {height:35%;}
.top {background: #ffffff url(/templates/splash/images/left-bg.gif) repeat-y scroll top left;}
.bottom {background: transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll top right;}
#doc4 {background:transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll right bottom;}
I've seen this problem before (this is an excerpt of my earlier answer to Jquery Cycle + Firefox Squishing Images).
The problem is that Firefox fixes the img element's size once and for all at the point the display style is set to none (when you start cycle). So if the image hasn't finished loading (which it probably hasn't on an initial GET request), its height and width style attributes are small (I'm not sure exactly what they correspond to - perhaps the size of Firefox's image placeholder, though in your case it comes up 164 X 16 pixels).
On subsequent requests, Firefox knows their dimensions since they're in the cache (I'm guessing a bit here: maybe it just loads them before cycle can set display: none).
You can solve this by specifying your middle div's size in advance:
#middle {
width: 974px;
height: 110px;
}
(That is, as long as you're not doing anything complicated with your images - my web site is dynamically loading images of varying size so I had to perform additional footwork.)