Solved

Clickable table with javascript action in two (hidden) Iframes

Posted on 2008-10-31
8
500 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 1

Expert Comment

by:tim-cap47
ID: 22848638
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
ID: 22848717
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
ID: 22848927
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 1

Expert Comment

by:tim-cap47
ID: 22848957
i think you forgot to quote something
put quotes around:
<% response.write IP %>
0
 
LVL 1

Assisted Solution

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

Expert Comment

by:Tomarse111
ID: 22848970
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
ID: 22848977
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
ID: 31511977
Thanks Experts,

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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

691 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