I have a label inside a div control.I want to align it to the top middle of the div control and draw a rectangle around that text.And also i want to display the characters of that label's text one by one from left to right .
How do i achieve this ?
Well to center the text to the middle of the div horizontal, you simply need to style it with
div#ctrl {
text-align: center
}
To have a rectangle around the text, you need to define a border, probably with padding and margin:
div#ctrl span {
border: 1px #333 solid;
padding: 5px;
}
You need to use javascript to animate the text, made easier with jQuery. Here a link to working example I whipped of what you were looking for:
In the future try to do a little more research and ask questions about specific problems that have not been answered before. All of this is basic, well documented stuff.
Here you go for the first part:
http://fiddle.jshell.net/VdmFV/
Fot the second part you'd need some fancy javascript / jQuery which you should attempt yourself first then come back here for pointers.
<style>
#control {
width:200px;
height:200px;
background:#ddd;
text-align: center
}
#label {
border:1px solid red;
}
</style>
<div id='control'>
<span id='label'></span>
</div>
<script>
var label = document.getElementById("label");
var msg = "Message";
var i = 0;
var interval = setInterval( function() {
label.innerHTML = msg.substr(0,i);
i++;
if ( i == msg.length ) {
clearInterval(interval);
}
}, 1000)
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.