Add Search Form to Submenu

This board has been archived and is no longer accepting new questions. If you have a support question for your ZetaBoard, please visit us at the new support board. Registration is free and easy.

Visit the NEW ZetaBoards Support forum!

Pages:
1
2

Add Search Form to Submenu
Topic Started: Mar 25 2008, 05:53 AM (2,266 Views)
Nicola	Mar 25 2008, 05:53 AM Post #1
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	I made this for Kieran a few days ago, thought I'd post it in case anyone else wanted it. I am fully aware I am very new to Javascript/jQuery, so don't attempt to patronise me, please. Whatever you use, they go at the end of the Theme Layout or 'Below the Board' Board template box. There are several ways: Add AFTER links Code: `<script type="text/javascript"> //<![CDATA[ $("#submenu").append('<form action="' + main_url + 'search/" method="get"><input type="hidden" name="c" value="1" /><input type="hidden" name="f" value="-1" /><input type="text" name="q" value="Search..." onclick="this.value=\'\'" /> <button type="submit">Go</button></form>'); //]]> </script>` Add BEFORE links Code: `<script type="text/javascript"> //<![CDATA[ $("#submenu").prepend('<form action="' + main_url + 'search/" method="get"><input type="hidden" name="c" value="1" /><input type="hidden" name="f" value="-1" /><input type="text" name="q" value="Search..." onclick="this.value=\'\'" /> <button type="submit">Go</button></form>'); //]]> </script>` Add to Left of Submenu Doing this makes it 'stick' to the left side of the #submenu, and the links to the right. First, you'd need to add this CSS to the end of the Theme Appearance. If you feel able, you can put the height for the #submenu where it first occurs in the CSS. The height is needed since the contents of the #submenu will be floated. Code: `#submenu { height: 20px; } #submenu .left, #submenu .right { vertical-align: middle; } #submenu .right { padding-top: 3px; }` Depending on the theme you're using, you might want to adjust the height/padding to suit your requirements. The code: Code: `<script type="text/javascript"> //<![CDATA[ $('<span class="right"></span>').appendTo('#submenu'); $('#submenu a').appendTo('#submenu .right'); $('#submenu').prepend('<span class="left"><form action="' + main_url + 'search/" method="get"><input type="hidden" name="c" value="1" /><input type="hidden" name="f" value="-1" /><input type="text" name="q" value="Search..." onclick="this.value=\'\'" /> <button type="submit">Go</button></form></span>'); //]]> </script>` If you wanted the links to stick to the left, and the search box to stick to the right, just swap each left for right and each right for left in the CSS and code. Attached to this post: 1.png (6.28 KB) 2.png (6.29 KB) 3.png (6.25 KB) Edited by Nicola, Mar 25 2008, 12:31 PM.



mavrick	Mar 25 2008, 07:16 AM Post #2
Member Posts: 6 Group: Members Member #2,884 Joined: Mar 6, 2008 What Browser are you using? Internet Explorer 8	I was hoping someone would make a code like this thanks Nicola!



RyuraGS	Mar 25 2008, 12:20 PM Post #3
Member Posts: 428 Group: Members Member #167 Joined: Nov 28, 2007 What Browser are you using? Chrome	Nicola, there's a global variable called main_url. This has your boardname in it. ex: Code: `<script type="text/javascript"> //<![CDATA[ $("#submenu").append('<form action="' + main_url + 'search/" method="get"><input type="hidden" name="c" value="1" /><input type="hidden" name="f" value="-1" /><input type="text" name="q" value="Search..." onclick="this.value=\'\'" /> <button type="submit">Go</button></form>'); //]]> </script>`



Nicola	Mar 25 2008, 12:21 PM Post #4
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	Thanks for that, I'll add it



BRYN	Mar 25 2008, 09:08 PM Post #5
The Guy with the Things for the Stuff Posts: 221 Group: Members Member #378 Joined: Dec 3, 2007 What Browser are you using? Firefox 2	~~Just to add, wouldn't seeing the Search link in the submenu be pointless then?~~ I still think that having the words "Search" in the same area as a Search bar might make confusion. So, how about a solution that removes the search link, but adds a styled button labeled "Advanced"? Instructions: Spoiler: click to toggle First, find the following strand in Nicola's code: Code: `$('#submenu').prepend(` Then, at the end, before the '); of the "BEFORE / AFTER links" codes, or the </span>'); in the "Left of Submenu" code, add the following: Code: `<form method="link" action="' + main_url + 'search/"><button type="submit">Advanced</button></form>` This will add a new button (to the right of the Go button), that'll link to the Search page. Next, before the last 2 lines of the code: Code: `//]]> </script>` Add this: Code: `$("div#submenu a:contains('Search')").remove();` This will remove the old Search link. If the above doesn't help explain it... PM me I guess. Edited by BRYN, Mar 26 2008, 06:25 PM.



.DeleTeD.	Mar 26 2008, 07:13 AM Post #6
Member Posts: 350 Group: Members Member #1,169 Joined: Dec 31, 2007 What Browser are you using? Firefox 2 ZB Board URL glitchgods.com	nice code, ill be using this.



Nicola	Mar 26 2008, 04:10 PM Post #7
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	BRYN Mar 25 2008, 09:08 PM Just to add, wouldn't seeing the Search link in the submenu be pointless then? It's a quick search.. a shortcut. There was actually a quick search box in the original ZB design, but it went. How do you suppose they search via specific forums if they can't specifically access the search page?



Viral	Mar 26 2008, 04:14 PM Post #8
i'm stanley nao Posts: 1,374 Group: Members Member #269 Joined: Dec 1, 2007 What Browser are you using? Chrome ZB Board URL http://s1.zetaboards.com/zeta_services	Nice, but how about this: Next to the Quick Search, include an arrow. When clicking the arrow, an option select thing will appear in which you can use to search through forums. Or am I going a bit too far? If you do try it, don't forget the .toggle() function.



Nicola	Mar 26 2008, 04:31 PM Post #9
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	Yes that is going a bit far. This was a code someone over MSN politely asked me if I could do.. it's short, simple, and is just a shortcut to the actual search. I'm not changing it to sing and dance. I'm also not a fan of utterly mutilating ZB's appearance and changing it's features.



BRYN	Mar 26 2008, 06:29 PM Post #10
The Guy with the Things for the Stuff Posts: 221 Group: Members Member #378 Joined: Dec 3, 2007 What Browser are you using? Firefox 2	Nicola Mar 26 2008, 04:31 PM I'm not changing it to sing and dance. I'm also not a fan of utterly mutilating ZB's appearance and changing it's features. Well I like to sing and dance! I updated my earlier post to remove the search link, and add a button next to the Go button that links to the Search Page. I did this because having a Search bar next to a Search button, might stop people from going to the Search page because a search bar is right there. Plus, I'm finicky like that...



1 user reading this topic (1 Guest and 0 Anonymous)


Go to Next Page
« Previous Topic · User Created Codes · Next Topic »

Pages:
1
2