Responsive scaling of Edge Animate composition in Dreamweaver Fluid Grid Layout

I have created an animation in Edge Animate and have placed it in the header of a Dreamweaver Fluid Grid Layout. I have put it in a div by itself so it can be turned off in the mobile layout. When I test the layout in a browser, the Edge Animate composition scales responsively to the window size, but the height of the div it is in does not. The width of the div changes with the width of the window, but the height of the div remains the same. Because the height of the div doesn't change, as the animation responds and resizes it leaves a large empty space between the bottom of the animation and the content that follows it on the page.
The div itself does not have a rule for it's height associated with it. It seems to me that the div is getting its height from the original size of the html object which is the animation. I tried removing the height rule for the object, but then the div clips the bottom of the animation, and again, it doesn't resize with the window.
Is there a way I can get the div's height to resize with the size of the animation as it changes?

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

Similar Messages

Dreamweaver Fluid Grid Layout

Hi everybody! Doesn't it feel like the Fall weather? I love it as I see the trees changing colors. I will miss Summer but will enjoy the Fall holidays.
This question goes back to one I asked a while ago but it is different. I decided to update to DW CC and I can't tell you how much I love it as
I have watched all of the tutorials and find it much easier than the previous version.
One thing I decided to do was to use the Dreamweaver Fluid Grid layout. I totally understand how it works for the most part. When I go to DW CC and the load up screen, I Select fluid grid layouts and then I am presented with a smartphone version, a tablet version, and a desktop version. I left the defaults as they seem to be updated and correct. This is the thing, I design my mockups in PS. I guess I am baffled on how to code that offer to DW. When I always created a fixed layout, I would easily just measure out the divs in PS and then create them in DW sizing everything to perfectly match my initial mockup.
Now that I am using a fluid layout. I am presented with columns. Again, I left them as the default. My question is, I am designing in PS, I am designing for a specific resolution of 1024x768. But I am just confused on if I need to decrease columns or add columns to fit that, or if I even need to at all. For my specific resolution, should I change the desktop columns to somehow correspond to a 1024x768 resolution? The default is 12 columns. In Photoshop, is there a way to insert a fluid like grid to help me with my mockup?
Sorry if this is a lot, but I would appreciate any help, thank you so much!

Hi Nancy! I hope you have been well. Thanks so much for taking the time to post screen shots.
I thought I just needed to create a mockup in PS with a 1024x768 resolution, and slice images. With the fluid layout, I inserted for example, my header image or banner at the top and I inserted it in the desktop view, it looked normal. It was sliced in a 1024 x 768 mockup. But, when I go to tablet and smartphone, it shrinks and it looks distorted almost. Is there something I am doing wrong?
You stated that I needed to create 3 mockups in PS based on those sizes. Does that mean I would have to slice them all and place them in their proper sized sections smart phone, tablet, and desktop?
Here is a video I watched. It seems like this guy used the same image and it looks just fine in all sizes. Create fluid, responsive web pages in Dreamweaver | Learn Dreamweaver CC | Adobe TV

What are the Photoshop design dimensions for Dreamweaver fluid grid layout?

If I were to build a website using Dreamweavers fluid grid layout, what are the dimensions in Photoshop I should be designing with?

FluidGrid Layouts are based on % widths; not fixed pixel widths. As such your PShop design comps will need to be planned with these device widths in mind.
320px - 480px wide = mobile
481px - 768px width = small tablet
600px - 1024px width = large tablet
1024px - 1233px width = desktop/laptop
Nancy O.

How do I know if my Edge Animate compositions will scale up or down to fit each mobile phone platform's resolution? iPhone 3s, 4, 4s, 5, and 5s all have different resolutions. Do I use .png or svg?

I want to use Edge Animate to create native app in PhoneGap Build. How do I know if my Edge Animate compositions will scale up or down to fit each mobile phone platform's resolution? iPhone 3s, 4, 4s, 5, and 5s all have different resolutions. And do I use .png or svg?

If you use responsive scaling it will definitely scale .
For best practises regarding graphics refer
Edge Animate Help | Best practices for graphics in Adobe Edge Animate

Edge Animate Stage size in Dreamweaver fluid grid

I have developed an animation and have almost everything scaling and resizing acceptably in a Dreamwaevr template...except the stage.
In Edge animate I have a stage size that is 1212px x 400px. When the animation is viewed on a PC all the dimensions are fine, but when viewed in tablet or mobile phone, the vertical height remains at 400px... which leaves an enormous gap between the bottom of the animation and the next div.
I have set the stage dimensions to %, and have turned on the "link width & height" switch, and the stage still does not respond in vertical height.
How can I get the stage to respond vertically with a fluid grid layout in Dreamweaver?
I also note that every time I open up a previously saved Edge Animate file, the stage automatically opens the file at 550x400px, instead of the correct dimension for that animation, so that I have to then reset the stage size to what is correct for that animation... ..any reason this may be so?
Thanks,
Glen.

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

