Hi! My first real contribution
, hope it hasn't been covered before, it's a really neat touch that I thought I'd share.
Basically, insead of the standard search box/advanced search function which takes up a fair ol' bit of space, this puts a simple "Search" link which, when clicked, will open up the search in an overlapping layer on the page (example
http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm (click on Search DD on the LH menu above the categories).
Add the following code into skin1/customer/home.tpl directly under <HEAD>:
Code:
{literal}
<script type="text/javascript">
/***********************************************
* Overlapping Content link- б╘ Dynamic Drive (
www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobj, subobj){
if (document.getElementById){
var subobj=document.getElementById(subobj)
subobj.style.left=getposOffset(curobj, "left")+"px"
subobj.style.top=getposOffset(curobj, "top")+"px"
subobj.style.display="block"
return false
}
else
return true
}
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
</script>
{/literal}
Lastly, copy/paste the following bit of code into skin1/customer/sidesearch.tpl. This can be copied in its' entirety as I haven't yet modified the original until now:
Code:
{* $Id: sidesearch.tpl 2006/02/04 mteam *}
{capture name=menu}
Search
<DIV id="subcontent" style="position:absolute; display:none">
<div style="border: 9px solid orange; background-color: white; width: 300px; padding: 8px">
Search Our Site:</p>
<TABLE border="0" cellpadding="0" cellspacing="0">
<FORM method="POST" action="search.php" name="productsearchform">
<INPUT type="hidden" name="simple_search" value="Y">
<INPUT type="hidden" name="mode" value="search">
<INPUT type="hidden" name="posted_data[by_title]" value="Y">
<INPUT type="hidden" name="posted_data[by_shortdescr]" value="Y">
<INPUT type="hidden" name="posted_data[by_fulldescr]" value="Y">
<tr align=center>
<TD valign="middle">
<INPUT type="text" name="posted_data[substring]" size="16"
value="{$search_prefilled.substring|escape}">
</TD>
<TD valign="middle">
<A href="javascript: document.productsearchform.submit()">{include
file="buttons/search_head.tpl"}</A>
</TD>
</tr>
<tr align=center>
<TD colspan=2 height=25>
<U>{$lng.lbl_advanced_search}</U></TD>
</TR>
</FORM>
</TABLE>
<div align="right">
Close</div>
</div>
</DIV>
{/capture}
{ include file="menu.tpl" menu_title=$lng.lbl_search menu_content=$smarty.capture.menu}
For the header area search, replace the default code in skin1/customer/search.tpl with this:
Code:
{* $Id: search.tpl,v 1.6.2.2 2004/11/29 14:00:59 svowl Exp $ *}
Search
<DIV id="subcontent" style="position:absolute; display:none">
<div style="border: 9px solid orange; background-color: white; width: 300px; padding: 8px">
Search:</p>
<TABLE border="0" cellpadding="0" cellspacing="0">
<FORM method="POST" action="search.php" name="productsearchform">
<INPUT type="hidden" name="simple_search" value="Y">
<INPUT type="hidden" name="mode" value="search">
<INPUT type="hidden" name="posted_data[by_title]" value="Y">
<INPUT type="hidden" name="posted_data[by_shortdescr]" value="Y">
<INPUT type="hidden" name="posted_data[by_fulldescr]" value="Y">
<TR>
<TD width="20"></TD>
<TD class="TopLabel">{$lng.lbl_search}:</TD>
<TD valign="middle">
<INPUT type="text" name="posted_data[substring]" size="16" value="{$search_prefilled.substring|escape}">
</TD>
<TD valign="middle">
{include file="buttons/search_head.tpl"}
</TD>
<TD width="20"></TD>
<TD>
<U>{$lng.lbl_advanced_search}</U></TD>
</TR>
</FORM>
</TABLE>
<div align="right">
Close</div>
</div>
</DIV>
Another example
</p>
<DIV id="subcontent2" style="position:absolute; display:none">
<div style="border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px; padding: 8px">
Some content. Some content.
<div align="right">
Close</div>
</div>
</DIV>
The layout within the layer will obviously need "prettying up" a little to match your own site but this is simple enough to do. Obviously the code can be used for anything you wish to "hide away" and the good news is that all content is still readable by the search engines. Any questions, refer to the original code here:
http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm[/code]
FAQ
06-30-2006, 02:03 PM
Hide "Search" function within Popup Layer
