Length Variable TEXT of JSON in edge Animation animate [v 2014.1.1]
Hi all..
I am currently conversion HTML & CSS & JAVASCRIPT code in Edge animate so I can have more fun with my little project, essentially the re-design it in Adobe Edge
Part Composition edge information displays on the screen that is seized with a JSON encoded a PHP file, these recovered data is variable in length... It could be 10 characters in length or width of 30 characters. According to the total length of the characters I choose the time to animate the text from left to right (as a framing box)...
It is important for me to explain here what to expect from this animation.
Example:
We have a wide rectangle of 100PX. If the json data is less than the width of the rectangle, then then the text should be left justified and stationary.
If the json data is greater than the width of the rectangle then the animation should proceed as follows.
START: justify text on the left and hide the text to the right which goes beyond the edge of the right side of the rectange.
ANIMATE: move text to the left until the end of the text reaches the right side of the rectangle, then move to the position of starting with the loop.
At the time I had the project in HTML & CSS & JAVASCRIPT format I lower the JSON data encoded in DIVs, then switch the DIV class according to the then the length of the data. If the width of parents ("outerDiv") has been less then data then the CSS .animate class would take over, otherwise, it would default to CSS .noAnimate
This is how it was done.
1: JavaScript
It's my JavaScript that traverses the coded the data PHP JSON results. (I've omitted many of the results in the code below to make it easier to read)
function playlistupdate (list)
{
for (var i = 0 ; i != list.dbdata.length ; i++)
{
var song = list.dbdata[i];
}
{
$("#list0title").html(list.dbdata[0].title);
This part should check the width of the PARENT ("outer div") and see if it is LESS than the width of the JSON data. If it was it would use the .animate instead of .noAnimate class
$('.noAnimate').each(function() {
$(this).toggleClass('animate', $(this).parent().width() < $(this).width());
});
2: the CSS
No animation
Here's the CSS if the data is less than the parent DIV width...
.noAnimate {
position:absolute;
white-space:nowrap;
overflow: hidden;
}
Animation
Here's the CSS if the data is greater than the width of the parent DIV ... (I omitted the other browser compatibility to make it easier to read)
.animate {
position:absolute;
white-space:nowrap;
overflow: hidden;
-moz-animation: slidein 3s infinite linear alternate 1s;
-webkit-animation: slidein 3s infinite linear alternate 1s;
-o-animation: slidein 3s infinite linear alternate 1s;
animation: slidein 3s infinite linear alternate 1s;
}
@-moz-keyframes slidein {
from {
-moz-transform:translateX(0);
}
to {
-moz-transform:translateX(-100%) translateX(254px); /* -100% + parent width */
}
}
Stuff pretty basic and useful if someone wants to use it...
3: the problem
Now I face on the issues to the JSON data alive in my Composition of edge.
As I understand it, animate Dashboard will not allow animations out of JQuery so the foregoing CSS is basically usless.
While I have no problem taking a simple fade in for my JSON like data below (stored in the symbol "nowPlay" where I put an opacity of the keyframe to 0% at zero seconds at 100% to 2 seconds im stumped as how to start to be converted to usable JQUERY )
for (var i = 0 ; i != list.dbdata.length ; i++)
{
var song = list.dbdata[i];
}
{
sym.getSymbol("nowPlay").$("list0TitleContainer").html(list.dbdata[0].title);
sym.getSymbol("nowPlay").play();
...continued
It is now well above my skill level and please im extremly clued coders out there can help me make the transition.
The final result if not completely understood is that if the width of the text is less than outside container then animate not from left to right... Otherwise, if the text is larger, then the width of the outer div then animate from left to right.
It is a personal project.
I know its been a long read... If anyone can help shed some light please do... If not I hope that some of the above CSS could be useful to people.
Thank you very much... Justin.
Now, I apply the effect of text to symbols: Symbols.zip - Box effect
That it would be easier to sym.createChildSymbol ();
Tags: Edge Animate
Similar Questions
-
Adding Adobe Edge animation animate CC 2015 to a Facebook post?
Where can I find information on how to add an Adobe Edge animation animate CC 2015 to a Facebook post? I tried searching but continue to pour in white. Thanks for any help.
If you have any interactivity so you can make a recording of the screen and display the video.
-
Cannot use edge animation animate in Magento
Hello
I am trying to integrate an animation animate Edge to a site Magento 1.7.0.2 based, but it does not work.
After you declare the myscript_edgePreload.js and loading the page, I see the following errors in firefox:
TypeError: A is not a function
[Cap on a mistake]
... Symbol.bindTriggerAction (compId, NomSymbole, "Timeline", 0, function(sym,e)}...
cardboard... ions.js (line 4)
TypeError: Symbol is not defined
[Cap on a mistake]
... Symbol.bindTriggerAction (compId, NomSymbole, "Timeline", 0, function(sym,e)}...
I saw messages from the user having problems similar to the help of Magento, but none of them seem to be resolved.
Could someone point me in the right direction to solve this please?
Mathias
I found the cause of the problem: the images in my myscript_edge.js file is not found. This is because the directory of the image is calculated by the script using base URL of the site that ends with index.php.
One solution is to replace the image directory in the script with the full path to the images directory.
You will find the variable directory loaded image of the search for "im var =" in the script.
If anyone knows how to remove the index.php at the end of the base URL adobe edge is used to calculate the path to the images directory, I'd be interested to hear that.
-
Loading JSON in Edge issues animate
Why when I load a JSON file I get this problem.
In the JSON file, there is an object that must be over a string of text more long which will be loaded in the anime. The loading is very well, everything connects correctly, the problem is the json file.
Here are two identical json code blocks. I ran like tests. The first test loads very well. The second doesn't. Note the last line "biography", which is responsible for transporting a large amount of text and does not load. Any ideas? Is it like in xml, where you need to add a syntax of longer paragraphs?
FIRST TEST LOADS
[
{
'image': 'images/staff/cindy.jpg ',.
"thename": "Cindy,"
"title':"nurse. "
"certifications": "CDA niv.2, HARP certified RN."
"Biography": "Short information here.
}
]
SECOND TEST if I add ALL THE BIO DATA is not load
[
{
'image': 'images/staff/cindy.jpg ',.
"thename": "Cindy,"
"title':"nurse. "
"certifications": "CDA niv.2, HARP certified RN."
"Biography": "Long Bio here. Behind the scenes, and supported by a great team of professionals, Pat is responsible for the day-to-day operations of the practice.
Pat received his certification in 1968. She joined the practice in 1992 after a long career in the dental industry, notably in helping, office management and training company and consultant for dental offices across the Canada. A former president of the Ontario Dental Assistants Association (ODAA) Pat received the honor of a life time membership for his contributions to the growth and development of the ODAA and its members. Pat is a travel enthusiast and enjoys music, reading, and plays. »
}
]
What I mean, after you add your html tags for
or
remove all breaks between line until you have just a long line of DW for example. then copy this text into the json file. -
Bug. Can not put two edge animations animate on the same page
Alrighty. Just thanked Adobe for fixation sensitive question scaling. Now, it seems to be a new. When I put two animations dashboard run on the same page, they both disappear completely from the view! Both in mode live view (or which saw fluid grid) and trying to get a glimpse into any browser. The responsive design works fine but if I put two animations on the same page that the two just disappear! GONE!
Perhaps there is a code that I can use to prevent this. I did a number of tests during the last hour. My smile (from the reactive solution) is now again a frown. I can't keep working like that. Please let me know if there is something I am doing wrong. I have two animations on a page without worries prior to this version, but the delicate design did not work properly. The responsive design work NOW, but I can't have MORE than ONE ANIMATION on the same page. Thanks for your time. Best regards, Julian.
The use, I did the modification required: