Scale a div based on width/height of Stage?

My Stage is set to 100% w/h. I'd like to center a div, and have it scale based on a percentage of the Stage's size. The div contains animated text and images.
I've seen some similar examples but the Stage always seems to be set to pixels. Any thoughts? Thanks!

sym.$("contentTobeScaled").css({
margin : '0 auto',
position: 'relative'
This will center the div
Following can be used to scale your content responsively
$(window).resize(function() {
var scaleFactor= Your Calculations involving either - $(window).width() - or the height perhaps.
sym.$("contentTobeScaled").css({'transform': 'scale(' + scaleFactor+ ')'});
sym.$("contentTobeScaled").css({'-moz-transform': 'scale(' + scaleFactor + ')','-webkit-transform': 'scale(' + scaleFactor+ ')'});
I was able to perform many complex responsive transformations using .resize and a custom defined variable. The good thing is you can use any mathematical functions to relate these two, in some cases having "inverse" scale factors to make something shrink when windows are expanding. or non-linear effects, discrete effects, anything possible. Enjoy.

Similar Messages

Action performs % scale instead of setting width & height

Hi
I'm trying to create an action to scale an object to an width of 1024 pixel and then save if for web.
But the actions saves the percents, making it useless when applied to another object.
Can someone tell me what I'm doing wrong?
Noties in pictures, that I set the width to 1024 pixel, but in the Action it performs an Scaling of 1233,73%

Record setting the width or height in the Transform palette (or Control Panel) instead of in the Scale dialog.
JET

[svn] 3411: * Change layout-related width/height, explicit width/height, measured width/height properties from post-scale to pre-transform.

Revision: 3411
Author: [email protected]
Date: 2008-09-29 16:44:01 -0700 (Mon, 29 Sep 2008)
Log Message:
* Change layout-related width/height, explicit width/height, measured width/height properties from post-scale to pre-transform. yay!
* Flex3 containers are updated to support the new behavior.
* Repeatedly scaling a component can differ from before, since we no longer accumulate rounding errors.
* The change is gated by a version flag, in compatibility mode these properties don't change.
Reviewed by Glenn, Ely
Modified Paths:
flex/sdk/trunk/frameworks/projects/flex4/src/flex/layout/LayoutItemUIC.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Accordion.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Box.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/DividedBox.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/FormItem.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Tile.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/utilityClasses/BoxLayout.a s
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/utilityClasses/CanvasLayou t.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/core/Container.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/core/UIComponent.as
Added Paths:
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/utilityClasses/PostScaleAd apter.as

I am sorry to have to point out to you that you have changed SpryMenuBasicSkin.css so much that it is impossible to render any assistance.
To start with, the menubar has an ID of MenuBar, yet in the CSS I only see this referenced as a CLASS as in
.MenuBar {
background-color:#cccccc;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 16px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
I would suggest to start again.
Once you have done that, supply a link to your site and we will assist you further.
Gramps

JQuery width() height() always get stage size instead of div size?

I have an Edge project with nested Symbols. In a 3rd level symbol instance, I log it's real size like this.
var stageWidth = $(window).width();
var w = sym.getSymbolElement().width();
console.log(w,stageWidth);
When it's in the creationComplete event handler, it shows the right size.
When it's in the mousemove event handler, it always shows that div size == stage size.
I have tried hours not to find the solution.
What is this problem?

Trying to use logic to locate the problem ( at least trying...)
- if the code is placed in 3rd level, maybe the stageWidth is calculating something else than stage size?
- if the code is placed in stage maybe the w is not targeting the right element?
- Does it mean that during the mouseMove the creation has not completed yet? what could be the explanation for the contradictory results here?
- maybe during mouseMove you are performing some sort of transform or modification on the element, and it makes the width equal to stage size? something to manipulate the w value after its creation?
- maybe w is not reading the size you are actually interested to read ( like the value of w is equal to stage in reality and this is what shown in mouseMove but interestingly in creationComplete you get unequality. Assuming the reverse scenario, suspecting the creationComplete results instead)
- what happens if you replace mousemove to a click event?
hope it helps, i guess this is how sherlock holmes would try to help you. not enough knowledge on creationComplete to find the flaw here...

Setting width/height of a control with CSS

Hi,
I am styling a button a button in CSS and set a background-image for the button in my stylesheet.
The problem is, that the button should scale to the width/height of the image.
I added:
-fx-width: 32px;
-fx-height: 32px;
but it has no effect.
I also tried it with
-fx-min-width: 32px;
-fx-min-height: 32px;
If I use setMinWidth(32); in Java, it works.
But I rather want to set it in my stylesheets, because the image can change, if we use another skin.

CSS documentation (http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html) states:
"JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code."
I thought you might be able to do something using the -fx-shape property, but the shape does not affect the size of the button - so that didn't work.
I had more luck with the -fx-graphic property - you could try to enhance the stylesheet below to get what you want.
.root   { -fx-background-color: azure; -fx-padding: 20; }
#smurf-button { -fx-graphic: url("http://bluebuddies.com/smurf_fun/smurf_race/jpg/Smurf_Race_100x100.jpg"); -fx-background-color: transparent; }
#smurf-button:hover { -fx-effect: dropshadow( three-pass-box , rgba(184,134,11,0.6) , 20, 0.0 , 0 , 0 ); }
#smurf-button:armed { -fx-effect: innershadow( three-pass-box , rgba(0,200,0,0.6) , 30, 0.0 , 0 , 0 ); }
public class ButtonStyle extends Application {
public static void main(String[] args) throws Exception { launch(args); }
public void start(final Stage stage) throws Exception {
    final Button button = new Button();
    button.setId("smurf-button");
    final Scene scene = new Scene(StackPaneBuilder.create().children(button).build());
    scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
}

Fit Table width/height to Margin

It would be a great handy feature if the table width could be fitted to the margin of the page.
Moreover 'tables' need some more extra features like : distribute rows/column evenly to fit table width/height. At present this feature extends the table width/height when applied. Once I fix the width and height of the table, distribute rows/column must fit to that width/height only. The table should only extend when I add rows or column.

>I have a 2-page site for a customer and have set it up as
tables (from
> Photoshop CS to Dreamweaver MX).
Bad start. Read this for a better approach -
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Then read this -
http://apptools.com/examples/pagelayout101.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Jonclyde" <[email protected]> wrote in
message
news:gfenmb$dek$[email protected]..
>I have a 2-page site for a customer and have set it up as
tables (from
> Photoshop CS to Dreamweaver MX). The first page opens
fine with the table
> occupying 100% up and down as required, but clicking a
link to the second
> page
> causes the table to shrink in size, even though (as far
as I can tell)
> both
> pages are virtually identical when it comes to layout. I
did one page,
> then
> copied it to make the second page. Check it out for
yourself here:
> www.jonathanstewart.com/chc/index.html. I can get the
second page
> (Services) to
> open properly only if I set the target to _blank. Check
the far right and
> bottom of screen on both pages. The bar at the bottom
should rest on the
> bottom
> of the browser window whatever the window's size, and
the bar at the top
> should
> extend "off the page" at both left and right. Any ideas?
>

Pshop CS3 Save for Web Increases Width/Height

Hi, I've been using Photoshop for 15 years and used the Save for Web at CS2 without problem. In CS3, it is downsampling the res from 300 ppi to 72 correctly but at the same time increasing the width and height, as though I'd gone into Image Size to do the resize and had the Resample Image field unchecked. This worked fine in CS2, so what gives? I can't find any setting that needs to be changed in the Save for Web interface.

Buko, I respectfully submit that your comment makes no sense. In CS2, using Save for Web automatically cut down the ppi to 72, and it removed web-unnecessary things like previews and paths so that the file could become smaller. It did NOT change the width or height of the image.
The CS3 version is cuts down the res to 72ppi. This is fine. The problem we're experiencing (on more than one machine) is that it's growing the width and height as though it's not downsampling when it changes the res. IF that's what you mean by "strictly pixel based," then OK, but it's problematic.
This is exactly the opposite result that you get if you take a digital camera photo that has a large dimension but low res, and increase the res to 300 while not allowing it to resample: you get a high-res image with smaller width/height image, as all pixels get smaller but maintain their exact colors.
If the CS3 version of Save for Web changes the diensions of the image, which is frequently created based on the final dimensions needed in the web page, then it's freakin' useless, and I might as well create an Action using Image/Image Size to reduce the res but maintain dimensions.

Native webcam capture width / height

the native width and height capture always seems to be 128x128. how can i change this? it's taking a square crop from the camera and publishing that as the stream.
also, i don't quite understand what resolutionFactor is doing. what are the three native width and height values? does setting resolutionFactor=3 for a 128x128 capture translate to a 384x384 resolution? no matter what i set resolutionFactor to, when i check the stream coming in the nativeWidth/nativeHeight is always 128x128.
can you help me clarify this?
Specifies the resolution factor of captured data; ResolutionFactor values range from 1 (lowest resolution) to 10 (highest resolution). Resolution factor gets multiplied by the native width and height of captured camera. We provide three native width and height values based on aspect ratios. That width and height when multiplied with this factor, gives the resolution.

Hi Adam,
If you look at the source code of StreamManager.as in the player 9 source we provide, we have three set of values for native width/height. I will copy them here
@private
          public static const AR_PORTRAIT_W:Number = 144;
@private
          public static const AR_PORTRAIT_H:Number = 112;
@private
          public static const AR_STANDARD_W:Number = 128;
@private
          public static const AR_STANDARD_H:Number = 128;
@private
          public static const AR_LANDSCAPE_W:Number = 160;
@private
          public static const AR_LANDSCAPE_H:Number = 96;
By default, we use the standard values for nativeWidth and nativeHeight i.e. 128 and 128. When you specify a reslotion factor, the native width and height doesn't change but the capture width and height is multiplied by the factor in
camera.setMode(StreamManager.ARSTANDARD_WresolutionFactor, StreamManager.AR_STANDARD_H resolutionFactor, _fps);
So, if you are setting resolution factor as 3 it will do for standard
_camera.setMode(1283, 1283, _fps); though the native width and height remains the same.
If you want to change them, you need to override the createMyStream function in WebcamPublisher.as and change the nativeWidth and nativeHeight( the code is same for 9 and 10, so even If you are using player 10 swc, you can refer to 9 source of this function), but you don't need to do the native width and height, just changing the resolutionFactor should change the capture width/height for you.
Please refer to updateSettings and createMyStream functions in the source code of WebcamPublisher.as for further clarity.
Hope this helps.
Thanks
Hironmay Basu

Script to receive width, height, movie url

I'm a complete Flash neophyte, but despite this I've been
tasked at work with creating an actionscript for a fla file that
will receive width, height, and URL (of a .flv file) as arguments
so that the file can dynamically display video based on the
arguments passed. I have to have this done by tomorrow...would
anyone be kind enough to throw me a clue or two on how this could
be done? I'm looking through the tutorials and documentation, but
they all look like they're for intermediate to advanced Flash
users. I know javascript fairly well, so I think I get the general
concept, but I'm in the dark as to syntax, proper object and
properties to refer to, what the function would look like or where
to save it...
Any help would put me way in your debt.
Thanks,
Christophe

function setVideo(newWidth, newHeight, newURL)
_root.videoGizmo._height = newHeight;
_root.videoGizmo._width = newWidth;
//then set the filename. That will be different depending on
what video component you are using. If you are using flash 8 and
using the flash 8 video playback component then it will be the
contentPath like so
_root.videoGizmo.contentPath = newURL;
Keep in mind that if you are using flash 8 and that's OK for
users then then video playback component will autosize for you if
you set its autosize property to true.

Variable width/height JList

Hi all,
I have an idea for a project I'm working on which involves a JList which can have varying widths/heights. The idea being that you can have items at the top of the list being larger than those further down the list.
The problem so far is that the JLists UI delegate handles the data in logical columns of identical sizes, I basically want to keep this behaviour but replace the one set of logical columns with a collection of them (one for each size section) so in effect you will have (say) 3 columns of large items follwed by 4 columns of medium items and then 6 columns of small items (assuming HORIZONTAL_WRAP is used). I also want these size sections to be based on the flow direction, e.g. if the flow moved virtically then you can say 'make rows 0 - 3 be 150 pixels tall and rows 4 - 8 be 30 pixels tall' or if horizontal flow is used then the columns and width are used.
I was wondering if anyone knows of an implementation of this type of list out there already beacuse as far as I can tell I'm going to have to (more or less) reimplement all of BasicListUI as it uses a lot of private variables.

JayDS: Sorry if I was unclear but I would like adjustable widths too. It's impossible to do using just cell renderers as the BasicListUI implementation will equalise all columns found by laying out the list contents depending on the layoutOrientation property.
NOTE: I know that you can set the widths of cells in a list by making the list act as though it were a file list (List.isFileList client property), but this only adjusts the width of the cell not the placement of the cell next to it (i.e. cell[n+1].x = cell[n].x + columnWidth NOT cell[n+1].x = cell[n].x + cell[n].width which is preferred).

Width*height vals changing in save for web ??

Hi all
I've opened an EPS file in illustrator cs4. And its width & height values are differing with width & height values in "save for web" option.
For example, normally in width & height boxes shows as
width : 247.499 pt
height : 116.524 pt
but in save for web
width : 249
height : 117
I've checked with various figures too.

Script lan : javascript
thanks for ur help!
Actually I've to resize the figure for the width 175, 525, 1400 and the height should change proportionally. So I tried, but I couldn't resize the figures using save for web. Becoz its horizontalScale & verticalScale treats values as percentage. eg. 175 treats as 175%. Then I grouped all items and changed its "width" and foud out the values' corresponding "height" values. But the problem is, exported file's values are changing nearly 3pts.
could u help on this?

Why can't I import anything? "File video dimensions (width/height) too large"

New to PP CS4 here (that will be obvious momentarily...). I can't seem to import any footage into any project (well, at least none of the bits I've tried, and I don't think there's anything 'wrong' with them). Every time I attempt to do so, I get the error:
Dialog title: File Import Failure
Error Message: File video dimensions (width/height) too large.
This occurs with every files I've thrown at it - admittedly, they all have a lot in common, but they're not particularly exotic.
The files are (mostly) AVI files (I know, I know...before I get jumped, I understand it's just a wrapper, etc.). The files come from two cameras:
1. A Sony DCR-TRV20. Opening up the AVI in QuickTime Player, I see it's listed as "DV/DVCPRO - NTSC 640X480"
2. Canon PowerShot A620. Opening up the AVI in QuickTime Player, I see it's listed as "MotionJPEG OpenDML 320x240"
3. I somehow managed to get the AME to spit out a FLV file. That failed to import with the same error message, too.
I tried running these files through AME, and got the same results (although never having used AME previously, I have a question on that, below).
New project, settings are all (I think) the defaults: Preset DV-NTSC/Standard 32kHz
New installation of PP CS4, with the 4.1 update, on a PC running Vista 32 with all the endless MS updates applied.
Related question: I've skimmed other threads here, and noted the advice to "always convert any non-standard footage to DV-AVI Type II" before importing....however, I see no such option for that output format in AME....only generic things like "Microsoft AVI" and "Uncompressed Microsoft AVI".
Codec issues? I'm a little skeptical, since these AVI files play just fine in Windows if I double-click them. Does that not suggest that there's a codec there for them? The files are from (what I believe to be) garden-variety consumer cameras (these devices are a bit old and certainly not high-end, but they're hardly exotic formats, I think). The files are small, short clips I'm attempting to use just to learn Premiere, but it gags on every one of them, every time.
PP is so insistent that every file I throw at it has improper dimensions, but these files appear to be perfectly reasonably sized, and I assume it's operator error (I'm withholding judgement on the quality and accuracy of the error string it's presenting me). But I'm not sure where to look for the right knob to twist. Pretty frustrating to be stuck on Square 1 (actually, Square Zero).
Can someone point me in the right direction?
Please be gentle, it's my first time....

Thanks, but....mmmm....maybe not.
I've tried multiple settings for New Projects. Just created a new one using the preset for DV-NTSC/Widecsreen 48kHz (frame size 720 x 480, 48 kHz audio). Exactly the same results.
You say "To point you in a certain direction, DV from a TRV is 720x480, not 640x480." However, according to QuickTime's Movie Inspector panel, the file is 640x480. This clip was captured through Premiere - that wouldn't change its aspect ratio, would it?
The files from the Canon still camera are AVI files, not still images (so I don't see how the reference to Photoshop applies, or perhaps I misunderstood your point). They are 320x240, according to QuickTime's Movie Inspector panel. If they're 320x240, wouldn't that be the same aspect ratio as 640x480? Attempting to import them, I get the same error....
While not exactly Hollywood quality, I just need files to play with as I attempt to learn the program, and it's not clear to me why these files should not work - other than the fact that NO files seem to work. Also, I'm not sure what your reference to "exporting" pertains to - I can't get anything imported, I'm not trying to export anything that (I'm aware of) - I'll worry about exporting once I've managed to get something, ANYTHING to import.
I've got some PP training videos (from "you-probably-know-who.com"). Following along using their project files and their video assets (MOV files in this case), I still get the exact same error.
So to summarize, so far, I've seen no evidence that this copy of PP can import ANY video file.
While I'm sure I would benefit from spending more time with the fine manual, I think there's something wrong here that's not going to be addressed in the introductory documentation. If I can't import any footage into any project, progress is going to be slow.
How about this: is there some known-to-be-good test file I can grab and try importing that? I've got very strong suspicions that I'll get the same error message.
Thanks again.

APIs for Adobe Reader to get the x, y co-ords,width,height of all elements (text/image) in a PDF doc

Hi all,
I have written a Acrobat plugin using PDFEdit APIs to extract x, y co-ordinates, width and height of all elements(objects) in a PDF document.
Now, I wanted to make the same working on Adobe Reader.I have added the READER_PLUGIN macro enabled in Project settings.
When I re-compiled the code, I got a bunch of errors saying all PDFEdit APIs are not available under Adobe Reader.
My objective is to parse through the entire PDF document and get x, y co-ordinates, width, height of all PDF objects (especially Image and Text objects).
Can anybody help me how to achieve this ?
Thanks
Prasanth

I know that we cannot obtain the PDEContent of a PDF page from Adobe Reader, as PDEContent is modifiable content and as such it cannot be accessible from Adobe Reader.
Also, as PDFEdit API's does not work for Adobe Reader, we are trying to figure out a way to achieve this for Adobe reader.
I am curious to know if the COS APIs can help us in this task.
I tried to read the stream content using PDPageStmGetToken API. I get the data of this format:
344.88 0 0 91.44 71.882 41.92cm
Here, as per PDF reference, I am getting only distance from X Axis and distance from Y Axis. But not width and height.
Can you knidly let us how to get the image attributes (primarly read only attributes like x and y co-ordinates, width and heoght) with Cos APIs.
Thanks
Prasanth

How to set width/height of iPad app in ipa file

Hello,
I am developing an app for iPad in Flash Builder 4 and Packager for Iphone.
I set the width and height node values in the descriptor XML and compile the application. When I run the same in iPad, I am not able to see any effect on the app's width and height.
Also, in default load, app opens in dimensions as per the iphone view and not specifically for iPad.
Any help?
Tanu

hi,
How does your application descriptor file look like? I also had the same problem, when I realised that I had a few things missing in my app desc. file. My file looks like this
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.0">
    <id>IPadApp</id>
    <filename>IPadApp</filename>
    <name>IPadApp</name>
    <version>v1</version>
     <initialWindow>
        <content>IPadApp.swf</content>
        <fullScreen>true</fullScreen>
        <autoOrients>true</autoOrients>
        <title>IPadApp</title>
        <aspectRatio>portrait</aspectRatio>
        <systemChrome>none</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        
        <width>768</width>
        <height>1024</height>
        
        
        
        </initialWindow>
    <supportedProfiles>desktop mobileDevice</supportedProfiles>
<iPhone>
<InfoAdditions>
<![CDATA[
    <key>UIDeviceFamily</key>
    <array>
    <string>2</string>
    </array>
]]>
</InfoAdditions>
</iPhone>
</application>
Check your desc. file.
-Vrushali

BUG or Feature? Width & Height in Top Bar only in %, not in Pixel no Chance to change this

Hello
--- First: Please, im very sorry for my bad spelling - english is not my native language! Hope u can understand, what i mean. If it sounds bad or yelling someone - its not my intention! ---
My Question:
If i do Strg+T with a layer (ie. image or shape) in previous version you have the width & height in top bar and can easily read it or change when typing a new value in. With right mouse (Win) you can change % in px or em etc.
In my Photoshop CC 14.2 i have only % and cant change this.
If i try to read the dimension i can only see it on the info-panel.
Its confusing. Is it a Bug or Feature?
MJ

anyone?
.... alone ....

Scale a div based on width/height of Stage?

Similar Messages

Maybe you are looking for