1 of 2
1
     
 
Codename: The Seeker
Posted: 12th July 2009 06:30 PM

seeker.jpg

The Seeker
Animated Searchbar Snippet Pack and Workshop

If you’ve been looking under chairs and tables, trying to find the key to the pop-up searchbar fable… then your search is over. The Seeker is here. And it’ll help you find what you’re after. With style.

Visit The Seeker’s dedicated website where you can learn how to easily create your own animated searchbars and incorporate them into your RapidWeaver projects.

In The Workshop You Will Learn How To:

◦ Work with Snippets
◦ Create Your Own Snippets
◦ Combine HTML, CSS and jQuery
◦ Move your parts with Fresh Me’s Move Parts Snippet
◦ Enhance Your Seeker Searchbar with RapidSearch
◦ Easily Create Your Own Animated Searchbars

Download the Seeker Project Pack and use the included Photoshop templates to create and customise your own searchbar styles or choose from more than fifty ready-to-use styles. 

Snippet Pack Contents:

◦ 1 Searchbar jQuery Header Snippet
◦ 1 Searchbar HTML Snippet
◦ 1 Searchbar HTML (RapidSearch) Snippet
◦ 1 Fresh Me Move Parts Snippet
◦ 1 Searchbar CSS Snippet
◦ 58 Search Icons
◦ 3 Search Icon PSDs
◦ 50 Searchbar PNGs
◦ 3 Searchbar PSDs
◦ 1 RapidSearch 3 Demo Plugin
◦ 1 RapidWeaver Project File
◦ 1 Tutorial URL

So here it is, RapidWeaver Central’s first workshop. Have fun.

Marten

#1.  Posted: 12th July 2009 06:53 PM

Two words. Absolutely awesome.

Cheers,
Conrad

 Signature 

http://www.zooadventurer.com a traveler stuck at home

#2.  Posted: 12th July 2009 09:42 PM

Very nice implementation.  Thanks for this!  Laugh

#3.  Posted: 12th July 2009 09:46 PM

@marten Great job! Very nice and extremely helpful tutorial for those needing to implement search on a RapidWeaver website.

Best,
Josh

 Signature 

Josh Lockhart
Professional RapidWeaver Themes and Plugins
Browse my RapidWeaver themes | Subscribe to my weblog | Watch my tutorials

#4.  Posted: 12th July 2009 10:07 PM

Very many thanks for this Marten - brilliant!

Best regards,

Pete

 Signature 

Formula for success: Rise early, work hard, strike oil.  J P Getty.

Alternatively… put your feet up and play with this...

#5.  Posted: 12th July 2009 10:13 PM

Thanks for this huge effort: I am looking forward to having a few spare hours to take a look at the workshop!

#6.  Posted: 12th July 2009 10:41 PM

Thanks Marten!!

#7.  Posted: 13th July 2009 12:55 AM

Very nice! Thanks for sharing.

#8.  Posted: 13th July 2009 01:04 AM

Marten....Two words: You da Man!

Math is not my strong subject Wink

...and the site for The Seeker is awesome too!

Brian

 Signature 

Come on over to my Stacks Store, El Stacko.... or else!

Get some of the coolest, most eye-catching stacks available.
Add the ”wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!

#9.  Posted: 13th July 2009 02:21 AM

This looks SWEET! Downloaded. Will have to give it a try.

Thanks Marten.

 Signature 

Visit myRapidWeaver
Hot Links - Plug-Ins Page & Theme Designers
Join me @ SupportCasts & MacSupportCasts
{ old forum post count = 6128 }

#10.  Posted: 13th July 2009 02:47 AM

Just an awesome amount of work you’ve put into this, Marten. And to echo Brian, the Seeker website is killer. looking forward to using this. Great work.

Jamie

 Signature 

Warm regards,

Jamie
web3media.ca

#11.  Posted: 13th July 2009 03:25 AM

