I understand where you're coming from. However, since not everyone will
want an extra div in their markup, we can't just add that support to the
core library, which means you'll need to roll your own option for this.
Among the available options, the first one (the container div that you
change it's css class on based on flash or no flash) is the much easier and
straightforward (and probably best-practice) one.
Going down the path of the other options I presented will be much more
complicated and error prone. I'm sure they're both possible, but I think
this is one of those cases where taking a slight compromise in terms of
semantic markup and progressive enhancement is much better than trying to go
with the other options which pretty much circumvent all the "rules". I'd
strongly encourage you to go with my original suggestion.
That having been said, the basic idea behind alternate suggestion #1 would
be to dynamically create a div element, using document.createElement("div"),
and append it to the document right "before" the swf dom object. then, take
the outerhtml of the swf dom object, and append it as a child of the dynamic
parent div you just added. Finally, remove the original swf dom object.
Also, you'll probably want to do all that "invisibly" (that is, have
visibility or display set to hide these elements for the split second that
you are rearranging the DOM, so there are less ugly flashes for users).
Beyond this, you're venturing into some pretty shaky territory and I'm not
sure many of us on this list are qualified or able to help at that level.
Either way you choose, hope it works out! :)
--Kyle
--------------------------------------------------
From: "st" <[email protected]>
Sent: Wednesday, February 11, 2009 9:09 AM
To: "SWFObject" <[email protected]>
Subject: Re: swf specific container div
>
> Kyle,
>
> Thanks for quick response.
>
> From a progressive enhancement point of view I would suggest that
> adding an extra <div> to the html markup is not needed as we already
> have the <div> in place to style the alternate content. For example we
> have…
>
> <div id=”myContent”>
> <p>alternate content here…</p>
> </div>
>
> We then style the alternate content accordingly in this example using
> <div id="mycontent">. If javascript/flash installed, then swfObject
> removes both this <div> and its content and replaces it with just the
> <object> tag (with no container <div>).
>
> All well and good, but as mentioned some browsers have css styling
> issues with the <object> tag… which leads to my request for a swf-only
> container <div> to give us more control. I would suggest that it is
> dynamically added along with the <object> tag and not before, because
> if we add the <div> to the original html markup then we are
> introducing an extra unnecessary <div> to the code…
>
> <div id=”swfWrapper”>
> <div id=”myContent”>
> <p>alternate content here…</p>
> </div>
> </div>
>
> swfObject will remove the inner <div id="myContent"> and its content,
> but if swfObject does not come in to play, then we have a doubling up
> of <divs>. We only need the swf wrapper if we get the swf movie.
>
> Accordingly, I would rather go down the route of your second option,
> adding it dynaically, and would be grateful if you could recommend how
> to go about your second option.
>
> Regards
>
>
>
> Getify Solutions, Inc. wrote:
>> I'd suggest this from a progressive enhancement mindset:
>>
>> 1. always put in your HTML markup the container div you are talking
>> about,
>> surrounding your replaceable alternate content.
>> 2. have it styled by default to look correctly for your alternate
>> content.
>> 3. have your javascript call to embedSWF in your document as normal
>> 4. loop/wait/detect the successful embedding of the SWF, and once that
>> occurs, add a class attribute to your container div which gives it the
>> desired flash container styling you want.
>>
>> The "difficult" part is the embed detection. In v2.2 of our library,
>> there
>> will be a direct callback to detect this event, but right now, you'd
>> basically have to just set a quick-running timer to loop looking for if
>> the
>> alternate content is still there or not, and as soon as its gone, apply
>> the
>> class as stated in step #4.
>>
>> ---------
>> More exotically, but probably not best practice and certainly less
>> robust,
>> you could consider:
>>
>> 1. "Detect" that embed event, and dynamically insert a parent div to
>> "wrap"
>> the swf object.
>> 2. hack the library's embed-swf method to include the "<div>" markup in
>> whatever it sends to the dom.
>>
>> --Kyle
>>
>>
>>
>>
>> --------------------------------------------------
>> From: "st" <[email protected]>
>> Sent: Wednesday, February 11, 2009 6:41 AM
>> To: "SWFObject" <[email protected]>
>> Subject: swf specific container div
>>
>> >
>> > Hi,
>> >
>> > Using the swfObject dynamic method.
>> >
>> > Would like swfObject to also generate a ‘swf-only’ container <div> for
>> > the <object> tag as css styling for the <object> tag does not work
>> > well across all browsers… e.g. borders in Firefox and padding in IE
>> > etc.
>> >
>> > Appreciate that I can add an extra wrapper <div> direct to the html
>> > page but do not want the swf specific styles to affect the alternate
>> > content should javascript/flash be disabled.
>> >
>> > I have added extra html in the swfObject code here...
>> >
>> > v.outerHTML='<div id="swfOnlyWrapper"><object classid="clsid:D27CDB6E-
>> > AE6D-11cf-96B8-444553540000"'+AF+">"+AD+"</object></div>";
>> >
>> > ...and this works for IE browsers but ideally want a container <div>
>> > that applies to all browsers.
>> >
>> > Can you help?
>> >
>> > Regards
>> >
>> > >
>> >
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SWFObject" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/swfobject?hl=en
-~----------~----~----~----~------~----~------~--~---
