| 
    
     | 
       
        | Author |  |  
        | krommetje Super User
 
  
  
 Joined: December 29 2004
 Location: Netherlands
 Online Status: Offline
 Posts: 695
 | 
          Hey Guys!
           | Posted: February 16 2007 at 04:44 | IP Logged |   |  
           | 
 |  
 I was browsing and found a javascript which enables IE and Mozilla to work with tabs... Only I have to work on the Javascript-pages like tepicker.psp... these do not seem to work within a tab
 
 here is a screencap:
 
 
   
 interested in the sourcecode? Then I will post it in the repository...
 
 Update:
 Did some work on this,  3 tabs, one a a status screen, 2 for lights and shutters, this screen will run on my new touchscreen in the livingroom
 Peter
 
 Edited by krommetje - February 17 2007 at 00:45
 |  
        | Back to Top |       |  
        |  |  
        | dhoward Admin Group
 
  
  
 Joined: June 29 2001
 Location: United States
 Online Status: Offline
 Posts: 4447
 | 
          Peter,
           | Posted: February 19 2007 at 13:46 | IP Logged |   |  
           | 
 |  
 Definately post in the repository (as long as the code does not have restrictions against such activity).
 
 Took me a little while to find what I was looking for in your screenshot and then saw the tabs up in the toolbar.  Incredible that this can be done with some Javascript.
 
 Good find,
 
 Dave.
 
 |  
        | Back to Top |       |  
        |  |  
        | krommetje Super User
 
  
  
 Joined: December 29 2004
 Location: Netherlands
 Online Status: Offline
 Posts: 695
 | 
          Been away for a while due to things happening at work...
           | Posted: March 03 2007 at 05:14 | IP Logged |   |  
           | 
 |  I was sent back to school the last few weeks..
   
 Here is what I've got so far:
 
 
 
