jQuery Position vs CSS

I am a server guy with limited but growing client side (javascript) abilities.

I have an app that requires a half dozen DIV tags with inner background images and text all positioned over larger image. Think transparent images with roll overs and text. All of this is somewhat dynamic depending on server side templates and configuration.

I am finding it much easier to position these programmatically using the core jQuery position() method than attempting a pure CSS and markup based approach. There are a number of techniques for vertially centering text within a DIV using CSS but position() just makes this easy.

My question:

How valid is an approach that makes extensive use of position() vs an approach that uses more 开发者_开发技巧of pure markup (traditional HTML and CSS)? I realize that in the end, most of the jQuery approach translates into styles and CSS.

At the heart of your question is the issue of Unobtrusive Javascript.

Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation

In particular Progressive Enhancement

Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

What you have to ask yourself is how far will you stride to reach this ideal pinacle of js development. Sometimes its just plain stupid to code this way (yes, i said it). In a perfect world of unlimited deadlines and lightning quick fingers with an ever expanding mind you could and should code COMPLETELY unobtrusively in EVERY possible situation.

Again, let me stress that one should strive to achieve this goal whenever humanly possible. But here are some cases that I personally make exceptions.

• Internal Apps: When I have complete control over the deployment platform I would be perfectly comfortable using the position property or any minor violations of the Unobtrusive Ideal. Especially if the budget for a project is low. The key here is to make sure you or whomever you are coding for knows the fallbacks here. (yes, you need JavaScript/Browser X to run this application).
• Budget/time: If i'm in a major crunch and i'm faced with some petty CSS BS in ie6 sometimes it's just the right decision to make.

Yes, it's ok to use the position property but use it as sparingly as possible. The most important part is that your code degrades gracefully, or as gracefully as you deem fit. If the site/app is bearable w/o javascript (7% market share) then go for it.

jQuery/Javascript is not sufficient enough to replace CSS. You need to learn it if you will be coding in the front-end. There is no way around it.

The worst consequence by doing that grammatically is users may see a flicker when the code gets executed and updates your styles.

Another consequence is using Javascript may be harder to understand to someone else who needs to update your code.

I would suggest to use CSS as much as you can, then use position for things that wouldn't be worth your time figuring out, like doing vertical center.

I would say to separate your website into at least 3 different layers, i.e. markup, behaviour and styling/positioning. It means put the 3 languages/scripts in separate files:

* Markup: HTML
* Behaviour: Javascript or/and jQuery or other script
* Styling/postioning: CSS

What jquery does, when styling, is it puts the styling in the HTML tags, which is not really a good practice in web development. Although you cannot really escape it, especially when doing animation or some special effects.

But still try and not add css through jquery except when doing special effects, animations, etc. Make most of your styling in a css file.

jQuery's position method simply translates into a few CSS styles, namely position: absolute; top: Ypx; left: Xpx;. It sounds like the only proper way to position the text in your case is to use those CSS styles, but keep in mind people that have javascript turned off.

Alternatively, you could modify each div tag dynamically:

<div style="position: relative;"> .... <div style="position: absolute; top: 50px; left: 70px;">Text here</div> .... </div>

Try to use each technology for what it was intended for. Use CSS to define style classes, then use jQuery to manipulate object .classes to achieve desired style. By doing so you have styled using CSS and manipulated using jQuery/JavaScript and didn't mix function with style.