javascript - Responsive CSS, How to make clock maintain position with image on resize -
the image i'm working located @ url: http://migentemobile.com/wp-content/themes/migente/img/migente-mobile-carousel.png 
as can see clock on image static. i've been asked put working js clock overtop of static clock eye candy.
i have following jsfiddle.
or here's full markup
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>migente carousel working clock</title> <!-- ie fix html5 tags --> <!--[if lt ie 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> html, html { -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) { = "0" + i; } return i; } function clock() { var = 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 current resolution, works fine. upon browser resize or resolution change, clock no longer positioned properly. i'd make image responsive maintain js clock's position image if browser gets resized or viewed on different platform i.e. mobile, tablet, desktop, etc...
i reading http://learnlayout.com/position.html (slide 7 / 19) position relative, thought objective since want clock's position relative based on image's size. i'm missing here because when resize browser or view on mobile clock not stay belongs.
any project appreciated!
update
looks ok in
- safari 5
- ie 10 & 9
- chrome 26 & 25
position of clock off in
- firefox 19
position ok text not rotating in
opera 12
ie 8 & 7 & 6
the css transform property not supported prior ie9.
for firefox (and maybe opera), "display: table-cell" attribute causing browser refuse render "position: relative" attribute. try "display: inline-block" instead.
"position: relative" positions element relative it's parent container. positioning element according ".container", not img. when @ .container in jsfiddle (by giving "background: #ff0099"), looks both different size , in different position devices, when devices rotate. that's messing clock's position relative image, has no position relative changing .container.
if make ".container" exact dimensions of image, , give image position inside of (i.e., "position: relative; top: 0; left: 0;"), should able manipulate clock's position more consistently devices, because image , container positioned identically, not.
btw think clock cool!
Comments
Post a Comment