How to integrate Edge Animation into a Joomla-CMS page?

I tried to integrate an Edge animation into a Joomla site, but there appears just a white page...

Hi,
I guess I have two answer on two levels. The wordpress plugin (EdgeSuite) allows you to place compositions inline or use iframes, so it is not really plugin vs. iframes.
EdgeSuite brings various benefits (if you ask me):
First of all, it comes down to just uploading stuff, place it, done. No ftp upload, filehandling or whatsoever.
More over that the plugin enables sharing of core edge libraries. E.g. if you place two compositions on a page without modifying them, all the edge libraries (edge.js, jquery, yep, easings...) will be loaded twice as they sit in different directories. Same with viewing compositions on different pages, each composition loads its own set of libraries. 10 different compositions results in 10x loading of all libs. Edge Suite on the other hand alters the path for the resources and places them in one directory. Libs are only loaded once, for the whole page.
If you have a simple website cluttering your webspace at root level might be an option. If you are using a CMS and have 10 compositions that is just awful. EdgeSuite places all composition files in a clean file structure within subfolders, no cluttering.
That's just from the top of my head.
The iframe topic is a bit more difficult. Personally I think iframes are mostly bad practice. It's like in the early days of the web with table layouts and framesets. There are cases where iframes make total sense and are the best way to go and that's why EdgeSuite can also render iframes. But I personally only want to "see" an iframe when there is no other option. If you can do it inline, do it inline. Bad SEO, loading times, semantic fragmentation... security aspects, sandboxing on the other hand are just a couple of the most common arguments. Most of the arguments don't directly apply to the context of Edge Animate, but still... decide for yourself
Hope that answers your question to some degree.

Similar Messages

How to integrate Edge Animation in slideshow (not create slideshow with EA) ?

Hi,
I'd like to integrate an animation I create into the theme slideshow, but can't find how :/
Would greatly appreciate some help here.
Cheers

Thanks a lot for a reply.
However, I can't find the right place to add the second so as it works. Could you please help me out ? :/
Here is the code of the section-slideshow.php, where should I add it ? :
<?php
// Get Slides
global $gpp, $post;
$slides = $gpp['slide_show'];
$images = explode( ',', $slides );
?>
<?php
//    Homepage Slideshow
if ( '' <> $gpp['slide_show'] && isset($gpp['slideshow_enabled']) && $gpp['slideshow_enabled'] == 'yes' || '' <> $gpp['slide_show'] && isset( $gpp['slideshow_enabled']) && $gpp['slideshow_enabled'] == 'yes' ) { ?>
<div id="home-slider-wrap">
<div id="home-slider">
        <div class="flexslider home-slider">
    <ul class="slides">
                <?php
                foreach( $images as $id ) {
                    $attachment_caption = get_post_field('post_excerpt', $id);
                    $attachment_title = get_post_field('post_title', $id);
                    $attachment_button = get_post_meta( $id, '_gpp_slider_button_title', true );
                    $attachment_url = get_post_meta( $id, '_gpp_custom_url', true );
                    ?>
                    <li>
<div class="slide <?php if ( empty( $attachment_title ) ) echo "slide-no-title" ?>">
<?php echo wp_get_attachment_image( $id, "slide", 0 ); ?>
                            <?php if ( ! empty ( $attachment_title ) || ! empty ( $attachment_caption ) ) { ?>
                                <div class="flex-caption">
                                    <?php if ( ! empty ( $attachment_title ) ) { ?>
                                        <h2 class="home-slide-title">
                                            <?php echo $attachment_title; ?>
                                        </h2>
                                    <?php } ?>
                                    <?php if ( ! empty ( $attachment_caption ) ) {
                                        echo '<p class="slider-caption">' . $attachment_caption . '</p>'; } ?>
                                    <?php if ( ! empty ( $attachment_button ) ) { ?>
                                        <h3 class="slide-button"><a href="<?php echo $attachment_url; ?>"><?php echo $attachment_button; ?></a></h3>
                                    <?php } ?>
                            <?php } ?>
                                </div>
                        </div>
                    </li>
                <?php } ?>
            </ul> 
        </div> 
    </div> 
</div>
<?php } ?>

How do I insert my Edge Animation into Wordpress as an animated/interactive graphic

How do I insert my Edge Animation into Wordpress as an animated/interactive graphic?

