Solved

Clickable table with javascript action in two (hidden) Iframes

Posted on 2008-10-31
8
477 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
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
 
LVL 1

Expert Comment

by:tim-cap47
ID: 22848957
i think you forgot to quote something
put quotes around:
<% response.write IP %>
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

948 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

21 Experts available now in Live!

Get 1:1 Help Now