The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

advanced search

View previous topic View next topic Go down

Solved advanced search

Post by omarpop23 on April 11th 2016, 3:29 pm

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


Last edited by omarpop23 on April 14th 2016, 4:30 am; edited 1 time in total

omarpop23
Forumember

Male Posts : 144
Reputation : 3
Language : Arabic
Location : Egypt

http://egyover.ahlamontada.com

Back to top Go down

Solved Re: advanced search

Post by new.moon on April 14th 2016, 3:12 am

hello @omarpop23
if you are fromEgypt, you can get help from help.ahlamontada.comNext time :rose:
------------
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;
}

Wink

new.moon
Forumember

Male Posts : 59
Reputation : 9
Language : En/Ar

http://help.ahlamontada.com/u152001

Back to top Go down

Solved Re: advanced search

Post by omarpop23 on April 14th 2016, 3:36 am

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

omarpop23
Forumember

Male Posts : 144
Reputation : 3
Language : Arabic
Location : Egypt

http://egyover.ahlamontada.com

Back to top Go down

Solved Re: advanced search

Post by new.moon on April 14th 2016, 4:00 am

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 linkTo check.

new.moon
Forumember

Male Posts : 59
Reputation : 9
Language : En/Ar

http://help.ahlamontada.com/u152001

Back to top Go down

Solved Re: advanced search

Post by omarpop23 on April 14th 2016, 4:30 am

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

omarpop23
Forumember

Male Posts : 144
Reputation : 3
Language : Arabic
Location : Egypt

http://egyover.ahlamontada.com

Back to top Go down

Solved Re: advanced search

Post by SLGray on April 14th 2016, 9:28 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum