PDA

Click to See Complete Forum and Search --> : How to create Dynamic Layer

Ali Imran
04-08-2003, 05:03 PM
Say I am using Flash MX or SWiSH 2 and i want a javascript action be taken on if a button clicked. The action must generate new Dynamic layer which is not existant already in html page.


You may just create or write code for it on a normal html button click.

any help will be highly appreciated.
Jona
04-08-2003, 05:12 PM
Okay, in Flash try using getURL to get a "javascript:functionName();" URL sent to the browser that will interpret the page. E.g., if you have function foo() and a link: <a href="javascript:foo();"> use getURL to go to the URL "javascript:foo()" instead of "http://somewhere.com/" See what I mean? That way you can call your Javascript function with Flash. Do you need help with the Javascript as well?
JackTheTripper
04-08-2003, 05:20 PM
Don't know about creating the layer on the fly. But you could always use the example above to do this...

<script>
function foo(){
document.getElementById(blah).style.visibility = visible
}



<div name="blah" style= "visibility: hidden">

Here is you layer

</div>


Of course, this only works in IE and nutscrape 6 and up, but is that more what you were looking for?
Ali Imran
04-08-2003, 05:20 PM
Again Jona nice....

Thanks for the reply

But I have full command over MX and SWiSH 2 now what I want is the solid code for creating new layer.
how can I do that ?
Ali Imran
04-08-2003, 05:23 PM
hi JackTheTripper

the thing you are talking about is hiding and showing an existign layer, my question is how to create new one which is not already existant in html code means dynamic layer (fully dynamic)
Jona
04-08-2003, 05:32 PM
This is possible, but it will not work in DOM-Compliant browsers...

<html><head>
<script>
function foo(){
var newDiv = document.createElement("div"); // create a <DIV> element
newDiv.setAttribute("id","oDiv"); //set the ID attribute to "oDiv"
document.body.appendChild(newDiv); // append the DIV to the current page
}
</script></head>
<body>
<a href="javascript:foo()">Bar</a>
<!--Above is called by Flash -->
</body></html>
Ali Imran
04-08-2003, 05:36 PM
wow

what a brilliant piece of work I really appreciate it

andone more thing if you could please do it
I want to load avi in it say "swish-db.com/news.avi" when it is displayed.

and one more thing how can i resize it on runtime ?
Jona
04-08-2003, 05:42 PM
Let's see... Add this:

<html><head>
<script>
function foo(){
var newDiv = document.createElement("div");
newDiv.setAttribute("id","oDiv");
document.body.appendChild(newDiv);
oDiv.innerHTML="<OBJECT src='your_movie.avi'></object>";
}
</script></head>
<body>
<a href="javascript:foo()">Bar</a>
</body></html>

Now, if you wanted to resize it at runtime, according to what? Resize based on the client's screen-resolution? Just use innerHTML to add your movie/avi <OBJECT> in the DIV.
Ali Imran
04-08-2003, 05:45 PM
can there be a vucntion to change its x, y, width and height

like

setsize(x,y,w,h);

something like this ?
Jona
04-08-2003, 05:47 PM
Yes, but I need to know what to set the size to, or if it changes based on something, I need to know what it changes on.
Ali Imran
04-08-2003, 05:49 PM
it will change the size in pixels due to when this resizeing fucntin will be called by user by clicking an image
is that possible ?
Jona
04-08-2003, 05:50 PM
Yes, it's possible. I just need to know the dimensions! What do you want it to resize to?
Ali Imran
04-08-2003, 05:53 PM
the dimentions

x = 200
y = 200

width = 100
height = 150

background color = red
Jona
04-08-2003, 05:55 PM
Hold on a second. What do you mean x and y? Isn't that the same thing as width and height?
Ali Imran
04-08-2003, 05:57 PM
no the X is left coordinate of layer means X-axis and y = Y-axis
Jona
04-08-2003, 05:58 PM
Oh yah, duh. Okay, let me see if I can get it...
Jona
04-08-2003, 06:03 PM
Tell me if you like this:

<html><head>
<script>
function foo(){
var x = 200
var y = 200
var w = 150
var h = 150
var newDiv = document.createElement("div");
newDiv.setAttribute("id","oDiv");
document.body.appendChild(newDiv);
newDiv.innerHTML="<OBJECT src='your_movie.avi' width="+w+" height="+h+" style='position:absolute;left:"+x+";top:"+y+"'></object>";
}
</script></head>
<body>
<img src="n.gif" width="60" height="60" onClick="foo()" style="cursor:hand"><br>
<a href="javascript:foo()">Bar</a><br><br>
</body></html>
Ali Imran
04-08-2003, 06:07 PM
gerat effort

