Css working no more , once javascript starts execution on the ticker
I am new to Javascript and css. I just made a simple ticker application
using Jquery css and Html. Below is the code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kshitij 2013 </title>
<title>jQuery Ticker</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.js "></script>
<style>
.ticker {
width: 400px;
height: 200px;
overflow: hidden;
border: 1px solid #DDD;
border-radius: 5px;
box-shadow: 0px 0px 5px #DDD;
background-color: #F5F3E5;
text-align: left;
}
.ticker h3 {
padding: 0 0 10px 10px;
border-bottom: 1px solid #A7A7A7;
}
ul {
list-style: none;
padding: 0;
margin: 0;
font-style: italic;
}
ul li {
list-style: none;
height:50px;
padding:7px;
border-bottom: 1px solid #D6CFB8;
}
</style>
</head>
<body>
<script type="text/javascript">
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
setInterval(ticker, 3000);
</script>
<div id="ticker">
<h3>Latest News</h3>
<ul id="ticker">
<li>Dummy data is benign information that does not contain
any useful data, but serves to reserve spac...</li>
<li>For testing, dummy data can also be used as stubs or pad
to avoid software testing iss...</li>
<li>In operational use, dummy data may be transmitted for
OPSEC purposes.</li>
<li>Dummy data must be rigorously evaluated and documented to
ensure that it does no...</li>
<li>The topic of this article may not meet Wikipedia's
general notability guideline.</li>
<ul>
</div>
</body>
</html>
Problem is that, Css works in the starting. But once the ticker starts to
move up after certain time intervals, Css effects are not working anymore.
Should I load this css somehow when each time this ticker moves up ?
No comments:
Post a Comment