Tag Archives: Technology/Internet

clickoutside jQuery plugin

javascript, , , , , , ,

I wrote a small plugin to jQuery that adds the event of clicking outside an element. You know sometimes you should close some modal windows when clicking outside. It’s really simple and small. Please provide any feedback that will improve it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

(function(jQuery) {
   jQuery.fn.clickoutside = function(callback) {
      var outside = 1, self = $(this);
      self.cb = callback;
      this.click(function() {
         outside = 0;
      });
      $(document).click(function() {
         outside && self.cb();
         outside = 1;
      });
      return $(this);
   }
})(jQuery);

You can see the demo page here. To install it just include the chunk above after the jQuery library code.

HTC?! Round the corners on IE!

css, ,

Well I was writing these days about rounded corners and some cross browser techniques that help you do this job. But what’s actually a topic now is that most of the web developers are speaking about making different versions of a site for different browsers. Now this begins to look normal, but it isn’t. The ideal solution is to have everything working fine, in that case rounded corners to be rounded, on every browser.

As I wrote recently there is a way to do this in IE with the use of VML, but yet again this is not working on Opera, and puts another chunk of markup in your document, that leads to more difficult maintain.

The solution can be done with another approach that can be considered as one level beyond the VML usage. Thus you have scripts only in IE and clean CSS.

Everybody now’s using both:

-moz-border-radius
-webkit-border-radius

and now’s coming the new wave with:

border-radius

property in CSS3, but as we know it will be maybe present in IE9 and any older MSIE will be discarded.

What the .htc means?

It stands for HTML components file, which is completely JavaScript code that’s included via CSS as:

behavior: url(border-radus.htc);

Of course you can find such .htc predefined files everywhere on the web and it’s completely working.

The problem

is that sometimes after using many HTML tags with border radius IE appears to crash, which is nothing new, but however not desirable.

jQuery tooltip plugin!

javascript, , , , , , , , , , , ,

Tooltips and jQuery

In order to complete the tooltip post series I decided to make a plugin for jQuery that implements tooltips in the most simple way I was able to find! I have no idea what are the other plugins for tooltips and I never used such plugin, but however I needed one in order to complete my task an suddenly I turn it into a plugin.

What I’d like to hear is requests for improvements and bugs reported, just to make the plugin as useful as possible.

Let’s start in that post with some primary HTML markup, here are the complete source and demo page.

<html>
<head>
 <title>jQuery tooltip</title>
</head>
<body>
<p>A DIV element wrapped in another DIV that's 800 pixels wide and thus defines the bounds</p>
<div id="wrap" style="width:800px;border:1px solid blue;">
 <div id="container" title='test' rel="here's some<br />HTML and image<br /><img src='/jquery-logo.png' />" style="border:1px solid red;">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus vulputate arcu in mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla nunc libero, eleifend in imperdiet lacinia, pellentesque eget turpis. Nulla consectetur augue vulputate arcu porta tempus. Mauris nisl risus, fermentum posuere sodales sed, accumsan in massa. Pellentesque facilisis, felis sit amet vulputate egestas, nibh lacus sollicitudin nulla, non commodo nunc elit et eros. Nulla eu placerat mauris. Phasellus sit amet odio nec dui pharetra pulvinar. Nunc sollicitudin, nisl quis interdum consequat, diam dolor condimentum felis, ac porttitor turpis augue nec sapien. Quisque pulvinar nulla ut elit dapibus in tempus ipsum interdum. Pellentesque feugiat tempus tortor, mollis fringilla ligula faucibus nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus ullamcorper lacus. Maecenas at blandit justo. Maecenas adipiscing velit luctus mauris gravida adipiscing. Morbi molestie ipsum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sapien mi, hendrerit sit amet semper ut, condimentum et risus. Nulla facilisi.
 </p>
 </div>
</div>
<p>When defined over an image the tooltip gets the text into the alt attribute by default</p>
<img id="my-img" src="/jquery-logo.png" alt="test" />
<p>When you attach the .tooltip() method on a link it gets its title attribute for the tooltip by default. Note that you can add more and more links after you attach the .tooltip() method on that class name. This is because the plugin make use of the .live() method of jQuery</p>
<a href="http://stoimen.com" title="a title of the link">Just a link!</a>

And right after that the JavaScript:

