How to make responsive Edge Animate with elements aligned in the middle?

Hi,
I wanted to create a responsive hero slideshow using Edge Animate. It will have a 100% width and max-height of 500px. However, I wanted that the other elements will stay in the middle of the slideshow and not be anchors to either corners - as what is selectable in Animate.
My aim to to achieve something similar to Slider Revolution Responsive jQuery Plugin » Slider Revolution Responsive WordPress Plugin Slider Revolution.
Anyone have any idea how to go about this? Any help would be appreciated. Thank you.

Hi deltabrux,
Can you share your Edge project files? Are your using EA 2014.1?
Regards
Vinod
Edge Animate Team

Similar Messages

How to get an edge animate to loop continuously

How to get an edge animate to loop continuously

Please check the search feature on the forums - plenty of results there.

Responsive edge animate oam in fluid grid

Hi, maybe my question is totally rookie one, but I cannot get the responsive Edge Animate package to do resize smoothly in the fuid grid of Dreamweaver.
Either it is not wide enough or the height does not scale, which results in the footer to be far down.
It probably has to do with the fixed size of the object tag when I insert the oam.
<object id="EdgeID" type="text/html" width="960" height="510" ....
Changing sizes to 100% works fine for width only, the height behaves strange, showing only a small part of the animation in every view.
Is this an issue of oam packages or just my poor knowledge of CSS ?
Attached you find the screenshots:
Thanks a lot for your help!
B.

