Code & Technology Cocktail
HTML – CSS – Javascript
9
May
Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.3, 1.4, and 1.5. And I found out that the last part of that sentence is quite important the hard way.
I had a strange error on a page that used colorbox in internet explorer: “a script on this page is causing Internet Explorer to run slowly”. We didn’t change the source at all so it had to be linked to an external script … et voila we found the guilty line:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
There are good reasons why you should let google host jquery for you but be careful how you use this feature! If you just specify 1/jquery.min.js it will automatically take the latest version. So jQuery changed from 1.5.x to 1.6.x and it broke colorbox which is only supported up to 1.5. To bypass this problem we still let google do the hosting for us but we use a specific version of jQuery which is not automatically updated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
So be careful if you automatically fetch the latest version of jQuery because it might break your site even if you did not change a line of code.
13
Apr
Hello from Las Vegas, where I’m attending the MIX 11 conference. MIX is Microsoft’s biggest event about web and devices technologies, and is a real opportunity to have an eye on what is coming in this area from Microsoft.
Today’s keynote was presented by Dean Hachamovich – Internet Explorer corporate Vice president – and Scott Guthrie – who’s responsible for all development platforms for the .Net framework. The main announcement today was the availability of a preview of Internet Explorer 10, which continues to go in the html and CSS standards adoption and also puts a real focus on performance with it’s hardware accelerated rendering capabilities. Here are the links:
- http://ie.microsoft.com/testdrive/Info/Downloads/Default.html (to download IE10 preview)
- http://ie.microsoft.com/testdrive/ (a lot of demos to see what are the capabilities of IE9 and IE10)
- http://worldsbiggestpacman.com/ (a geeky demo of the pacman game done with HTML5)
- http://foursquareplayground.com/ (another demo using the foursquare data)
Besides Internet explorer, Scott Guthrie (helped by Scott Hanselman), showed us some demos of WebMatrix, a lightweight development environment targeted to web (ASP.Net MVC and php mainly) and from which you can easily create new application from a lot of open source platforms. We also have seen some demos about the Orchard CMS, developed by Microsoft on top of ASP.Net MVC 3 and another cool demo from Niels Hartvig, founder of the Umbraco CMS, about their Windows Azure support. They have a really great deployment to Azure module which can handle also from the admin the scalability of the platform by defining rules used to upscale the deployment to more servers (or downscale if the traffic becomes lower). This demonstrates again how innovative the Umbraco CMS platform is.
After this first day keynote, I heard the the second day’s keynote will be full of great announcements, so stay plugged for the next post !
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.
7
Mar
Following my previous post (Once upon a time in the web) and a pre-sales work for Belgacom, here’s some quick tips to know when implementing video tags in html5:
- you have min. 2 video formats – one in MP4 with H.264 codec and one in OGG with Theora codec
- you need a callback in Flash for older browser (and as if they don’t have flash, provide links to download the video) example: http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
- attribute (discover all in w3schools):
- width and height actually do resize the width and height of the video but beware to the weight because our mate of “MS” will catch you if you don’t keep it light-weight
- background color is supported -> bg=”colorwhite”.
- controls available : Play - Pause - Seeking - Volume - Fullscreen toggle* - Captions/Subtitles (when available) -Audio track (when available) * fullscreen is not yet implemented by any browser (except safari), you must use js and make a “fake” fullscreen
- Firefox and Safari block video on v.o. with credentials.
- Video tag also support .mov format but directly in it (not as a source like mp4, ogg or webm)
On my side, i used a js flash player like this:
<script type="text/javascript">
var flashvars = { skin:'flash/belgacom.swf' , screenshot:'default.jpg', flv:'video.mp4', autoplay:'0' };
var params = {quality:'high', menu:'true', allowFullScreen:'true', scale:'noscale', allowScriptAccess:'always', swLiveConnect:'true',wmode:'transparent'};
swfobject.embedSWF("flash/player.swf?timestamp=1029626341", "flvplayer", "512", "288", "9.0.0", 0, flashvars, params);
</script>
<div id="flvplayer"><a href="video.mp4">Download this Video Demo</a></div>
included directly in video tag after source element (it works very well as it creates a valid object element)
1
Mar
As everybody know (unless you’ve been on an island lost in the jungle), HTML5 is THE subject of this year.
Inside this huge release, comes a tag. A tag that many people already nicknamed”the Flash killer”. A simple tag in appearance but harsh in his integration. This tag is called the<video> tag (read this with enio morricone’s song in mind).
For now, Flash player reigns over the web for years. He has won the battle versus quicktime, media player, realplayer(yeah it’s been a while that you haven’t heard of it).
BUT with the rise of the Apple machines, comes Iphone and Ipad. They don’t recognise Flash player as the king. So, our video tag arrives and here we are now: (more…)
23
Feb
The Idea
A few months ago I had this crazy idea to start my own little website combining some new technologies for research purposes. Not just because I need them at work, no. Mostly because I want to stay up-to-date and I felt, at that time, a little bit behind on schedule in this matter. There was no goal set up for my crazy invention so I figured to make a portfolio out of it. Because this is what professionals do and since I don’t have an online portfolio … Heck, let me spoil this for you, it never turned out to be a portfolio. After giving it some thought I came up with a better name for it … “Out of the blue”.
Right! So I started a new Visual Studio project. Just an ordinary web application, nothing fancy. And the technology should be somewhat familiar. Something easy to work with and because my basic skills are all about HTML and CSS, logically the following combination of HTML5, CSS3 and jQuery saw the light.
Law & Order
Before we start bashing our keyboards in the hope some “over the top” HTML rolls out just like that. We might better check our heads first. No, not your head, I mean the <head>. Just like with people, websites need a good <head> in order to function and interpret code properly … mmkay. Keep in mind that there’s one SEO rule saying: “Title first”. This is because we need to make sure that search engines find it easily or it might damage our future rank drastically.
Once done the next thing to think about is meta tagging. This element is used to provide our document with some structured metadata, telling our browser what this document is all about. One meta tag in particular tells the browser what kind of characters I can use:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
Another important one but so often forgotten is the type of scripting we will use.
<meta http-equiv="Content-Script-Type" content="text/javascript" />
And still there are a lot of options in meta tagging. They can be used to specify page description, keywords, document owner and so on. We’ll keep it with this for the time being.
Next on the list is the use of our script tags. In order to make use of jQuery a simple reference to jQuery will be enough. Also not many people are aware of a diffrent way to include the latest version of jQuery. Easy and without extra server bandwidth usage:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
The same goes for the UI add-on, usefull for animations, advanced effects and so on:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
Then a third script to include in our website can be anything like scripts.js or functions.js or whatever. Basic idea is to use this script as a playground. We can put any functionality in there, available after page-load.
Before you leave our village …
As with most projects where I start from scratch, it’s good practice to have a solid base of HTML code before applying any stylesheets. Maybe one exception there, a reset.css file. And as we’re talking about CSS, only one name bears into mind: Eric Meyer! The world wide, all famous CSS guru. So after some google skills … head over here and copy this stuff and link to it in the head. Easy as that! If you’re wondering why we need to do this, I will give you a valid reason: It applies standard rules to elements, and eliminates cross-browser inconsistencies. “DING”!
Similar to our javascript reference, another CSS file e.g. style.css or default.css for our own creative brain to come up with some styling.
Last but not least
One very important thing and certainly not to be forgotten is the usage of a DOCTYPE. Since HTML 4.0.1 there’s a lot available and the most common used, which will give us the most options for CSS declarations and document usage is a transitional one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Once all done our document/webpage is ready to grow and hopefully see the daylight one day.
16
Feb
I had this very weird issue: there was a lot of whitespace around a flash movie for no reason.
The blue is generated by firebug when inspecting the object element.
After checking all the styles and the swfobject code, we found the issue: the browser zoom level was not at 100%.
So if you ever have the feeling that there is a whitespace bug in your flash movies, first check the browser zoom level.
2
Feb
Sweet you have all kind of cool jQuery on your page (overlayers, tooltips, hovers, …). Then you decide to add an asp:UpdatePanel but after the Update event all your scripts are broken.
We can fix this by executing all code within jQuery(document).ready() everytime the Update event is triggered:
<asp:UpdatePanel runat="server" ID="myUpdatePanel">
<ContentTemplate>
<!-- other code -->
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
documentReady(); //a function which contains all the code within jQuery(document).ready()
});
</script>
By Mike