Some questions based on book Jquery: Novice to Ninja

JavaScript
1

Hi,

I’m new to this forum and Jquery. I’m following the book Jquery: Novice to Ninja from sitepoint.

I’ve a few questions about the examples of this book: -

  1. The 9th example of Chapter 7 i.e. inline editing is not working as it should. Whenever I click on text, inline editing is enabled, but when I click outside the text area with the intention to save it. The element disappears. I’ve tried it in Firefox 3.6.3 and Internet Explorer 8.

  2. My other query it about example 17 of Chapter 7 i.e. Simple Modal Dialog. It is working fine in Firefox 3.6.3, but when I try is in Internet Explorer 8, all that I can see in black overlay without any dialog. Since, Jquery is cross browser, it is supposed to work on both FF and IE in a seemless way.

  3. Also I’ve observed some Mozilla specific code in css of example 17 i.e. -moz-border-radius: 10px; and -moz-border-radius: 5px; -webkit-border-radius: 5px; in example 19 i.e. Growl Style Notifications. I’m curious to know use of these tags. Will they work on IE too? As it is not working in example 19. Does Jquery is supposed to wrap around these tags and display consistent results in both browsers?

  4. Finally, I’ve heard that Jquery supports CSS3. Does it supports it on both browsers i.e. FF and IE? I couldn’t find a working example for CSS3 tags using Jquery. I’m particularly interested in border-radius tag for displaying rounded corner boxes.

With regards,

Rajneesh Kumar

2

I’ll try and help with #3 and #4 based on a few assumptions (hopefully correct ones):

  1. Styling in CSS is not related to jQuery (or JavaScript in general). When applying CSS using browser specific extensions (such as -moz or -webkit) it will apply only to those browsers. Using border-radius in this manner is known as progressive enhancement and it allows browsers that support this CSS3 functionality to go ahead and render it accordingly, while allowing browsers that don’t (IE) to fall back to a squared look while still providing a usable web site.

  2. Yes, if jQuery supports CSS3 selectors then it will work in browsers supported by jQuery. With that said, border-radius is a property, not a selector. There’s a difference in the two. jQuery will allow you to select nodes using CSS3 selectors. However jQuery will not assist in styling content.