Sidehistorik
...
Kodeblok |
---|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- SlideShow v1.0 Troy Wolf <troy@troywolf.com> Simply define your "slides" in the javascript slides[] array below. --> <html> <head> <title>SiteShow 1.0</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <style> /* Change body background-color to change fade out color. */ body.siteshow { margin:0; padding:0; background-color:#000000; } #menu { font-family:Arial; font-size:9pt; display:none; opacity:0.00; -mozopacity:0.00; filter:alpha(opacity=0); position:absolute; top:10px; left:10px; padding:5px; background-color:#000000; color:#FFFFFF; border:3px dotted #999999; } #menu a { color:#ffffff; } #menu a:hover { text-decoration:none; } #title { font-size:11pt; font-weight:bold; letter-spacing:2; } #slides { font-size:9pt; line-height:16pt; } .button { width:60px; font-size:9pt; letter-spacing:1; } </style> <script type="text/javascript"> var current_idx = 0; var slides = new Array(); var menuwin; var show_timer; var menu_timer; var menu; var content; var loaded = true; // Define your "slides". 3 values for each are: // 1. Duration in seconds. // 2. Title to be used in menu. // 3. Source URL. Can be full URI or a relative URL. slides[1] = new Array(1560, "WAMP HOWTOCameras", "http://wwwsplunk.troywolf.com/articles/wamp_howto.htmmos-eisley.dk/en-GB/app/moseisleymonitoring/kamerarer_html?earliest=0&latest="); slides[2] = new Array(1560, "PHPHome ProxyMonitor", "http://wwwsplunk.troywolfmos-eisley.comdk/articlesen-GB/phpapp/class_http/proxy.phpshomemonitor/outbound_traffic?earliest=-24h%40h&latest=now&form.owner=*"); slides[3] = new Array(1560, "HTTP classPingtimes", "http://wwwsplunk.troywolfmos-eisley.comdk/articlesen-GB/phpapp/class_http/moseisleymonitoring/pingtimes?earliest=0&latest="); slides[4] = new Array(1560, "SessionPage classOverview", "http://wwwsplunk.troywolf.com/articles/php/class_session/mos-eisley.dk/en-GB/app/moseisleymonitoring/pageview_overview?earliest=0&latest="); slides[5] = new Array(1560, "RSSGeo Consumptionoverview", "http://wwwsplunk.troywolfmos-eisley.comdk/articlesen-GB/phpapp/class_xmlmoseisleymonitoring/rss_example.php"); slides[6] = new Array(15, "PHP Exchange WebDAV", "http://www.troywolf.com/articles/php/exchange_webdav_examples.php"); slides[7] = new Array(15, "vCard class", "http://www.troywolf.com/articles/php/class_vcard/geoview_over_wwwmoseisleydk?earliest=0&latest="); function MenuInit() { var html = ""; for(idx=1; idx<slides.length; idx++) { html += '<a href="javascript:Navigate('+idx+')">' + slides[idx][1] + "</a><br />\n"; } document.getElementById("slides").innerHTML = html; menu.style.display = "block"; } function MenuShow() { clearTimeout(menu_timer); opacity('menu', 0, 90, 500); menu_timer = setTimeout("MenuHide()", 3500); } function MenuHide() { opacity('menu', 90, 0, 500); } function Pause() { clearTimeout(show_timer); document.getElementById('play').style.display = "block"; document.getElementById('pause').style.display = "none"; } function Navigate(slide_idx) { clearTimeout(show_timer); if (current_idx == 0) { if (!slide_idx) { slide_idx = 1; } current_idx = slide_idx; content.src = slides[current_idx][2]; document.getElementById('play').style.display = "none"; document.getElementById('pause').style.display = "block"; show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000); return; } if (slide_idx) { current_idx = slide_idx; content.src = slides[current_idx][2]; document.getElementById('play').style.display = "block"; document.getElementById('pause').style.display = "none"; return; } loaded = false; current_idx++; if ( current_idx == slides.length) { current_idx = 1; } opacity('content', 100, 0, 500); document.getElementById('play').style.display = "none"; document.getElementById('pause').style.display = "block"; show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000); return; } function opacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } if (opacEnd == 0) { setTimeout("FadeOutTrigger('"+id+"')",((timer-1) * speed));; } //if (opacEnd == 0) { FadeOutTrigger(id); } } else if(opacStart < opacEnd) { if (opacStart == 0) { FadeInTrigger(id); } for(i = opacStart; i <= opacEnd; i++) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } } //change the opacity for different browsers function changeOpac(opacity, id) { var object = document.getElementById(id).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } function FadeOutTrigger(id) { //alert('FadeOut: '+id); switch(id) { case "menu": document.getElementById(id).style.display = "none"; break; case "content": content.src = slides[current_idx][2]; //setTimeout("opacity('content', 0, 100, 500)", 1000); break; default: break; } } function FadeInTrigger(id) { //alert('FadeIn: '+id); switch(id) { case "menu": document.getElementById(id).style.display = "block"; break; case "content": //opacity('content', 0, 100, 500); break; default: break; } } function FadeInContent() { if (!loaded) { opacity('content', 0, 100, 500); loaded = true; } } function LoadTrigger() { //self.resizeTo(1366,768); menu = document.getElementById('menu'); content = document.getElementById('content'); Navigate(); MenuInit(); MenuShow(); } window.onload = LoadTrigger; </script> </head> <body class="siteshow"> <iframe id="content" name="content" style="width:100%; height:100%;" frameborder="no" scrolling="auto" src="" onmouseover="MenuShow();" onload="FadeInContent();" ></iframe> <div id="menu"> <div id="title">SiteShow Menu</div> <div id="slides"> </div> <p> <input id="pause" class="button" style="display:block;" type="button" value="pause" onclick="Pause()" /> <input id="play" class="button" style="display:none;" type="button" value="play" onclick="Navigate()" /> </p> </div> </body> </html> |