Archive for the ‘HTML & CSS’ Category

« Older Entries

IE 9 Video Tag Support

Friday, September 7th, 2012

The new shinning IE-9 from the Microsoft finally support the HTML Audio and Video tags. However there are some catches to look for.

For the few months now, we have been using the VideoJS in my client web-pages, and it worked great on FireFox, Chrome, Opera, IE-8 and lower end browsers. However we got support call from the client complaining that Video is not loading correctly on the IE-9. This was weird and shocking, because if it works in IE-8, how can it break in IE-9?

When debugging this, I made some interesting discovery. I was using the following Video tag with VideoJS script:

1
2
3
4

<video id="my_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" 
width="520" height="264" data-setup="{}">
    <source src="video/sample_video.mp4" type='video/mp4'>
</video>

And this was working in all popular browsers except IE-9. While trying different solutions, I found that following does work corectly (removing the VideoJS support) in IE-9:

1
2
3
4

<video id="my_video_1" controls autoplay preload="auto" width="520" 
height="264" data-setup="{}">
    <source src="video/sample_video.mp4" type='video/mp4'>
</video>

However, by not adding the VideoJS, we will have to compromise on support for the IE-8 and other browsers who don’t support the Video tag. But this confirmed that apparently VideoJS was doing something with the Video tag, and by debugging the content using the Developer Tools, I found that it was changing the video tag to something like this at runtime:

1
2

<video class="vjs-tech" src="video/sample_video.mp4" id="my_video_1_html5_api" 
preload="auto" autoplay="" poster="null" data-setup="{}">

So basically, it was removing the child source tag, and adding it as a property to the main video tag, which for some reason was not working in the IE-9. Debugging for the issue, I found that if you change the video source path to fully qualified (starting with HTTP path), it finally works in IE-9 and is compatible with other browsers too. So here is the final working video tag for the VideoJS:

1
2
3
4

<video id="my_video_1" class="video-js vjs-default-skin" controls autoplay 
preload="auto" width="520" height="264" data-setup="{}">
    <source src="http://site-name/video/sample_video.mp4" type='video/mp4'>
</video>

Simple task, learned hard way. Hello IE-9.

Tags: , , ,
Posted in HTML & CSS | No Comments »

Responsive Web Design using CSS @media queries

Sunday, September 2nd, 2012

Responsive Web Design is the hot topic in the latest state of the art web site and web applications. There are various techniques and technologies used to achived that. But one of the simplest and hottest is using the CSS @media queries.

Making a great looking web-page which works well on all the devices from Phones to large display screens, and from colored to monochrome printers is definitely a challenging tasks. The CSS @media tags for screen vs print has been supported for some time, and I have used this in couple of projects too. However when it comes to making good looking page for various screen resolutions, the usual procedure is to duplicate the page according to the target device/resolution. However, the new CSS3 @media queries may change this for all. When properly used, they make it possible to make a single page which display nice and perfect on almost all the devices and resolutions.

My source of inspiration for this article is the CSS-Tricks website. For a sample, just go to this site home-page, and then try to resize the page, and you will see that all the content fit very nice on all the resolutions, plus some of the images do change depending on the target resolution.

The magic for this lies in the CSS @media queries. These new CSS elements lets you define the conditional CSS classes for different factors including width, height, orientation, aspect ration, color, etc.

So far example, if you want to define two types of style classes. One for all the devices upto 800px wide, and the rest for the higher resolution, then you can do this by the following sample CSS media query:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@media screen 
{
	body
	{
		background: rgb(255,255,136);
	}
}
 
@media screen and (max-width: 800px)
{
	body
	{
		background-color:rgb(182,224,38);
	}
}

The above CSS is pretty simple and straightforward. Basically, the first media query is empty, and will simply apply to all screen type devices. While the second @media query also define an additional limit for the display width of 800px. So far all the devices upto 800px, the second class will be used, and for all high resolution screens, the first class will be used.

Note: For the sample, I’m just changing the background color of the page, but this can be anything i.e. including new classes, html elemental override, etc.

The order in which define the CSS media queries is also important. You need to define this for broad category to limited device in the top to bottom order i.e. styles for small resolution devices should be at the last.

Here is my first try with the @media queries in JSFiddle (try to resize the page to see the magic):
http://jsfiddle.net/syedgakbar/anLwH/embedded/result/

As you can see in the above demo page, as you resize the page, the background color changes, plus also the Vitz/Yaris colors changes too. And at low resolution, you apply the stretch to background to cover the available space. All this is done with no JavaScript and only using the CSS3 @media queries.

If you want to learn more about @media queries, then I would recommend the following article:
Introduction to media queries

I will hopefully by adding this to my site as well, and hope to learn a lot from that experience. You are welcome to share your comments as well.

Tags: , , , ,
Posted in HTML & CSS | No Comments »

HTML Nested Elements & OnMouseOut Event

Sunday, August 19th, 2012

If you are trying to track the mouse-out event, for example to hide the sub menu when user leave that area, then there are good chances there are good chances that you may stuck into a problem, where the parent element mouse-out event fires, when you move the cursor to the child.

