howto: scrollto embedded iframe

**atreau2k** · 10-05-2005, 04:28 AM

I have 2 videos on a seperate domain that i cannot capture the stream from or alter the html. So i decided to embed them into a iframe on my website and it works great! the only prob is that it looks like another website inside of my own. Not good. the videos are 300x200 and my iframe is 300x200. Now all I want to do is a scrollto(250,250)so the video fits perfectly in the iframe. Everytime I assign athe scrollto() function, i get an access is denied. Im sure there is either a fix or a better way to do it. Please help figure out this dilemna.
thanks in advance....

**jscheuer1** · 10-05-2005, 07:14 AM

Well, the numbers may have to be adjusted to get the right fit but, if I recall correctly we solved a similar problem using an additional page with a full page iframe on it.

On top is your page with the iframe of the desired dimensions on it. The additional page is just a full page iframe with the video showing through it. Now you should be able to scroll this additional page to whatever you want by using its onload event. This additional (or intermediary) page is what gets loaded into the iframe on your top page.

**atreau2k** · 10-05-2005, 06:38 PM

You saved Me.... Very cool answer. I have decided to post a complete answer for those who need further help in this.
Because Linksys has a wireless webcam that is impossible to embed in a webpage. and you are stuck with their crappy interface. Here is a much better way to handle it!

Create 2 html pages.
the first one is the one that everyone sees. Its your webpage.
Decide where you want to put your video and then add this text to your source code:

Code:

<html>
<TABLE>
<TR>
<TD><iframe src ="img1.html" width="341" height="260" scrolling="no" frameborder="0" name="img1"></iframe></TD>
<TD><iframe src ="img2.html" width="341" height="260" scrolling="no" frameborder="0" name="img2"></iframe></TD>
</TR>
<TR>
<TD><CENTER><a href="img1.html" target="img1">Refresh Video 1</a></CENTER></TD>
<TD><CENTER><a href="img2.html" target="img2">Refresh Video 2</a></CENTER></TD>
</TR>
</TABLE>
</body>
</html>

You will notice a few things.
1) img1.html/ img2.html are pages I have not showed you how to create yet.
2) (width="341" height="260") These are a Perfect fit when the video on the webcam is set to its largest.
3) (scrolling="no" frameborder="0") I dont want it to look like its on my webpage, so I hide everything.
4) (name="img1"/name="img2") I want to call it from a link later, so I have to give it a name.

So now you understand what the tags mean.. lets move on to the iframe trick.
Create a new page called img1.html and place this code in it:

Code:

<body onload="window.scrollTo(330,175)">
<iframe src ="http://YourOutsideIPAddress:1025/img/main_fs.htm" width="1000" height="1000" scrolling="no"></iframe>

Lets review this page:
1) (body onload=) This says: Run something right when the page is loaded
2) (window.scrollTo(330,175)) This is the perfect x/y coordinates for the largest video the linksys webcam puts out. 330 to the right and 175 down.
3) (YourOutsideIPAddress) When you setup your webcam, you should know this. If you want to look internally, you do not need the port number.
4) (:1025) Your port number. Again, a webcam setup thing. For every camera you will have a different port number.
5) (width="1000" height="1000") These number cannot be percentages. The point is for these numbers to be larger than the page.
6) (scrolling="no") and finally you dont want it to get mucked up with nasty scollbars, do ya?

now that your 1st page has been created, lets add page #2 so you see the how to without confusion.
Create a new page called img2.html and place this code in it:

Code:

<body onload="window.scrollTo(330,175)">
<iframe src ="http://YourOutsideIPAddress:1026/img/main_fs.htm" width="1000" height="1000" scrolling="no"></iframe>

You will notice the only change is the port number. Remember, each camera need a different outside port to work. And for those still confused about the port thing, here is the scoop:
Create a port in the advanced camera settings like 1025
and ALSO open that port in your router so the rest of the world can get to it.

I am sure this page is most helpful considering I have been looking for months at how to stop using the crappy linksys interface to view the video feeds.
This works for both the Linksys WVC11B and the Linksys WVC54G Wireless webcams.
You should know that you need a really high end video card to view more than 1 camera feed at the same time. And that the cameras themselves can only support 4 viewers per camera at once.

I can finally rest.

Good luck and happy webcamming.

**joelevy** · 06-01-2006, 03:26 PM

Thanks for your excellent write up. This looks like it should work, but when I run it I get:
"The requested URL /img/main_fs.htm was not found on this server."

Any thoughts on this?

Thanks.

**Twey** · 06-01-2006, 03:35 PM

It's probably somewhere else. I imagine the precise location and filename would vary with the model.

**jscheuer1** · 06-01-2006, 05:35 PM

Also, it is possible, if you are linking to an offsite page, it may have mechanisms in place to determine if it is being shown on a page on another domain that result in this message if such a situation is detected. Or, if it is a webcam shot, the filename my be continually updated.

**joelevy** · 06-04-2006, 05:48 PM

So I found the correct file name, and for img1.html I set the code to say:

<body onload="window.scrollTo(330,175)">
<iframe src ="http://24.22.218.195:1024/main.htm" width="1000" height="1000" scrolling="no"></iframe>

But this isn't working at all for me. Feel free to check out my page directly at www.thelevyfam.com/camera.html Whenever I load the page, it just crashes IE.

I also found this link http://forum.textdrive.com/viewtopic.php?pid=90794 which seems to discuss the issue, but doesn't offer a solution (about to post there as well).

Any other thoughts? I really just want to put the webstream image into my site without all the linksys/cisco junk on the page.

Thanks -
J

**jbyrnes** · 06-29-2006, 07:21 PM

I am so glad to find this thread. It worked quite nicely for me. I do have a bit of an issue with the WVC54G camera though. I can't seem to resize the iframe to get a larger picture without getting pieces of the linksys frame in it. I also am running into IE crashing when I try to refresh or leave the page. This is only happening with the 54G though. The 11B is working just fine.

Any clues would be greatly appreciated.

Thanks

Julia

Thread: howto: scrollto embedded iframe

Thread Tools

Search Thread

howto: scrollto embedded iframe

Thank You ... Perfect!

Still not working

Bookmarks

Bookmarks

Posting Permissions