Post Reply 
Drag-and-Drop Resizable Flash...
Nov. 27, 2008, 05:26 PM
Post: #1
Drag-and-Drop Resizable Flash...
in ref. to the filter posted here - http://prxbx.com/forums/showthread.php?t...85#pid9885


i'm in-process of updating and adding a resizability function...
the .swf is contained within a DIV tag, the DIV tag is resizable by hovering on its borders and dragging-and-dropping to the size you want...

everything works perfectly - until i try to incorporate into the toggle objects filter, which is my desired end-in-mind... toggle first, resize only after toggle...

the problem is that i need the width and height settings of the flash/object to NOT be "fixed", i want the flash/object to 'resize' when the border outline is dragged-and-dropped... and no matter what i do, when i try to rewrite z12's toggle filter to capture the width and height, it "breaks"...

i can get everything to work, even resize the flash/object with the drag-and-drop resizing of the DIV container (if that's the right terminology), but not WITH the toggle filter...


here's where i'm at so far:
Code:
Name = "Toggle: Object {4.d.3.2} 20081118 {z12} [add] [test]"
Active = TRUE
URL = "($TYPE(htm)|$TYPE(js)|$TYPE(vbs))(^$TST(keyword=*.flash.*))"
Limit = 5120
Match = "("
        "("
        "$NEST(<object(\s|"),"+</object >)|"
        "<object(^[a-z])(*/ object >&&(^*<object)*)|"
        "<embed(^[a-z])*>(^ [=a-z0-9])( </embed >)+"
        ")\0(^ </object >)(^ </textarea>)"
        "&&"
        "(^*(type=$AV(image/*)))"
        "*)"
        "$SET(flash=$GET(flash)$DTM(t))"
        "(($TST(script=*))$SET(1=\\")$SET(2=\\)|$SET(1=")$SET(2=))"
Replace = "<span class=\1flash$GET(flash)\1 style=\1display:inline\1>"
          "<a title=\1Play Media\1 onclick=\1PrxObjToggle(this)\2;return false\2;\1 onmouseover=\1PrxTitleObj(this)\1>"
          "<img alt=\1Toggle Media\1 src=\1http://local.ptron/My_HTML/43unite_HTML/player_play.png\1 style=\1border-style:none\1 /><\2/a>"
          "<br />"
          "<\2/span>"
          "<span class=\1flash$GET(flash)\1 style=\1display:none\1>"
          "<textarea style=\1display:none\1><div class="resizeMe" id="ResizeDiv">\0</div><\2/textarea>"
      "<\2/span>"
Code:
Name = "Header Top Inject: User CSS - Resizable Div [add]"
Active = TRUE
URL = "$TYPE(htm)"
Limit = 16
Match = "(^(^<ProxHdrTop>))$STOP()"
Replace = "<style type="text/css">\n"
          "#ResizeDiv {\n"
          "  overflow: auto;\n"
          "  width: auto;\n"
          "  height: auto;\n"
          "  border: 2px inset lightblue;\n"
          "  background: lightblue;\n"
          "  color: black;\n"
          "  padding: 1px;\n"
          "  }\n"
          "</style>\n"
Code:
Name = "Header Top Add: User JS Code - Resizable Div [add]"
Active = TRUE
URL = "$TYPE(htm)"
Limit = 16
Match = "(^(^<ProxHdrTop>))$STOP()"
Replace = "\t<script type="text/javascript" src="http://local.ptron/My_HTML/ErikArvidsson_HTML/genresize.js">\r\n\t</script>\r\n"

.js file is attached (observe directory structure above)...

here's an example where you can drag-and-drop the borders - http://www.flashcomguru.com/apps/fullscr...creen.html

any assistance would be GREATLY appreciated, i've been "wanting" to DYNAMICALLY RESIZE .swf's for YEARS (primarily during MLB season, lol)... and now i found a way, just can't get my fingers around why capturing the width/height in the toggle filter "breaks" that filter...


Attached File(s)
.zip  ErikArvidsson_HTML.zip (Size: 1.37 KB / Downloads: 423)
Add Thank You Quote this message in a reply
Nov. 27, 2008, 06:10 PM
Post: #2
RE: Drag-and-Drop Resizable Flash...
ProxRocks;

Whenever I get hung up by a filter works by itself (in a pristine test environment), yet it doesn't work with other filters, I start making them "Multi". That usually takes care of the issue.

HTH


Oddysey

I'm no longer in the rat race - the rats won't have me!
Add Thank You Quote this message in a reply
Nov. 27, 2008, 06:56 PM
Post: #3
RE: Drag-and-Drop Resizable Flash...
z12's flash filter as a multi pegs at 100% and locks everything up until the connection is killed...

the "filter" isn't working by itself, the "method" is...

i "write-in" USA Today's and LA Times's daily sudoku and uclick's daily kakuro into Google's home page, my "write-in's" are resizing AWESOMELY...

the object's width/height are set to 100% for the write-in's, you change the size of the "container", the object rescales accordingly...

to get the "filter" to work, i can't keep the width/height that the web-site calls out...

and seems EVERY attempt at re-writing z12's filter to capture width/height BREAKS the filter...
Add Thank You Quote this message in a reply
Nov. 27, 2008, 07:57 PM
Post: #4
RE: Drag-and-Drop Resizable Flash...
ProxRocks Wrote:everything works perfectly - until i try to incorporate into the toggle objects filter, which is my desired end-in-mind... toggle first, resize only after toggle...

This ought to be fun. Smile!

Have you tried putting the div on the outside of the replacement code?
Code:
<div class="resizeMe" id="ResizeDiv">
<span ...snip...<\2/span>
</div>

It's worth a shot.
As it is now, the div might be constrained by the second span.
If were lucky, the span elements will auto resize along with the div.

But, the object probably has a size specified, so it may not resize.
Worst case, the resize js could probably be modified to resize what's in the div.

The hard part will probably be getting the div to resize in the first place.

z12
Add Thank You Quote this message in a reply
Nov. 27, 2008, 08:09 PM
Post: #5
RE: Drag-and-Drop Resizable Flash...
seems i'm not explaining myself clearly enough...
(and you lost me with the div being constrained by the second span possibility...)


your filter matches this line, as an example match:
Code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="640" height="380" id="fullscreen" align="middle">

i need for your filter to be doing everthing it is EXCEPT i need that 640 and 380 (any number, for that matter) to both say 100% when your filter drops everything back down as \0...
Add Thank You Quote this message in a reply
Nov. 27, 2008, 08:11 PM
Post: #6
RE: Drag-and-Drop Resizable Flash...
I know your best friend isn't firefox, and for this reason maybe you don't know firebug, so for the testing of your replacement code I would greatly reccomend it to you to find the code wich works Wink

http://getfirebug.com/
Add Thank You Quote this message in a reply
Nov. 27, 2008, 08:12 PM
Post: #7
RE: Drag-and-Drop Resizable Flash...
firebug looks quite cool indeed...
i don't mind giving it a try someday, down the road...
Add Thank You Quote this message in a reply
Nov. 27, 2008, 08:21 PM
Post: #8
RE: Drag-and-Drop Resizable Flash...
Two very important things it has:
1- you can see the actual html code of the page, after the javascripts make their writings.
2- you can modify the code and see the results suddenly, without reloading. WYSIWYG
Add Thank You Quote this message in a reply
Nov. 27, 2008, 09:31 PM
Post: #9
RE: Drag-and-Drop Resizable Flash...
I'm guessing the code that works "perfectly" looks something like this:
Code:
<div class="resizeMe" id="ResizeDiv">
<object...snip...</obect>
</div>

Based on that guess, I suggest adding the div like this:
Code:
Replace = "<div class="resizeMe" id="ResizeDiv">"
          "<span class=\1flash$GET(flash)\1 style=\1display:inline\1>"
          "<a title=\1Play Media\1 onclick=\1proxo.PrxObjToggle(this)\2;return false\2;\1 onmouseover=\1proxo.PrxTitleObj(this)\1>"
          "<img alt=\1Toggle Media\1 src=\1http://local.ptron/Grypen_HTML/imgs/player_play.png\1 style=\1border-style:none\1 /><\2/a>"
          "<br />"
          "<\2/span>"
          "<span class=\1flash$GET(flash)\1 style=\1display:none\1>"
          "<textarea style=\1display:none\1>\0<\2/textarea>"
          "<\2/span>"
          "</div>"

Note: don't copy/paste the above code, my js calls are different.

Adding the div this way won't effect the toggle js.
I tried it, it works for me. I haven't tried the resize js.
It requires some modifications to be compatible with my setup.

The point is, inserting the div as above should work for you too.
The object may not resize but you should be able to resize the div.

If need be, I can modify the js to set the object H&W to 100%.

What little I knew of css, I forgot.
But some playing around with the style position: of the div, span and object elements may be required to get all this to work together.
I don't know for sure.

As a side note, for the final code, the id="ResizeDiv" will require some thought.
Many pages have multiple objects which will require multiple divs.
The id of each div has to be unique or trouble will ensue. Smile!
Some js might be able to resolve this though.

z12
Add Thank You Quote this message in a reply
Nov. 27, 2008, 10:19 PM
Post: #10
RE: Drag-and-Drop Resizable Flash...
the div class and closing div "outside" of the outer span was my "first stab" also...

it doesn't work placed outside the outer span...
"within" the textarea is the only place i can toggle and resize...

sure, you can toggle with the div class and closing div on the "outside", but the resize simply isn't effective from what i'm seeing (you don't want to resize while the play button is displayed, only while the stop button is displayed)...

and good point, forgot about multiple objects needing multiple class id's... hmmm...


i'm still thinking the first obstacle is the width/height parameters being converted to 100%...
Add Thank You Quote this message in a reply
Nov. 27, 2008, 10:48 PM
Post: #11
RE: Drag-and-Drop Resizable Flash...
(Nov. 27, 2008 08:09 PM)ProxRocks Wrote:  i need for your filter to be doing everthing it is EXCEPT i need that 640 and 380 (any number, for that matter) to both say 100% when your filter drops everything back down as \0...

If trying this on any browser other than IE you'll have to nail the size attributes of the EMBED tag. The OBJECT tag is only for IE and its ActiveX, while EMBED is for everything else. Usually both have the same sizes. See: http://kb.adobe.com/selfservice/viewCont...Id=tn_4150

Alternatively, you could try injecting the following Javascript onto the bottom (maybe right before /body) of the pages that you've modified to use the div. It will seek out any defined OBJECT and EMBED tags in the page and change their size attributes to be "100%". I'm not "100%" Sinister sure of what you're doing, maybe that will lead to other ideas.

Code:
<script language="javascript">
if (document.getElementsByTagName)
   {
   var x = document.getElementsByTagName("object");
   for (var i=0; x && i < x.length; i++)
      {
      if (x[i].width) x[i].width = '100%';
      if (x[i].height) x[i].height = '100%';
      }
   x = document.getElementsByTagName("embed");
   for (var i=0; x && i < x.length; i++)
      {
      if (x[i].width) x[i].width = '100%';
      if (x[i].height) x[i].height = '100%';
      }
   }
</script>
Add Thank You Quote this message in a reply
Nov. 27, 2008, 10:52 PM
Post: #12
RE: Drag-and-Drop Resizable Flash...
z12 and ProxRocks, to increment id="ResizeDiv" you will need the list Count:

Add this to the end of the matching code:
Code:
$TST(($GET(n)+)=$LST(Count)|*)$SET(n=$GET(i))

And add the next to the replacement code
Code:
_$DTM(c)_$GET(n)

More clear:
Code:
Replace = ".....id="ResizeDiv_$DTM(c)_$GET(n)"...."
Add Thank You Quote this message in a reply
Nov. 27, 2008, 11:35 PM
Post: #13
RE: Drag-and-Drop Resizable Flash...
can't use count for .css...
you can have 100 links on a page, but they are all "styled" by a single .css entry that gets plopped down only once, at the top of the page, not once for each and every link existent in the page...

guess the .css "could" just assign a set "number" of id's, then each time the toggle/resize filter hits, we increment up the id-count... but then we'd bump into "assuming" ten id's should be sufficient and then some web-designer newbie comes along and slaps thirty objects onto his/her overly-cluttered eyesore of a page, lol...
Add Thank You Quote this message in a reply
Nov. 27, 2008, 11:37 PM
Post: #14
RE: Drag-and-Drop Resizable Flash...
mmm i was thinking in the javascript code for toggling, not in the css. The style can be inserted in every div anyway without using CSS...
Or use CSS for class and id for toggling maybe...
Add Thank You Quote this message in a reply
Nov. 27, 2008, 11:42 PM
Post: #15
RE: Drag-and-Drop Resizable Flash...
For now, let's forget about the div.
Instead, try using the 2nd span instead of the div, like so:
Code:
Replace = "<span class=\1flash$GET(flash)\1 style=\1display:inline\1>"
          "<a title=\1Play Media\1 onclick=\1proxo.PrxObjToggle(this)\2;return false\2;\1 onmouseover=\1proxo.PrxTitleObj(this)\1>"
          "<img alt=\1Toggle Media\1 src=\1http://local.ptron/Grypen_HTML/imgs/player_play.png\1 style=\1border-style:none\1 /><\2/a>"
          "<br />"
          "<\2/span>"
          "<span class=\1resizeMe\1 id=\1ResizeDiv\1 style=\1display:none\1>"
          "<textarea style=\1display:none\1>\0<\2/textarea>"
          "<\2/span>"

Note: don't copy/paste the above code, my js calls are different.

Let's see if that will resize.

I thought I had a simple solution to the H&W of the object.
I forgot about embed elements. This may complicate things a bit.
To be sure, I need to do some testing.

Just to make sure, this is the site your testing on?
http://www.flashcomguru.com/apps/fullscr...creen.html

Graycode Wrote:The OBJECT tag is only for IE and its ActiveX, while EMBED is for everything else.

Yet in my testing, I've seen the opposite work.
Sometimes, I think it depends on if it's cloudy outside.

At any rate, it's better to be ready for both.

lnminente Wrote:to increment id="ResizeDiv" you will need the list Count:

Since it just needs to be unique, you could use something like this:
Code:
Matching Expression:
&$SET(resizeId=$GET(resizeId)1)
Replace:
id=\1$GET(resizeID)\1

Personally, I think it would be better to modify the js.
I don't allow this:
Code:
document.onmousedown = doDown;
document.onmouseup   = doUp;
document.onmousemove = doMove;

In the end, I would rather not have to depend on the id.

z12
Add Thank You Quote this message in a reply
Post Reply 


Forum Jump: