Viewing Single Post From: Add Search Form to Submenu

Viewing Single Post From: Add Search Form to Submenu
Nicola	Mar 25 2008, 05:53 AM
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.


Add Search Form to Submenu · User Created Codes