Ajax Updates |
- The PHP Feedburner Function
- Clean Attractive Vertical Menu using jQuery
- Good Looking Floating Menu with jQuery Easing
- Simple Infinite Carousel with jQuery
- SimplePager Paging Plugin using jQuery
| Posted: 29 Oct 2009 09:22 AM PDT To pull out my feedburner stats and display them on a web page. After a bit of research I found the most common way to achieve this was with feedburners built in feedcount option(found in under the publicise tab). This works by taking your feed count and wrapping it into a branded box. Although there is nothing wrong with this, I wanted to give my feed a bit more customisability. So I created a custom PHP funciton to pull out any one of your feeds atributes, this post will show you how. Make Your Feed Public The first step in displaying your feedburner count is to make your feed public. This can be achieved by going to http://feedburner.google.com/fb/a/myfeeds when logged in select your feed and choose the publicize tab, then select feedcount on the sub menu, this should give you the options to set your service as active. Your feed will now be accessible in an XML format. feedburner_stats() uses PHP5's simplexml_load_file to pull out the XML of your feed. feedburner_stats() requires 2 parameters in order to work. The first $feed, this relates to the URI of your feed adress. To find this select edit feed details, you should see it in the feed address. You only need the address after http://feeds.feedburner.com/[HERE] The second arguement is the $attribute. Here you have the selection of 4 possible attributes of the feed: * date Depending on which element you wish to display will simply add the word in the second argument. The function itself looks like this: < ?php function feedburner_stats($feed, $attribute) { if ( !$feed ) { echo('[No Feed]'); } //user must pass in their URI if ( !$attribute ) { echo('[No Attribute]'); }//user must pass in their attribute $xmlobj = simplexml_load_file("http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$feed); echo($xmlobj->feed->entry->attributes()->$attribute); } ?> Calling The Function In order to use the funciton simply call it where ever you wish to call out the feedcount like so: <h1>I have <i>< ?php feedburner_stats('co/VazT', 'circulation'); ?></i> subscribers!</h1><h1>  Related Listings:
| |||||
| Clean Attractive Vertical Menu using jQuery Posted: 29 Oct 2009 08:38 AM PDT It looks something like a lava lamp menu (Simple Lava Lamp Menu Tutorial) because it has an icon following the hovered item. It’s a pretty simple menu, but with a little bit of jQuery script, we will able to make it even more eye-catching. As usual, from all my previous tutorials, I always like to keep HTML clean. Well, it’s a good practise so that other can read your code easily. We use a list for the menu and a div with block and png (fix the png transparent image) classes for the moving object.
<div id="menu"> <ul> <li><a href="#">Item 01</a></li> <li><a href="#">Item 02</a></li> <li><a href="#">Item 03</a></li> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li> <li><a href="#">Item 05</a></li> </ul> <div class="block png"></div> </div> 2. CSS I have something new in CSS – quick CSS PNG fix! Credit to Komodomedia for the script. It’s really easy to implement. What you need to do is, if you have a div or an image with transparent PNG image, assign the .PNG class to it and it will fix the ie6 issue. Yes, IE6 issue, it has a lot more issues. If you want to know more about it, read this article for the bugs and fixes - Right, I have put comments in the following CSS code to explain its purposes. #menu { font-family:verdana; font-size:12px; position:relative; margin:0 auto; width:200px; } #menu ul { /* remove list style */ list-style:none; padding:0; margin:0; /* set the layer position */ position:relative; z-index:5; } #menu li { /* set the styles */ background:#ccc url(bg.gif) no-repeat 0 0; padding:5px; margin:2px; cursor:pointer; border:1px solid #ccc; } #menu li.hover { /* on hover, change it to this image */ background-image:url(bg_hover.gif) !important; } #menu li a { text-decoration:none; color:#888; } #menu .block { /* allow javascript to move the block */ position:absolute; top:0; /* set the left position */ left:150px; /* display above the #menu */ z-index:10; /* the image and the size */ background:transparent url(arrow.png) no-repeat top right; width:39px; padding:4px; cursor:pointer; } /* fast png fix */ * html .png{ position:relative; behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)); } 3. Javascript In the javascript section, once it’s loaded, it grab the height of the menu and assign it to the block class and after that, move the block to the selected list item. All the list items are being assigned to hover event, hence, if mouse hover is detected, it will get the top position of the list item and move the block toward it. $(document).ready(function () { //Set the height of the block $('#menu .block').height($('#menu li').height()); //go to the default selected item topval = $('#menu .selected').position()['top']; $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500}); $('#menu li').hover( function() { //get the top position topval = $(this).position()['top']; //animate the block //you can add easing to it $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500}); //add the hover effect to menu item $(this).addClass('hover'); }, function() { //remove the hover effect $(this).removeClass('hover'); } ); }); Related Listings:
| |||||
| Good Looking Floating Menu with jQuery Easing Posted: 29 Oct 2009 08:26 AM PDT A floating effect using jquery.easing, animate top value and a png image. What it does is, on mouse over, the menu item will float, and on mouse out, it will sink. Very simple, but it looks really attractive. The following is the html layout. Remember, always keep the html as clean as possible. The .selected class is to allow jquery detect the selected item. <ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li class="selected" class="item3"><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> 2. CSS Refer to the chart below, that the layout of this float menu. #menu { list-style:none; padding:0; margin:0 auto;; height:70px; width:600px; } #menu li { float:left; width:109px; height:70px; position:relative; overflow:hidden; } #menu li a { position:absolute; top:20px; text-indent:-999em; background:url(menu.png) no-repeat 0 0; display:block; width:109px; height:70px; /* fast png fix for ie6 */ position:relative; behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)); 3. Javascript This a simple jQuery script, what it does is simply set the top value to 0 and set the default top value if on mouse out. We are using jQUery.easing plugin, that means you can have different animation effect. $(document).ready(function () { //get the default top value var top_val = $('#menu li a').css('top'); //animate the selected menu item $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); $('#menu li').hover( function () { //animate the menu item with 0 top value $(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); }, function () { //set the position to default $(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500}); //always keep the previously selected item in fixed position $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); } ); }); Related Listings:
| |||||
| Simple Infinite Carousel with jQuery Posted: 29 Oct 2009 08:08 AM PDT Making a jQuery Infinite Carousel with nice features from tutsvalley. I learnt something new from there. So, yes, I modify the code and make it into something I want, and hopefully this is what you want as well Alright, We have a main wrapper called carousel and inside it, we have two sections – buttons and slides. I have styled the previous and next links to two arrows with mouseover effect. The rest is pretty basic. <div id="carousel"> <div id="buttons"> <a href="#" id="prev">prev</a> <a href="#" id="next">next</a> <div class="clear"></div> </div> <div class="clear"></div> <div id="slides"> <ul> <li><img src="slide1.gif" width="240" height="240" alt="Slide 1"/></li> <li><img src="slide2.gif" width="240" height="240" alt="Slide 2"/></li> <li><img src="slide3.gif" width="240" height="240" alt="Slide 3"/></li> </ul> <div class="clear"></div> </div> </div> 2. CSS CSS is a little bit complicated. First of all you have to set correct width in #carousal, #slides, #slides ul and also #slides li. So, I break it down and put extra comments, and if you want to change it, I’d recommend you change it from the LI item first, and the following is the sequence: * #slides li : #carousel { width:255px; height:290px; margin:0 auto; } #slides { overflow:hidden; /* fix ie overflow issue */ position:relative; width:250px; height:250px; border:1px solid #ccc; } /* remove the list styles, width : item width * total items */ #slides ul { position:relative; left:0; top:0; list-style:none; margin:0; padding:0; width:750px; } /* width of the item, in this case I put 250x250x gif */ #slides li { width:250px; height:250px; float:left; } #slides li img { padding:5px; } /* Styling for prev and next buttons */ #buttons { padding:0 0 5px 0; float:right; } #buttons a { display:block; width:31px; height:32px; text-indent:-999em; float:left; outline:0; } a#prev { background:url(arrow.gif) 0 -31px no-repeat; } a#prev:hover { background:url(arrow.gif) 0 0 no-repeat; } a#next { background:url(arrow.gif) -32px -31px no-repeat; } a#next:hover { background:url(arrow.gif) -32px 0 no-repeat; } .clear {clear:both} 3. Javascript There are two new methods we are about to learn. Well, it’s something new to me too! After and Before method. * After – Insert content after each of the matched elements. So, to create an infinite carousel, we need to depend on these two method because we need: * If the user clicked on previous button, we need to move the last item to the front of the first item As a result, whenever we clicked on next or previous button, the script will keep moving the item and that make it an infinite carousel. Again, credit to my friend at tutsvalley for this idea, check it out his version of carousel – Making a jQuery Infinite Carousel with nice features And also, our very cheapskate but absolutely effective method of rotating the slide – using click() function to click next link and set a timer for it $(document).ready(function() { //rotation speed and timer var speed = 5000; var run = setInterval('rotate()', speed); //grab the width and calculate left value var item_width = $('#slides li').outerWidth(); var left_value = item_width * (-1); //move the last item before first item, just in case user click prev button $('#slides li:first').before($('#slides li:last')); //set the default item to the correct position $('#slides ul').css({'left' : left_value}); //if user clicked on prev button $('#prev').click(function() { //get the right position var left_indent = parseInt($('#slides ul').css('left')) + item_width; //slide the item $('#slides ul').animate({'left' : left_indent}, 200,function(){ //move the last item and put it as first item $('#slides li:first').before($('#slides li:last')); //set the default item to correct position $('#slides ul').css({'left' : left_value}); }); //cancel the link behavior return false; }); //if user clicked on next button $('#next').click(function() { //get the right position var left_indent = parseInt($('#slides ul').css('left')) - item_width; //slide the item $('#slides ul').animate({'left' : left_indent}, 200, function () { //move the first item and put it as last item $('#slides li:last').after($('#slides li:first')); //set the default item to correct position $('#slides ul').css({'left' : left_value}); }); //cancel the link behavior return false; }); //if mouse hover, pause the auto rotation, otherwise rotate it $('#slides').hover( function() { clearInterval(run); }, function() { run = setInterval('rotate()', speed); } ); }); //a simple function to click next link //a timer will call this function, and the rotation will begin Related Listings:
| |||||
| SimplePager Paging Plugin using jQuery Posted: 29 Oct 2009 07:18 AM PDT Following the popularity of SimplePager – easy paging plugin, we have updated the plugin to overcome two of the major issues with the original incarnation. SimplePager no longer breaks chaining and can now be used more than once per page. We also replaced the old holder option (used for specifying a container for the paging) with a pagerLocation option that allows for setting the pager navigation to appear before after or before & after the paged item. The premise behind SimplePager is to allow for creating pagination with as little effort or configuration as possible. This pager plugin can page divs, paragraphs, list items or almost any other content. The very simplest usage is shown below. $(function() { $("ul.paging").quickPager(); }); Plugin options Option – (default) pageSize – (10) currentPage – (1) pagerLocation – (after) Because of the removal of the “holder” option, this plugin no longer supports paging table rows. This seemed to be an edge case anyhow, but if enough people let us know that they’d like this back we’ll get it into a new version at some point. 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.