| Code: 
 
    
    | 
      
       | <html>
 <head>
 <title>PowerHome</title>
 <link rel=stylesheet type="text/css" href="ph.css">
 <script language="javascript">
 var cdp = 60;var cdt = cdp + 1;
 function f_cd(){cdt --;if(cdt <=  0){clearTimeout(counter);window.location.replace('http://192 .168.1.13/tabs.psp');return;}if(document.all)document.all.cd tt.innerText = cdt + " ";else  if(document.getElementById)document.getElementById("cdtt").i nnerHTML = cdt + " ";counter = setTimeout("f_cd()",1000);}
 function f_refresh(){if(document.all || document.getElementById){document.write('<span class=ht1r1c1e3><a  href="javascript:window.location.replace(\'http://192.168.1. 13/tabs.psp\')">Refresh</a>  in <b id="cdtt">' + cdt + ' </b> seconds <i id=arstop>(<a  href="javascript:f_stop()">Stop</a>)</i></ span>');f_cd();}else document.write('<span class=ht1r1c1e3><a  href="javascript:window.location.replace(\'http://192.168.1. 11/phindex.psp\')">Refresh</a></span>');}
 function  f_stop(){clearTimeout(counter);if(document.all)document.all. arstop.innerText = "";else  if(document.getElementById)document.getElementById("arstop") .innerHTML = "";
 }
 </script></head>
 <body bgcolor="#ffffff">
 <table cellpadding=0 cellspacing=0 class=ht1>
 <tr class=ht1r1>
 <td align=left valign=bottom class=ht1r1c1><img src="http://192.168.1.13/ph.gif" border=0 class=ht1r1c1e1><span class=ht1r1c1e2>   Version: <%ph_getversion()%>    </span><script>f_refresh()</script& gt;
 </tr></table>
 <table width=100% cellpadding=0 cellspacing=2 class=ht2>
 <tr class=ht2r1>
 <td align=left valign=center bgcolor="#00ff00" class=ht2r1c1><span class=ht2r1c1e1><b>Time:</b> </span><span class=ht2r1c1e2><%dayname(today()) + " " + string(today(),"mmm dd, yyyy") + " " + string(now(),"hh:mm:ss")%>   </span><span class=ht2r1c1e3><b>Sunrise:</b> </span><span  class=ht2r1c1e4><%string(ph_getsuntime(today(),1))%> ;   </span><span class=ht2r1c1e5><b>Sunset:</b> </span><span  class=ht2r1c1e6><%string(ph_getsuntime(today(),2))%> ;   </span><span class=ht2r1c1e7><b>Dawn:</b> </span><span  class=ht2r1c1e8><%string(ph_getsuntime(today(),3))%> ;   </span><span class=ht2r1c1e9><b>Dusk:</b> </span><span  class=ht2r1c1e10><%string(ph_getsuntime(today(),4))%&g t;</span></td>
 </tr>
 <tr class=ht2r2>
 <form method="get" action="/playmacro.psp"><td align=left valign=center class=ht2r2c1>Macro: <select name="id" size=1 class=ht2r2c1e1>
 <option value="">
 <%ph_rtne(ph_sqlselect(1,"select id from macroheader where list_include = 1 order by 1") + ph_setvar_a(1,1,1) + ph_doloop("ph_concatvar(1,2,'<option value=~~"' + ph_getdata(1,ph_getvar_n(1,1),1) + '~~">' + ph_getdata(1,ph_getvar_n(1,1),1) + '~r~n') + ph_rtne(ph_addtovar(1,1,1))","ph_getvar_n(1,1) <= ph_getsqlrows(1)")) + ph_getvar_s(1,2) + ph_rtne(ph_sqldestroy(1))%>
 </select>
 <input type="submit" value="Play" class=ht2r2c1e2>
 </td>
 </form>
 </tr>
 <tr class=ht2r3>
 <td align=left valign=center class=ht2r2c1><%ph_rtne(ph_setvar_s(1,3,"") + ph_forloopwinc("ph_setvar_s(1,2,profilestring(ph_getphdir() + '\pwrhome.ini','webserver','menutitle' + ph_getvar_s(1,1),'')) + if(ph_getvar_s(1,2) <> '',len(ph_concatvar(1,3,'<a href=~~"' + profilestring(ph_getphdir() + '\pwrhome.ini','webserver','menuurl' + ph_getvar_s(1,1),'') + '~~">' + ph_getvar_s(1,2) + '</a> | ')),0)",1,20,1,1)) + if(right(ph_getvar_s(1,3),3) = " | ",left(ph_getvar_s(1,3),len(ph_getvar_s(1,3)) - 3),ph_getvar_s(1,3))%></td>
 </tr>
 </table>
 <tr class=ht1r1>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ;
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <link rel="stylesheet" type="text/css" href="ajaxtabs.css" />
 
 <script type="text/javascript" src="ajaxtabs.js">
 
 </script>
 </head>
 
 <body>
 <br><br>
 <ul id="maintab" class="shadetabs">
 <li class="selected"><a href="#default" rel="ajaxcontentarea">Status</a></li>
 <li><a href="lampen.psp" rel="ajaxcontentarea">verlichting</a></li>
 <li><a href="rolluiken.psp" rel="ajaxcontentarea">Rolluiken</a></li>
 </ul>
 <div id="ajaxcontentarea" class="contentstyle"><p>
 <font color="Blue" size="4" face="MS Sans Serif">Centrale Status:<br>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Telefoonlamp <% if( [X10STATK1] = 1, '<right><b>:<IMG SRC="off.gif"></b></center>', '<right><b>:<IMG SRC="On.gif"</b></center>') %>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Vuurtorenlamp<% if( [X10STATK3] = 1, '<right><b>:<IMG SRC="off.gif"></b></center>', '<right><b>:<IMG SRC="On.gif"</b></center>') %>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Eetkamerlamp <% if( [X10STATK2] = 1, '<right><b>:<IMG SRC="off.gif"></b></center>', '<right><b>:<IMG SRC="On.gif"</b></center>') %>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Eetkamerlamp-2 <% if( [X10STATM1] = 1, '<right><b>:<IMG SRC="off.gif"></b></center>', '<right><b>:<IMG SRC="On.gif"</b></center>') %>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Bedlamp Maike: <font face="MS Sans Serif" color=blue size=2>Dimlevel: <font face="MS Sans Serif" color=yellow size=2><%int(PH_GETX10LEVEL("M2"))%>%<br>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Zonneboiler<% if( [X10STATV1] = 1, ':<IMG SRC="off.gif"></b>', ':<IMG SRC="On.gif"</b>') %><br>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Centrale Verwarming<% if( [X10STATW1] = 1, ':<IMG SRC="off.gif">', ':<IMG SRC="On.gif"') %><BR>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Tapwater: <font color="RED" size="6" face="DS-Digital"><% case (len (mid("{SENSOR2}",1 ,4)) when 3 then {SENSOR2}/10 when 2 then {SENSOR2} when 1 then {SENSOR2} else {SENSOR2}/100) %><BR>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">CVwater: <font color="RED" size="6" face="DS-Digital"><% case (len (mid("{SENSOR3}",1 ,4)) when 3 then {SENSOR3}/10 when 2 then {SENSOR3} when 1 then {SENSOR3} else {SENSOR3}/100) %><BR>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Binnen: <font color="RED" size="6" face="DS-Digital"><% case (len (mid("{SENSOR1}",1 ,4)) when 3 then {SENSOR1}/10 when 2 then {SENSOR1} when 1 then {SENSOR1} else {SENSOR1}/100) %><BR>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Zonneboiler: <font color="RED" size="6" face="DS-Digital"><% case (len (mid("{SENSOR0}",1 ,4)) when 3 then {SENSOR0}/10 when 2 then {SENSOR0} when 1 then {SENSOR0} else {SENSOR0}/100) %><BR>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Luchtvochtigheid:<font color="RED" size="6" face="DS-Digital"><% "{CURHUMIDITY}" %><BR>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Voordeur: <% if( [X10STATK4] = 1, '<IMG SRC="luikdicht.gif">', '<IMG SRC="luikopen.gif"') %>
 <font color="#FFFFFF" size="2" face="MS Sans Serif">Achterdeur: <% if( [X10STATK5] = 1, '<IMG SRC="luikdicht.gif">', '<IMG SRC="luikopen.gif"') %><BR>
 </p>
 </div>
 
 <script type="text/javascript">
 //Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
 startajaxtabs("maintab")
 
 </script>
 </body>
 </html>
 
 |  |  |  
 Now: I'd like to add 2 buttons into the Main Tab which functions as a statusscreen, each one is a macro.. how do I do this inside a Javascript tab?
 
 Any ideas Guys?
 
 Peter
 |  
        | Back to Top |       |  
        |  |  |  |