Simple (Uncomplicated) Layer Centering

Hello...
[sorry to do an adjacent post, but...]
I have a site that I am in the process of developing; &
the design concept i
s a fairly simple one. I already know how to nest layers in a
parent layer
& center that parent layer...but I always wind up w/ a
margin on the left &
top of the parent (centered) layer (which...doesn't look
right if there's an
y type of backgrounding in the layer.)
My concept is to have the parent layer sized to 779 X 386
pxl's...so as to o
pen fully in an 800 X 600 browser screen w/ no scroll
bars...& then move to
the center for all larger screen sizes (1024 X 768, etc.) No
more...no less
..simple design...info & content stays centered in all
cases, with no margi
ns at the smaller res.
Is there a way to do this in simple form...without all that
P7 bloated layer
centering fix hullabaloo?
Thanks,
mark4man

> First, I made my doctype a strict one:
As long as it's a valid and complete doctype it wouldn't
matter if it were
strict or loose.
The rest of your 'solution' is just mumbo-jumbo, even
containing errors.
You cannot have two elements with the same ID (Layer1), for
example.
position:absolute; left:Xvalue px; top:Xvalue px;
This is syntactically incorrect. "Xvalue px" is neither a
legal value nor
is your space between it an the unit a legal construction.
> There's no z-index value for the parent div...but it all
works.
Doesn't matter - it will default to 1.
> Also: Thanks Murray of ACE very much...didn't get around
to trying your
> code
> this evening...may be better than mine, I don't know (in
terms of better
> cross-browser support & even overall functionality.)
Try it. It's valid, and it works.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"mark4man" <[email protected]> wrote in
message
news:[email protected]...
>
SOLVED...!!!
>
> I actually had a page constructed to work in the way I
described, but the
> parent layer was a bit skinny. When I found it, I
reconstructed it as
> follows:
>
> First, I made my doctype a strict one:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "
http://www.w3.org/TR/html4/strict.dtd">
>
> Then...in the Head...below my keyword metadata...there
is this:
>
> <style type="text/css">
> body, html{
> margin:0;
> padding:0;
> }
>
> [I believe this was the missing link for what I wanted
to do...because
> with
> every page where I tried to center the parent layer,
whereby I had the
> stupid
> margin on the left & top...it was missing.]
>
> Then the parent or container layer, with the nested
layers, is as follows:
>
> <div id="Layer1" style="position:relative;
width:779px; height:1120px;
> margin:
> 0 auto;">
> <div id="Layer1" style="position:absolute;
left:Xvalue px; top:Xvalue
> px;
> width:Xvalue px; height:Xvalue px; z-index:1"><img
src="SomePhoto.jpg"
> ></div>
> <div id="Layer2" style="position:absolute;
left:Xvalue px; top:Xvalue
> px;
> width:Xvalue px; height:Xvalue px; z-index:2"><img
> src="SomeOtherPhoto.jpg"></div>
> </div>
>
> There's no z-index value for the parent div...but it all
works.
>
> Just wanted to put this out there for anyone else who
may need it.
>
> Also: Thanks Murray of ACE very much...didn't get around
to trying your
> code
> this evening...may be better than mine, I don't know (in
terms of better
> cross-browser support & even overall functionality.)
>
> To answer your question...I design like a old-fashioned
graphics guy, like
> I'm
> doing paste-up...with overlapping content. Can't do that
w/ tables.
> [We've
> had this discussion before, you & I.]
>
> Thanks again,
>
>
mark4man
>
>