Here is a quick demo of this:

You will notice that as soon as you move the mouse over to the child DIV, the mouse out event of the parent is fired. This is problem in most of the cases, where you want to detect the true mouse out (where the mouse is still over main Div or any of its child Div areas).

There are two possible solutions for this. First is that if you are using the JQuery, then you are good. There is already a special event in JQuery called mouseleave which does exactly what you want. All you have to do is to bind to this event instead of HTML element onmouseout event, and you are good.

However, if you are not using the JQuery, and for some reason don’t want to use it just for this fix. Then there is simple JavaScript only fix for this too (somewhat same rule is used by JQuery too). Here is the JavaScript for such mouse leave event:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

 
// JQuery style getElementByID wrapper
$ = function(id) {
    return document.getElementById(id);
}
 
// Our generic code to handle the on mouse event
isMouseLeave = function(event, parent) {
    // Get the reference to the event object
    if (!event) var e = window.event;
 
    // Get the target parent (extra code for cross browser compatability)
    e = event.toElement || event.relatedTarget;
 
    // Now keep traversing all the parents of the current target object to detect if the 
    // object on which the mouse is being moved is child of the main parent element we are looking 
    // for or not
    while (e && e.nodeName && e.nodeName != 'BODY') {
        // if this is a child element, ignore this on mouse out event
        if (e == parent) return false;
 
        // check the next parent
        e = e.parentNode;
    };
 
    // If we are here, then this is actually the mouse out leave event, so do what you want to do
    return true;
}
 
// Generic event binder
bindMouseOut = function(object, handler) {
    object.onmouseout = function(event) {
 
        // Call handler if this is mouse leave even
        if (isMouseLeave(event, object))
            handler();
    };
}

And you can bind this mouse leave function with any HTML element using the following simple script:

1
2
3
4
5

 
bindMouseOut ($('outerDiv'), function(){
       showMsg('messageLog', 'Out Div Mouse Out');
})
​

You can view this in action on Jfiddle:

JQuery magic revealed.

Tags: , , ,
Posted in HTML & CSS, JavaScript | 3 Comments »

Rubik’s Cube Animation using CSS

Tuesday, August 14th, 2012

Rubik's Cube Animation using CSS

As I posted in my old blog, CSS Loading Animation for AJAX Requests, I have been playing with the CSS3 Animation and Transform properties for few days now, and finally I came up with something interesting to share. And that’s a Rubik’s Cube spinner animation with changing color of the boxes with NO JavaScript at all. All the animation and transformation is done using the CSS3 attributes. This is truly amazing and shows the power of the CSS and future of the web.

Before I go ahead and give you brief tutorial on how this was accomplished. Here is in action (you should have latest Chrome, FireFox, Safari or Opera browser to view to correctly):

Note: For all the sample CSS in this code, I’m using the -webkit- prefix for the CSS3 properties. You will need to add the corresponding pre-fixes for each type of browser you want to support. For example, for the transform-style, you need add following four lines to support all the major browsers:

1
2
3
4

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;

I know, it’s looks very ugly, and I hate it. But you have to compromise on this. If you can’t do this, I will recommend look at LESS. Now coming back to the Rubil’s Cube animation, the first important task is to create one face/side of the Rubik’s Cube. Fortunately, this is more simple than it sounds. You just need correct set of styles, and few lines of HTML code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

.rubik_cube_face {
    text-align: center;  
    width:200px;
    height:200px;   
}
.rubik_cube_face span {
    display: inline-block;
    border:1px solid black;
    float:left;
    vertical-align: middle;
    width: 28%;
    height: 28%;
    margin: 2% 2%;
    background: black;
    border-radius: 3px;
}
.rubik_cube_face span:nth-of-type(1) {
    background: yellow;
}
.rubik_cube_face span:nth-of-type(2) {
    background: green;
}
.rubik_cube_face span:nth-of-type(3) {
    background: white;
}
.rubik_cube_face span:nth-of-type(4) {
    background: blue;
}
.rubik_cube_face span:nth-of-type(6) {
    background: blue;
}
.rubik_cube_face span:nth-of-type(5) {
    background: red;
}
.rubik_cube_face span:nth-of-type(7) {
    background: orange;
}
.rubik_cube_face span:nth-of-type(8) {
    background: yellow;
}
.rubik_cube_face span:nth-of-type(9) {
    background: green;
}

And here is the HTML:

1
2
3
4
5

<div class="rubik_cube_face">
	<span></span><span></span><span></span>
	<span></span><span></span><span></span>
	<span></span><span></span><span></span>
</div>

This should create something like this:

Rubik's Cube Face

Okay, one step achieved. Now the hard part, how to display this in a 3D box style. The answer lies in transform and transform-style styles of the CSS3. The idea is that we create six DIV elements for the each side/face of the cube and then transform them (by rotating them along X or Y axis) to move them to proper side of the cube. Here is the key CSS styles to achieve this:

1
2
3
4
5
6

