Ajax Updates |
- Fancy Apple.com Style Search Suggestion
- MooTools Dropdown Menus With MenuMatic
- Captions and Sliding Boxes using jQuery
- uploadify – A file upload plugin using jQuery
| Fancy Apple.com Style Search Suggestion Posted: 29 Sep 2009 11:38 AM PDT Apple is known to create beautiful products (next to the needed functionality of course). I already wrote several articles on how you can transfer some amazing iPhone designs to your webbrowser, I own a MacBook Pro (which also looks pretty sleek) and many other products from Apple are well known for their amazing design. The website from Apple isn’t less: The layout is simple yet beautiful. Yet, one of the most awesome things about the website is the search functionality. It gives you suggestions (with images) about the several products they offer, making it really user-friendly. Today, we’re trying to recreate the effect from that website by creating a fancy apple.com-style search suggestion. Make sure you check out the demo (or visit Apple.com) to see this awesome effect work. This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial. IMPORTANT NOTE: Safari, Chrome and Opera are currently the only webbrowsers that support the drop shadow effect around the the search results. Other browsers will simply display the results without the drop shadow. This technique would be great if it were converted to a plugin for a CMS (WordPress/Joomla/Drupal etc.), but also just very cool to have on your website. The SQL dump looks like this: CREATE TABLE IF NOT EXISTS `categories` ( `cid` int(11) NOT NULL AUTO_INCREMENT, `cat_name` varchar(255) NOT NULL, `cat_url` text NOT NULL, PRIMARY KEY (`cid`) ); CREATE TABLE IF NOT EXISTS `search` ( `id` int(11) NOT NULL AUTO_INCREMENT, `cat_id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `img` varchar(255) NOT NULL, `desc` text NOT NULL, `url` text NOT NULL, PRIMARY KEY (`id`) ); I assume the names of the columns are pretty straight forward. You’ll need to fill in the data yourself (in the download, you can find all the INSERTS that can be found in the demo). Also, take note of the AUTO_INCREMENT from both id’s. Now that we have the data stored, we’ll need a front-end to place the data in. On to the next part! <div> <form id="searchform"> <div> What are you looking for? <input type="text" size="30" value="" /> </div> <div id="suggestions"></div> </form> </div> More interesting in the code above, is the (empty) divider with an id suggestions. We’ll fill up this divider later on with jQuery to place the actual found search results in. Even more interesting is the searchresults that we’re going to display. Here’s the HTML, I’ll explain it below. <p id="searchresults"> <span class="category">[CATEGORY_FROM_DATABASE]</span> <a href="[URL_FROM_DATABASE]"> <img alt="" src="search_images/[IMG_FROM_DATABASE]"/> <span class="searchheading">[HEADING_FROM_DATABASE]</span> <span>[TEXT_FROM_DATABASE]</span> </a> <a href="[URL_FROM_DATABASE]"> <img alt="" src="search_images/[IMG_FROM_DATABASE]"/> <span class="searchheading">[HEADING_FROM_DATABASE]</span> <span>[TEXT_FROM_DATABASE]</span> </a> <!-- more items --> <span class="category">Webdesign</span> <a href="[URL_FROM_DATABASE]"> <img alt="" src="search_images/[IMG_FROM_DATABASE]"/> <span class="searchheading">[HEADING_FROM_DATABASE]</span> <span>[TEXT_FROM_DATABASE]</span> </a> <!-- more categories --> <span class="seperator"> <a href="http://www.marcofolio.net/sitemap.html">Nothing interesting here? Try the sitemap.</a> </span> </p> * #searchresults – Main container to place the search results in. On to some CSS styling and make it look a lot more pretty! CSS: /* HTML ELEMENTS */ body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-color:#efefef; background-image:url(../images/bg.jpg); } /* SEARCH FORM */ #searchform { margin:50px 200px; font-size:18px; } #searchform div { color:#eeeeee; } #searchform div input { font-size:18px; padding:5px; width:320px; } #suggestions{ position: relative; left:235px; width:320px; display:none; } Nothing really fancy going on over here, except for the #suggestions. As you can see, the display is set to none. Like I said, we’ll fill that container using jQuery but we’ll also show it (fade it in) using the javascript framework. We’ll get to that later.  Related Listings:
| |||||
| MooTools Dropdown Menus With MenuMatic Posted: 29 Sep 2009 10:42 AM PDT MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system. <link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="all" /> ... <ul id="nav"> <li><a href="#" >Link 1</a></li> <li><a href="#" >Link 2</a> <ul> <li><a href="#" >Link3</a></li> <li><a href="#" >Link4</a></li> </ul> </li> <li><a href="#" >Link 5</a></li> </ul> ... <script type="text/javascript" src="http://www.google.com/jsapi" ></script> <script type="text/javascript" > google.load("mootools", "1.2.1"); </script> <script type="text/javascript" src="js/MenuMatic_0.68.3.js" ></script> Javascript: var myMenu = new MenuMatic({/*options here*/}); Features: Related Listings:
| |||||
| Captions and Sliding Boxes using jQuery Posted: 29 Sep 2009 09:37 AM PDT All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing "peek" through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. Given the basic structure outlined in the helpful image above, we will need to use a little bit of CSS to make it work as intended. The following will make it functional – review my complete stylesheet in the downloadable file. The following defines the viewing window (.boxgrid) and sets the default position for images within it to the top left. This is important to make the overlap while sliding work. Dont' forget that overflow:hidden makes this all possible. .boxgrid{ width: 325px; height: 260px; margin:10px; float:left; background:#161613; border: solid 2px #8399AF; overflow: hidden; position: relative; } .boxgrid img{ position: absolute; top: 0; left: 0; border: 0; } If you aren't using the semi-transparent captions you are done with CSS – move to Step 2. .boxcaption{ float: left; position: absolute; background: #000; height: 100px; width: 100%; opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to. Now we'll need to set up the default starting point for the caption box. If you want it fully hidden initially, you will want the distance from the top or left to match the height or width of the window (.boxgrid), depending on which direction it will be sliding. You can also have it partially visible initially, as .caption .boxcaption illustrates. .captionfull .boxcaption { top: 260; left: 0; } .caption .boxcaption { top: 220; left: 0; } Step 2 – Adding the Sliding Animations This next stage is a matter of choosing which animation suites you, I have included a bunch of pre-formatted potentials to help you along. Play around with them to find one that fits your needs and style. $(document).ready(function(){ //To switch directions up/down and left/right just place a "-" in front of the top/left attribute //Vertical Sliding $('.boxgrid.slidedown').hover(function(){ $(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300}); }); //Horizontal Sliding $('.boxgrid.slideright').hover(function(){ $(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300}); }); //Diagnal Sliding $('.boxgrid.thecombo').hover(function(){ $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300}); }); //Partial Sliding (Only show some of background) $('.boxgrid.peek').hover(function(){ $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160}); }); //Full Caption Sliding (Hidden to Visible) $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160}); }); //Caption Sliding (Partially Hidden to Visible) $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160}); }); }); Step 3 – The HTML There are a few classes that we created simply as selectors for JQuery. Keep these rules in mind: * The div class ".cover" should be assigned to whatever is doing the sliding/movement. Here's an example of the HTML I would use for the .captionfull animation: <div class="boxgrid captionfull"> <img src="jareck.jpg"/> <div class="cover boxcaption"> <h3>Jarek Kubicki</h3> <p>Artist<br /><a href="<a class="linkification-ext" title="Linkification: http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/">http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/</a>" target="_BLANK">More Work</p> </div> </div> Go Forth and Create I've only touched upon a few options you have, these boxes are your canvases, create away. I would encourage you to download the attached files, as it may be easiest to just copy-paste the parts relevant to your project. Related Listings:
| |||||
| uploadify – A file upload plugin using jQuery Posted: 29 Sep 2009 08:56 AM PDT This plugin allows you to change any element with an ID on your page into a single or multiple file upload tool. The plugin uses a mix of JQuery, Flash, and a backend upload script of your choice to send files from your local computer to your website ser  Latest Features and Functions:
Implementation: Requirements: <input id="fileInput" name="fileInput" type="file" /> <script type="text/javascript">// < ![CDATA[ $(document).ready(function() { $('#fileInput').uploadify({ 'uploader' : 'uploadify.swf', 'script' : 'uploadify.php', 'cancelImg' : 'cancel.png', 'auto' : true, 'folder' : '/uploads' }); }); // ]]></script> Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.