Clickable table with javascript action in two (hidden) Iframes

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

LVL 1
SteynskAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

tim-cap47Commented:
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
Tomarse111Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SteynskAuthor Commented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

tim-cap47Commented:
i think you forgot to quote something
put quotes around:
<% response.write IP %>
0
tim-cap47Commented:
single quotes:
<body onclick="parent.linkr('<% response.write IP %>');" onload="...
0
Tomarse111Commented:
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
Tomarse111Commented:
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
SteynskAuthor Commented:
Thanks Experts,

This was what I was looing for. Have a nice weekend.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.