Jquery Category Search Input
How many times you had in your interface need for search with more complexity than one input field? We know that we had, and we did something about it.
Here is a deal, the approach is bit new but not revolutionary and we want to share it with you. Best implementation can be in bigger search option for any kind of search input you may require.
Markup
<script src="jquery.js" type="text/javascript"></script> <script src="jquert.alt.text.plugin.js" type="text/javascript"></script> <form method="post"> <div id="search-category"> <input name="category" type="hidden" value="All" /> <span>All</span> <span><a href="javascript:void(null)">Prime</a></span> <span><a href="javascript:void(null)">Ultima</a></span> <span><a href="javascript:void(null)">Delta</a></span> <span class="last"><a href="javascript:void(null)">Sigma</a></span></div> <div id="search-box"> <input id="q" title="Click to enter search query" alt="Search All..." name="q" type="textbox" /></div> <button class="verify {e:['#q'],s:'You must enter search query.'}">Search</button> </form>
Settings are in-page, no need for external js.
$(function() { // search categories $('#search-category span').click(function() { var category = $('a', this); if (category.length) { $('#search-category span').not(this).each(function() { $(this).html('<a href="javascript:void(null)">' + $(this).text() + '</a>'); }); var text = $(category).text(); $(category).parent().html(text); $('#search-category input').val(text); $('#search-box input').attr('alt', $('#search-category').attr('alt') + ' ' + text + '...') .attr('title', $('#search-box input')[0].hoverText).altText(); } }); // -- // alternative text on inputs - call from plugin $('#search-box input, .block-subscribe input').altText(); // -- });
And little bit of plugin that is created for this usage.
Jquery alt text plugin
// jquery.alttext plugin (function($) { $.fn.altText = function($options) { var opts = $.extend({}, $.fn.altText.settings, $options || {}); return $(this).each(function() { var $this = $(this); var o = $.meta ? $.extend({}, opts, $this.data()) : opts; this.valBackup = ''; this.focused = false; this.altText = $this.attr(o.source); this.hoverText = o.hoverState ? $this.attr(o.hoverSource) : null; if (o.hoverSource == 'title') { this.title = ''; } $(this).unbind(); $this.val(this.altText).css('color', o.inactiveColor) .focus(function() { this.focused = true; this.valBackup = $(this).val(); if (this.valBackup == this.altText || (this.valBackup == this.hoverText)) { $(this).val(''); } $(this).css($.extend({'color': o.activeColor}, o.activeCSS)); }) .blur(function() { this.focused = false; if ($(this).val() == '') { $(this).val(this.altText); } $(this).css($.extend({'color': o.inactiveColor}, o.inactiveCSS)); }) .hover ( function() { if (!o.hoverState) return; if (($(this).val() == '' || $(this).val() == this.altText) && !this.focused) { this.valBackup = $(this).val(); $(this).val(this.hoverText); } $(this).css($.extend({'color': o.hoverColor}, o.hoverCSS)); }, function() { if (!o.hoverState) return; if ($(this).val() == this.hoverText) { $(this).val(this.valBackup); } $(this).css($.extend({'color': this.focused ? o.activeColor : o.inactiveColor}, this.focused ? o.activeCSS : o.inactiveCSS)); } ); }); }; // isEmpty test function $.fn.isEmpty = function() { return ($(this).val() == '') || ($(this).val() == $(this)[0].altText) || ($(this).val() == $(this)[0].hoverText); }; // global settings $.fn.altText.settings = { source: 'alt', hoverState: true, hoverSource: 'title', hoverCSS: { 'font-style': 'italic' }, inactiveColor: '#666', inactiveCSS: { 'font-style': 'normal' }, activeColor: '#333', activeCSS: { 'font-style': 'normal' }, hoverColor: '#444' }; })(jQuery);
And now most importantly link for DEMO and SOURCE
Jquery Horizontal Ticker
To you all who love jQuery, we present to you small snippet of how we use browser supported marquee tag. Before we figured that in browser if you want to get cross browser compatibility there is no easy way to handle “ticker” functionality, we ended up with solution from ancient times of web.
Only downside of handling in this way is that you will use not so loved marquee tag, although in this way page will be valid, and browser will be very responsive on this behavior.
Here is short snippet :
<script src="jquery.js" type="text/javascript"></script> $(document).ready(function() { try { var ticker_holder = $('.ticker-holder').get(0); var ticker_text = $('.ticker').get(0); var ticker_pos = ticker_text.parentNode.offsetWidth; var ticker_data = $(ticker_holder).html(); $(ticker_text).parent().html('' + ticker_data + ''); $('#sub-nav').hover ( function() { $('marquee', this).get(0).stop(); }, function() { $('marquee', this).get(0).start(); } ); } catch (o) {} });
And you have DEMO of this at our playground.
Feel free to add your thoughts, so maybe we can update this solution in better way in some near future.
Tags: jQuery, open source