SWiK
» tagged pages
» logout

sorted by: recent | see : popular
Content Tagged with Front + jQuery

I like big…… targets

BigTarget.js is a new little jQuery plugin that makes bigger targets for users:

Wrapping a single anchor around the whole content (title, thumbnail, summary) is a bad idea as it’s not standards compliant and renders the page invalid. So I turned to my good friend jQuery and threw together the following plugin using the ‘Learning jQuery’ plugin development pattern.

The concept is simple:

  1. Attach the plugin to any link in the content block.
  2. Pass through the click zone selector as a plugin option.
  3. The plugin then attaches onclick and hover events to the click zone.
  4. User clicks anywhere on the click zone.
  5. The original link href is retrieved.
  6. If the link has a rel attribute and it’s set to ‘external’, open the link target in a new window; otherwise open the link in the current browser window.

You can easily add this behaviour via the plugin:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // simple
  3. $(document).ready(function(){
  4.     $("ol.bigTarget h4 a").bigTarget();
  5. });
  6.  
  7. // and you can customize it
  8. $(document).ready(function(){
  9.     $("ol.bigTarget h4 a").bigTarget({
  10.             hoverClass: 'over', // CSS class applied to the click zone onHover
  11.                 clickZone : 'div:eq(0)' // jQuery parent selector
  12.         });
  13. });
  14.  

Ajax: Ajaxian

jQuery finds its way into Microsoft and Nokia stacks

Just as jQuery kicks off its first jQuery conference adjunct with The Ajax Experience in Boston tomorrow, it gets an energy boost from some big double-barrel news:

Microsoft and jQuery

Microsoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).

Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications. jQuery helpers will also be included in the server-side portion of .NET development (in addition to the existing helpers) providing complementary functions to existing ASP.NET AJAX capabilities.

Scott Guthrie talks about the news and details some of the features. His blog shows intellisense at work, and more.

Scott Hanselman then wrote an tutorial that shows jQuery working with ASP.NET libraries such as the ASP.NET AJAX 4.0 Client Template work.

