Create HTML CSS javascript News Box , HTML CSS News Slider Download

Create HTML CSS javascript News Box , HTML CSS News Slider Download, HTML News Box For Your Website Free Download, java script news box For your Website, HTML CSS News Box Tutorial, HTML CSS News Box Example With Source code, HTML CSS Link Slider, HTML Slider Menu ,java script news box For your Website, HTML News box source Code example, News Slider

Here Is Example Of News Box slider for Your Website you can use it wiht PHP, ASP, ASP.NET, JSP,HTML

1.HTML Code Save this code as index.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

//-->

</script>

//SAG scroller demo #1:

var sagscroller1=new sagscroller({

id:'mysagscroller',

mode: 'auto' //<--no comma following last option

})

</script>

$(function() {

$(".verticalBanner").jCarouselLite({

vertical: true,

hoverPause:true,

visible:3,

auto:5000,

speed:900

});

</script>

</head>

<body>

<tr>

<tr>

<ul>

<li class="txt"><a href="http://ahmednagarcity.in/">CSS Letest News</a></li>

<li class="txt"><a href="http://ahmednagarcity.in/">Canvas </a></li>

<li class="txt"><a href="http://ahmednagarcity.in/">Refrigerator</li>

<li class="txt"><a href="http://ahmednagarcity.in/">Website Hosting</a></li>

<li class="txt"><a href="http://ahmednagarcity.in/">Domain Registration</a></li>

<li class="txt"><a href="http://ahmednagarcity.in/">Free Website Designing</a></li>

<li class="txt"><a href="http://ahmednagarcity.in/">Learn Css2</a></li>

<li class="txt"><a href="http://ahmednagarcity.in/">CSS3 Topics</a></li>

<li class="txt"><a href="http://ahmednagarcity.in/">Basic HTML/a></li>

</ul>

</div></td>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

2. Save This File as slider.css

/*.folio_block {

position: absolute;

left: 50%; top: 50%;

margin: -140px 0 0 -395px;

}*/

/*--Main Container--*/

/*.main_view {

float: left;

position: relative;

}*/

/*--Window/Masking Styles--*/

.banner {

height:65px;

width: 411px;

overflow: hidden; /*--Hides anything outside of the set width/height--*/

position: relative;

}

.image_reel_banner {

position: absolute;

top: 0; left: 0;

}

.image_reel_banner img {float: left;}

/*--Paging Styles--*/

.paging_banner {

position: absolute;

right: -7px;

width: 178px; height:47px;

z-index: 100; /*--Assures the paging stays on the top layer--*/

text-align: center;

background: url(paging_bg2.png) no-repeat;

display: none; /*--Hidden by default, will be later shown with jQuery--*/

}

.paging_banner a {

text-decoration: none;

color: #fff;

}

.paging_banner a.active {

font-weight: bold;

background: #920000;

border: 1px solid #610000;

-moz-border-radius: 3px;

-khtml-border-radius: 3px;

-webkit-border-radius: 3px;

}

.paging_banner a:hover {font-weight: bold;}

.photo {

height:252px; width:695px;

overflow: hidden; /*--Hides anything outside of the set width/height--*/

position: relative;

}

.image_reel {

position: absolute;

top: 0; left: 0;

}

.image_reel img {float: left;}

/*--Paging Styles--*/

.paging {

position: absolute;

right: -7px;

width: 178px; height:47px;

z-index: 100; /*--Assures the paging stays on the top layer--*/

text-align: center;

background: url(paging_bg2.png) no-repeat;

display: none; /*--Hidden by default, will be later shown with jQuery--*/

}

.paging a {

padding: 5px;

text-decoration: none;

color: #fff;

}

.paging a.active {

font-weight: bold;

background: #920000;

border: 1px solid #610000;

-moz-border-radius: 3px;

-khtml-border-radius: 3px;

-webkit-border-radius: 3px;

}

.paging a:hover {font-weight: bold;}

3.Save This File as Css.css

A.navsection { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 10px; PADDING-BOTTOM: 4px; MARGIN-LEFT: 0px; COLOR: #ffffff; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; FONT-FAMILY: Verdana; TEXT-DECORATION: none}

A.navsection:hover { BORDER-RIGHT: #c8cfdc 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #c8cfdc 0px solid; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 10px; PADDING-BOTTOM: 3px; BORDER-LEFT: #c8cfdc 0px solid; COLOR: #414a5b; PADDING-TOP: 5px; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ff6600; TEXT-DECORATION: none}

BODY { SCROLLBAR-FACE-COLOR: #ff0000; FONT-WEIGHT: normal; FONT-SIZE: 8pt; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #000000; FONT-FAMILY: Verdana, Tahoma, Arial; SCROLLBAR-DARKSHADOW-COLOR: #000000; BACKGROUND-COLOR: #000000}

A.list { FONT-WEIGHT: normal; FONT-SIZE: 10pt; COLOR: #FBC900; FONT-FAMILY: Verdana, arial, verdana; TEXT-DECORATION: none}

A.list:hover {

FONT-WEIGHT: normal; FONT-SIZE: 10pt; COLOR: #ffffff; BORDER-BOTTOM: 1px dotted; FONT-FAMILY: Verdana, arial, verdana; TEXT-DECORATION: none}

A.listup { FONT-WEIGHT: none; FONT-SIZE: 8pt; COLOR: #FBC900; FONT-FAMILY: Verdana, arial, verdana; TEXT-DECORATION: none}

A.listup:hover { FONT-WEIGHT: none; FONT-SIZE: 10pt; COLOR: #ffffff; BORDER-BOTTOM: 1px dotted; FONT-FAMILY: Verdana, arial, verdana; TEXT-DECORATION: none}

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}

h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; color: #D70000; text-align: justify;padding: 0;margin: 0.1em;}

h2 { font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt; font-weight: bold; color: #D70000; text-align: justify; padding: 0; margin: 0.1em;}

h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #3860C0; text-align: justify;padding: 0;margin: 0.1em;}

body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;text-decoration:none;color: #ffffff;background-image: url(images/bk.jpg);

text-align: justify; line-height: 20px;}

td {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;text-decoration:none;color: #000000;text-align: justify;line-height: 15px;}

th {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;text-decoration:none;color: #000000;text-align: justify;line-height: 15px;}

a.one:active{color: #FBC900;}

a.one:link{color: #ffffff; text-decoration: none;}

a.one:visited{color: #ffffff; text-decoration: none;}

a.one:hover{color: #FBC900;}

a.two:active{color: #F78D22; text-decoration: underline;}

a.two:link{color: #ffffff; text-decoration: none;}

a.two:visited{color: #ffffff; text-decoration: none;}

a.two:hover{color: #F78D22; text-decoration: underline;}

a.three:active{color: #F78D22; text-decoration: none; font-weight: bold;}

a.three:link{color: #000000; text-decoration: underline;}

a.three:visited{color: #000000; text-decoration: underline;}

a.three:hover{color: #F78D22; text-decoration: none; font-weight: bold;}

a.four:active{color: #ffff00; text-decoration: underline;}

a.four:link{color: #C0B8B9; text-decoration: none;}

a.four:visited{color: #C0B8B9; text-decoration:none;}

a.four:hover{color: #ffff00; text-decoration: underline;}

.cellbk{background-image:url(images/new-123.gif); background-position:left; background-repeat:no-repeat; height:244px; width:710px;}

.cellbkleft{background-image:url(images/bk-cell-left.gif); background-position:left; background-repeat:no-repeat; height:400px; width:349px;}

.header { background:url(images/hdr-bg.jpg) no-repeat left top; height:122px;}

.logo { width:510px; height:122px; display:block; cursor:pointer;}

.links { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF;}

.links a { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; text-decoration:none;}

.links a:hover { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; text-decoration:underline;}

.lnk1 {width:20px; height:19px; display:block; cursor:pointer;}

.lnk2 {width:17px; height:19px; display:block; cursor:pointer;}

.lnk3 {width:14px; height:19px; display:block; cursor:pointer;}

.wapper{ background:url(images/bk.jpg) left top repeat-x; width:100%; overflow:hidden;}

.mainContant{ width:1000px; margin:0 auto;}

.intro { height:314px;}

.menu { width:694px; height:36px; margin:2px 0px 0px;}

.menu ul { margin:0px 0px 0px 10px; padding:0px;}

.menu ul li { float:left; list-style:none; background:url(images/li-bg.jpg) no-repeat right top;}

.menu ul li a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; float:left; list-style:none; padding:12px 32px; text-decoration:none;}

.menu ul li a:hover { background:url(images/menu-over-bg.jpg) repeat-x;}

h1.hdr { background:url(images/bull.png) no-repeat 1px 9px; line-height:40px; padding-left:30px; margin-left:10px; color:#FFFFFF;}

p.txt {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; margin-left:10px; line-height:14px;}

div#mysagscroller{width: 230px; /*width of scroller*/ height:250px;}

div#mysagscroller ul li{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; line-height:22px; /*bottom spacing between each LI*/}

div#mysagscroller ul li:first-letter{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; }

.intro-panel

.verticalSliderImgs {clear:both; margin:0; padding:0; display:block;}

.verticalSliderImgs ul {list-style:none; padding:0;margin:0;}

.verticalSliderImgs ul li {clear:both; display:block; padding:0; margin-bottom:12px;}

.verticalSliderImgs ul li img {clear:both; width:280px; height:100px; padding:3px; margin:0; text-align:center; border:1px solid #ddd;}

.verticalSliderImgs ul li img:hover { border:1px solid #CE0000;}

4.Save Following code as sagscroller.css

/*default CSS for SAG scroller*/

.sagscroller{
width: 230px; /*default width of scroller*/
height:250px;
overflow:hidden;
position:relative;

}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0px 0px 0px 10px;
padding:0;
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block;
}

.sagscroller ul li .rsscontent{ /*div containing body of each RSS entry*/
font-size:90%;
}

.sagscroller ul li .rsslabel{ /*div containing label of each RSS entry*/
margin-top:5px;
background: #eee;
font-size:12px;
clear: both;
}

5. Download sagscroller.js from JQuery Download or save following code

/*Sag Content Scroller (Aug 7th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Updated Aug 28th, 10 to v1.3

var sagscroller_constants={
    navpanel: {height:'16px', downarrow:'', opacity:0.6, title:'', },
    loadingimg: {src:'ajaxloading.gif', dimensions:[100,15]}
}

function sagscroller(options){

    this.setting={mode:'manual', inittype:'stunted', pause:3000, animatespeed:500, ajaxsource:null, rssdata:null, refreshsecs:0, navpanel:{show:true, cancelauto:false}} //default settings
    jQuery.extend(this.setting, options) //merge default settings with options
    options=null
    this.curmsg=0
    this.addloadingpanel(jQuery, 'preload')
    if (this.setting.rssdata) //if rss contents
        google.load("feeds", "1") //init google ajax api
    var slider=this
    jQuery(function($){ //on document.ready
        slider.$slider=$('#'+slider.setting.id)
        if (slider.setting.ajaxsource||slider.setting.rssdata)
            slider.$slider.empty()
        slider.addloadingpanel(jQuery, 'show')
        if (slider.setting.ajaxsource) //if ajax data
            slider.getajaxul(slider.setting.ajaxsource)
        else if (slider.setting.rssdata){ //if rss data
            slider.fetchfeeds()
        }
        else{ //if inline content
            if (slider.setting.inittype=="onload") //load scroller when page has completely loaded?
                $(window).load(function(){slider.init($)})
            else //load scroller immediately and get dimensions progressively instead
                slider.init($)
        }
    })
}

sagscroller.prototype={

    getajaxul:function(path){
        var $=jQuery, slider=this
        this.stopscroll() //stop animation/ scrolling of slider, in the event this is a subsequent call to getajaxul()
        this.$loadingpanel.show()
        $.ajax({
            url: path, //path to external content
            async: true,
            error:function(ajaxrequest){
                slider.$slider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
            },
            success:function(content){
                slider.reloadul(content)
                if (slider.setting.refreshsecs>0) //refetch contents every x sec?
                    setTimeout(function(){slider.getajaxul(path)}, slider.setting.refreshsecs*1000)
            }
        })
    },

    addloadingpanel:function($, mode){
        var loadingimgref=sagscroller_constants.loadingimg
        if (mode=="preload"){
            var loadingimg=new Image(loadingimgref.dimensions[0], loadingimgref.dimensions[1])
            loadingimg.src=loadingimgref.src
            this.$loadingimg=$(loadingimg).css({position:'absolute', zIndex:1003})
        }
        else{
            var sliderdimensions=[this.$slider.width(), this.$slider.height()]
            var $loadingpanel=$('<div />').css({position:'absolute', left:0, top:0, opacity:0.5, width:sliderdimensions[0], height:sliderdimensions[1], zIndex:1002}).appendTo(this.$slider)
            this.$loadingimg.css({left:sliderdimensions[0]/2-loadingimgref.dimensions[0]/2, top:sliderdimensions[1]/2-loadingimgref.dimensions[1]/2}).appendTo(this.$slider)
            this.$loadingpanel=$loadingpanel.add(this.$loadingimg)
        }
    },

    addnavpanel:function(){
        var slider=this, setting=this.setting
        var $navpanel=$('<div class="sliderdesc"><div class="sliderdescbg"></div><div class="sliderdescfg"><div class="sliderdesctext"></div></div></div>')
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'})
            .eq(0).css({background:sagscroller_constants.navpanel.background, opacity:sagscroller_constants.navpanel.opacity}).end() //"sliderdescbg" div
            .eq(1).css({color:'white'}).end() //"sliderdescfg" div
            .eq(2).css({textAlign:'center', cursor:'pointer', paddingTop:'2px', display:'none'}).html('<img src="'+sagscroller_constants.navpanel.downarrow+'"/>').end().end()
            .appendTo(this.$slider)
        var $descpanel=$navpanel.find('div.sliderdesctext').attr('title', sagscroller_constants.navpanel.title).click(function(){ //action when nav bar is clicked on
            slider.stopscroll()
            slider.scrollmsg(setting.mode=="auto" && !setting.navpanel.cancelauto? true : false)
        })
        $navpanel.css({top:this.$slider.height()-parseInt(sagscroller_constants.navpanel.height), height:sagscroller_constants.navpanel.height}).find('div').css({height:'100%'})
    },

    resetuls:function(){ //function to swap between primary and secondary ul
        var $tempul=this.$mainul
        this.$mainul=this.$secul.css({zIndex:1000})
        this.$secul=$tempul.css({zIndex:999})
        this.$secul.css('top', this.ulheight)
    },

    reloadul:function(newhtml){ //function to empty out SAG scroller UL contents then reload with new contents
        this.$slider.find('ul').remove()
        this.ulheight=null
        this.curmsg=0;
        this.$slider.append(newhtml)
        this.init($)
    },

    setgetoffset:function($li){
        var recaldimensions=(this.setting.ajaxsource || this.setting.rssdata) && this.setting.inittype=="onload" //bool to see if script should always refetch dimensions
        if (this.curmsg==this.$lis.length)
            return (!this.ulheight || recaldimensions)? this.ulheight=this.$mainul.height() : this.ulheight
        else{
            if (!$li.data('toppos') || recaldimensions)
                $li.data('toppos', $li.position().top)
            return $li.data('toppos')
        }
    },

    scrollmsg:function(repeat){
        var slider=this, setting=this.setting
        var ulheight=this.ulheight || this.$mainul.height()
        var endpoint=-this.setgetoffset(this.$lis.eq(this.curmsg))
        this.$mainul.animate({top: endpoint}, setting.animatespeed, function(){
            slider.curmsg=(slider.curmsg<slider.$lis.length+1)? slider.curmsg+1 : 0
            if (slider.curmsg==slider.$lis.length+1){ //if at end of UL
                slider.resetuls() //swap between main and sec UL
                slider.curmsg=1
            }
            if (repeat)
                slider.scrolltimer=setTimeout(function(){slider.scrollmsg(repeat)}, setting.pause)
        })
        var secendpoint=endpoint+ulheight
        this.$secul.animate({top: secendpoint}, setting.animatespeed)
    },

    stopscroll:function(){
        if (this.$mainul){
            this.$mainul.add(this.$secul).stop(true, false)
            clearTimeout(this.scrolltimer)
        }
    },

    init:function($){
        var setting=this.setting
        this.$loadingpanel.hide()
        this.$mainul=this.$slider.find('ul:eq(0)').css({zIndex:1000})
        this.$lis=this.$mainul.find('li')
        if (setting.navpanel.show)
            this.addnavpanel()
        this.$secul=this.$mainul.clone().css({top:this.$mainul.height(), zIndex:999}).appendTo(this.$slider) //create sec UL and add it to the end of main UL
        this.scrollmsg(setting.mode=="auto")
    },

    ///////////////////////RSS related methods below///////////////////

    fetchfeeds:function(){
        var slider=this, rssdata=this.setting.rssdata
        this.stopscroll() //stop animation/ scrolling of slider, in the event this is a subsequent call to fetchfeeds()
        this.$loadingpanel.show()
        this.entries=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
        this.feedsfetched=0
        for (var i=0; i<rssdata.feeds.length; i++){ //loop through the specified RSS feeds' URLs
            var feedpointer=new google.feeds.Feed(rssdata.feeds[i][1]) //create new instance of Google Ajax Feed API
            feedpointer.setNumEntries(rssdata.entries) //set number of items to display
            feedpointer.load(function(label){
                return function(r){
                    slider.storefeeds(r, label)
                }
            }(rssdata.feeds[i][0])) //call Feed.load() to retrieve and output RSS feed.
        }
    },

    storefeeds:function(result, label){
        var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
        if (thisfeed==""){ //if error has occured fetching feed
            alert("Google Feed API Error: "+result.error.message)
        }
        for (var i=0; i<thisfeed.length; i++){ //For each entry within feed
            result.feed.entries[i].label=label //extend it with a "label" property
        }
        this.entries=this.entries.concat(thisfeed) //add entry to array holding all feed entries
        this.feedsfetched+=1
        if (this.feedsfetched==this.setting.rssdata.feeds.length){ //if all feeds fetched
            if (this.setting.rssdata.groupbylabel){ //sort by label name?
                this.entries.sort(function(a,b){
                    var fielda=a.label.toLowerCase(), fieldb=b.label.toLowerCase()
                    return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
                })
            }
            else{ //just sort by date
                this.entries.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})
            }
            this.formatfeeds()
        }
    },

    formatfeeds:function(){
        function formatdate(datestr, showoptions){
            var itemdate=new Date(datestr)
            var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : ""
            return "<span class='datefield'>"+parseddate+"</span>"
        }
        var sagcontent='<ul>'
        var slider=this, rssdata=this.setting.rssdata, entries=this.entries
        for (var i=0; i<entries.length; i++){
            sagcontent+='<li><a href="'+entries[i].link+'" target="'+rssdata.linktarget+'">'+entries[i].title+'</a>'
                +'<div class="rsscontent">'
                +(/description/.test(rssdata.displayoptions)? entries[i].content : entries[i].contentSnippet)
                +'</div>'
                +'<div class="rsslabel">'
                +(/label/.test(rssdata.displayoptions)? "<b>Source("+(i+1)+"):</b> "+entries[i].label+" " : "")
                +(/date/.test(rssdata.displayoptions)? formatdate(entries[i].publishedDate, rssdata.displayoptions): "")
                +'</div>'
                +'</li>\n\n'
        }
    sagcontent+='</ul>'
    this.reloadul(sagcontent)
    if (slider.setting.refreshsecs>0) //refetch contents every x sec?
        setTimeout(function(){slider.fetchfeeds()}, slider.setting.refreshsecs*1000)
    }
}

Download HTML CSS JavaScript News Box Example With Source Code click here