...

View Full Version : Setting a different web page as background



rvchuck
09-15-2007, 02:54 AM
I would like to be able to use someone elses web page as the background for a web page.
The reason is I would like to demonstrate how my transparent web videos would look on your web page. So the only thing on "my" page is the transparent video player but would use "your" web page as the background.
I've tried using a url for the img source for the background but can't get it to work. I've seen this done "automatically" thru javascript but can't seem to find the right scripting. I would be alright doing it manually per request by a client if I could figure out how to use their page as the background.
Thanks in advance.

mlseim
09-15-2007, 03:39 AM
I thought of using PHP "Includes" but it won't render the image paths
correctly, so I opted for inline frame <iframe> ...

See my example here:
http://www.catpin.com/flash.php

See what your site looks like with Emeril giving his presentation ...

EDIT: I guess the video doesn't actually target the <iframe>.
There must be some Javascript method to make that happen.
But it's really close ... it might give you some good ideas anyhow.



<?php
$site=$_POST['site'];
$url="http://";
if($site){
$url=$site;
}
?>
<html>
<body style="background-color:#efefef;">
<div>
This is my website with anything I want to display ...
<br><br><br>
The next section is your site with a floating Flash Video.<br>
To show you what "your site" would look like
<form action="flash.php" method="post">
Enter your URL: <input type="text" name="site" value="<?=$url?>"><br>
<input type="submit" name="submit" value="Show Me">
</form>
<div>
<?php
if($site){
echo"
<iframe src='$site' width='100%' height='100%' name='if' border='0'></iframe>
<SCRIPT LANGUAGE='javascript1.2' type='text/javascript' SRC='http://manager.rovion.com/Include.aspx?AffID=ROVION&PageID=BN_EMERIL' target='if'></SCRIPT>
";
}
else{
echo"
<iframe src='http://www.google.com' width='100%' height='100%' name='if' border='0'></iframe>
<SCRIPT LANGUAGE='javascript1.2' type='text/javascript' SRC='http://manager.rovion.com/Include.aspx?AffID=ROVION&PageID=BN_EMERIL' target='if'></SCRIPT>
";
}
?>
</div>
</div>
</body>
</html>

rvchuck
09-15-2007, 04:41 AM
You are incredible!
Ok so should I substitute my url for where you have flash.php and how would I replace the javascript line for the other video for my flash video and I assume I do it in both locations?
Also can this be a .html page and not php?
Thanks

rvchuck
09-15-2007, 06:31 AM
Ok still working on this one.
I have changed the page to php, it works but I can't use my video.
Works fine with the rovion link but not with mine.
Any thoughts? I did get it to work with my video but then the background page url wouldn't work (change). Stayed the same no matter what web address was put in.
I have a javascript on my video that allows the player to float so I removed that thinking it might be the problem and just left the video but I still get an error message. I've put the page up the way I have it now with the error message appearing to see if you can find the flaw.
Thanks again
virutalwebvideo.com/vwv1.php
I've put the code below because all the page gets is the error message.

<?php
$site=$_POST['site'];
$url="http://";
if($site){
$url=$site;
}
?>
<html>
<body style="background-color:#efefef;">
<div>
To see what a walk on video would look like on your site,<BR>
enter your website address below.
<form action="vwv1.php" method="post">
Enter your URL: <input type="text" name="site" value="<?=$url?>"><br>
<input type="submit" name="submit" value="Show Me">
</form>
<div>
<?php
if($site){
echo"
<iframe src='$site' width='100%' height='100%' name='if' border='0'></iframe>
<!-- *********************************************************
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Floating Div from http://www.javascript-fx.com
******************************************************** -->
<div id="divTopLeft" style="position:absolute">
<!-- Start - put your content here --->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="360" height="270" id="vwv1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="vwv1.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="vwv1.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="360" height="270" name="vwv1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<!-- End - put your content here --->
</div>

<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopLeft", 607,48).floatIt();
</script>
<!-- ********************************************************* -->
";
}
else{
echo"
<iframe src='http://www.google.com' width='100%' height='100%' name='if' border='0'></iframe>
<!-- *********************************************************
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Floating Div from http://www.javascript-fx.com
******************************************************** -->
<div id="divTopLeft" style="position:absolute">
<!-- Start - put your content here --->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="360" height="270" id="vwv1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="vwv1.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="vwv1.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="360" height="270" name="vwv1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<!-- End - put your content here --->
</div>
<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopLeft", 607,48).floatIt();
</script>
<!-- ********************************************************* -->";
}
?>
</div>
</div>
</body>
</html>

rvchuck
09-15-2007, 03:49 PM
Got it fixed. Had parse error due to my double quotes within your script.
It now works perfect. Thank you so much. You saved me.

mlseim
09-16-2007, 03:05 AM
Glad to hear it works, because I got lost in your script ... (a lot of code.)

I wonder if you can put all of your Javascript portion into it's own
file ( something.js ) and that would make your page cleaner.

Just make sure you do your experimenting on a different page so you
don't wreck what you have (that already works).

I think what you're doing is a fun idea ... a good use of Flash.
You're not afraid to think outside the box.

rvchuck
09-16-2007, 06:14 PM
Thank you again. Yeah I can think outside the box, it's going out there and trying to figure this stuff out that kills me.
You saved me a ton of grief. The coding you see keeps the video floating nicely if the page is scrolled. Here's the end result (so far).
Any other suggestions would be greatly appreciated.
My next venture out of the box is to figure out how to make movie controls appear and disappear when hovering over the movie so someone can stop it if they want, or to get some coding on how to set a session cookie so the movie will only play once per visit. I would prefer the buttons. I can make buttons and make them work but don't know enough action scripting to make it do what I want and haven't found any tutorials for that.
Any thoughts?

http://virtualwebvideo.com/vwv1.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum