Code & Technology Cocktail
Posts tagged jQuery
13
Apr
Since click tracking is implemented in almost every project these days, new ways of triggering events and sending tracking code are very important and vary from project to project. With this context in mind, I was asked to implement tracking code on several links. Each link had different tracking ID’s for each language. Since our content for each language is fetched from the DataBase our basic HTML stays the same.
>>
Adding the onclick event as an attribute is one thing, but adding it with different tracking code in another language is something else. This is where jQuery helped me out since targeting elements and triggering events … well … is basically something jQuery is very good at.
var AdformTracking = function (lang) {
// Init variables
var cId = 25910;
var adformMap = {
"sv-SE": {
0: 350591,
1: 350592,
2: 350593,
3: 350594,
4: 350595,
5: 350596,
6: 350597,
7: 350598
},
"fi-FI": {
0: 350567,
1: 350568,
2: 350569,
3: 350570,
4: 350571,
5: 350572,
6: 350573,
7: 350574
}
};
var buyNow = $("#header .dealer a:first");
var whereToBuy = $("#header .dealer a:last");
var promoItem1 = $(".promoItem .button a").get(0);
var promoItem2 = $(".promoItem .button a").get(1);
var promoItem3 = $(".promoItem .button a").get(2);
var promoItem4 = $(".promoItem .button a").get(3);
var pdf = $(".banners .pdf a");
var facebook = $(".banners .facebook a");
var clickArr = [buyNow, whereToBuy, promoItem1, promoItem2, promoItem3, promoItem4, pdf, facebook];
// Events
$(clickArr).each(function (i, item) {
$(item).click(function () {
Adform.Tracking.Track(cId, adformMap[lang][i], "");
});
});
};
What I did was adding a parameter “lang” to my function so I can switch mapping in the adformMap variable. Once set up I target my elements with jQuery. Enlist all the jQuery objects in the clickArr. Loop over the clickArr and add for each item a click event trigger. Inside the click event we’ll be executing a function which can be our tracking code.
The position of the jQuery object in the clickArr matches the numeric value in the adformMap.
adformMap["sv-SE"][4]
On execution this will give you “350595″.
A couple of benefits popup into my mind …:
- All your tracking code can be mapped in one file (or script)
- Easier to add languages
- More easy to add links to track
- Your HTML code stays nice and clean (if you didn’t mess that up already ofcourse :p)
Works like a charm!
11
Apr
Adapt or suffer forever A big change in slicing these days is definatly the way we deal with rounded corners. Since CSS3 introduced the border-radius property, any block element (p, h1-h6, a, div, …) can be rounded down. Take a look at a recent project we’ve done at Belgacom. http://www.mijnbelgacomtvfilms.be/ How we did this? Not too complicated though … we need basic HTML, CSS and jQuery to make it all cross-browser compatible. Forget about background-images! Don’t even think about adding an extra div for top and bottom. It is getting old and we need to get rid of it right now.
Set up the HTML The navigation layer is a nice example of how we keep things simple, yet achieve a good result with rounded corners in the links and on the navigation panel.
In the index.html
Set up the CSS Note the class “.round10″ here since this is our magic one. The prefixes are used to target several browsers. Because not every browser supports “border-radius”, we need to make sure that we can target as many browsers possible with CSS. So some browsers chose to support it with their own prefix, while waiting for the standard to be approved. In the meantime we target these several browser-supports differently.
- -moz-border-radius (Mozilla aka FireFox)
- -webkit-border-radius (Safari, Chrome, Opera)
- -khtml-border-radius (Konqueror)
- -o-border-radius (Opera)
The -o- prefix might be obsolete but know it excists.
.round10 {-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}
.shadow {-moz-box-shadow: 1px 1px 3px #999999; -webkit-box-shadow: 1px 1px 3px #999999; box-shadow: 1px 1px 3px #999999;}
/* navigation */
#navigation {background-color: #000000; clear: both; display: inline-block; list-style-type: none; margin: 0; padding: 5px; width: 770px;}
#navigation li {display: block;float: left;}
#navigation li a:link, #navigation li a:visited {background-color: #67B4CF; color: #FFFFFF; display: block; float: left; font: bold 14px/120% 'Orbitron',arial,serif; margin: 0 2px; padding: 5px 15px; text-decoration: none; text-shadow: -1px -1px 0 #000000; -moz-box-shadow: 0 0 3px 0 #FFFFFF; -webkit-box-shadow: 0px 0px 3px #FFFFFF; box-shadow: 0px 0px 3px #FFFFFF;}
#navigation li a:active, #navigation li a:hover {background-color: #87CEEB;}
In the default.css
Cross-browser solution with jQuery This script works perfectly for rounding down block elements. It will calculate the necessary amount of pixels and background-color and append it to our DOM.
<head>
...
<script type="text/javascript" src="design/js/scripts.js"></script>
<script type="text/javascript" src="design/js/functions.js"></script>
<script type="text/javascript" src="design/js/jquery.corner.js"></script>
<link type="text/css" href="design/css/default.css" rel="stylesheet" />
...
</head>
In the index.html
If you keep all corners at the same pixel radius, you can target the classes in jQuery and the script will do most of the work. Else I advice to play with it a little bit. I’ll post a more advanced way later on.
//Once the DOM is ready
$(function(){
$(".round10").corner("10px");
});
In the scripts.js
Conclusion The benefit of slicing like this is huge. Since you don’t need to cut background-images anymore, you’ll be saving tremendous amounts of time. Also your code will be a lot cleaner. Less spacer layers for the backgrounds and the option of choice. Choice in this matter of supporting old browsers or let it all degrade nicefully. If you go down the road of cross-browser support, the easier your corners are, the better the result.