Tag Archives: html

jQuery tips – storing data

javascript, web development, , , , , , ,

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.

css, web development, , ,

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.

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>');

Cross-browser rounded corners! Works on IE but, but not on Opera!

css, , , , , , , , , ,

What’s this that works on IE and any other browser, except on Opera?!

Rounded Corners

That was a strange answer. Who’s making rounded corners with CSS?! on IE and more important how? There is a way to make it, but not entirely with CSS and HTML. The solution is with VML a subset of XML to deal with vectors, and CSS of course.

The original solution I found on snook.ca.

It is really working fine as described and shown in the example, but there are some issues as well. There is no way to setup background image on the container, and the width and height are behaving strange.

However this gives you an opportunity to make cross browser rounded corners with no scripting that slows down the page and except Opera it’s quite working!

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.