Author Marten Claridge
Codename: The Seeker
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.
The Seeker Animated Searchbar Snippet Pack and Workshop
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. The Snippet Pack contains:
- 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.
Animated jQuery Searchbar for Rapidweaver
If you look under the hood you'll notice a few changes. Although my initial code was inspired by Elixir Graphic's elegant Float theme I have now rewritten it from scratch using Messrs Karl Swedberg and John Chaffer's Learning jQuery 1.3 as my mentor and guide. But guess what? I still can't make it work in IE6 and IE7. Should that be news? Not in this decade. Should I even try to make it work? I'll let the fickle finger of fate pick that particular nose.
You'll also notice that I've incorporated Tobias Vogel's incredibly potent Moveparts snippet, which is a simple Javascript you can use to move elements to different parts of the page. If you haven't experimented with this script, I urge you to do so now because even if it doesn't make you a better lover it will certainly make you think you are. Meanwhile I'm working on the graphics.
jQuery Hidden Content Tutorial
Succumbing as I sometimes do to impulsive logic-warps that divert my thought processes down strange metaphysical wormholes of existential exploration, I decided to hide it away in a shadowy corner of the site where it could only be found by the accidental stumbler or the insanely curious.
Don't ask me why. Quantico's internal PSYCINT/101B report infers I am not solely responsible for my actions and that the voices in my head must take at least some of the blame. Of course I've heard their theories before, and while it may be true that my earlier websites made the disorganised crimescene of a frenzied psychopath appear structurally superior by comparison, I have moved on since then. I have sat up and snorted the coffee. My life is now governed by a 960 Grid System that keeps me chained to the atomic ley lines of design. To hell with existential freedoms. Break out the straightjackets. Imagination needs to escape something.
FancyBox Tutorial Code
For those of you following the FancyBox Tutorial — copy and paste the following code into the Custom Header pane of the Page Inspector:
<link
rel="stylesheet" type="text/css" href="assets/jquery.fancybox.css"
media="screen" />
<script
type="text/javascript" src="assets/jquery-1.3.2.min.js"></script>
<script
type="text/javascript" src="assets/jquery.easing.1.3.js"></script>
<script
type="text/javascript" src="assets/jquery.fancybox-1.2.0.js"></script>
<script
type="text/javascript">
$(document).ready(function() {
$("a#YOUR_ID_HERE").fancybox({
'hideOnContentClick': true });
$("a.YOUR_CLASS_HERE").fancybox({ 'zoomSpeedIn': 0,
'zoomSpeedOut': 0, 'overlayShow': true }); });
</script>

