Fork me on Github s

Posts Tagged html

An easier way to clear your floats with CSS

If you are doing a lot of CSS-based layouts, it is likely that you have done the following:

   
some text

This never really sit well with me.  Recently, I decided to try and find a better way to accomplish this with a CSS class.  In so doing I came across this post.  If you want to know a bunch of stuff about why this trick works I suggest you read the post.  I will summarize by saying that this trick uses the :after CSS pseudo-selector which is not currently recognized by IE.  But, conveniently we can make ie execute the behavior by assigning a ‘zoom’ to it.  A css attribute that is ignored by other browsers but makes IE render it differently.  Hear is the css code.

.clearme { zoom: 1; }
.clearme:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } 

Then, you assign an element to be cleared by adding the ‘clearme’ class.

  
some text

And everything following will clear the floating div.  I have verified this works in IE 6, IE 7, IE 8, Chrome, Firefox, and Safari (mac).

Tags: ,

1 Comment

Disable Select Options in Internet Explorer 7 with JQuery

I recently found out (unfortunately) that disabling an option with the disabled attribute does not work in IE 7.  Odd.  Here is my workaround using JQuery, it will gray out and disallow selection of all options with a disabled attribute.

   $(document).ready(function() {
     $('option[disabled]').css({'color': '#cccccc'});
     $('select').change(function() {
       if(this.options[this.selectedIndex].disabled) {
         if(this.options.length == 0) {
           this.selectedIndex = -1;
         } else {
           this.selectedIndex--;
         }
         $(this).trigger('change');
       }
     });
     $('select').each(function(it) {
       if(this.options[this.selectedIndex].disabled)
         this.onchange();
     });
   });     

Tags: , , ,

8 Comments

Gracefully degrading AJAX calls

What happens if grandma fires up her Packard Bell and attempts to buy some medicinal ointment from your site in IE 5?  Or, what if one of your 3rd party advertisers (likely story) causes a javascript error?  Will your page still work?  Have you ever thought of what happens when javascript is not running on your fancy AJAX pages?

Not many of us do.  But, it is still important to think about what will happen if javascript is not running in the user’s browser.  Around 5% of user’s have javascript completely turned off.  Still other’s may have security settings which disallow ajax calls or obsolete browser’s which are not supported.  Degrading your javascript gracefully can be tedious and time consuming.   However, if you follow the pattern that I present it is hardly an inconvenience at all.

Consider the following code:

   
   

Pretty simple.  We can see that when the link is clicked an ajax call is made.  The click event returns false, preventing the browser from navigating to the href location.  If Javascript is not running the browser will just navigate to the ‘/book/details’ page.

The next part is where most people might get lost.  But, if you are using a modern MVC framework (why wouldn’t you be?), then you should be fine.  Or, at the very least, you should be implementing the view decorator pattern in some form.

Basically, your controller (or page) should be able to detect whether or not the request was made via AJAX, the XMLHttpRequest object.  Most javascript libraries make this easy by adding a special request header, ‘X-Requested-With’.  If your library does not do this, you should be able to manually add the header.  By checking this header, you can easily determine whether it is AJAX you are dealing with.

In PHP:

     
     function isAjax() {
       return $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
     }
     
     $book = Book->find($id);
     
     if( !isAjax() ) {
       include('includes/header.inc');
     }
    
   echo "
   

${book[title]

${book[description]}

"; if( !isAjax() ) { include('includes/footer.inc'); }

That is pretty straightforward, but the great thing is that most MVC frameworks will do it automatically!  But, what if we want to automatically create our links.  This is easy with the jquery library.  We will create a method that will run when the page loads, and add automatically add the functionality to our links (designated with the ajaxme class).

   
   
   

Keep in mind there are many situations where it is not possible to gracefully degrade an application.  In these cases a <noscript> tag should be used to warn the user that they are missing out on additional functionality.

Tags: , , , ,

No Comments