#cube .front  { -webkit-transform: rotateY(   0deg ) translateZ( 100px ); }
#cube .back   { -webkit-transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .right  { -webkit-transform: rotateY(  90deg ) translateZ( 100px ); }
#cube .left   { -webkit-transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .top    { -webkit-transform: rotateX(  90deg ) translateZ( 100px ); }
#cube .bottom { -webkit-transform: rotateX( -90deg ) translateZ( 100px ); }

What translateZ does is move each of these sides from their center by half of the size (100 pixel), so that they form the correct sides of the parent cube. BTW, my key source of sample for the cube animation was from from the following site (a big Thanks to author for writing this wonderful article):
http://desandro.github.com/3dtransforms/docs/cube.html

Here is the sample CSS and HTML to make a rotating cube:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

.container {
  width: 200px;
  height: 200px;
  position: relative;
   margin: 70px auto 40px;
  -webkit-perspective: 2000px;
}
#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ( -100px );
  -webkit-animation: spinCubeWebkit 9s infinite  linear;
}
#cube .figure{
  width: 196px;
  height: 196px;
  display: block;
  background: black;
  position: absolute;
  border: 2px solid black;
  opacity:0.6;
}
#cube .front  { 
    -webkit-transform: rotateY(   0deg ) translateZ( 100px ); 
    background: red;
}
#cube .back   { 
    -webkit-transform: rotateX( 180deg ) translateZ( 100px ); 
    background: blue;
}
#cube .right  { 
    -webkit-transform: rotateY(  90deg ) translateZ( 100px ); 
    background: green;
}
#cube .left   { 
    -webkit-transform: rotateY( -90deg ) translateZ( 100px ); 
    background: yellow;
}
#cube .top    { 
    -webkit-transform: rotateX(  90deg ) translateZ( 100px ); 
    background: white;
}
#cube .bottom { 
    -webkit-transform: rotateX( -90deg ) translateZ( 100px ); 
    background: orange;
}
@-webkit-keyframes spinCubeWebkit {
    0% { -webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}
1
2
3
4
5
6
7
8
9
10

<div class="container">
  <div id="cube">
    <div class="figure front"></div >
    <div class="figure back"></div >
    <div class="figure right"></div >
    <div class="figure left"></div >
    <div class="figure top"></div >
    <div class="figure bottom"></div>
  </div>
</div>​

Okay, and here it’s in action:
http://jsfiddle.net/syedgakbar/yg34R/

Once this is done, all you have to do is combine both of the above code blocks i.e. draw 9 blocks on each six side of the cube. Again, using the correct CSS cascading and html tags, this can be accomplished easily. Here is the HTML for this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<div class="container">
  <div id="cube" class="spinning">
    <div class="figure front">
       <div class="rubik_cube_face">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
        </div>
    </div >
    <div class="figure back">
       <div class="rubik_cube_face">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
        </div>  
    </div >
    <div class="figure right">
        <div class="rubik_cube_face">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
        </div>       
    </div >
    <div class="figure left">
        <div class="rubik_cube_face">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
        </div>  
    </div >
    <div class="figure top">
        <div class="rubik_cube_face">
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
         </div>  
    </div >
    <div class="figure bottom">
        <div class="rubik_cube_face">
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
         </div>   
    </div >
  </div>
</div>​

For the CSS, please check the “CSS” page of the first JSFiddle block. I’m sorry, it’s long and this page is already very cluttered. Here is the link to the Rubi’s Cube Animation html page.
http://www.syedgakbar.com/assets/blog/rubik-cube.html

All this should give you a nice rotating Rubik’s Cube. You can leave this here, or you can add some JavaScript to make this a real Rubik’s Cube i.e. where user can rotate it in 3D, plus also move the rows and columns to actually solve this. It would be nice experiment, and who knows, may be one day I complete that and share that as well.

Tags: , , ,
Posted in HTML & CSS | No Comments »

CSS Loading Animation for AJAX Requests

Thursday, August 9th, 2012

Albeit the browser support issues and reason that they are more resource hungry than GIF animations, the CSS animation for the web are getting popular. I’m already using one on my homepage while its loading recent blog posts. If you just google “CSS loading animation”, you should find hundred of results, out of which top 20 or 30 are very relevant, and contains some nice CSS animations.

With this popularity, there comes also the sites which are dedicated to only generating the CSS based animation for any of your choice and color scheme like:
http://cssload.net/

If you want to learn and develop your own, I would recommend the following two starting tutorials:
CSS3 Loading Spinners Without Images
CSS3 Loading Animation Loop

Like here is a simple rotate animation of the Google Chrome:

I’m also working on one of my own CSS loading animation. And guess what’s it’s Rubik’s Cube. I’m still working on it, but here is any early preview of the so far progress:
http://jsfiddle.net/syedgakbar/S3Ppm/2/

Here is the JSFiddle embedded preview:

3D version of the Rubik’s Cube with cool animation is coming soon. So, stay tuned.

Tags: , ,
Posted in HTML & CSS | No Comments »

« Older Entries