but sory you forgot to add red background color how to do that in style ?
Jona
04-08-2003, 06:09 PM
The below works, but the background color isn't red until you add something else to the innerHTML of the DIV.

<html><head>
<script>
function foo(){
var x = 200
var y = 200
var w = 150
var h = 150
var newDiv = document.createElement("div");
newDiv.setAttribute("id","oDiv");
document.body.appendChild(newDiv);
newDiv.style.backgroundColor="red";
newDiv.innerHTML="<OBJECT src='your_movie.avi' width="+w+" height="+h+" style='position:absolute;left:"+x+";top:"+y+"'> </object>";
}
</script></head>
<body>
<img src="n.gif" width="60" height="60" onClick="foo()" style="cursor:hand"><br>
<a href="javascript:foo()">Bar</a><br><br>
</body></html>
Ali Imran
04-08-2003, 06:15 PM
it does not show me the avi movie and shows just like this as like image not available.
Jona
04-08-2003, 06:18 PM
Well you have to change the location of the avi movie. Like this: newDiv.innerHTML="<OBJECT src='your_movie.avi' width="+w+" height="+h+" style='position:absolute;left:"+x+";top:"+y+"'> </object>";

"your_movie.avi" should be the location of your avi movie. E.g., server.com/avi/your_movie.avi

And the image has to have a location as well. An SRC.
Ali Imran
04-08-2003, 06:31 PM
but it is not loading the movie ?

the path is accurate but still no success.

if i want another fucntion to resize it as i said before

fucntion resize(x,y,width,hight){

}

what will be code for this fucntion to change the position and dimensions for existing layer ?
Jona
04-08-2003, 06:35 PM
Well, why would you want that function if you have no reason to base it on? What would change the size of the x, y, width, and height variables?
Ali Imran
04-08-2003, 06:38 PM
Man I have reason behind it that's why i came to the forum and asked you for help.

for example another href when clicked it will resize the layer to

x=10
y=10
width=400
height=300

if you dont have the answer please tell it frankly.

regards
Ali Imran
Jona
04-08-2003, 06:42 PM
Ok, I know the answer, but I don't know how I would set "x, y, width and height" to a value without knowing what to base it on.
Ali Imran
04-08-2003, 06:45 PM
based on what?



the question is so simple why dont you understand it. if you have the answer pelase tell it.


Q.I JUST NEED TO RESIZE THE DYNAMIC LAYER CREATED USING ANOTHER FUNCTION. IS THAT POSSIBLE?
Jona
04-08-2003, 06:53 PM
Here we go...

<html><head>
<script>
function Resize(x,y,h,w){
myObj.style.left=x;
myObj.style.top=y;
myObj.height=h;
myObj.width=w;
}
function foo(){
var x = 200
var y = 200
var w = 150
var h = 150
var newDiv = document.createElement("div");
newDiv.setAttribute("id","oDiv");
document.body.appendChild(newDiv);
newDiv.style.backgroundColor="red";
newDiv.innerHTML="<OBJECT src='your_movie.avi' width="+w+" height="+h+" style='position:absolute;left:"+x+";top:"+y+"' id='myObj'> </object>";
}
</script></head>
<body>
<img src="n.gif" width="60" height="60" onClick="foo()" style="cursor:hand"><br>
<a href="javascript:foo()">Bar</a><br>
<a href="javascript:Resize(300,300,230,230);">Phooey</a>
</body></html>
Ali Imran
04-08-2003, 06:58 PM
thank you so much for the kind reply

so nice of you it is done...
thank you again...

regards
Ali Imran
Jona
04-08-2003, 07:01 PM
See? I'm not stupid. I just wanted to know what you were trying to base your resize function off of. That way I wouldn't have to rebuild the script 5 times to suit your needs....
Ali Imran
04-08-2003, 07:05 PM
sory for disturbing you if i did so...
anyhow it helped me alot......

thank you so much...
Jona
04-08-2003, 07:16 PM
I'm working on a way to make this better. I'll have it in a second... viewable: http://geocities.com/god_loves_07/dynamicObj.html