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; }