advanced search

hey ,
my question is how to make advanced search like this



i can make HTML , CSS code but my problem how to make it poup when i click on it and hide when i click on it again

IF you want to see what is the problem in my Fourm

Here is URL: http://hamor-shabik.arab.st

hello @omarpop23
if you are from Egypt, you can get help from help.ahlamontada.com Next time 
------------
the problem you Just copy HTML With out javascript code !

Create a new javascript :

Placement : In all the pages
Javascript Code :

Code:

;$(function(){var lang={display_as:'<b>Display results as : </b>',posts:'Posts',topics:'Topics',tags:'<b>Hashtags : </b>',advanced:'<b>Advanced Search</b>',options_title:'Search options'},settings=document.createElement('DIV'),opts=document.createElement('A'),node=document.getElementById('search');if(!node)return;settings.style.display='none';settings.id='fa_search_settings';settings.innerHTML='<p>'+lang.display_as+'</p><p><input id="searchOptsPosts" type="radio" name="show_results" value="posts"/><label for="searchOptsPosts">'+lang.posts+'</label><input id="searchOptsTopics" type="radio" name="show_results" value="topics" checked="true"/><label for="searchOptsTopics">'+lang.topics+'</label></p><p><label for="searchOptsTags">'+lang.tags+'</label> <input id="searchOptsTags" type="checkbox" name="is_tag" value="tags"/></p><hr class="dashed"/><p><a href="/search">'+lang.advanced+'</a></p>';opts.href='#';opts.title=lang.options_title;opts.id='fa_search_opts';opts.onclick=function(){var settings=document.getElementById('fa_search_settings');settings.style.display=/none/.test(settings.style.display)?'block':'none';return false};node.search_keywords.onfocus=function(){var settings=document.getElementById('fa_search_settings');if(!/none/.test(settings.style.display))settings.style.display='none'};node.appendChild(opts);node.appendChild(settings)});

and add this code in css :

Code:

#fa_search_settings {
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 3px;
    box-shadow: 0 3px 9px rgba(0,0,0,0.175);
    color: #333;
    padding: 3px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 45px;
    width: 175px;
    z-index: 1;
}
#fa_search_settings:before {
    content: url(http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png);
    position: absolute;
    right: 130px;
    top: -10px;
}
#fa_search_settings p {
    font-size: 11px;
}

 

i though that no one can help me in http://help.ahlamontada.com
but next time i will ask you there thnk you

but this code not working well do you tested it @new.moon

sorry try this now, it's work with me :

Code:

$(function(){var lang={display_as:'<b>Display results as : </b>',posts:'Posts',topics:'Topics',tags:'<b>Hashtags : </b>',advanced:'<b>Advanced Search</b>',options_title:'Search options'},settings=document.createElement('DIV'),opts=document.createElement('A'),node=document.getElementById('search');if(!node)return;settings.style.display='none';settings.id='fa_search_settings';settings.innerHTML='<p>'+lang.display_as+'</p><p><input id="searchOptsPosts" type="radio" name="show_results" value="posts"/><label for="searchOptsPosts">'+lang.posts+'</label><input id="searchOptsTopics" type="radio" name="show_results" value="topics" checked="true"/><label for="searchOptsTopics">'+lang.topics+'</label></p><p><label for="searchOptsTags">'+lang.tags+'</label> <input id="searchOptsTags" type="checkbox" name="is_tag" value="tags"/></p><hr class="dashed"/><p><a href="/search">'+lang.advanced+'</a></p>';opts.href='#';opts.title=lang.options_title;opts.id='fa_search_opts';opts.onclick=function(){var settings=document.getElementById('fa_search_settings');settings.style.display=/none/.test(settings.style.display)?'block':'none';return false};node.search_keywords.onfocus=function(){var settings=document.getElementById('fa_search_settings');if(!/none/.test(settings.style.display))settings.style.display='none'};node.appendChild(opts);node.appendChild(settings)});

Do not delete that code if not working, give me your Forum link To check.

Solved
it wasn't work because i was putting Javascript in OVEARALL_HEADER Template