I came across this problem when recording Adobe Dreamweaver CC: Learn by Video for Adobe Press. The way I handled it was by adding the following block of JavaScript just before the closing </body> tag on the page that contains the Edge Animate object:
<script>
function fixHeight() {
var anim = document.getElementById('EdgeID'),
w = anim.offsetWidth;
anim.style.height = (w * .562) + 'px';
fixHeight();
window.addEventListener('resize', fixHeight, false);
</script>
This gets the width of the animation (the default ID is EdgeID). It then adjusts the height by multiplying the width by 0.562. You will need to fix the scaling ratio in the following line to suit the proportions of your animation:
anim.style.height = (w * .562) + 'px';
I can't remember all the details because it's more than a year ago that I did this. As I recall, Edge Animate generates the correct height for the animation, but it doesn't adjust the height of the <object> element used to display it.

Responsive Edge Animate in a Div

Hi.
Recently i tried a page to test the responsive design, and all went well.
Now I want to place an Edge Animate element (. Oam) in a div, but that only appears on the computer and tablet version,
and the mobile version appears another Edge Animate object, because Edge Animate, just scale my object and the mobile version is unrecognizable
Greetings.

Hi.
Thanks
Well, I know how to insert an Edge Animate object, no problem.
But.
I try to explain. If it can place a different Edge Animate Composition for each resolution (Desktop, Tablet, Mobile).
For example:
Or
Sorry for the inconvenience, and thanks for the help.

How do you upload Edge Animate on Adobe CDN?

How do you upload Edge Animate on Adobe CDN?

Hi Darrell,
I'm using an exciting new software package called www.webflow.com and I asked the following question in a forum:
Hi,
How would you add this Edge Animate to Webflow? Is it possible?http://html.adobe.com/edge/animate/showcase/interactive-marquee/11
The files are available here: http://html.adobe.com/edge/animate/showcase.html6
Edge Animate gives you a few different option for publishing:
The drop down that you see in the image next to "Chrome Frame Installer" has three options:
Now Prompt
iFrame Prompt
Overlay Prompt
These are the files saved when only "Publish content as static HTML" is checked. See "Publish Settings" image:
Is it possible to add this animation to a Webflow site?
If yes, any suggestions on how would be greatly appreciated.
Thanks,
Todd
Here's Sergie's reply:
Hi @TStanwood, it's possible, but the only way to do it is if you host your files on Adobe CDN or if you host it on your own server and then display an iframe with the index file in Webflow.
That's the way to do it before we allow for hosting of non-image files on Webflow.
After you have them hosted on your own server you can follow these instructions found on the Adobe forums:http://forums.adobe.com/thread/1166851
You'll have to add this to your head code:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="Bannerad_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-160548878 { visibility:hidden; }
    </style>

Replace Bannerad_edgePreload.js with the link to your server and the edge js file.
And in the Webflow add a div block with the class EDGE-160548878 and id stage and the .js file should inject your html animation file into this div block.
<div id="Stage" class="EDGE-160548878">
</div>
I don't have a server to upload the files to. I really don't even know what any of this means.
I'm wondering how and where I can upload the Edge Animate files to and then link to it by following the instructions above.
Any help would be appreciated.
Thanks,
Todd

How to make use of adjacent data elements within the same buffer

Hi,
         Does anyone know how to make use of adjacent data elements within the same buffer? To make my question clearly, I would like to give you an example. In my application, I set "sample to read" as 10 which means at each loop 10 data samples will be taken into a buffer. Now, what I would like to do is to do some calculations on adjacent data samples in same buffer. I tried to use "shift register" for this, but it seemed to me that it only can deal with the calculation between data from adjacent loops. In other words, it skips 9 data elements and take the 10th one for the calculation.
         Here I also attach my VI showing what I did.
    Thank you very much in advance,
                        Suksun
Attachments:
wheel_encoder_1.vi ‏98 KB

Hi Suksun,
      I hope you'll forgive me for distilling your code - mainly to understand it better. I tried to duplicate your logic exactly - which required reversing the "derivatives"-array before concatination with the current samples array. As in your code, the last velocity is being paired with the first position. If first velocity is really supposed to be paired with first position, just remove the "Reverse 1D Array" node.
cheers
Message Edited by Dynamik on 01-07-2006 03:17 AM
Message Edited by Dynamik on 01-07-2006 03:19 AM
When they give imbeciles handicap-parking, I won't have so far to walk!
Attachments:
encoder2.GIF ‏14 KB
encoder2.vi ‏102 KB

Add dancer.js library waveform to Edge animate with yepnope

*Getting external library dancer.js to load via yepnope
Hello Tim you have an excellent solution with yepnope, i hope you can help me cause i try to add the dancer.js library here de example (http://pelidesk.vv.si/java/examples/audio_element/ ) to my edge animate with yepnope something like this..
on creatinComplete
yepnope({nope:['http://pelidesk.vv.si/java/dancer.js',
'http://pelidesk.vv.si/java/support.js',
'http://pelidesk.vv.si/java/kick.js',
'http://pelidesk.vv.si/java/adapterWebkit.js',
'http://pelidesk.vv.si/java/adapterMoz.js',
'http://pelidesk.vv.si/java/lib/fft.js',
'http://pelidesk.vv.si/java/lib/flash_detect.js',
'http://pelidesk.vv.si/java/plugins/dancer.fft.js',
'http://pelidesk.vv.si/java/plugins/dancer.waveform.js'], complete: init});
function init (){
// i dont now how its de funtion to call and visualizate the java waveform and audio player. i hope you can to orientate myself
//maybe i dont need all de js. ...
Regards!
Thank you!
i hope dont duplicate de discussion thanks a lot guys!!

Hi! Tim!
Here the part that i modify and i want to use on edge
http://pelidesk.vv.si/java/shared/waveform.zip
And here all the original files that uses dancer.js with my modified part including
http://pelidesk.vv.si/java/shared/dancer.zip
Here the original source
https://github.com/jsantell/dancer.js/
*In the waveform that call audioelement can see the css and index.html with parameters and sources, mayde that can help i dont think use all the dancer sources.
Regards!

How to make one edge of a photo transparent

Hi,
I am doing a website and want to make one edge of a photo transparent to the background - such as http://www.aimeemann.com/
Does anyone know how I would do this?
Thanks much!
Nic

Double click the layer icon in the layers panel. Then hit the create mask button at the bottom of the panel (lower red circle). Then with the layer mask selected (upper red circle, notice the black outline shwoing you are working the mask, not the layer), use the gradient tool to make a gradient as shown in the icon preview. Then save for web as PNG24.
<br />
<br />
<a href="http://www.pixentral.com/show.php?picture=1pTgqlM1shye4AuiOINeT6f1833CF0" /></a>
<img alt="Picture hosted by Pixentral" src="http://www.pixentral.com/hosted/1pTgqlM1shye4AuiOINeT6f1833CF0_thumb.gif" border="0" />

How to make Dynamically Shortened Text With "Show More"

Hi there! i want to know how to make dynamically shortened text with show more or read more in my website using HTML 5 pages or ASP.NET ?
example like these paragraphs
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
Det är ett välkänt faktum att läsare distraheras av läsbar text på en sida när man skall studera layouten. Poängen med Lorem Ipsum är att det ger ett normalt ordflöde, till skillnad från "Text här, Text här", och ger intryck av att vara läsbar text. Många publiseringprogram och webbutvecklare använder Lorem Ipsum som test-text, och en sökning efter "Lorem Ipsum" avslöjar många webbsidor under uteckling. Olika versioner har dykt upp under åren, ibland av olyckshändelse, ibland med flit (mer eller mindre humoristiska).
I motsättning till vad många tror, är inte Lorem Ipsum slumvisa ord. Det har sina rötter i ett stycke klassiskt litteratur på latin från 45 år före år 0, och är alltså över 2000 år gammalt. Richard McClintock, en professor i latin på Hampden-Sydney College i Virginia, översatte ett av de mer ovanliga orden, consectetur, från ett stycke Lorem Ipsum och fann dess ursprung genom att studera användningen av dessa ord i klassisk litteratur. Lorem Ipsum kommer från styckena 1.10.32 och 1.10.33 av "de Finibus Bonorum et Malorum" (Ytterligheterna av ont och gott) av Cicero, skriven 45 före år 0. Boken är en avhandling i teorier om etik, och var väldigt populär under renäsanssen. Den inledande meningen i Lorem Ipsum, "Lorem Ipsum dolor sit amet...", kommer från stycke 1.10.32.
Den ursprungliga Lorem Ipsum-texten från 1500-talet är återgiven nedan för de intresserade. Styckena 1.10.32 och 1.10.33 från "de Finibus Bonorum et Malorum" av Cicero hittar du också i deras originala form, åtföljda av de engelska översättningarna av H. Rackham från 1914.

Moved to the main Dreamweaver support forum.
There are several ways you could approach this. Here's one you might try:
Give the first paragraph an ID, such as "first", and wrap the paragraphs you want to hide in a <div> with another ID, such as "more". Then add the following block of JavaScript just before the closing </body> tag of the page:
<script>
var first = document.getElementById('first'),
     more = document.getElementById('more'),
     trigger = document.createElement('span');
trigger.id = 'trigger';
trigger.innerHTML = 'Show less';
first.appendChild(trigger);
function toggleDiv() {
var state = more.className,
       text = trigger.innerHTML;
more.className = (state == 'open') ? 'closed' : 'open';
trigger.innerHTML = (text == 'Show more') ? 'Show less' : 'Show more';
toggleDiv();
if (trigger.addEventListener) {
    trigger.addEventListener('click', toggleDiv, false);
} else if (trigger.attachEvent) {
trigger.attachEvent('onclick', toggleDiv);
} else {
trigger.onclick = toggleDiv;
</script>
This gets references to the "first" paragraph and the "more" <div>. It also creates a <span> with the ID "trigger" that's appended to the "first" paragraph. The rest of the script defines a function called toggleDiv(), which toggles the "more" <div> open and closed, and changes the text in the "trigger" <span>.
You also need to create the following style rules for the various elements:
<style>
#trigger {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
#more {
    transition: ease-out .7s;
    overflow: hidden;
#more p:first-child {
    margin-top: 0;
#more.closed {
    height: 0;
    -webkit-transform: translateY(-600px);
    transform: translateY(-600px);
#more.open {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    max-height: 600px;
#more + p {
    margin-top: 0;
</style>
This solution hides the text and creates the "trigger" <span> only if JavaScript is enabled in the browser. It should work in all browsers, including Internet Explorer 8 and earlier.

How do i add Edge animate .oam files to Fixed Layouts Epubs in Indesign cc 2014?

How do i add Edge animate .oam files to Fixed Layouts Epubs in Indesign?

Hi,
There is a bug on iOS7 which does not let edge animate work correctly here. This issue will happen on iPad and not on Mac OS.
There is a similar thread that explains in detail this issue you are facing:
https://forums.adobe.com/thread/1513879
Regards,
Pooja

How do you connect edge inspect with chrome !?

how do you connect edge inspect to chrome

If you install the Chrome extension then Edge Inspect will syncronize with whichever page is in the current tab.
=Ryan
[email protected]

How to make SAP B1 connection with Windows Sharepoint Service 3.0

how to make SAP B1 connection with Windows Sharepoint Service 3.0 through asp.net web part code.. I get the security error when i run that web part......
public bool ConnectToCompany()
            oCompany = new SAPbobsCOM.Company();
            oCompany.Server = "192.168.1.58";
            oCompany.DbServerType = SAPbobsCOM.BoDataServerTypes.dst_MSSQL2005;
            oCompany.CompanyDB = "SBODemoUS";
            oCompany.DbUserName = "sa";
            oCompany.DbPassword = "abc";
            //oCompany.UseTrusted = true;
            oCompany.UserName = "manager";
            oCompany.Password = "manager";
            oCompany.language = SAPbobsCOM.BoSuppLangs.ln_English;
            oCompany.LicenseServer = "192.168.1.58:30000";
            int i = oCompany.Connect();
            if (i != 0)
                return false;
            return true;
protected override void RenderContents(HtmlTextWriter writer)
            if (conn.ConnectToCompany() == true)
                writer.Write("Hello" + this.Context.User.Identity.Name);
Edited by: bikalg on Nov 28, 2010 9:43 AM

Hi.......
Welcome to SAP Business One Forum.....
Unfortunately this is the wrong forum you posted here.
I would suggest you post it in SDK or System Administration Forum and definitely you get the solution and close this thread from here......
Regards,
Rahul

How to make a PDF form with expanding tabel or expanding fields, like in Word.

How to make a PDF form with expanding tabel or expanding fields, like in Word.

This is currently not possible in Formscentral. It is something we are working on for the future. Please stay tuned.
Andrew Yarborough

Is their any tutorials on how to make a navigation bar with drop downs in Dreamweaver CC now ?

Is their any tutorials on how to make a navigation bar with drop downs in Dreamweaver CC now that they do not have the spry option?

bbull2005 wrote:
Preran, why wouldn't Dreamweaver include it's own menu/navigation bar widget?
I can't answer on Preran's or Adobe's behalf, but I think you'll find at least part of the answer here: http://wiki.jqueryui.com/w/page/38666403/Menubar
Adobe decided to discontinue development of Spry in August last year, and Dreamweaver CC made the switch to using jQuery UI widgets and effects. One reason for dropping Spry was that it failed to work correctly in some browsers. Judging from the fact that the jQuery UI menubar is now "on ice", creating a flyout menu that works reliably across all devices is proving more difficult than originally envisaged.
Because all other widgets in Dreamweaver CC use jQuery UI, it's a reasonable assumption that Adobe hoped the jQuery UI menubar would be ready in time, but it wasn't.

How to make a Beziere path with REC.

I'am tring to follow a flashlight with a particle emmiter. I want to make a beziere path with different points across the timeline using the REC mode. And then attach the particle to the path so it can follow correctly with speed and curves the flashlight. How do i do this?

Kyle,
Presuming you wish to move one circle to snap to another circle at a certain predetermined angle, and you have it placed at a distance at that angle you may (Smart Guides are your friends):
1) Select both circles, and with the Line Segment Tool drag a line from centre to centre (Smart Guides say center when you are at the first one and close enough to the second one);
2) Select the circle to move with the normal Selection Tool, then hover over the spot where the line crosses it (Smart Guides say intersect), then ClickDrag along the line (Smart Guides say path) until you have dragged it to snap to the other circle (Smart Guides say intersect).
This works whether the circles are beside each other or one is inside the other.
When moving vertically or horizontally, there is no need for the line, and you can just ClickDrag by the relevant Anchor Point.

How to make responsive Edge Animate with elements aligned in the middle?

Similar Messages

Maybe you are looking for