Bloody marvelous work Marten. Many, many thanks.

 Signature 

Cheers,

Branko
Lazarov Design | 1001 Designs
I am using DreamHost Check them out! | Dropbox Great storage / sync tool! Signup for free!

#12.  Posted: 13th July 2009 05:21 AM

this is very cool, for a while i have been wanting to either try to build a plugin or have someone do it but basically have a search bar designer.  its something that has been missing for RW.  You could take a great plugin like rapidsearch, use the designer plugin to style the search bar how you want it and you are set.

I have styled a few of mine with CSS but for all the newbies and others that don’t have the time it would be awesome.  I am still learning how to use a combination of images and CSS to style a sharp search box, it really shouldn’t be this hard.  We have plugins for sliders, kwix, accordions, these are more involved than just styling a search box but not as important in my opinion.  just thinking out loud, great job on this one..

 Signature 

Hayden Christensen - To merely call him wooden is an affront to puppets everywhere…
Member:  LinkedIn Rapidweaver xperts group

#13.  Posted: 13th July 2009 08:05 AM

? i can’t see immages in this url:

http://www.workshop.rapidweavercentral.net/searchbar/variations/Apper/apper.html

it’s a problem of mine or......

Sad

#14.  Posted: 13th July 2009 09:34 AM

im loving this new plugin/snippet.  everyone needs to make a donation for this one.

i am trying to implement it on a new site im building.  it working perfectly except for a couple of issues, issues that im sure
other people will want answers for as well.  ive posted some screenshots and a link below to show what i am talking about.

http://outletpurse.com/designers/searchbar/searchbar.html

i just need three things to make it perfect:

1) how to put the term “search” level with the “search icon” i keep playing around with it and can’t make it work.
2) when the search bar pops up, it shifts downward, my logo text and the “Search” text im trying to align.
3) this one isn’t super important but i like this feature a lot.  thats the ability to get the “on click” function to work, in other words, when you click on the search box the text disappears so you can begin inputting your search term instead of having to highlight the “Search this site...” text and then type over it.  i have been able to use it on my personal site here:

http://mwarnold.com/

but not able to figure it out using seeker, it might be some sort of code conflict…

if anyone can help with any of these i will post the results to help other people as well.  thanks!

mark

Image Attachments

Untitled.jpgUntitled 2.jpgUntitled 3.jpg
Click thumbnail to see full-size image
 Signature 

Hayden Christensen - To merely call him wooden is an affront to puppets everywhere…
Member:  LinkedIn Rapidweaver xperts group

#15.  Posted: 13th July 2009 10:27 AM

Hi Mark,

1. If it was me, I’d probably integrate the search term in the graphic. I’ll add this as a feature request and if I get enough requests, I’ll add it in the next update.

2. I had the same problem with the Gotem theme at RapidWeaver Central. My solution was to ‘hardcode’ it into the index.html file. You can see how and where if you examine the source code.

3. You’re not the only one who has asked for this but the strange thing is it works perfectly for me. Nevertheless try the following HTML in place of your current code and see if that makes the difference. If it does I’ll update the snippet pack immediately.

<div id="seeker">
    <
div id="searchIcon"></div>
        <
div id="searchBar"
            <
form method="get" class="search" action="http://www.google.com/search" >
            <
input type="hidden" name="ie" value="utf-8" /> 
            <
input type="hidden" class="searchField" name="domains" value="http://www.rapidweavercentral.net/" /> 
            <
input type="hidden" class="searchField" name="sitesearch" value="http://www.rapidweavercentral.net/" />
            <
input name="query" type="search" class="searchField" autosave="search" results="10" onfocus="if (this.value=='Search') this.value = ''" onclick ="if (this.value=='Search') this.value = ''" onblur="if (this.value=='') this.value = 'Search'" type="text" value="Search"/> 
             </
form
        </
div
 </
div>

Marten

1 of 2
1