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
Konichiwa !
We were thinking rather to put company blog online bit later from site launch, however decision was made in favor and of you all. The idea of Haragei Blog is to show you all of nifty and super-cool stuff that we train in our Dojo.
To be honest this is mainly made for promotion and getting close to new and existing clients (oh my we have those), however idea is also about sharing insight that we got during our past work.
Community is a key in terms of evolving as professional , and now we have that hara ( belly,gut ) feeling , that we are ready to share to you all.
Beside articles about topics such as interface design and development, IA, actionscript, jquery and some cool back-end topics, we plan to post our personal thoughts about web industry. We like to think that this is a insight of how we think about internet business development that we so profound trust in.
We also believe that this is a best way to know each other, and let’s hope that this relationship will be everlasting ….
For all those who wants to look at our thoughts more closely we use twitter, so please follow us, for our not so daily thoughts.