SideSearch (john boiles dot com)

Sep222009

SideSearch

This is a snippet and acompanying Javascript to put an expandable search box in the left side of the page. It consists of a snippet named SideSearch, sidesearch.js, and sidesearch.css. Sidesearch.js and sidesearch.css by default are placed in /assets/js. This script requires jQuery. You'll need to add your own images or formatting to sidesearch.css.

Here's the snippet [[SideSearch]] (description: A sliding side searchbar)


<?php
//Include necessary js: mootools and the js to animate the side-search
# Register the necessary script, this allows the required js to only be included on pages that use it
$baseUrl = $modx->getConfig('base_url');
$modx->regClientStartupScript($baseUrl.'assets/js/jquery-1.3.2.min.js');
$modx->regClientStartupScript($baseUrl.'assets/js/sidesearch.js');
$modx->regClientCSS($baseUrl.'assets/js/sidesearch.css');

?>
<div id="SideSearchContainer">
<div id="SideSearch">
<div id="SideSearchButton"><img src="<?php echo $baseUrl; ?>assets/snippets/sidesearch/search.gif"></div>
<div id="search">[[AjaxSearch? &AS_landing=`8` &ajaxSearch=`0`]]</div>
</div>
</div>

This is sidesearch.js


var $j = jQuery.noConflict();


// showSideSearch()
// Slide the sideSearch onto the screen by setting margin to zero
function showSideSearch(){
    $j("#SideSearch").animate({left: "0"}, "fast");
    //Create an overlay using which the user can click elsewhere to close the search
    var objOverlay = document.getElementById('overlay2');
    objOverlay.style.height = '100%';
    objOverlay.style.display = 'block';
    visible = true;
}

// hideSideSearch()
// Slide the sideSearch off screen by setting margin negative
function hideSideSearch(){   
    $j("#SideSearch").animate({left: "-260px"}, "fast");
    //Hide the overlay
    var objOverlay = document.getElementById('overlay2');
    objOverlay.style.height = '0%';
    objOverlay.style.display = 'none';
    visible = false;
}

// toggleSideSearch()
// Toggles the visibility of the sideSearch
var visible = false;
function toggleSideSearch(){
    if(!visible){
        showSideSearch();
    } else {
        hideSideSearch();
    }
}

// Set up events
$j(document).ready(function(){
	
	// pullling this from lightbox v1 code
    // create overlay div that is used to detect clicks outside elements that load on top of the page
    var objOverlay = document.createElement('div');
    objOverlay.setAttribute('id','overlay2');
    objOverlay.style.display = 'none';
    objOverlay.style.position = 'absolute';
    objOverlay.style.top = '0';
    objOverlay.style.left = '0';
    objOverlay.style.zIndex = '91';
    objOverlay.style.width = '100%';
    var objBody = document.getElementsByTagName('body').item(0);
    objBody.insertBefore(objOverlay, objBody.firstChild);
    
    $j("#overlay2").click(function() {
        hideSideSearch();
        return false;
    });
    $j("#SideSearchButton").click(function(){
        toggleSideSearch();
    });
});

and lastly, sidesearch.css


#SideSearch {

position:fixed;
top: 40%;
float: left;
left:-260px;
background-image:url(/assets/snippets/sidesearch/searchback.gif);
text-indent: 0px;
overflow-x: hidden;
overflow-y: hidden;
height: 94px;
width: 300px;
z-index: 100;
}

#SideSearch:hover{
    width: 310px;
}

#SideSearch form {
float: left;
margin: 10px;
}

#SideSearchButton {
float: right;
}

.ajaxSearch_intro {
display: none;
}

#search {
width:210px;
padding-top:5px;
margin-right:20px;
}

#ajaxSearch_form fieldset{
border: none;
font-size: 120%;
}

#ajaxSearch_submit {
float:right;
}

input#ajaxSearch_input {
	border: 2px solid #131913;
	background: url(/assets/templates/newgreen/formgradient.png) repeat-x #FFFFFF;
	font-family: tahoma, helvetica, sans-serif;
	font-style: normal;
	font-size: 100%;
}