Ajax Updates |
- Simple Twitter App with jQuery Templates and JSONP
- Skype-like buttons using jQuery
- jQuery Inline Field Labels
- Kwicks for jQuery – Horizontal Animated Menu
- Featured articles plugin for Wordpress with Moo Tools
| Simple Twitter App with jQuery Templates and JSONP Posted: 21 Oct 2009 11:15 AM PDT Twitter hosts this cool jsonp interface that enables you to pull down all kinds of twitter data to your client application – jsonp enables us to get around XSS, so the application doesn't need a server-side component at all!!! Check out the code: HTML: <form id="twitter_search" > <label for="twitter_search" >Search Twitter Feed:</label> <input type="text" name="q" value="GUICenter" /> <input type="submit" name="submit" value="Submit" /> </form> <div id="twitter_results_tmpl" style="display:none" > <h4>Tweets from {name}</h4> <ul> <li style="display:none" >{text} <br / />Created At: {created_at}</li> </ul> </div> Javascript: Twitter = { init: function() { $('#twitter_search').submit(Twitter.search); }, search: function() { $.ajax({ 'url': 'http://twitter.com/statuses/user_timeline/'+$(this.q).val()+'.json', 'data': { count: 5 }, 'success': Twitter.onSearchResult, 'dataType': 'jsonp' }); return false; }, onSearchResult: function(res) { $('#twitter_results_tmpl') .render(res[0]['user'],{clone:true}) .removeAttr('id') .find('.twitter_tmpl') .render( res, {clone:true} ) .show().end().end().show(); } }; $(document).ready( Twitter.init );  Related Listings:
| |||||
| Skype-like buttons using jQuery Posted: 21 Oct 2009 11:02 AM PDT If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS. If you are not sure what button am I talking about, image below might help you. And this is how our button will look like:
Ok, the task here is quite simple – I want the icon to jump for a few times when I hover the button. (In Skype window this icon jumps when you click on it, but I think it would be much better to have it jump on hover) The button itself consist of an image and text placed inside of a link. <a class="button" href="#"> <img src="button.png" alt="" />Send info</a> or <a href="#">cancel</a> Let’s style the button. CSS code for this is simple and won’t go through all the classes here. The key is that the icon is absolutely positioned inside its relatively positioned container – the link. The position of the icon is set to simulate Skype button, and that is to cover the left side of the button. Please note that you will see the rounded corners on the button only in Firefox thanks to -moz-border-radius- properties. .button { padding: 4px 10px 3px 25px; border: solid 1px #8AB134; position: relative; cursor: pointer; display: inline-block; background-image: url( 'bkg.png' ); background-repeat: repeat-x; font-size: 11px; height: 16px; text-decoration: none; color: #40740D; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; } .button img { position: absolute; top: -4px; left: -12px; border: none; } .button:hover { color: #8AB134; } Now the animation. We have three jumps on original Skype button – one large and two small jump. In first jump, icon will go up for 6px, in second 3px and in the last jump 2px. After each jump, the icon will go back to its original position defined in CSS. I guess it is pretty much similar to the Skype button. $(document).ready(function(){ $(".button").hover(function(){ $(".button img") // first jump .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // second jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // the last jump .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); }); }); Related Listings:
| |||||
| Posted: 21 Oct 2009 10:27 AM PDT It's so simple, but perfect. A great benefit of using the title attribute, is that when you hover over the input, you get a little tooltip displaying the inline label. So all I need to do is add a title attribute with the text that we want to have show up as the inline label. Then, we just use a little jQuery to make it all happen. First, we want to select each input that has a title attribute, once the document is loaded: $(document).ready(function() { $('input[title]').each(function() { … }); }); Next, if the value of the input element is empty, we want to take the title attribute and add it as the value of the input. $(document).ready(function() { $('input[title]').each(function() { if($(this).val() === '') { $(this).val($(this).attr('title')); } }); }); After that, we want to setup a function that will fire once the input is focused. When it is focused, if the value is equal to the title attribute, we want to set the value to nothing and add a class of focused: $(document).ready(function() { $('input[title]').each(function() { if($(this).val() === '') { $(this).val($(this).attr('title')); } $(this).focus(function() { if($(this).val() === $(this).attr('title')) { $(this).val('').addClass('focused'); } }); }); }); The reason why we add the class of focused is so that we can change the text color, border or anything to make it noticeable that the input is being focused. You can see this effect in the demo. Finally, we want to add a function that will fire when the input loses focus. When it does, if the input value is empty, we want to set the value back to the title attribute and remove the class of focused: $(document).ready(function() { $('input[title]').each(function() { if($(this).val() === '') { $(this).val($(this).attr('title')); } $(this).focus(function() { if($(this).val() === $(this).attr('title')) { $(this).val('').addClass('focused'); } }); $(this).blur(function() { if($(this).val() === '') { $(this).val($(this).attr('title')).removeClass('focused'); } }); }); }); And that's it. It's just a little bit of code, but it can go a long way. So take it and build on it. Related Listings:
| |||||
| Kwicks for jQuery – Horizontal Animated Menu Posted: 21 Oct 2009 09:56 AM PDT Menu of a web page is the most important and maybe the most clicked link on your web page. Do you want your menu look sexy with an awesome animation on your website? Follow me, I will walk you to the final result of using Kwicks – jQuery Plugin to build an horizontal menu with a nice effect like Mootools but more customizable and versatile. In the example above, the block width of menu item will be changed when the mouse goes over. This tut also show you how to work with css sprites – a popular css technique (not a new anymore, huh?). HTML code: HTML code seem to be simple. Simply copy and paste these all code below to your new HTML page. <div class="kwicks_container"> <ul class="kwicks"> <li id="kwick_1"> <a href="http://aext.net/" >Home <h3>Front page</h3> </a> </li> <li id="kwick_2"> <a href="http://aext.net/category/css/">CSS & XHTML <h3>Makeup web page</h3> </a> </li> <li id="kwick_3"> <a href="http://aext.net/category/java/">Java <h3>Learning Java</h3> </a> </li> <li id="kwick_4"> <a href="http://aext.net/category/others">Others <h3>In the other hand</h3> </a> </li> <li id="kwick_5"> <a href="http://aext.net/category/php/">PHP <h3>PHP Programming</h3> </a> </li> <li id="kwick_6"> <a href="http://aext.net/category/resources/">Resources <h3>Resources for Web Developers</h3> </a> </li> <li id="kwick_7"> <a href="http://aext.net/category/theme-layout/">Themes <h3>Bloggers - Wordpress Themes</h3> </a> </li> </ul> </div>
The CSS code below maybe a bit long, but I think it's easy to read. I separated the code into individual so that you can easy to customize later. body, h3, div, ul, p { margin:0; padding:0; } body { background-color:#FFFF99; line-height:18px; } div.kwicks_container { width: 840px; margin: 100px auto 0 auto; } /*-------------------------KWICKS--------------------*/ .kwicks { list-style: none; position: relative; margin: 0; padding: 0; width:840px; height:50px; z-index:2; } .kwicks li { display: block; float: left; overflow: hidden; padding: 0; cursor: pointer; width: 100px; height: 35px; z-index:2; cursor:pointer; border-left-width: 1px; border-left-style: solid; border-left-color: #FF9933; } .kwicks li a { background-image:url(images/sprites_menu.png); background-repeat:no-repeat; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial; font-size: 14px; letter-spacing: -0.07em; color: #AA0000; height: 40px; outline:none; display:block; z-index:100; cursor:pointer; text-transform: uppercase; font-weight: bold; margin-top: -3px; margin-left: 5px; text-decoration: none; } .kwicks li h3 { position: absolute; width: 120px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial; font-size: 10px; color: #FF6600; letter-spacing: -0.02em; outline:none; z-index:0; cursor:pointer; text-transform: uppercase; font-weight: normal; margin-left: 5px; text-decoration: none; left: 0px; top: 15px; right: 0px; bottom: 0px; } .kwicks li a:hover { } #kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 { margin: 0pt; overflow: hidden; position: absolute; display: block; width: 120px; } #kwick_1 { left: 0px; border: none; } #kwick_2 { left: 120px; } #kwick_3 { left: 240px; } #kwick_4 { left: 360px; } #kwick_5 { left: 480px; } #kwick_6 { left: 600px; } #kwick_7 { right: 0px; } #kwick_1 a { background-position:0px 0px; } #kwick_1 a:hover, #kwick_2 #aktiv { background-position:0px 0px !important; } #kwick_2 a { background-position:0px -50px; } #kwick_2 a:hover, #kwick_2 #aktiv { background-position:0px -50px!important; } #kwick_3 a { background-position:0px -192px; } #kwick_3 a:hover, #kwick_3 #aktiv { background-position:0px -192px!important; } #kwick_4 a { background-position:0px -100px; } #kwick_4 a:hover, #kwick_4 #aktiv { background-position:0px -100px!important; } #kwick_5 a { background-position:0px -150px; } #kwick_5 a:hover, #kwick_5 #aktiv { background-position:0px -150px!important; } #kwick_6 a { background-position:0px -250px; } #kwick_6 a:hover, #kwick_6 #aktiv { background-position:0px -250px!important; } #kwick_7 a { background-position:0px -300px; } #kwick_7 a:hover, #kwick_6 #aktiv { background-position:0px -300px!important; }
Here is the list of javascript lib that we need to make the menu works * jquery-1.2.3.js: Off course. Copy & paste the hold thing below for the job done, but it's just a little bit code I got. Put it in < head > tag: <script type="text/javascript" src="javascript/jquery-1.2.3.js"></script> <script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script> <script type="text/javascript" src="javascript/jquery.kwicks-1.5.1.js"></script> <script type="text/javascript"> $().ready(function() { $('.kwicks').kwicks({ max : 200, duration: 800, easing: 'easeOutQuint' }); }); </script> Read the Kwicks documentation for available options. See more … If you're gonna use this menu for wordpress and want to select the active menu. Just do the simple way right below, all the css code you need has already put in css code at the middle of this tutorial. Edit something likes: ............. <li id="kwick_1"> <a href="http://aext.net/" id="active">Home <h3>Front page</h3> </a> </li> ............. Add the id attribute into the link with value: "active". That's it, and content inside < h3 > tag is good for category decription, right? Related Listings:
| |||||
| Featured articles plugin for Wordpress with Moo Tools Posted: 21 Oct 2009 09:29 AM PDT Featured articles gives the wordpress blog admin the possibility to display posts in a slick n cool way on the home page, just above the first post from the loop. It's developed for Wordpress 2.7.1 with the help of MooTools 1.2, probably the best JavaScript framework around ( please don't try to argue on this on the comments ). From the available plugin options I'll mention the possibility to display any number of posts you feel comfortable with, the order in which they will appear ( newest, oldest or random ) and thumbnail display. Since I remembered the thumbnail, some explaining on it. The thumbnail represents the first image encountered in each separate post. If none available, none displayed. For further settings on display options, there's the JavaScript class. The script itself resides inside the script folder of the plugin directory. For this you can set timings between slides, whether to show numbered paging or not, how the slides will slide ( left or top ) and other. As I said before, the plugin gives you some options to set up. Here's the complete list of those options: * Set title for the section. The title will appear above the slides To set the JavaScript, simply open the file containing the script with an editor and change the values of the class instance located at the bottom of the file to the ones you need. Complete path to this file is: your_wp_blog_path/wp-content/plugins/wp_featured_articles/scripts/FeaturedArticles.js. The class instance inside the JavaScript file is the one below: window.addEvent('domready', function(){ new FeaturedArticles({ container: 'FA_featured_articles', slides: '.FA_article', slideDuration:5000, effectDuration:1000, fadeDist:600, fadePosition:'left', stopSlideOnClick: false, autoSlide: true, infoContainers: '.FA_info', visibleInfo: false, navigationHeight: 21, navigationNums: false }); }) As you can see there are a number of parameters that you can play with in here. Here's a brief explanation for each one: * container: this is the id of the div containing the slides with the articles content It this interests you, here are the MooTools components used by this plugin: MooTools Core * Core – all I really hope you enjoy this plugin. Let me know in the comments if there are any bugs left. Don't forget, for JavaScript bugs to mention the browser you encountered the bug in and the browser version. 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.