Hi ColleenSyron,
Can you check out this video: http://tv.adobe.com/watch/create-like-crazy-with-adobe-edge/episode-5-spice-up-your-wordpr ess-site-with-edge-animate/
Thanks,
Preran

Inclusion of an edge animation into Dreamweaver which was created outside of Dreamweaver

I have created an animated banner that I would llike to insert into a Div on an existing web page. Here is what was created:
Can some one give me an example of how to insert this animation into a web page div container? I see no examples on how to do this anywhere.
Thank you!

If you are having problems opening your files in Edge
There is script that does not belong or is incorrect...
http://pharmacure.businesscatalyst.com/Index_Desktop_Animation_1.html
Here is what your file looks like:
<!DOCTYPE html>
<html style="height:100%;">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />
<script type="text/javascript">var jslang='EN';</script>
<script type="text/javascript" charset="utf-8" src="Index_Desktop_Animation_1_edgePreload.js"></script>

<style>
.edgeLoad-EDGE-311633456 { visibility:hidden; }
</style>

</head>
<body style="margin:0;padding:0;height:100%;">
<div id="Stage" class="EDGE-311633456">
</div>
</body>
</html>
There are several items in your code that were not generated by Edge.
For one your <html> tag has script in there that does not belong...

How to integrate BW Hierarchy into Webi?

Hi Everybody,
I need to create a report based on 0FIGL_V10_Q0001 in Webi and this query has a hierarchy and i have created the hierarchy from the designer itself. In webi, when i tried to pull 1 of the hierarchy dimension with key figure, it shows no data but if i remove the key figure i can view the information. May i know what went wrong with it or do you have a details on how to integrate BW hierarchy into Webi?
Your assistance on this is greatly appreciated.
Thanks
Best Regards,
Hizam

Hi,
use the following link:
https://sapmats-us.sap-ag.de/download/download.cgi?id=SOTBBWVP5VS0BRNUJFQWYL5A6L3GXGPDJ59UKUDZMA1UVE1WOQ
(should work properly in about 10 min)
- merge the regsitry file to your BusinessObjects Server
- Restart the Services via a restart of the Server Intelligence Agent
- re-run the report with keyfigures
You should see 2 logfiles being created on the C:\ root folder
attach the logfiles to this message (do not copy past the content).
I assume the underlying BI query works fine.
Ingo

How to make Edge Animation works in HLTM5 Offline? I cache all files, but Edge didn't play.

How to make Edge Animation works in HLTM5 Offline? I cache all files, but Edge didn't play.
Some createJS animation start without any problem.
Thanks!
Astors

Thank you for your answer.
I do use cdn off for publish setting.
The Web site that I am working on is a very complicated site. Edge
animations are in a subdirectory of Apache server.
When server is offline, I get all files from Appcache without problem,
excepted *_EdgePreload.js.
I Google hundreds time, cannot find answer on why this file is always get
online.
Finally, I find out myself, Adobe Edge don’t like relative file path for
*_EdgePreload.js.
Change to root absolute path fixed the problem:
Astors

How to integrate BW3.5 into Portal6.0

Dear all
I want to distribute Queries and Web reportings directly
into Portal6.0,but i did not integrate BW3.5 into Portal6.0,although i have solved SSO between Portal and BW system.My BW system and Portal release are last version of Netweaver2004, and they are installed on individual server.Could anybody tell me how to integrate BW3.5 into Portal6.0? Thanks very much.
Best regards
Alpha

hi alpha,
create an BW iview and in the name of the query string in ep simply give the url of webtemplate of ur query. save the ivew and execute the query.
check out these links
http://help.sap.com/saphelp_nw04/helpdata/en/3a/10fc3f0ac2c642e10000000a1550b0/content.htm
http://help.sap.com/saphelp_nw04/helpdata/en/a8/37e1082163c54abce581a54d6b771a/content.htm
http://help.sap.com/saphelp_nw04/helpdata/en/7f/5bfc3f8fc2c542e10000000a1550b0/content.htm - Configuration
http://help.sap.com/saphelp_nw04/helpdata/en/ab/9659400d9d1059e10000000a155106/frameset.htm - Making Settings
/thread/92584 [original link is broken]
https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/library/uuid/ee58ec90-0201-0010-b9a2-9a63740933d5 - Tips
BEx
/thread/50510 [original link is broken]
/thread/92629 [original link is broken]
/thread/62101 [original link is broken]
/thread/89034 [original link is broken]
link in sap
1 http://help.sap.com/saphelp_nw04/helpdata/en/71/a202400d67c342e10000000a1550b0/frameset.htm
2. Why to integrate.
http://expertanswercenter.techtarget.com/eac/knowledgebaseAnswer/0,295199,sid63_gci974492,00.html
3. Integrating.. a ppt. (GOOD ONE)
http://www.asug.com/client_files/Calendar/Upload/7_Rapidigm%20EP_BW_Integratio
cheers
ravi

