What is Digg?Sponsored by Dragon Age: Origins
Can't get enough Dragon Age: Origins? Check out new footage. view!
DragonAge.BioWare.com - EA presents BioWare's new dark fantasy epic Dragon Age: Origins. '9/10' from Game Informer.
12 Comments
- tonychenyj, on 07/07/2009, -2/+18Dugg for excellent examples and detail explanation.
- bkemper, on 07/07/2009, -0/+6"37Signals created a custom class HoverObserver (see the .js-snippet) that uses the functionality from prototype.js. Note that there are other ways to achieve this same effect."
As near as I can tell, Prototype is not needed at all. The info bubbles could have been activated with a simple :hover pseudo-class.
And there certainly are other ways to achieve the effect, ways that don't require 5 levels of embedded DIVs in the HTML markup just to create an info bubble with a pointer. Those are all presumably to create the different pieces of the shadows (and the pointer arrow), but it would have been better to use box-shadow for those browsers that understand it (and degrade gracefully for older browsers), or use a background PGN, and then use the ::after or ::before pseudo-element selectors (or the H2 with a background image) to create the pointer arrow (still with graceful degradation). There are already enough elements within the bubble (the H2 and the P) to create separate shadows for the top and bottom of the bubble if using images to do so.
It is also invalid HTML to put all those DIVs inside a SPAN. SPANs are inline elements and DIVs are block elements, and you are not supposed to put block elements inside inline elements in HTML. - rb1248, on 07/07/2009, -1/+5FTA:
"Please notice that this code does not adher to good coding practices as it does not separate JavaScript functionality from the styling of the site. You should never include Javascript events as inline attributes and this example is rather a quick prototype."
YES. - abhidut, on 07/07/2009, -0/+2blogspam from smashingmag? interesting...
- hsbsitez, on 07/07/2009, -2/+4For me, it was more like glimpsing the article and seeing if I knew how to do the effect, and then thinking how many articles I can write about such things.
- bkemper, on 07/07/2009, -1/+3I disagree. There are incorrect and incomplete explanations, such as the one that says a -20 right margin on an image means it is "positioned precisely, by pushing it 20px from the right border". In fact, it is _pulling_ it towards the right edge (there is no border shown, in the CSS sense), to counteract the presumed 20px padding on the text container. They don't even mention that 20px container padding that necessitates this negative margin in order to have the image align with the right edge of the same container.
- bkemper, on 07/07/2009, -1/+3Not only that, but they could have created the example without any JavaScript at all. They are only using JavaScript to create a style difference (visibility) when you hover over a DIV, something that the :hover pseudo-class in CSS does very well on its own.
I also do not think it is particularly sophisticated to use a single PNG image to represent a block of help text. This could have been done with a second DIV (inside the first) with actual text in it (and much smaller PNGs in the CSS for the translucent backgrounds). - pspLite, on 07/10/2009, -0/+1Have you ever made a website that worked in ie6? That is the reason for using javascript to capture hover events.
- robdazomba, on 07/07/2009, -4/+3Is it just me or are none of these things really that hard to figure out how to do? Who needs a tutorial for this?
- Antialias, on 07/07/2009, -4/+2Some good examples but maybe I'm missing what was special about the 1st example with the gorilla? How else would you float an image in copy besides floating it with a margin?
- YouAreDead, on 07/07/2009, -11/+5blogspam
- syntaxgs, on 07/07/2009, -12/+1it,s just lines of writeing I never see it in actual webpage
© Digg Inc. 2009
— Content created and posted by Digg users is