[Fai-commit] r4659 - people/kugg/fai-gui

Tue Nov 6 21:55:47 UTC 2007

Author: kugg-guest
Date: 2007-11-06 21:55:47 +0000 (Tue, 06 Nov 2007)
New Revision: 4659

Added:
   people/kugg/fai-gui/bgfade.png
   people/kugg/fai-gui/search.js
Modified:
   people/kugg/fai-gui/template.html
   people/kugg/fai-gui/template_style.css
Log:
Added more dynamic base graphics which enables changeing background color (without redrawing all pics).
Added ajax support to searchform so that hints/headlines can be displayed while typing the searchfield for the fai guide.



Added: people/kugg/fai-gui/bgfade.png
===================================================================
(Binary files differ)


Property changes on: people/kugg/fai-gui/bgfade.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream

Added: people/kugg/fai-gui/search.js
===================================================================

--- people/kugg/fai-gui/search.js	                        (rev 0)
+++ people/kugg/fai-gui/search.js	2007-11-06 21:55:47 UTC (rev 4659)
@@ -0,0 +1,52 @@
+function hideSoon()
+{
+	document.getElementById("search").style.borderColor='#cccccc';
+	document.getElementById("search").style.backgroundColor='#ffffff';	
+	setTimeout ("hideHint()", 500);
+
+}
+
+function hideHint()
+{
+	document.getElementById("hint").innerHTML='';
+}
+
+function highlight(this_element)
+{
+	document.getElementById(this_element).style.borderColor='#010101';
+	document.getElementById(this_element).style.backgroundColor='#f6f0d0';
+
+
+	if (document.getElementById(this_element).value=="Search...")
+	{
+	document.getElementById(this_element).value='';
+	}
+}
+
+function ajaxSearch(question)
+{
+	var xmlHttp;
+	//Initial browser check
+	try
+	{
+		xmlHttp=new XMLHttpRequest();
+	}
+	catch (e)
+	{
+		alert("Your browser can not search in this form since it lacks ajax support.");
+		return false;
+	}
+
+	xmlHttp.onreadystatechange=function()
+	{
+		if(xmlHttp.readyState==4)
+		{
+			document.getElementById("hint").innerHTML=xmlHttp.responseText;
+		}
+	}
+
+	xmlHttp.open("GET","search.result",true);
+	xmlHttp.send(question);
+	alert(xmlHttp.readyState + document.searchform.g.value);
+
+}

Modified: people/kugg/fai-gui/template.html
===================================================================
--- people/kugg/fai-gui/template.html	2007-11-03 00:12:00 UTC (rev 4658)
+++ people/kugg/fai-gui/template.html	2007-11-06 21:55:47 UTC (rev 4659)
@@ -6,6 +6,7 @@
 		<link rel="StyleSheet" href="template_style.css" type="text/css" />
 		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 		<script type="text/javascript" src="styleswitch.js"></script>
+		<script type="text/javascript" src="search.js"></script>
 	</head>
 
 	<body>
@@ -19,8 +20,8 @@
 		<div id="searchbar">
 			<form class="searchform" action="http://google.uni-koeln.de/search?">
 				<fieldset class="searchform">
-					<input type="text" name="q" id="search" />
-					<input type="submit" value="Search" id="submit" />
+					<input type="text" name="q" id="search" value="Search..." onkeyup="ajaxSearch(this.value);" onblur="hideSoon(this.name);" onclick="highlight('search');" />
+					<br/><a id="hint" onclick="" href="http://google.uni-koeln.de/search?"></a>
 				</fieldset>
 			</form>
 		</div>

Modified: people/kugg/fai-gui/template_style.css
===================================================================
--- people/kugg/fai-gui/template_style.css	2007-11-03 00:12:00 UTC (rev 4658)
+++ people/kugg/fai-gui/template_style.css	2007-11-06 21:55:47 UTC (rev 4659)
@@ -1,7 +1,10 @@
 body {
 	font-family: verdana;
 	font-size: 100%;
-	background: url("bodyfade.png") repeat-x;
+	background: url("bgfade.png") repeat-x bottom #def;
+	background-position: 0% 100%;
+	background-attachment: fixed;
+	
 	margin:0px;
 }
 
@@ -21,7 +24,7 @@
 	vertical-align:top;
 }
 	
-#submit, #search {
+input, #search {
 	background-color:#ffffff; 
 	border:1px 
 	solid #cccccc; 
@@ -29,6 +32,11 @@
 	font-size:0.9em; 
 	width:150px;
 }
+input, #hint {
+	background-color:#ffffff;
+	border:0px;
+	
+}
 ul#top_bar_list {
 	margin:0px;
 	padding:0px;


