stoimen.com/blog
web developing
Archive for February, 2010
jQuery tips – storing data
Author: Stoimen19 Feb
Storing data?
I was reading an article where the author says it is not a good practice to store data in the DOM. Indeed this is a bad practice and you should avoid it. After that he gives an example with using the DOM with the ALT attribute:
$('selector').attr('alt', 'data being stored');
// later the data can be retrieved using:
$('selector').attr('alt');
and after that the more clean:
$('selector').data('paramtername', 'data being stored');
// then later getting the data with
$('selector').data('paramtername');
OK, is more clean. But however it is bad practice to use such a “heavy” construction to store local data. It is obvious you can prefer to store it in a local variable. Thus you avoid the extra performance.
Stylesheets may block rendering in IE. The solution is maybe dynamic loading.
Author: Stoimen18 Feb
Yes! Style sheets may block the rendering process in IE. When it comes to media different from the screen, as the print is:
media=print
this, lovely, browser stops the rendering until the sheet is loaded. This is pretty strange when it comes to such media, just because it is not used to render the page in a browser. In fact as Steve Souders says the normal behavior of the browser should be don’t block or even delay the sheets for media that is not the current one.
However for further reading see this post with many thanks to Steve Souders again.
clickoutside jQuery plugin
Author: Stoimen17 Feb
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!
Author: Stoimen17 Feb
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!
Author: Stoimen16 Feb
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>');