Integrating edge animations into Premiere to add audio

I want to add and synch an audio track to an edge animation. Is there a known workflow for getting edge animations into video (mp4) format so that I can then add audio?

Hi Jim, there is currently no built-in way to convert the html/javascript output of Edge Animate, to mp4 video.
What is your end goal? Are you trying to add audio to an Edge animation, which will live as html on the web? Or is your end goal a video piece?
If your end goal is a video piece, you could use screen capture software to record your Edge animation in-browser, then import that video to Premiere.
Depending on your use-case, it might make more sense to use a much more advanced, purpose-built animation application like After Effects as your animation tool, rather than Edge Animate.

How do I export an Edge Animation into a single folder? (no subfolders)

I need to export an Edge Animation so that all of the javascript, html, and images are located in one folder. (no subfolders)
Is this possible?
Thanks

unless you feel like hacking the exported edge code, no..
if you do.
open [you comp name]preloader.js in an editor look for "aloader" and remove the paths from edge.*.min.js and the jquery1-7...
open [your comp name]-edge.js and edit " var im='images/'; " to var im=''";
then cut paste all your files to the sinle folder

How to integrate existing value into one in hierarchy char.

I have a char. hierarchy call ZCOMP_CODE. ZLEADER is compounding with ZCOUNTRY.
The master data in ZCOMP_CODE looks like
ZLEADER;ZCOMP_CODE;
010;1000;
010;1001;
010;1002;
020;1000;
021;1000;
In query I have char. ZCOMP_CODE in row and one KF ZREVENUE in column. Previously we calculated ZLEADER 010,020,021 separately. But, now I want to calculated ZLEADER 020 and 021 together. Does anyone know how to integrate two existing value into one and display it in query? Do I need to create a new hierarchy node for including 020,021?
Thanks!
rajatina.

don't know how you can achieve this in the query...
but in the workbench there's a solution. Just add a routine in the transformation to change 021 to 020.
if you need to have still the 021 info somewhere, create a ZCOMPANY_CODE2 where you store only the values needed (010, 020)... use this company code as hierarchy in the report, and use the other company code for displaying the 021...
hope it's clear,
M.

How to integrate BW reports into the Portal ???

Hi all,
I need to integrate the BW (3.5) Reports into the Portal. If any one has good documents could you please pass it to my e-mail id: [email protected]
Thanks in advance.

Hi Venkat,
Integration of BW Components into the Portal
http://help.sap.com/saphelp_nw04/helpdata/en/a8/37e1082163c54abce581a54d6b771a/frameset.htm
Configuration for the Integration of SAP BW and SAP EP
http://help.sap.com/saphelp_nw04/helpdata/en/2f/741a403233dd5fe10000000a155106/frameset.htm
How to Integrate BW Web Applications into EP 5.0
https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/library/uuid/af073962-0b01-0010-f7a4-f4c1023ed0a4
Keys for Integrating SAP BW 3.5 and SAP Enterprise Portal 6.0
https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/library/uuid/6b1472a7-0301-0010-64bd-dc96509db6f7
Enterprise Portal Integration into BW(e-class)
https://media.sdn.sap.com/eclasses/ebw201/main.htm
Hope this helps.
Regards
Hari

Re: Placing Edge animations into an article in DPS

I am trying to place an interactive info graphic — created in EDGE animate — on a page of an article in DPS. I would like the reader to be able to click on the animation graphic and have it launch full screen and then be interactive — for the reader to be able to move thru the various screens, charts and graphs. I've tried placing it as an imbedded HTML document, as an animation, etc. but I'm not having any luck. Is this possible to do and if so, how? I am a DPS Pro user, creating my articles/folios in InDesignCC on a Mac running OSX 10.9.2. I have had success placing videos, audio, slide shows, scrolling frames, etc. just not the EDGE animation. BTW the file I'm placing has an .oam extention. The interactivity works great in EDGE. Any ideas? THX

