Solved

Clickable table with javascript action in two (hidden) Iframes

Posted on 2008-10-31
8
471 Views
Last Modified: 2010-05-18
Hello Expert,

I've build a screen with 14 Iframes. 12 from the 14 will present a small webcam view and two Iframes are used to perform a action to set one of the web cams in an other resolution and turn a let of on the cam.

These two actions should should be activates when I click the table cell of that cam screen.
I've tried to create the code but it does not work.

Please help me to get this working.....


<html>

<head>

<title></title>

<script language="Javascript">

function linkr(IP){

  document.frames["iframeA"].location.href = "http://" + IP + "/control/control?set&section=general&size=640x480"

  document.frames["iframeB"].location.href = "http://" + IP + "/control/rcontrol?action=ledsoff"

}

</script>
 

</head>

<body>

<table>

<tr>

<td colspan=4><iframe ID="iframeA" src ="URL1" width="0%"></iframe><iframe ID="iframeB" src ="URL2" width="0%"></iframe></td>

</tr>

<tr>

<td onClick="linkr(192.168.1.228);"><iframe ID="iframe1" src ="view.asp?IP=192.168.1.228" scrolling=no border="0" frameborder="0" border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe2" src ="view.asp?IP=192.168.1.229" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe3" src ="view.asp?IP=192.168.1.230" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe4" src ="view.asp?IP=192.168.1.231" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

</tr>

<tr>

<td><iframe ID="iframe5" src ="view.asp?IP=192.168.1.232" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe6" src ="view.asp?IP=192.168.1.233" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe7" src ="view.asp?IP=192.168.1.234" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe8" src ="view.asp?IP=192.168.1.235" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

</tr>

<tr>

<td><iframe ID="iframe9" src ="view.asp?IP=192.168.1.236" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe10" src ="view.asp?IP=192.168.1.237" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe11" src ="view.asp?IP=192.168.1.238" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

<td><iframe ID="iframe12" src ="view.asp?IP=192.168.1.239" scrolling=no border="0" frameborder="0" width="100%"></iframe></td>

</tr>

</table>

</body>

</html>

Open in new window

0
Comment
Question by:Steynsk
  • 3
  • 3
  • 2
8 Comments
 
LVL 1

Expert Comment