<!-- include the jQuery library -->
<script src="/jquery-1.3.2.js"></script>
<script>
// this is the plugin code. You can copy/paste it at the bottom of the jquery.js library file
(function(jQuery) {
 jQuery.fn.tooltip = function(options) {
 $('body').append('<div id="sstt" style="display:none;"></div>');
 if (typeof options == 'undefined') options = {};
 this.live('mousemove', function(e) {

 var att = 'attribute' in options && $(this).attr(options.attribute);
 if(!att) att = $(this).attr('rel');

 var bbox = 'bbox' in options && options.bbox;
 if (!bbox) bbox = $(document);

 if ('text' in options && options.text) att = options.text;

 if ($(this).is('img')) att = $(this).attr('alt');
 if ($(this).is('a')) att = $(this).attr('title');

 var elem = $('#sstt'),csstxt = elem.css('cssText'),ew=elem.width(),dw=bbox.width(),px=e.pageX+10,py=e.pageY+10;
 elem.html(att);
 var eloffset = dw > px+ew &&
 elem.css('cssText', csstxt+';position:absolute;top:'+py+'px;left:'+px+'px;display:block');

 !eloffset &&
 elem.css('cssText', csstxt+';position:absolute;top:'+py+'px;left:'+(dw-ew)+'px;display:block');
 });
 this.live('mouseout', function() {
 $('#sstt').hide();
 });
 };
})(jQuery);

How to setup the options?

The .tooltip() method has an optional “options” parameter that specifies simple parameters for the tooltip itself.

{
 attribute : 'rel',
 bbox : $(document),
 text : ''
}

By default the plugin uses the REL attribute for the text of the tooltip, but you can override it by setting the options attribute property:

var options = { attribute:'title'}

Here the tooltip will take the TITLE attribute value. Note that the TITLE attribute is default for anchor tags and the construction above will be default for them. Over links the .tooltip() method gets the ALT attribute.

bbox is the default bound box for the tooltip. Default value is $(document), but it can be any other jQuery object. Look at the examples bellow.

text is predefining the tooltip’s text.

Finally some examples

1. Usage with no options. The REL attribute is considered as text for the tooltip and the bound box is the document:

$('#container').tooltip();

2. Usage with bound box. The REL is yet again considered as text for the tootip and the bound box is passed as argument as a jQuery object.
2.1. The parent element:

$('#container').tooltip({bbox:$('#container').parent()});

2.2. Explicit defined parent element:

$('#container').tooltip({bbox:$('#wrap')});

3. Predefine the text of the tooltip:

$('#container').tooltip({text:'Hello World!'});

3.1. It can be even HTML formatted text:

$('#container').tooltip({text:'Hello <br /> World!'});

4. Predefine the attribute. Now the default REL is dismissed and the TITLE is considered for the tooltip:

$('#container').tooltip({attribute:'title'});

5. Default for image is not REL but the ALT attribute:

$('#my-img').tooltip();

6. Default for link is not REL, but the TITLE attribute:

$('.my-link').tooltip();

7. You can even add some links from the same class on the fly, but they are still working, because of the live event binding:

$('body').append('<a href="http://stoimen.com" title="another link">some other link</a>');

CSS border-radius vs. images!

css, web development, , , , , , , , , , , , ,

Rounded corners

This is one of the main problems of web design and development now, even if it sounds strange. The thing is that with round corners the elements become more nice and groovy and most of the web designers make such design templates. The problem than comes over the web developer who’s supposed to convert this into HTML and CSS. Of course it would be nice if all browsers support rounded corners in CSS, but they don’t and guess what IE fully doesn’t support it.

-moz and -webkit

Most of you have heart about this patches in CSS when you can use this prefixes for Mozilla based and Safari’s Webkit based browsers. Than you can use border radius with no pain, and you get the same effect as with using images.

-moz-border-radius : 4px;
-webkit-border-radius : 4px;

Of course on IE this doesn’t work and the element remains with square corners. But what the question is, should we make both versions for non IE browsers without images and a version for the “great” MSIE and all of its versions?

My answer is: no!

Although many sites do that, see vimeo for instance, there’s no need to support that. As the rumor and the MSIE blog says in IE9 which is … coming soon there will be – border-radius property.

That’s awesome!

Finally Microsoft has done something good! So stop using background images! This is hard to maintain, difficult to make and it’s bad for the browser loading time, because of the extra images/sprites.

JavaScript optimization. Lazy loading.

javascript, micro tutorial, , , , , , , , ,

Javascript files are too big!

Yes that’s the reality and when they become more and more bigger the web pages becomes to be irresponsible. The bitter reality is that you load any functionality that slows down the first user impression, but is needed only when you click on a button and so on. That’s a problem because you can load only that chunks you need in the beginning and than after a few seconds to load everything else. Some web applications have more than 100K of javascript which become really bad.

Separate logic

What you can do is to separate the logic into one or more files. Even when the user thinks everything is on the page and he can interact with the application and than to start to load the rest of the functionality.

That’s a pretty good technique. Nobody can start interacting on the 5th second of the load process. Usually the user looks at the interface starts to explore the app and after approximately the 10th second he start interacting with the page.

Lazy loading

There are various techniques of loading JavaScript on demand. So I wont cover it, but that pattern of loading it latter when needed is really powerful.