Add Scrolling News Reader Using jQuery- FUTURE Of Marque In Html

Simple but effective news ticker that can be put to use in a variety of ways. When using text, like in this example, defining the headings and associated content sections within a definition list makes sense from a semantics perspective, and it’s easy to add any additional elements we may need as we go.

DEMO

We are going to do This using Java Script And A little jQuery



Login to Blogger>>>Go To LAYOUT>>>Add a Gadget>>>Select HTML and Java>>>Paste the Below Code

<dl id="ticker">
<dt>This is a news title!</dt><dd>This is a snippet of the news. It could be the whole news item or it could link to another page containing...</dd>
<dt>News Heading 2</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt>News Heading 3</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt>News Heading 4</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="heading">This item is long!</dt><dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

//cache the ticker
var ticker = $("#ticker");

//wrap dt:dd pairs in divs
ticker.children().filter("dt").each(function() {

var dt = $(this),
container = $("<div>");

dt.next().appendTo(container);
dt.prependTo(container);

container.appendTo(ticker);
});

//hide the scrollbar
ticker.css("overflow", "hidden");

//animator function
function animator(currentItem) {

//work out new anim duration
var distance = currentItem.height();
duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

//animate the first child of the ticker
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {

//move current item to the bottom
currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

//recurse
animator(currentItem.parent().children(":first"));
});
};

//start the ticker
animator(ticker.children(":first"));

//set mouseenter
ticker.mouseenter(function() {

//stop current animation
ticker.children().stop();

});

//set mouseleave
ticker.mouseleave(function() {

//resume animation
animator(ticker.children(":first"));

});
});
</script>

Now Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F

Search For ]]></b:skin> code:

Copy below code and paste it just before the ]]></b:skin> tag.

#ticker {
width:180px; height:300px; overflow:auto; border:1px solid #aaaaaa;
}
#ticker dt {
font:normal 14px Georgia; padding:0 10px 5px 10px;
background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff;
border-bottom:none; border-right:none;
}
#ticker dd {
margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;
border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;
border-left:1px solid #ffffff;
}
#ticker dd.last { border-bottom:1px solid #ffffff;

IF YOU WANT WITHOUT AUTO SCROLLING LIKE IN FIRST PICTURE ABOVE PLEASE REMOVE THIS CODE

$(function() {

//cache the ticker
var ticker = $("#ticker");

//wrap dt:dd pairs in divs
ticker.children().filter("dt").each(function() {

var dt = $(this),
container = $("<div>");

dt.next().appendTo(container);
dt.prependTo(container);      
container.appendTo(ticker);
});

//hide the scrollbar
ticker.css("overflow", "hidden");

//animator function
function animator(currentItem) {

//work out new anim duration
var distance = currentItem.height(),
duration = (distance - Math.abs(parseInt(currentItem.css("marginTop")))) / 0.025;

//animate the first child of the ticker
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {

//move current item to the bottom        currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

//recurse
animator(currentItem.parent().children(":first"));
});
};

//start the ticker
animator(ticker.children(":first"));
});
</div>

You ar oops =) Its Done !