These days I worked hard on the new version of the store Treasures of the Dragon, which primarily sells natural products for health and welfare, as well as other interesting articles.
This shop was launched in November 2008, and I was busy almost all the creative and technical. It was decided to change the graphics from "dark" to "light", and I took the opportunity to add a few enhancements.
Among the many cute little things implemented, today I want to talk about the label I created for the products on offer (a label that indicates the percentage discount applied on), because it makes it a good idea of \u200b\u200bthe potential of jQuery even at levels of nearly pure web design. The idea was to have in the home page and the article offers a fully automatic feature that creates a graphic showing the percentage discount, to match the product photos.
I used jQuery to achieve this only small improvements in design.
In practice, the discount rate is calculated using the tags that contain the value of the list price and the sale value, and then you enter that percentage in an appropriately drafted block with the CSS (which is also built with jQuery). The only thing outside of the file. Html you need is a PNG24 with the label to be used as background of the block created. The graphics must be in. Png 24bit because we need to perfect transparency, of course, since we're going to stack the coupon on different backgrounds.
HTML section that concerns us has a structure like this:
\u0026lt;div class="offerte">
- \u0026lt;h1> article name \u0026lt;/ h1>
- \u0026lt;p> article description \u0026lt; / p> \u0026lt;img alt = "photo article" /> \u0026lt;span class="list_price"> € 14.00 \u0026lt;/ span> \u0026lt;span class="sell_price"> € 12.60 \u0026lt;/ span>
- \u0026lt;/ div>
Here jQuery code to calculate the percentage discount applied:
$ ('. Offer'). each (function (i) {var
lp = $ (this). children ('. list_price'). text ();
lp.substr lp = (0, lp.length - 1);
var sp = $ (this). children ('. sell_price'). text ();
sp.substr sp = (0, sp.length - 1);
var discount = Math.round ((100 - ((sp / lp) * 100)));
});
method
each (callback)
used to iterate over all items of the class "offerings" on the page, because it is said that the discount rate applied is the same on all Articles.
First we store the old price and assume that each in its own variable with the method
text ()
.
Then with the expression that follows it truncates the last character in the string stored in each variable. This is to delete the final of the euro, we would make the data unusable in math. Eye that the decimal separator is a symbol period (.) and not a comma (,) because jQuery in the second case would not recognize the values \u200b\u200bstored as numbers. The variable discount is calculated the percentage discount: the method round (x) object
Math
rounds the value of the discount to the nearest integer. This is very useful in terms of graphics, as one or more decimal places "squeeze" too much text in our label. At this point, building a block element \u0026lt;div>
for entering text as the value of the variable
discount for to view this page formatted as you wish:
$ ('. Offer'). each (function (i) {var sp.substr sp = (0, sp.length - 1); var discount = Math.round ((100 - ((sp / lp) * 100))); $ (this). append ("\u0026lt;div class='bollino'> \u0026lt;/ div>"); $
(this). children ('. vignette'). css (dot). html (discount). ('-'). prepend append ('%');
});
In essence, it hangs
a
div the block "offers" and is attributed to the style you created earlier, using a variable (using css (properties)
, we'll see shortly), the HTML content as you enter the variable discount (
html (val)
) and garnish with the necessary symbols "-" (as it is a discount) and "%", respectively
first
and
after the inserted text.
For the image of the stamp I just used one of
default Photoshop shapes:
Now we just need to create the CSS to format and put our sticker.'width': '50px ',
Again using jQuery to create a variable to be passed easily to their block by the method
css (properties)
.
{var label = 'background': 'transparent url (images / bollino.png) top center no-repeat',
' height ': '50px',
'z -index ': '100', 'text-align': 'center', 'padding-top': '1 em ', ' font ',' bold italic 1em "Century Gothic", century, sans-serif ' , 'color': '# fede60',
'position': 'absolute', 'top': '70px ', ' left ': '125px' }
The position: absolute
serves to place the sticker partially superimposed on the photo of the product.
The only thing to note here is that in order to enable absolute positioning of the label within the block "offers", it is vital that it has CSS property position: relative . If not, the ranking will be compared to the first block relatively positioned ancestor, and this will almost certainly ensure that all stamps overlap. And this is not what we want, right? In the end, what you get will be something like this:
Here's the complete script self-sufficient: $ (document). Ready (function () {var label = {
'background': 'transparent url (images / bollino.png) top center no-repeat', 'width': '50px ', ' height ': '50px', 'z-index': '100 ',
' text-align ':' center ',
' padding-top ': '1 em' ,
'font', 'bold italic 1em "Century Gothic", century, sans-serif',var sp = $ (this). Children (' . sell_price '). text ();
'color': '# fede60',
'position': 'absolute',
'top': '70px ',
'left': '125px '}
$ ('. Offer '). each (function (i)
{var lp = $ (this). Children ('. List_price'). Text ();
lp.substr lp = (0, lp.length - 1);
sp.substr sp = (0, sp.length - 1);
var discount = Math.round ((100 - ((sp / lp) * 100))); $ (this). append ("\u0026lt;div class='bollino'> \u0026lt;/ div>"); $ (this). children ('. vignette'). css (dot). html (discount). prepend ('-'). ('%'); append});} ) [Added: On the issue of transparency in IE6] The issue is too old to be having always be to discuss: IE6 does not support alpha transparency of PNG24, and our stamp on this browser degrades to a size chart unpleasant. Nobody today would never surf the internet with such a program! But for those who are forced, there's always some loophole in part. One method is to use the script PNG Fix Andreas Eberhard, who generally does an excellent job in restoring the proper PNG transparency of the web page on which it is invoked. The other solution is the old method of GIF images to PNG as a replacement, since at least the single-bit GIF transparency is supported by this browser.
In this case, if used one labeled "solid" (solid color) like mine above, should create a GIF only two colors: one for the color of the label, the other for transparency, and without dithering. In this way, when the label is combined with other elements, the results are much more acceptable.
One way to implement this system in our last script without changing anything is to use jQuery to recognize the model and version of the browser interprets the page, and act accordingly.
For example, by adding at the end of the script, simply if ($. Browser.msie & & $. Browser.version
$ ('. Vignette'). Css ('background', 'Transparent url (images / bollino.gif) top center no-repeat');}
actually use the method
$. Browser.version
is deprecated because using jQuery as regards the characteristics
a browser, that his version
, as explained in the documentation page dedicated to the method
jQuery.support
.
0 comments:
Post a Comment