Responsive CSS, How to make clock maintain position with image on resize

The image I'm working with is located at this URL: http://migentemobile.com/wp-content/themes/migente/img/migente-mobile-carousel.png

As you can see the clock on the image is static. I've been asked to put a working js clock overtop of the static clock for eye candy.

I have the following jsFiddle.

Or here's the full markup

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Migente Carousel with working clock</title>
    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        html, html a {
            -webkit-font-smoothing: antialiased;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
        }
        .container {
            background-color:#fff;
            margin:auto;
            width:70%;
        }
        #clock {
            -moz-transform:rotate(90deg);
            -ms-transform:rotate(90deg);
            -o-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            background-color:#000;
            color:#9C9C9C;
            display: table-cell;
            -webkit-font-smoothing: antialiased;
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            font-family:"Helvetica Narrow", "Arial Narrow", Tahoma, Arial, Helvetica, sans-serif;
            font-size:16px;
            font-weight:600;
            height:20px;
            left:833px;
            padding:1px;
            position:relative;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
            top:-157px;
            width:50px;
            zoom: 1;
        }
    </style>
    <script>
        function checklength(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }

        function clock() {
            var now = new Date();
            var hours = checklength(now.getHours());
            var minutes = checklength(now.getMinutes());
            var seconds = checklength(now.getSeconds());
            var format = 1; //0=24 hour format, 1=12 hour format  
            var time;

            if (format == 1) {
                if (hours >= 12) {
                    if (hours == 12) {
                        hours = 12;
                    } else {
                        hours = hours - 12;
                    }
                    time = hours + ':' + minutes + ':' + seconds;
                } else if (hours < 12) {
                    if (hours == 0) {
                        hours = 12;
                    }
                    time = hours + ':' + minutes + ':' + seconds;
                }
            }
            if (format == 0) {
                time = hours + ':' + minutes + ':' + seconds;
            }
            document.getElementById("clock").innerHTML = time;
            setTimeout("clock();", 500);
        }
        window.onload = clock;
    </script>
</head>

<body>
    <div class="container">
        <img src="http://migentemobile.com/wp-content/themes/migente/img/migente-mobile-carousel.png" class="carousel-macbook" alt="carousel" />
        <div id="clock"></div>
    </div>
</body>

</html>

With my current resolution, this works fine. However upon browser resize or resolution change, the clock is no longer positioned properly. I'd like to make the image responsive as well as maintain the js clock's position to the image if the browser gets resized or is viewed on different platform i.e. mobile, tablet, desktop, etc...

I was reading http://learnlayout.com/position.html (Slide 7 / 19) about position relative, which I thought would be the objective since I want the clock's position to be relative based on the image's size. However I'm obviously missing something here because when I resize the browser or view on mobile the clock does not stay where it belongs.

Any help with this project would be greatly appreciated!

UPDATE

Looks OK in

  • Safari 5
  • IE 10 & 9
  • Chrome 26 & 25

Position of clock is off in

  • Firefox 19

Position OK but text is not rotating in

  • Opera 12

  • IE 8 & 7 & 6

Answers


The CSS transform property is not supported prior to IE9.

For Firefox (and maybe also Opera), the "display: table-cell" attribute is causing the browser to refuse to render the "position: relative" attribute. Try "display: inline-block" instead.

"position: relative" positions the element relative to it's parent container. So it is positioning the element according to ".container", NOT img. When I look at .container in jsFiddle (by giving it a "background: #ff0099"), it looks like it will be both a different size and in a different position for devices, especially when the devices rotate. That's probably what is messing up your clock's position relative to the image, which has no position relative to the changing .container.

If you make ".container" the exact dimensions of the image, and give the image a position inside of it (i.e., "position: relative; top: 0; left: 0;"), you should be able to manipulate the clock's position much more consistently for devices, because the image and the container will be positioned identically, which they now are not.

BTW I think the clock is very cool!


Need Your Help

How to create an editable textbox in HTML that looks and function like a printed text box with lines?

javascript html css

I'm trying to create a editable textbox with HTML/CSS/Javascript that looks and functions like a printed textbox with lines appearing every row.

How to pass a keyword from URL but keep it hidden? (Adwords)

php url get google-adwords

I'd essentially like to know the keyword that takes a user to my site, but then hide it from the user. So...in my ads I could set up the URL as domain.com?keyword=KW, and then store the keyword in ...