by:tim-cap47
Comment Utility
1.
mayby you should try jquery (http://jquery.com/). It really helps to simplify your javascript

2. I think the onclick-event does not work for a td; put divs in your td's and add the onclick-event to these divs
0
 
LVL 15

Accepted Solution

by:
Tomarse111 earned 400 total points
Comment Utility
the Onclick wouldn't work as technically you are clicking in the physical iframe not the on the td. The way I would suggest do it is having a OnClick on the body of the view.asp file the calls the linkr function on your parent page. So ...


//This would be on your view.asp

<body onclick="parent.linkr(192.168.1.228);">

  //view.asp code

</body>

Open in new window

0
 
LVL 1

Author Comment

by:Steynsk
Comment Utility
Hello Tomarse111,

Your sollution looks like a very smart one. But it does not seem te work. I'll attach the code of the seond file too.

Could you please make changes in the code?...

Kind regards
<% 

IP = Request.QueryString("IP")

LOC = Request.QueryString("loc")%>

<html>

<head>

<title><% response.write LOC %></title>

<style type="text/css">

td,th { font-family:Helvetica,Arial,sans-serif; }

pre,textarea { font-family:monospace; }

.headtablesmall { font-family:Helvetica,Arial,sans-serif; font-size:100%; }

.standard { font-size:80%; }

.inherit { font-size:100%; }

.smallcomment { font-size:95%; }

.smallercomment { font-size:80%; }

p,table,td,th{font-family:Helvetica,Arial;} 

form { margin-bottom:0px;margin-top:0px; }

.kleinerknopf { font-size:80%; }

.help { cursor:help; }

</style>

</head>

 

<body onclick="parent.linkr(<% response.write IP %>);" onload="if (document.all && document.all.CamPic) document.all.CamPic.style.width='auto';animation_init();"> 

 

<noscript>

        <center>

                <font face="Helvetica,Arial" size="+1" color=red>

                        Sta het gebruik van Javascripten toe om bewegend beeld te krijgen <br>Please allow the use of javascripting to receive motion picture.

                </font>

        </center>

</noscript>

 

<br><div align=center>

<form name="dkdk">

<TABLE width=320 cellpadding=0 border=0 cellspacing=0>

<TR  valign=baseline>

<td colspan=2 align=center>

<img name="CamPic" src="http://" & <% response.write IP %> & "/record/current.jpg?rand=6014151" ALT="<% response.write LOC %>" TITLE="<% response.write LOC %>" width="320" height="200"></td>

</tr>

<tr>

<td>

 

<script language="JavaScript" type="text/javascript">

        var current_refresh_method_nr=0;

        var refreshmethods_type=new Array(0,0,0,1,2);

        function refreshMethod(new_value) {

                if (refreshmethods_type[new_value]!=refreshmethods_type[current_refresh_method_nr]) {

                        var url=location.href.split("?");

                        location.href=url[0]+"?REFRESHMETHOD="+new_value;

                } else {

                        current_refresh_method_nr=new_value;

                        setframerate();

                }

        }

</script></td>

</TR>

</TABLE>

</form></div>

<script language="JavaScript">

                        var pic_url="http://<% response.write IP %>/record/current.jpg";

                        var noframepath="http://<% response.write IP %>/decor/m1m-error.jpg";

                        var n=Math.floor(Math.random()*1000000);

                        var session_id=Math.floor(Math.random()*1000000);

                        var startn=n;

                        var GetItOn=1;

                        var framerate=2;

                        var buffer= new Image();

                        var aktiv=null;

                        var db_enabled=0;

                        var passiv=null;

 

  function DoComplete()

  {

                if (db_enabled != 0) {

                        if (db_enabled<0) {

                                //document.CamPic.style.filter="";buffer.style.filter="alpha(opacity=70,style=0)";

                                document.CamPic.style.display="";

                                buffer.style.display="none";

                        } else {

                                //document.CamPic.style.filter="alpha(opacity=70,style=0)";buffer.style.filter="";

                                buffer.style.display="";

                                document.CamPic.style.display="none";

                        }

                        db_enabled*=-1;

                } else {

                document.CamPic.src = buffer.src;

                }

                GetItOn = 1;

                if (current_refresh_method_nr == 1 && framerate>0) {// Sync onload implementieren

                        if (passiv==null)

                                Animation();

                }

  }

        function LoadError()

        {

                if (db_enabled != 0) {

                        db_enabled*=-1;

                } else {

                        document.CamPic.src=noframepath;

                }

                GetItOn = 1;

                if (current_refresh_method_nr == 1 && framerate>0) // Sync onload Fehlerbehandlung

                        passiv=setTimeout("passiv=null;Animation();",1000);

        }

 

  function setframerate(value) {

                framerate=value;

                if (aktiv) {

                        window.clearInterval(aktiv);

                        aktiv = null;

                }

                document.CamPic.onerror=null;

                buffer.onerror=null;

                if (framerate<0) {

                        if (current_refresh_method_nr == 2) { //  Stream ausschalten

                                GetItOn=1; Animation();

                        }

                        return;

                }

                // Refresh Typen

                if (current_refresh_method_nr == 2) { //  Stream anschalten

                        buffer.onload = null;

                        buffer.onerror= null;

                        document.CamPic.onload=null;

                        // wg. Mozilla Bug # 42224 "Spontaner Abbruch des Streams"

                        document.CamPic.onerror= function () {setTimeout("setframerate();",500) } ;

                        document.CamPic.src = "http://<% response.write IP %>/cgi-bin/faststream.jpg?stream=full&fps="+framerate+"&rand=" + String(n++);

                        return;

                } else if (current_refresh_method_nr == 1) { // OnLoad synced

                        session_id++;

                        Animation();

                        return;

                }

                aktiv=window.setInterval("Animation()",1000/framerate);

                GetItOn=1;      // auf alle Faelle anzeigen!

                Animation(); // und go...

        }

  function Animation()

  {

                var my_rm_nr=current_refresh_method_nr;

                var my_fr=framerate;

                var my_session=session_id;

 

          if (GetItOn == 1 || (my_rm_nr == 1 && my_fr>0))

                        // Bild ist geladen und das naechste kann

          {     // angefordert werden.

                        GetItOn = 0;

                        if (db_enabled<0) {

                                buffer.onerror=buffer.onload=null;

                                document.CamPic.onerror= LoadError;

                                document.CamPic.onload = DoComplete;

                                if (my_rm_nr == 0)

                                        document.CamPic.src = pic_url + "?rand=" + String(n++);

                                else

                                        document.CamPic.src = pic_url + "?sync="+my_fr+"&session="+my_session+"&rand="+String(n++);

                        } else {

                                document.CamPic.onerror=document.CamPic.onload=null

                                buffer.onerror= LoadError;

                                buffer.onload = DoComplete;

                                if (my_rm_nr == 0)

                                        buffer.src = pic_url + "?rand=" + String(n++);

                                else

                                        buffer.src = pic_url + "?sync="+my_fr+"&session="+my_session+"&rand="+String(n++);

                        }

                }

  }

  function animation_init() {

                if ( document.all

                                && (navigator.platform.substr(0,3) != "Mac")

                                && (document.CamPic.inserAdjacentHTML)

                                 ) {

                        document.CamPic.insertAdjacentHTML("AfterEnd","<img border=0 style=\"display:none;\" name=dbbuffer><\/b>");

                        buffer=document.dbbuffer;

                        db_enabled=1;

                }

                setframerate(framerate);

        }

</script>

</font>

<script type='text/javascript' language='JavaScript'>self.focus();</script></body>

</html>

Open in new window

0
 
LVL 1

Expert Comment

by:tim-cap47
Comment Utility
i think you forgot to quote something
put quotes around:
<% response.write IP %>
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 1

Assisted Solution

by:tim-cap47
tim-cap47 earned 100 total points
Comment Utility
single quotes:
<body onclick="parent.linkr('<% response.write IP %>');" onload="...
0
 
LVL 15

Expert Comment

by:Tomarse111
Comment Utility
Ok I've changed your linkr function slightly to use getElementById instead of document.frames. This seems to work for me now but could you test to see if the alert is being fired when you click in your iframe. At least that way we know that the function is being reference correctly from the iframe src (view.asp).
<script language="Javascript">

function linkr(IP){

	alert(IP);

  	document.getElementById('iframeA').src = "http://" + IP + "/control/control?set&section=general&size=640x480";

  	document.getElementById('iframeB').src = "http://" + IP + "/control/rcontrol?action=ledsoff";

}

</script> 

Open in new window

0
 
LVL 15

Expert Comment

by:Tomarse111
Comment Utility
ahh yeah and as tim suggested, single quotes need adding around your ip in the function as it is a string you are passing back
0
 
LVL 1

Author Closing Comment

by:Steynsk
Comment Utility
Thanks Experts,

This was what I was looing for. Have a nice weekend.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now