15. June 2010

0 Comments

HTML5 and CSS3 Readiness Visualization

html5cssreadiness

Paul Irish and Divya Manian have created a fun visualization on readiness of HTML5 and CSS3 standards in various browsers.

It uses a bunch of the usual CSS cool-suspects: -webkit-gradient, -webkit-transition, -webkit-border-radius, and the like (and -moz/-o too).

The added feature is…. do a mouse scroll on the page:

Share
Continue reading...

11. June 2010

0 Comments

Drag and drop file uploads in Gmail using just the specs

Ropox: Thats interesting enough, but still to my opinion there is a lot to be made yet.

Gmail started off with the awful input type="file" “add more” typical solution that we all know and love. Then they added the ability to select multiple files via Flash…. and now they allow the ability to drag and drop files right onto the message compose using HTML5 standards.

Want to do it too? Check out the APIs and how you can do it all, including showing the thumbnails:

function handleFiles(files) {
for (var i = 0; i
var file = files[i];
var imageType = /image.*/;

if (!file.type.match(imageType)) {
continue;
}

var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);

var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
Share
Continue reading...

8. June 2010

0 Comments

Getting the page and viewport dimensions using jQuery

thats why i Love jquery, cause everything is so simple…

To get the width and height of the whole page (document), use:

var pageWidth = $(document).width();
var pageHeight = $(document).height();

To get the width and height of the viewport (window), use:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

Opera though has a different approach. with Opera 9.5 $(window).height() returns the document height (more info here)
you can get around this by using

var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
Share
Continue reading...

1. June 2010

0 Comments

ionas.gr : Head – Mares e-shop reloaded

ionas.gr : Head – Mares e-shop reloaded

HEAD and MARES products are well known in sports fans and mostly in diving fans here in Greece. Ionas Bros have reloaded their e-shop and I’m excited that I had the lack to be the one who engineered their new site. Ionas Bros are representing in Greece the following :
# Mares (Scuba diving and free diving equipment)
#  Head ( Tennis equipment )
#  Head ( Swimming gear)
#  Head Sportswear (Ski and Tennis fashion line)
# Dolomite. ( Trekking boots and ski gloves)
# North Finder.  (Specialty outdoors clothing & jackets)
# L&W Compressors. ( Filling stations )
# Green Force. ( Underwater lighting system)

Ionas eshop

Ionas eshop

Design: Sekta
Production: Baldpixel
Client: Ionas SA
Development: Baldpixel
Developers Jargon: Custom Backoffice tool, for products, news, brands, retailers. Much thought was given on optimization of the front end, were we had to limit queries and optimize the way graphics and scripts were loaded. Jquery UI was used widely and I must say that I’m impressed with the capabilities of it.

Ionas products

Ionas products

Ionas Retailers

Ionas Retailers

Share
Continue reading...