Similar Messages

  • Simple Adjustment Layer Question

    I jumped straight from Photoshop CS to CS3 and was disappointed to find that many of the layer rules had changed. I was used to a handy feature where I could add an adjustment layer and then by pressing Command 'G', I could make the adjustment layer only affect the layer below it. Now, Command G appears to create a new groupwhich doesn't appear to be the same thing. I've scoured the help file and can't seem to find this exact feature and what it has changed to. Probably because I never knew the official name of it. I'm sure this is a simple thing, but I've been searching for the equivalent for a while now.
    Can someone please tell me how to achieve that same effect?

    i Or dump them both in that group folder you accidentally created.
    But make sure you set it to "normal" and not "pass through"...otherwise it won't behave correctly.

  • How to Generate Barcode (3of9 Barcode or any of its variations) in a simple text layer?

    Is there a way to get the font names used in a computer (C:\windows\fonts), which can be used in Javascript line? I have the barcode font but I don't know its name for Javascript to recognize.
    see line on myTextRef.font below:
    // make a variable for the active document
    var docRef = activeDocument;
    // Create a text layer at the front
    var myLayerRef = docRef.artLayers.add();
    myLayerRef.kind = LayerKind.TEXT;
    myLayerRef.name = "Filename";
    // this is the real text layer describing it as a text item
    var myTextRef = myLayerRef.textItem;
    // Set font size in Points
    myTextRef.size = 24;
    //Can a text or numbers be converted to a Barcode?
    myTextRef.font = "Arial";
    //Set text colour in RGB values
    var newColor = new SolidColor();
    newColor.rgb.red = 255;
    newColor.rgb.green = 255;
    newColor.rgb.blue = 0;
    myTextRef.color = newColor;
    // Set the position of the text - percentages from left first, then from top.
    myTextRef.position = new Array( 50, 50);
    myTextRef.justification = Justification.CENTER    
    // If Bold Font
    myTextRef.style = "BOLD";
    // Set the Blend Mode of the Text Layer. The name must be in CAPITALS - ie change NORMAL to DIFFERENCE.
    myLayerRef.blendMode = BlendMode.NORMAL;
    // select opacity in percentage
    myLayerRef.opacity = 100;

    Using javascript, app.fonts will get you a array of textFont objects. There will be a textFont object for each font Photoshop can use. Each object has several properties. For use with a text layer you want the postScriptName property.
    var fontList= [];
    var fonts = app.fonts;
    for (var i = 0; i < fonts.length; i++) {
      fontList.push(fonts[i].postScriptName);

  • Layer centering

    hello, I built most of my site with layers, I have 1 or two
    tables but the rest of the flash and pictures are in layers. How
    can I center them? I centered them with the align - center, BUT
    when I open the html file on another computer its not centered. How
    can I resolve this problem?
    thanks

    You may also benefit from this page -
    http://www.great-web-sights.com/g_layerlaws.asp
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    ": Nadia : ** Adobe Community Expert **"
    <[email protected]> wrote in message
    news:[email protected]...
    > This is a copy and paste from a reply I made yesterday
    to a very similar
    > question (a search of the forums would have given you
    the same results
    > :)
    >
    > You shouldn't be using 'layers' to create your page
    layout unless you know
    > exactly how 'layers' work.
    >
    > Before you go further with your page, you may want to
    take a look at this
    > article:
    http://apptools.com/examples/pagelayout101.php
    >
    > Anyway for your problem, you need to wrap your current
    content layers into
    > a
    > relatively positioned div that is centered, so that your
    other page
    > contents
    > sit relative to this wrapper.
    >
    > You'll need to get your hands dirty by going into the
    code :) Make sure
    > you
    > keep a backup of your original file and if this doesn't
    solve your
    > problem,
    > you will need to give us a link to the page you created.
    >
    >
    > Change this -
    >
    > </head>
    >
    > to this -
    >
    > <style type="text/css">
    > <!--
    > body {
    > text-align:center;
    > background-color: white; /*or whatever page bg color you
    want */
    > }
    >
    > #wrapper {
    > position:relative;
    > text-align:left;
    > width:760px;
    > margin:0 auto;
    > }
    > -->
    > </style>
    > </head>
    >
    > and then change-
    >
    > <body ...>
    >
    > to this -
    >
    > <body ...>
    > <div id="wrapper">
    >
    > and this -
    >
    > </body>
    >
    > to this -
    >
    > <!-- /wrapper -->
    > </div>
    > </body>
    >
    >
    > --
    > Nadia
    > Adobe® Community Expert : Dreamweaver
    > -------------------------------------------------
    > Tutorials |SEO |Templates
    >
    http://www.DreamweaverResources.com
    > -------------------------------------------------
    >
    http://www.perrelink.com.au
    > -------------------------------------------------
    >
    >
    >
    >
    > "beliy333" <[email protected]> wrote in
    message
    > news:[email protected]...
    >> hello, I built most of my site with layers, I have 1
    or two tables but
    >> the rest
    >> of the flash and pictures are in layers. How can I
    center them? I
    >> centered them
    >> with the align - center, BUT when I open the html
    file on another
    >> computer its
    >> not centered. How can I resolve this problem?
    >>
    >> thanks
    >>
    >
    >

  • Program Default Layer Writing Question

    People...
    An internet friend of mine in another forum helped me solve a
    parent (container) layer centering problem. I had created a large
    "Layer 1"...nested Layers 2, 3 & 4 within Layer 1...&
    wanted Layer 1 to slide to the center of any browser window, with
    2,3 & 4 not changing absolute position relative to Layer 1. The
    solution was:
    <div id="Layer1" style="position:relative; width:285px;
    height:311px; margin: 0 auto;">
    <div id="Layer2" style="position:absolute; width:47px;
    height:115px; z-index:1; left: 226px; top: 120px;"><img
    src="layer2.jpg" width="58" height="133"></div>
    <div id="Layer3" style="position:absolute; width:131px;
    height:115px; z-index:2; left: 3px; top: 3px;"><img
    src="layer3.jpg" width="158" height="189"></div>
    <div id="Layer4" style="position:absolute; width:176px;
    height:71px; z-index:3; left: 94px; top: 130px;">;"><img
    src="layer4.jpg" width="158" height="189"></div>
    </div>
    where the container (Layer 1) was assigned relative
    positioning & centered by auto margins...& the nested
    layers (2,3 & 4) remained absolute; & inline
    ...but...
    ...he also tells me that inline styles are not a good idea.
    Everybody tells me that inline styles are not a good idea.
    But no one tells me why.
    So...3 questions:
    1) Why are inline styles not a good idea...& is that
    relative (pardon the pun) to the way I am now centering my layer
    layout?
    2) Is there a way to configure Dreamweaver to write layer
    code (i.e., user draws in the layer...Dreamweaver writes the code)
    other than inline?
    3) On all of my existing page layouts that consist of
    multiple layers (each one housing an image or text)...that I now
    want centered...how do I nest those layers in a large container
    layer? (the above centering solution was from a test page I created
    from scratch...& the subsequent layers were nested as I went. I
    now need to go back to existing pages & center the layout.)
    Thanks very much,
    mark4man
    Dreamweaver MX (6.0)

    mark4man wrote:
    >
    People...
    >
    > An internet friend of mine in another forum helped me
    solve a parent
    > (container) layer centering problem. I had created a
    large "Layer 1"...nested
    > Layers 2, 3 & 4 within Layer 1...& wanted Layer
    1 to slide to the center of any
    > browser window, with 2,3 & 4 not changing absolute
    position relative to Layer
    > 1. The solution was:
    >
    > <div id="Layer1" style="position:relative;
    width:285px; height:311px; margin:
    > 0 auto;">
    > <div id="Layer2" style="position:absolute;
    width:47px; height:115px;
    > z-index:1; left: 226px; top: 120px;"><img
    src="layer2.jpg" width="58"
    > height="133"></div>
    > <div id="Layer3" style="position:absolute;
    width:131px; height:115px;
    > z-index:2; left: 3px; top: 3px;"><img
    src="layer3.jpg" width="158"
    > height="189"></div>
    > <div id="Layer4" style="position:absolute;
    width:176px; height:71px;
    > z-index:3; left: 94px; top: 130px;">;"><img
    src="layer4.jpg" width="158"
    > height="189"></div>
    > </div>
    >
    > where the container (Layer 1) was assigned relative
    positioning & centered by
    > auto margins...& the nested layers (2,3 & 4)
    remained absolute; & inline
    >
    > ...but...
    >
    > ...he also tells me that inline styles are not a good
    idea.
    >
    > Everybody tells me that inline styles are not a good
    idea.
    >
    > But no one tells me why.
    >
    > So...3 questions:
    >
    > 1) Why are inline styles not a good idea...& is that
    relative (pardon the pun)
    > to the way I am now centering my layer layout?
    Because the main advantage of using css is precisley to
    remove the styles from the html markup, and
    place it instead in an external style sheet. This allows you
    to:
    1.centralise the code that defines your layout in one place,
    and thus have only one file to deal
    with to update/change all your pages layouts.
    2.Think of layout in a more precticall way by dividing layout
    styles into coherent styles
    definitions that you can then combine in various ways to
    style various heml elements.
    3.Keep your html markup clean and simple
    >
    > 2) Is there a way to configure Dreamweaver to write
    layer code (i.e., user
    > draws in the layer...Dreamweaver writes the code) other
    than inline?
    maybe in DM8, but I don't think so, definitely not in MX6.
    Side note: using Layers for layout is not a good practice
    anyways, for many reasons, see below
    >
    > 3) On all of my existing page layouts that consist of
    multiple layers (each
    > one housing an image or text)
    what will happen if the user increases the text size in their
    browser preferences? Try it: the text
    will overflow the layers, and your page will look horrible,
    with text overlapping images or other
    text. Because you are using Layers. This would not happen if
    you were using relative divs or tables
    with no fixed height.
    >...that I now want centered...how do I nest those
    > layers in a large container layer? (the above centering
    solution was from a
    > test page I created from scratch...& the subsequent
    layers were nested as I
    > went. I now need to go back to existing pages &
    center the layout.)
    >
    In short, consider NOT using Layers at all.
    Use tables (easier) or realtively positioned divs (harder but
    often more practical in the long run).
    > Thanks very much,
    >
    >
    mark4man
    > Dreamweaver MX (6.0)
    >
    >
    seb ( [email protected])
    http://webtrans1.com | high-end web
    design
    Downloads: Slide Show, Directory Browser, Mailing List

  • How Business service layer is useful?

    Hi All,
    What advantage are we getting with Business Service Layer in ADF? Cant we have just simple model layer? Why there is a separate business layer? why it is not part of the model layer?
    Thanks.

    Yet another homework question?  Again, go do some research.
    CM.

  • Flattening Blend Mode/Layer Effects CS4

    Greetings,
    Working in PS CS4 Mac 10.6
    CMYK document with a simple image layer with Drop Shadow layer effect and blend mode: Overlay.
    I can't get the layer to flatten! When I try to flatten, it ends up looking like the original layer without blend mode or drop shadow.
    I'm using the method of creating a new empty layer above image layer and merging the two together.
    Is this unique to CMYK mode? (I usually work in RGB mode.)
    Any suggestions?
    Thanks!

    an additional layer with a stroke
    Are you sure they want a stroke and not a Path?
    Hard Light seems to be pretty much the opposite of Overlay, so you could try
    • duplicating the background Layer,
    • setting it to Hard Light,
    • Clipping Masking it so the the Layer in question and
    • setting that to Normal –
    that should then be able to be merged.
    The Drop Shadow however would of course lose its Blending Mode if it is merged to the Layer.

  • Simple CFM forms getting Stack Overflow

    What causes the error message "Stack Overflow at Line #" ?
    How can I fix it. I get this error message in very simple,
    uncomplicated .CFM forms upon submit.

    Stack Overflow
    Check the usual suspects: infinite loops or recursions, and
    rampant object creation.

  • Can I blend a background layer into a photo layer?

    I have a photo that does not take up the entire space on the cd cover and we want to have a solid color background that will blend into the photo.  Is this possible in PSE 12?  I want to soften the photo edges with the same color as the background.

    I have an old version of PSE so I don't know if PSE12 has an easy way to do what you want. Anyway, you can try this:
    Open the photo and select it (Select > All).
    Copy the selection to the clipboard (Edit > Copy).
    Create a blank file the size of the CD cover. Fill with the border color.
    Paste the photo from the clipboard (Edit > Paste). The photo will be on a new layer, centered on the CD cover.
    Active the Eraser tool and choose a soft brush size about the size shown here.
    Click one the corners:
    Holding down Shift, draw along the border. Shift guarantees a vertical or horizontal line:
    Do the same with the other sides:
    You might have to experiment with various size brushes and click locations to get the look you want.

  • Simple duplicate object in full sceen/ duplicacion simple de objeto en pantalla completa

    ENG:
    I need to duplicate a "mc" to create a simple graphic layer:
    var container:MovieClip = setUpContainer();
    var ln:Number = 1000;
    var spacer:Number = 2;
    var duplicate:MovieClip;
    for(var i:Number = 1; i < ln; i++) {
        var newY:Number = i * (container._height + spacer);
        duplicate = container.duplicateMovieClip("clip-" + i, i, {_y:newY});
        trace(duplicate); // _level0.clip-[number]
    function setUpContainer():MovieClip {
        var mc:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());
        var w:Number = 3;
        var h:Number = 3;
        mc.beginFill(0x333333);
        mc.lineTo(w, 0);
        mc.lineTo(w, h);
        mc.lineTo(0, h);
        mc.lineTo(0, 0);
        mc.endFill();
        return mc;
    But i can't modify it to properly to duplicate the "mc" both in the X and Y directions, to cover completely the screen. I can just create an y or an x column of duplicated objects.
    Take a look on this site:
    http://www.candyandcandy.com/
    When the overlay video layer start, after 13/14 seconds i need to create the same graphic layer composed by 3x3 pixel alpha frames wich overlap the video.
    ES:
    Necesito duplicar un "mc" para crear una capa gráfica sencilla:
    var container:MovieClip = setUpContainer();
    var ln:Number = 1000;
    var spacer:Number = 2;
    var duplicate:MovieClip;
    for(var i:Number = 1; i < ln; i++) {
        var newY:Number = i * (container._height + spacer);
        duplicate = container.duplicateMovieClip("clip-" + i, i, {_y:newY});
        trace(duplicate); // _level0.clip-[number]
    function setUpContainer():MovieClip {
        var mc:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());
        var w:Number = 3;
        var h:Number = 3;
        mc.beginFill(0x333333);
        mc.lineTo(w, 0);
        mc.lineTo(w, h);
        mc.lineTo(0, h);
        mc.lineTo(0, 0);
        mc.endFill();
        return mc;
    Pero no me puedo imaginar que la manera de modificarlo para bien duplicar el "mc", tanto en las direcciones X e Y. Sólo puedo crear una columna "y" o una columna "X" de los objetos duplicados.
    Eche un vistazo en este sitio:
    http://www.candyandcandy.com/
    Donde comienza la capa de pixel sobre el video, después de 13/14 segundos. Tengo que crear el mismo nivel gráfico compuesto por elementos de 3x3 píxeles alfa que se superponen el vídeo.

  • Precomposed layer does not recognise opacity setting (bug)

    Hi
    I have a very simple precomposed layer comprising a single text layer with a drop shadow (layer style). However, it does not recognise the opacity setting in the main layer, even when set to 0% and the playhead is not even on the layer. If I change the opacity in the precomposed layer I can see it coming through to the main layer, but changing the opacity in the main layer does nothing.
    I have reported this to Adobe as a bug, anyone have any other ideas?
    Thanks
    Antony

    There is a fix. Apply a layer style to your pre-comp, then turn off the any styles. CR will now evaluate layer styles in your source comp and render them in the proper order.
    Why does that work? You have to understand how CR works. When you turn on Continuous Rasterization the layer type is identified before any effects or transformations take place. This is why you can scale a vector layer without problems if CR is turned on. This explains why a 3D pre-comp that contains a 2D layer will be rendered as a 2D layer.
    When you apply a Layer Style you are changing the layer type in the same way you change a layer type from 2D to 3D. If you want to have transformations applied to the layer style in the source file you need to change the layer type of the pre-comp layer to Layer Styles.

  • Adobe droplet question, involving Place command and filenames

    Suppose I have two files called, (a) "background.tif" and (b) "Image001.tif".
    Background.tif is a simple black layer, sized to 1500 x 1000 px.  Image001.tif may be cropped to any size.
    I want to do the following in a droplet:
        1. Place (File/Place) "Image001.tif" in "background.tif", knowing it'll be centered and resized as needed automatically.
        2. Save the new file for the web as "Image001.jpg",
        3. close both files without saving (I only need the resulting JPG).
    My goal - I have several hundred files that all need web-ready JPGs created with a standard size black background, so that they'll fit a web gallery that can only handle a fixed set of dimensions.
    Questions:
    1. Is this even possible via automation?
    2. If so, how do I ensure that the JPG that gets created has the same name as the source image file; i.e. "image001.jpg", and then "image002.jpg", etc.?
    3. is there a better way to create the end result, rather than using the place command; i.e. doing this with the original image file instead (thus solving the filenaming question)?
    Running PS CS6 on Win7/64.
    Many thanks!
    Jerry

    Hi csuebele,
    The only requirement is that the final result is 1500 x 1000 px.  The black is used to fill in the sides/tops as necessary.  Since this is to be automated, I need each new file to have a unique name of course (otherwise succeeding files will overwrite their predecessor).
    For example, say I have a file called image001.tif that is cropped to 2400w x 3000h px. I need this to fit a container that's 1500 x 1000 px, with black filling this out.
    Manually I would
    1. Open a black TIFF that's already 1500x1000.
    2. Place the 2400x3000 px image in the black tiff.
    3.  PS then resizes and centers the image to fit, while preserving the aspect ratio. 
    4. Thus the image is now sized to be 800w x 1000h px , with black filling the sides equally; i.e. 750 px of black on either side.
    5. I then save that "new" version of the black file for the web, and then close w/o saving.
    6. End result is a 1500x1000 file called image001.JPG.
    Please see attached for 2 examples:
    Example of a portrait image:
    Example of a landscape image:

  • Can you edit multiple images from a PDF in photoshop?

    I scan a lot of old publications with images and drawings. The images are in greyscale, but my scanner produces better results set to color. As such, I have to convert the images to greyscale in Photoshop from Acrobat. I have several PS actions that make this process easier, but I wish there was a way to select multiple images from a page or PDF file and run the actions on them (a batch) instead of one at a time. Is there? Or perhaps another method than what I am doing?

    I recommend that you scan first, save as TIFF, do any desired correction, and only then make PDFs. Scanning direct to PDFs is great for simple uncomplicated workflows, but a liability when correction is needed.

  • How do you use AIR's WebKit/htmlloader?

    Hi everyone,
    A long standing issue in AIR has been the inclusion of an older version of WebKit.  The request to update this library has come up many times in the forum and is in the top 10 on the community driven Uplist feature page.  As with the recent and ongoing physics discussion, we're not committing to any changes purposed below at this time,  as we're purely in an investigation mode at this time.  We realize that this is an important feature and we need further clarification on what you're looking for.  Please read on for questions from our development team.
    We are exploring updating WebKit, but due to our modification of the WebKit source, this will be difficult, and updating WebKit will change the HTML DOM, possibly breaking content authored for our existing DOM.
    So we are also exploring leaving HTMLLoader alone, for now, but providing a reasonable alternative.
    StageWebView was originally written as a replacement for HTMLLoader on mobile (because we could not use our WebKit on mobile, StageWebView took advantage of the browser provided by the platform).
    But it was extended to the desktop as an unsuccessful solution to this problem.
    On mobile, content was probably newly written (so it could be tested with StageWebView), and the browsers were similar enough to our WebKit that the DOM impact was minor.
    But on the desktop, forcing older content written for our WebKit to run on Internet Explorer 8 (as an example) was a disaster due to the differences in the DOM’s. We resolved this by making HTMLLoader versus StageWebView on the desktop a choice.
    Which gets to the questions (for desktop development only).
    Which is more attractive, an embedded web browser or using the system browser? Is it valuable to provide both?
    For instance, using the native browser can save on code size (perhaps 6 MB), but you must create and test portable HTML, and you face the risk that future updates to the system browser breaks your content.
    How much interop do you need between AS and JS?
    Hearsay suggests another problem with StageWebView is there is no interop between ActionScript and JavaScript, whereas HTMLLoader had a lot of support.
    Would StageWebView be sufficient if it exposed an ExternalInterface, or sandbox bridge, level of functionality? For instance, if AS could register a list of functions which could be called from JS (and vice versa), would that be enough? Or is there something else that HTMLLoader does that is essential?
    For instance, one of the ideas being explored is to provide an entirely new class (perhaps as an ANE) which links an unmodified version of the latest WebKit source as a static library. By using unmodified source, we can more readily update to newer versions of WebKit.  As well, if we leave the existing classes unchanged, we don’t risk breaking existing content. But if we use unmodified WebKit source, we may find some of HTMLLoader’s functionality impossible to match, which is why I’m interested in understanding the essential functionality, so we can decide if a sufficient, minimal (so it’s easier to support without customizing Webkit) interface for it.
    Thanks,
    Chris

    Hey Chris,
    Thank you for reaching out to the community! Our team has been working on AIR apps for a while now. It has been frustrating to say the least, trying to integrate sophisticated HTML5 apps into our different AIR apps.
    The existing solutions on mobile and desktop are not very satisfying. Mobile has gotten better because of the StageWebView, but there are still several flaws that make the platform unpredictable. On desktop it is even worse and we are facing a tough decision.
    We want to integrate an HTML5 app into an already existing AIR app. The two applications will have to communicate in some form with each other. The StageWebView approach with a simple ExternalInterface would suffice, as long as we could pick from the browsers that are installed. The ANE class approach also sounds good, but only if there is a similar way of communication.
    We think that keeping the component (WebView or ANE class) as lean as possible is one of the most important things. We don't want to face the same issues in the near future. There is also a need to update that underlying layer fast. Browser vendors (with some exceptions of course ) have much faster release cycles nowadays. They will keep pushing the boundaries and we need to adjust accordingly.
    The HTML5/JS should take care of the DOM manipulation, event handling and communicate back to Actionscript in a simple way. There is no need for Actionscript to worry about these things. And if there is, create a simple JS layer using the interface to do the job.
    Here is a list of features that are essential to us:
    Accessing the local file system (xhr requests on the local file system):
    Worst case scenario: Using the ExternalInterface to feed files to the HTML application.
    Configure the cache or at least manipulate cache handling
    Much better HTML5 / CSS3 support: Video, Audio, SVG, CSS3 Animations, etc.
    Easier and faster way to update the underlying WebKit/Chromium (relevant for ANE)
    Are there any plans yet? Is it on your roadmap? Are we talking about years or months? Answers to these questions are very crucial for us. Only with those answers will we know, whether we can keep working on the AIR platform or if we have to look for alternatives and migrate our entire application.
    We are looking forward to your answers.
    Thanks

  • ShowHide onclick not working in Firefox nor Safari

    I have a real estate site that's been up for a while.  The floor plans showHide is now not working in Firefox nor Safari (still works in IE).  I would swear that it previously was working (6 months ago?).
    I'm sure I have a coding error someplace -- or have upgrades in the browsers disallowed the showHide script?  I'd rather not have to completely rewrite the page if I don't have to, so a quick fix would be preferable to having to rewrite the entire page.
    The page is a simple 3-layer:  the default visible layer is a plain site plan.  Imagemap showHide on mouseover create a mouse-over effect on each of the units; that mouseover aspect works properly in all browsers (it's showing and hiding any of 4 images depending on where the mouse is on the page).  What is not working is the onClick hot spot on each of the highlight images; the blank a=href"" comes up rather than the onClick... desitination.  Make sense?
    I tried both using the onClick within an <a> tag and on the image iteself (no <a> tag).  Neither works (except, again, in IE).
    I'm still on CS3; perhaps that's the issue?  I've been surfing to see if my script is outdated but unable to find anything useful, so thought I'd try this forum.  In my header, this is the FUNCTION that Dreamweaver put in.  Is v9.0 current?
    function MM_showHideLayers() { //v9.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3)
      with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    The live page is at http://sweetzerterrace.com/fp/index.html
    CSS page is at http://sweetzerterrace.com/sweetzer.css
    Here is the full body code; I have bolded the relevant sections.  Pretty straightforward stuff, so I'm confused as to why it ceased to work.
    Help much appreciated!
    <body class="sweetzer" onload="MM_preloadImages('../i_sweetzer/nav_gallery_on.png','../i_sweetzer/nav_features_o n.png','../i_sweetzer/nav_fp_on.png','../i_sweetzer/nav_location_on.png','../i_sweetzer/na v_brochures_on.png','../i_sweetzer/nav_agent_on.png')">
    <div id="container">
    <div id="absolute">
      <div id="address"><img src="../i_sweetzer/address.png" alt="125 S. Sweetzer, Los Angeles/90049" width="950" height="114" /></div>
      <div id="navigation"><a href="../galleries/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ImgNavGallery','','../i_sweetzer/nav_gallery_on.png',1)"><img src="../i_sweetzer/nav_gallery.png" alt="photo galleries" name="ImgNavGallery" width="275" height="31" border="0" id="ImgNavGallery" /></a><a href="../features/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ImgNavFeat','','../i_sweetzer/nav_features_on.png',1)"><img src="../i_sweetzer/nav_features.png" alt="features" name="ImgNavFeat" width="105" height="31" border="0" id="ImgNavFeat" /></a><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ImgNavFPs','','../i_sweetzer/nav_fp_on.png',1)"><img src="../i_sweetzer/nav_fp.png" alt="floor plans" name="ImgNavFPs" width="129" height="31" border="0" id="ImgNavFPs" /></a><a href="../location/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ImgNavLocation','','../i_sweetzer/nav_location_on.png',1)"><im g src="../i_sweetzer/nav_location.png" alt="the location" name="ImgNavLocation" width="141" height="31" border="0" id="ImgNavLocation" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ImgNavBroch','','../i_sweetzer/nav_brochures_on.png',1)"><img src="../i_sweetzer/nav_brochures.png" alt="brochures" name="ImgNavBroch" width="126" height="31" border="0" id="ImgNavBroch" /></a><a href="../agent/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ImgNavAgent','','../i_sweetzer/nav_agent_on.png',1)"><img src="../i_sweetzer/nav_agent.png" alt="the agent" name="ImgNavAgent" width="174" height="31" border="0" id="ImgNavAgent" /></a>
      <!--end div NAVIGATION --></div>
    <div id="sweetzer"><img src="../i_sweetzer/sweetzer.png" alt="Sweetzer Terrace Condominiums" width="50" height="504" /></div>
    <div id="swtMovie">
        <div id="sitePlan"><img src="fpi/sitep.png" alt="site plan" width="900" height="504" border="0" usemap="#SitePlanRolls" />
    <map name="SitePlanRolls" id="SitePlanRolls">
      <area shape="rect" coords="100,95,349,387" href="#" alt="hover03's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','show','hover02','','hid e','hover01','','hide')" />
      <area shape="rect" coords="379,99,797,226" href="#" alt="hover02's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','hide','hover02','','sho w','hover01','','hide')" />
      <area shape="rect" coords="352,253,814,380" href="#" alt="hover01's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','hide','hover02','','hid e','hover01','','show')" />
    </map></div>
      <div id="hover03"><a href="#" onClick="MM_showHideLayers('hover03','','hide','fp03','','show')"><img src="fpi/site_03hover.png" alt="units 03 - click to view floor plan" width="900" height="504" border="0" usemap="#SitePlanRolls" />
    <map name="SitePlanRolls" id="SitePlanRolls">
      <area shape="rect" coords="100,95,349,387" href="#" alt="hover03's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','show','hover02','','hid e','hover01','','hide')" />
      <area shape="rect" coords="379,99,797,226" href="#" alt="hover02's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','hide','hover02','','sho w','hover01','','hide')" />
      <area shape="rect" coords="352,253,814,380" href="#" alt="hover01's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','hide','hover02','','hid e','hover01','','show')" />
    </map></a></div>
      <div id="fp03"><img src="fpi/fp03.png" alt="floor plan 03" width="900" height="504" border="0" onclick="MM_showHideLayers('fp03','','hide','sitePlan','','show')" /></div>
      <div id="hover02"><a href="#" onclick="MM_showHideLayers('hover02','','hide','fp02','','show')"><img src="fpi/site_02hover.png" alt="click to show floor plan 02" width="900" height="504" border="0" usemap="#SitePlanRolls" />
    <map name="SitePlanRolls" id="SitePlanRolls">
      <area shape="rect" coords="100,95,349,387" href="#" alt="hover03's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','show','hover02','','hid e','hover01','','hide')" />
      <area shape="rect" coords="379,99,797,226" href="#" alt="hover02's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','hide','hover02','','sho w','hover01','','hide')" />
      <area shape="rect" coords="352,253,814,380" href="#" alt="hover01's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','hide','hover02','','hid e','hover01','','show')" />
    </map></a></div>
      <div id="fp02"><img src="fpi/fp02.png" alt="floor plan 02" width="900" height="504" border="0" onclick="MM_showHideLayers('fp02','','hide','sitePlan','','show')" /></a></div>
      <div id="hover01"><a href="#" onclick="MM_showHideLayers('hover01','','hide','fp01','','show')"><img src="fpi/site_01hover.png" alt="click to show floor plan 01" width="900" height="504" border="0" usemap="#SitePlanRolls" />
    <map name="SitePlanRolls" id="SitePlanRolls">
      <area shape="rect" coords="100,95,349,387" href="#" alt="hover03's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','show','hover02','','hid e','hover01','','hide')" />
      <area shape="rect" coords="379,99,797,226" href="#" alt="hover02's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','hide','hover02','','sho w','hover01','','hide')" />
      <area shape="rect" coords="352,253,814,380" href="#" alt="hover01's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','hide','hover02','','hid e','hover01','','show')" />
    </map></a></div>
      <div id="fp01"><img src="fpi/fp01.png" alt="floor plan 01" width="900" height="504" border="0" onclick="MM_showHideLayers('fp01','','hide','sitePlan','','show')"  /></div>
      <!--end swtMovie (floor plans) --></div>
    <div id="footer">
    <p><a href="../agent">Represented by Mina Barin<br />
    <span class="small">DRE-CA # 01065894</span><br />
    310.246.0212</a><br /><br />
    <span class="small"><a href="../disclaimers">DISCLAIMERS</a><br />
    © COPYRIGHTED MATERIALS; ALL RIGHTS RESERVED<br />
    <a href="http://pixel-relish.com/" target="_blank">SITE BY PIXEL-RELISH.COM</a></span></p>
    <!--end FOOTER --></div>
    <!--end ABSOLUTE --></div> 
    <!--end CONTAINER --></div>
    </body>

    This is a very unusual attempt.  You have both an anchor tag wrapping the image, AND hotspots on the image.  I'm not surprised you are finding a conflict between those two.
    <div id="hover03"><a href="#" onClick="MM_showHideLayers('hover03','','hide','fp03','','show')"><img src="fpi/site_03hover.png" alt="units 03 - click to view floor plan" width="900" height="504" border="0" usemap="#SitePlanRolls" />
    <map name="SitePlanRolls" id="SitePlanRolls">
      <area shape="rect" coords="100,95,349,387" href="#" alt="hover03's" onmouseover="MM_showHideLayers('sitePlan','','hide','hover03','','sho w','hover02','','hide','hover01','','hide')" />
    What is it you are hoping this will do?

Maybe you are looking for