How to get an edge animate into a dreamweaver site

I need to get an edge animate slide show into a site I built in dreamweaver. All I see is information about sharing it with Muse.

See
- How to use Edge Animate content in your site built with Dreamweaver | Adobe Dreamweaver CC tutorials
- Dreamweaver Help | Import Edge Animate compositions
hth
Darrell

Unable to Insert Adobe Edge Animate files into Dreamweaver CS6!

I have just tried the new Insert Edge Media feature in the new Cloud version of Dreamweaver CS6, but I can't get it to work!!
I have the option, but all the files in the Edge folder are unhighlighted (grey'd out) and I am unable to select anything Edge has published. I have noticed that the file extension has recently changed from .edge to .an with the launch of Animate.. Is this the problem?
Its a shame as its really quite tricky to put edge stuff into a web page at present..
Any ideas?
Wesley

Do you have an HTML5 web document open?
Below are instructions from the DW CS6 Reference document
http://helpx.adobe.com/pdf/dreamweaver_reference.pdf
Import Edge Animate compositions | Creative Cloud
This feature is available for Creative Cloud members and point product subscribers only.
You can import Adobe Edge Animate compositions (OAM files) into Dreamweaver. The composition is placed at the location of the cursor. Dreamweaver extracts the contents of the imported OAM file to a folder named edgeanimate assets. You can change the default location in the Site Setup dialog.
1. Ensure that your cursor is at the location where you want to insert the Edge Animate composition.
2. Select Insert > Media > Edge Animate Composition.
3. Navigate to the location in your computer containing the OAM file, and open it. The animation is placed at the specified location.
By default, the contents of the OAM file are extracted to the edgeanimate_assets folder. A sub folder with the name of the file is created. The contents of the OAM file are placed in the Assets folder under this location.
You can place Edge Animate Compositions into individual pages not part of any site. The files are extracted to the location of the page.
Location of extracted files
     A. The edgeanimate_assets folder
     B. The folder created using the file name of the OAM file
     C. The Assets folder containing the extracted files
4. Preview the inserted Edge Animate composition in a browser or in the Live View.
Change default location for extracted files
1. Open the Site Setup dialog for your site.
2. Under Advanced Settings, select Edge Animate Assets.
3. In Asset Folder, modify the location for extracted files
Nancy O.

Import Edge Animate compositions into In Design

Hi, how do I import Edge Animate compositions into In Design..? Cheers
p.s. perhaps i should have added: my main interest is to have the animate project imported to have it load in the adobe viewer for digital publishing. up until now I'd linked the html overlay from the standard Edge app. One of the things that caught my eye under the features for Edge animate was:
Digital Publishing support
Import Edge Animate compositions into the Adobe Digital Publishing Suite with Adobe InDesign CS6, or into Apple iBooks Author.
How I proceed: as per the help/resources:
Publish as Animate Deployment Package (.oam)
Select this export option to create a package file of your project for use in other Adobe tools. The following tools support Animate Deployment Packages: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver CS6, and Muse.
Select File > Publish Settings.
In the Publish Settings dialog box, make sure Animate Deployment Package is selected as the publish target.
Note or change the target directory.
(Optional) Specify a poster image.
Click Save to save the publish settings, or click Publish.
but all i get is
Content generation error.
[Error: Invalid URL for Web Content Overlay]

Here is a walkthrough on Adobe Dev Connectings - http://www.adobemarketing.com/devnet/digitalpublishingsuite/articles/enhancing-your-dps-fo lios-with-edge-animations.html
The only difference in that walthrough is the reference to in the Publish Settings: in Adobe Edge Animate v1, its now called 'Animate Deployment Package' instead of 'Indesign/DPS'.
Darrell

Select Insert Media Edge Animate Composition ????

no me sale la opcion "
Select Insert > Media > Edge Animate Composition"
no aparece en el menu de dreamweaver, no puedo importar edge desde dreamweaver
alguna solucion gracias

Insert > Media > Edge Animate Composition is in Creative Cloud versions of CS6.
Nancy O.

Insert Edge Animate Compositions Unavailable

I don't have an option to import Edge Animate Compostitions in Dreamweaver's 'Insert' menu.
Was this an update to CS6 only available in the cloud and not to boxed versions?
I have CS6 master collection. DW 12.0 Build 5861 for Windows.

This feature of inserting Edge compositions directly into DW is available only to Creative Cloud subscribers (at the moment, since Creative Cloud brings in all the new features as soon as they're released). See here: http://helpx.adobe.com/dreamweaver/using/import-edge-files.html
However, you can manually insert your Edge compositions into your code with a div tag and a unique Identifier to the div, also adding a few supporting Edge files. You should publish your Edge composition for 'Web'. You can possibly decode the published index.html file source code after that. If you need more help doing this, do post back!
-ST

I am getting a slider on horizontal and vertical sides while embedding the edge animate object in dreamweaver CC 2014

I am getting a slider on horizontal and vertical sides while embedding the edge animate object in dreamweaver CC 2014.
When I import the ".oam" file in dreamweaver and change its width and height, then it starts showing me horizontal and vertical sliders.

Hello!
I now have a project that seems to be corrupted. A had been working on it all morning, with a few bugs here and there. Now I can no longer open the file, receiving this error: "Edge Animate: Exception An error occurred. Please your work and restart Edge Animate."
I will try to attach sample files.
- J Sean

Edge animate composition is not an option on insert media menu, and I subscribe to the cloud

edge animate composition is not an option on insert>media menu, and I subscribe to the cloud

If your product was installed via the Creative Cloud, you should be able to update it using the Creative Cloud. If your product was installed via other media (like from the DVD), you will not be able to update it using the Creative Cloud. Now that CC has launched, you might want to look at upgrading now and try it out now.
Thanks,
-Elaine

There is suppsoed to be an option to import Edge Animate objects into Dreamweaver. I have the latest

There is suppsoed to be an option to import Edge Animate objects into Dreamweaver. I have the latest version and I do not see that option.
Windows 8.
DW CS6
12.0 5808
http://helpx.adobe.com/dreamweaver/using/import-edge-files.html
http://layersmagazine.com/edge-animations-into-dreamweaver-cs6.html
And I am a member of creative cloud

Reading another post... here's what I had to do. Log into creative Cloud. >> Re-Download Edge >> It installs over the top of the existing Edge Animate install >> Then close everything >> go back into Creative Cloud >> Now it shows that Dreamweaver has an update. >> So I download the latest Dreamweaver>> Bam!
My guess is there is no reason to have the DW 12.2 if the system doesn't think you have the latest Edge Animate.
Silly.
Thanks again.

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

Fluid grid layout lost when closing and reopening Dreamweaver

I am working on fluid grid layout in dreamweaver cc. I created a new dreamweaver site, created a fluid grid layout page and everything looked and worked as it should. I closed out of dreamweaver and when I reopened it, I could no longer see the fluid grid layout or the fluid grid handles on any of the divs. I also no longer had the little button in the toolbar next to the live button either, to toggle the fluid layout on and off. I did not move the css or js from where dreamweaver originally stored them.
Also checked the content and code of my files, everything looks as it should:
The fluid grid layout style sheet IS attached to the page.
The Fluid Grid Properties near the top of the style sheet ARE still there.
I have tried several test sites and as soon as I close DW and reopen it, the fluid grid layout button is gone, as is are the visual aids. I uninstalled and reinstalled dreamweaver to no avail.
Very frustrating!
ANY help would be greatly appreciated!

Hi,
Thank you for all the responses. When I was doing the testing, I didn't touch any of the style sheets. I just created a new site, created a new FGL page, saved everything, then closed out. When I reopened, the FGL elements were not there. So in taking Ken's suggestion, I was getting ready to upload the files to see if anyone could see what I was doing wrong. I had named the file test.html so I did a 'save as', to save it as index.html to make it easier. Then a strange thing happened. The new 'index.html' page came in with the FGL elements! When I looked at the test.html, they still were not there. In doing additional testing, when I open the first file, whether test.html or index.html, no FGL functions are available, when I open the second one, again no matter whether test.html or index.html, they are. Getting ready to throw my hands up... I uploaded everything to:
http://www.ComputerSecurity.com/fgltest/
Directly under there is the css file called fgltest.css, along with the boilerplate.css, respond.min.js, index,html, and test.html.
Don't know what is going on. I am new to fluid grid layouts, but not to dreamweaver, have been using it for years. Unless someone can see something that I cannot, seems like the only way I can create a Fluid grid layout based on this new information, is to open one page and work on another...

Responsive scaling of Edge Animate composition in Dreamweaver Fluid Grid Layout

Similar Messages

Maybe you are looking for