AFAIK, that’s not possible. When you place an OAM file you are creating a web content overlay and the frame is going to act as a view port.
You could I suppose create an MSO and then use a full screen size Edge file that would launch as the second state when you tap a button.

How to get rid of scroll bars on an edge animation in a fluid grid page

I'm playing with a page that will contain an edge animation (basically just a panorama view sliding across the stage from right to left). My thought was that when the page was displayed on a tablet or phone the user would just see less and less of the animation--i.e., as if the panorama was sliding across a smaller stage. In my css I've specified overflow: hidden for the div that contains the animation, and in the animation itself I've specified overflow: hidden for the stage. This works fine in Live view, but when I preview the page in a browser (chrome, safari, IE) I get scroll bars. The animation also behaves as I want it to when I preview it in a browser by itself--i.e., not as a part of a fluid grid page. I could live with a horizontal scroll bar, and there might even be an argument in its favor, but the vertical bar is a definite problem. I've tried refining my css to overflow-y : hidden, but that doesn't have any effect either
Any help would be great.
Thanks,
Peter

I found an work around, albeit an inelegant one, so the link I posted to Nancy's reply now works. What I found is that the edge animation produces an html document with a body style. If I plug my overflow style there, voila, alls good. Of course it will be overwritten if I regenerate the animation, but at least it's progress.
p

How to download an animated .gif from a web page

how do i download to my mac an animated gif that is on a web page....when i want a picture or text or something like that i just ...apple shift 4 and "take a picture of it" ...but i want the animation..i have never had to do that on this mac.....a windoze person from the site(chat site) said just right click but my wireless mac mouse doesnt do that....i would appreciate any help.....i do know how to down load from a site that has downloadable .gifs...you just click the download sign they have and no problem....but this is just a random animated .gif from a web page ....i hope my ques is clear....thank you

Drag and drop it from the webpage onto your desktop. Note that it won't remain "animated" while you're looking at the file's icon, but it should work if you build it into a new website.
And you can right-click with a Mac mouse - you just have to set it up to do so in System Preferences. (Set the right side of the mouse to be a "secondary click".)
Matt

Add TWO Edge Animations/Stages to ONE web page (without using oam)

Hi All,
This is a bit of a follow on question for those who are adding scalable height/width edge compositions to web pages using the awesome piece of code created by Sarah (http://sarahjustine.com/) and other forum contributors... (attached code below).
My question is: How do I add a second Edge Animate composition to the same page using this method? So it's using "Stage" already... i'm guessing it's a matter of changing it to "Stage_02" etc in the following code? I've tried changing the relevant code but so far I have been unsuccessful in getting it to recognise a second stage.
Any help would be appreciated, many thanks in advance for your time.
Jeff
Index.html

    <script type="text/javascript" charset="utf-8" src="clouds_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-78729757 { visibility:hidden; }
    </style>

<div class="stagewrap">
        <div id="Stage" class="EDGE-78729757">
        </div>
</div>
Adobe Edge Stage Script
var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage
sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage
"transform-origin":"0 0",
"-ms-transform-origin":"0 0",
"-webkit-transform-origin":"0 0",
"-moz-transform-origin":"0 0",
"-o-transform-origin":"0 0"
function scaleStage() {
    var stage = sym.$('Stage'); // Set a reusable variable to reference the stage
    var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage
    var parentWidth = stage.parent().width(); // Get the parent of the stage width
    var stageWidth = stage.width(); // Get the stage width
    var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales
    var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales
// Rescale the stage!
     stage.css('transform', 'scale(' + rescale + ')');
    stage.css( '-o-transform', 'scale(' + rescale + ')');
     stage.css('-ms-transform', 'scale(' + rescale + ')');
    stage.css('-webkit-transform', 'scale(' + rescale + ')');
     stage.css('-moz-transform', 'scale(' + rescale + ')');
    stage.css('-o-transform', 'scale(' + rescale + ')');
    parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts
// Make it happen when the browser resizes
$(window).on('resize', function(){
     scaleStage();
// Make it happen when the page first loads
$(document).ready(function(){
    scaleStage();

I also met this question, have you solved this question? Jeff

How to integrate Edge Animation into a Joomla-CMS page?

Similar Messages

Maybe you are looking for