Here is the sample code that shows the weaving of jQuery and Client template APIs. The script src at the top is to an "intellisense" version of jQuery, which includes the addition of special comments to make Intellisense work. The Open Ajax Alliance is trying to standardize on this metadata so we can share it between the various tools (e.g. Aptana has a very nice sdoc that does this, and allows you to put it external to the file so you don't have to have clients download it).

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var bikes; 
  3. Sys.Application.add_init(function() { 
  4.     bikes = $create(Sys.UI.DataView, {}, {}, {}, $get("bikes")); 
  5.     $(".colorfilter").click(function(e) { 
  6.         LoadBikes($(this).val()); 
  7.     }); 
  8.     LoadBikes(); 
  9. }); 
  10.  
  11. function LoadBikes(q) { 
  12.     qq= q|| "Red"; 
  13.     var svc = new Sys.Data.DataService("bikes.svc"); 
  14.     svc.query("/Products?$filter=Color eq '" + q + " '&$top=5", OnProductsLoaded); 
  15. } 
  16.  
  17. function OnProductsLoaded(result) { 
  18.     bikes.set_data(result); 
  19.  
  20.     $("ul li:even").css("background-color", "lightyellow"); 
  21.     $("ul li").css("width", "450px").css("font-size", "12px"); 
  22.  
  23.     $("div.bikerow").mouseover(function(e) { 
  24.         $(this).animate({ 
  25.             fontSize: "18px", 
  26.             border: "2px solid black" 
  27.         }, 100); 
  28.     }).mouseout(function(e) { 
  29.         $(this).animate({ 
  30.             fontSize: "12px", 
  31.             border: "0px" 
  32.         }, 100); 
  33.     }); 
  34.  
  35. } 
  36. Sys.Application.initialize();
  37.  

Nokia and jQuery

Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.

To start Nokia will be moving a number of their applications to work on the run-time (such as Maps) and building them using jQuery. jQuery will become part of their widget development platform, meaning that any developer will be able to use jQuery in the construction of widgets for Nokia phones.

How will these companies work with the project?

Microsoft and Nokia aren’t looking to make any modifications to jQuery (both in the form of code or licensing) - they simply wish to promote its use as-is. They’ve recognized its position as the most popular JavaScript library and wish to see its growth and popularity continue to flourish.

In fact their developers will begin to help contribute back to the jQuery project by proposing patches, submitting test cases, and providing comprehensive testing against their runtimes. As with any contribution that comes in to the jQuery project it’ll be closely analyzed, reviewed, and accepted or rejected, based upon its merits, by the jQuery development team - no free ride will be given.

A significant level of testing will be added to the project in this respect. The jQuery test suite is already integrated into the test suites of Mozilla and Opera and this move will see a significant level of extra testing being done on Internet Explorer and WebKit - above-and-beyond what is already done by the jQuery team.

This is great news for the jQuery project.

Ajax: Ajaxian

blink at the marquee one more time

Remy Sharp gives us a blast form the past for the some Friday fun.

First, he shows his Marquee plugin that gives you the marquee effect. Why would you do this when the marquee tag itself is widely adopted?

Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it's built directly in to the browser).

You can see how the untouched marquees are jumpy to animate, even in the later browsers such as Firefox 3 and Safari - let alone IE6.

It is simple to use, and gives you hooks to do more:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // Hello World
  3. $('marquee').marquee();
  4.  
  5. // Adding fun
  6. $('div.demo marquee').marquee('pointer').mouseover(function () {
  7.   $(this).trigger('stop');
  8. }).mouseout(function () {
  9.   $(this).trigger('start');
  10. }).mousemove(function (event) {
  11.   if ($(this).data('drag') == true) {
  12.     this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
  13.   }
  14. }).mousedown(function (event) {
  15.   $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
  16. }).mouseup(function () {
  17.   $(this).data('drag', false);
  18. });
  19.  

Or, you could get into a lot of trouble and reimplement blink:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $(function () {
  3.  setInterval(function () {
  4.    $('blink').each(function () {
  5.      this.style.visibility = this.style.visibility == 'hidden' ? 'visible' : 'hidden';
  6.    });
  7.  }, 1000);
  8. });
  9.  

Ajax: Ajaxian

jTPS: Animated Sortable Datagrid jQuery plugin

The data grid above is a jQuery plugin jTPS that creates a table you can sort and page through, using nice animations, all via a simple call out:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $(document).ready(function () {
  3. $(’#TABLETOCONTROL’).initTable( {perPages:[5,12,15,50,'ALL']} ).controlTable();
  4. });
  5.  

Ajax: Ajaxian

QUnit: A simple look at the jQuery unit test framework

Chad Myers has a simple look at GUnit, the jQuery based unit test framework. His article explains how to get going, and walks through a test like this:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. module("Show and Hide");
  3.  
  4. test("should hide the element when hide is called", function(){
  5.  
  6.     $("#testDiv").hide();
  7.  
  8.     // actual, expected
  9.     equals($("#testDiv").css("display"), "none", "The element should be hidden");
  10. });
  11.  
  12. test("should show the element when show is called", function(){
  13.  
  14.     // Arrange
  15.     $("#testDiv").css("display", "none");
  16.    
  17.     // Act
  18.     $("#testDiv").show();
  19.  
  20.     // Assert
  21.     // actual, expected
  22.     equals($("#testDiv").css("display"), "block", "The element should be visible");
  23. });
  24.  

Ajax: Ajaxian

addSizes.js: automatic link file-size generation

Nathalie Downe has taken Simon Willison's json-head App Engine mini-service and used it to create addSizes.js, a little script that looks for large files linked from a page, and automatically adds their file size to the copy after the link.

Once in place, you simple do your usual link, and asynchronously the Web page will be updated to look like "your pdf link (pdf 2.8 MB)".

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. jQuery(function($){
  3.         $('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
  4.                 // looking at the href of the link, if it contains .pdf or .doc or .mp3
  5.                 var link = $(this);
  6.                 var bits = this.href.split('.');
  7.                 var type = bits[bits.length -1];
  8.                
  9.                
  10.                 var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
  11.        
  12.                 // then call the json thing and insert the size back into the link text
  13.                  $.getJSON(url, function(json){
  14.                         if(json.ok && json.headers['Content-Length']) {
  15.                                 var length = parseInt(json.headers['Content-Length'], 10);
  16.                                
  17.                                 // divide the length into its largest unit
  18.                                 var units = [
  19.                                         [1024 * 1024 * 1024, 'GB'],
  20.                                         [1024 * 1024, 'MB'],
  21.                                         [1024, 'KB'],
  22.                                         [1, 'bytes']
  23.                                 ];
  24.                                
  25.                                 for(var i = 0; i <units.length; i++){
  26.                                        
  27.                                         var unitSize = units[i][0];
  28.                                         var unitText = units[i][1];
  29.                                        
  30.                                         if (length>= unitSize) {
  31.                                                 length = length / unitSize;
  32.                                                 // 1 decimal place
  33.                                                 length = Math.ceil(length * 10) / 10;
  34.                                                 var lengthUnits = unitText;
  35.                                                 break;
  36.                                         }
  37.                                 }
  38.                                
  39.                                 // insert the text directly after the link and add a class to the link
  40.                                 link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
  41.                                 link.addClass(type);
  42.                         }
  43.                 });
  44.         });
  45. });
  46.  

Ajax: Ajaxian

CSS Sprites2: Return of the JS

In March 2004, Dave Shea wrote about CSS Sprites, and now he is back with CSS Sprites 2. He walks us through using JavaScript to make this all work nicely, and picks jQuery to get 'er done:

After putting this together piece by piece, we end up with:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $(document).ready(function(){
  3.  
  4.         // remove link background images since we're re-doing the hover interaction below
  5.         // (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
  6.         // we also want to only remove the image on non-selected nav items, so this is a bit more complicated
  7.         $(".nav").children("li").each(function() {
  8.                 var current = "nav current-" + ($(this).attr("class"));
  9.                 var parentClass = $(".nav").attr("class");
  10.                 if (parentClass != current) {
  11.                         $(this).children("a").css({backgroundImage:"none"});
  12.                 }
  13.         });     
  14.  
  15.  
  16.         // create events for each nav item
  17.         attachNavEvents(".nav", "home");
  18.         attachNavEvents(".nav", "about");
  19.         attachNavEvents(".nav", "services");
  20.         attachNavEvents(".nav", "contact");
  21.  
  22.  
  23.         function attachNavEvents(parent, myClass) {
  24.                 $(parent + " ." + myClass).mouseover(function() {
  25.                         $(this).append('<div class="nav-' + myClass + '"></div>');
  26.                         $("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
  27.                 }).mouseout(function() {
  28.                         $("div.nav-" + myClass).fadeOut(200, function() {
  29.                                 $(this).remove();
  30.                         });
  31.                 }).mousedown(function() {
  32.                         $("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
  33.                 }).mouseup(function() {
  34.                         $("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
  35.                 });
  36.         }
  37. });
  38.  

Ajax: Ajaxian

jQuery.com redesigned with a Rock Star

When I was doing an interview with John Resig for the Open Web Podcast, he mentioned that the redesign of jQuery.com had a lot of people talking, and it seems like people have strong feelings about the Rock Star for whatever reason.

Ignoring the style, the redesign is more than just that:

The entirety of the site has a new layout. With drastically improved multi-layer navigation and a standardized sidebar it should become much easier to navigate the individual portions of the site.
You should probably wear a hard hat while exploring the interior pages - font sizes, spacing, and colors are all in need of tweaking, which will be handled over the upcoming week (it’s fun working against Trac, Wordpress, Drupal, and Mediawiki simultaneously).

Ajax: Ajaxian

Degrading script tags for fun and profit

John Resig posted on degrading script tags and adding functionality to <script> so you can add a src attribute and a body of code that will be executed one the external script loaded error free:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. <script src="some-lib.js">
  3.   var foo = use_some_lib();
  4.   foo.do.stuff();
  5. </script>
  6.  

To make this all work, John shows us a jquery aware version that detects loading and such:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2.  
  3. (function(){
  4. var scripts = document.getElementsByTagName("script");
  5. var curScript = scripts[ scripts.length - 1 ];
  6.  
  7. if ( curScript.executed )
  8.   return;
  9.  
  10. // ... jQuery ...
  11.  
  12. curScript.executed = true;
  13. var script = curScript.innerHTML;
  14. if ( script ) {
  15.   jQuery(document).ready(function(){
  16.     jQuery.globalEval( script );
  17.   });
  18. }
  19. })();
  20.  

Where th