Menu
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.
981
jQuery position() Method The position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties; the top and left positions in pixels.
Although both methods have some similarities, but the jQuery offset() method is different from the jQuery position() method. The offset() method retrieves the current position relative to the document, whereas the position() method retrieves the current position of an element relative to the parent element.
As it can be observed in the above example, the position defined in the style is inherit, but the computed position value is relative. This is because inherit sets the value to that of its parent element. With that, we are done with the position property. Hope this helped you better understand, positioning in HTML/CSS.
The absolute positioning is best if you need something the be placed at an exact coordinate. The relative positioning will take where the element already is, and add the coordinates to it. So for example if I have a <p> element inside of a <div> and I want to indent it, I would use relative with, say, left:15; .
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.
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.
166
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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
