html - css expand text left and preserve container width -


please see fiddle - http://jsfiddle.net/grimmus/vawe9/4/

<div class="refresh">         <div class="date" id="date">             of 1/10/2013 16:44 2013 (gmt + 1)         </div>         <div class="loading"id="loading">             loading...         </div> </div> 

in blue box trying toggle between date , loading text. date text can varying width , width stay same when text hidden , loading text shown. width of date should expand left far necessary. loading text should aligned left

i having difficulty preserving width of box when showing loading text. 1 solution thought applying visibility hidden date text , relatively positioning loading text on div higher z-index. seems quite complicated , hope there easier solution.

suggestions/advice/tips welcome.

p.s needs work in ie7+

try jsfiddle example:

jquery

setinterval(function () {     $('#date').animate({         opacity: .01     }, 0, function () {         $('#loading').fadein(0).delay(2000).fadeout(0, function () {             $('#date').animate({                 opacity: 1             }, 0)         });     }) }, 4000); 

css

body {     margin:25px; } .container {     background:#ccc;     height:50px;     width:100%; } .refresh {     background:blue;     color:#ccc;     height:20px;     float:right;     margin-right:25px;     min-width:150px;     text-align:left;     position:relative; } .date {     position:relative; } .loading {     display:none;     position:absolute;     top:0px; } 

Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -