Skip to main content

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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title itemprop="name"></TITLE>
<meta name="description" itemprop="description" content=""/>
<META NAME="Keywords" CONTENT=""/>
 <meta name="" content="" />
 <link rel="canonical" href="http://html5css3sourcecode.blogspot.in/"/>

<link rel="stylesheet" href="css.css" type="text/css">

<script language="JavaScript" type="text/JavaScript">

<!--

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>
<!-- For Image Slider -->
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<!-- // Image Slider -->
<!-- For scroller -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="sagscroller.css" />
<script src="sagscroller.js"></script>
<script>

//SAG scroller demo #1:

var sagscroller1=new sagscroller({
    id:'mysagscroller',
    mode: 'auto' //<--no comma following last option
})
</script>
<!-- // For scroller --><!-- News start here -->
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $(".verticalBanner").jCarouselLite({
        vertical: true,
        hoverPause:true,
        visible:3,
        auto:5000,
        speed:900
       
    });
   
});
</script>
<!-- News end here -->

<!-- eZeeLINK Reservation Scripts/CSS starts here -->
    <script type="text/javascript" src="ezeeReservation/jquery.min.js"></script>
    <script type="text/javascript" src="ezeeReservation/jquery.datePicker.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="ezeeReservation/datePicker.css">
    <!-- eZeeLINK Reservation SCRIPT/CSS code ends here -->   
</head>







<body>
 <table width="990" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="267" rowspan="2" align="left" valign="top"><table width="267" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="15" align="left" valign="top">&nbsp;</td>
                <td width="238" height="305" align="left" valign="top" background="cat-bg.png"><h1 class="hdr">News Box</h1>
                  <div id="mysagscroller" class="sagscroller">
                    <ul>
                      <li class="txt"><a href="http://ahmednagarcity.in/">HTML 4</a></li>
                      <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>
                <td align="left" valign="top">&nbsp;</td>
              </tr>
              <tr>
                <td align="left" valign="top">&nbsp;</td>
                <td align="left" valign="top">&nbsp;</td>
                <td align="left" valign="top">&nbsp;</td>
              </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;}





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

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

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

4.
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  








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  

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

 Create ASP.net News Box , ASP.net News Slider Download, ASP.net News Box For Your Website Free Download,  ASP.net  News Box Tutorial, ASP.netCSS News Box Example With Source code, ASP.net Link Slider, ASP.netSlider Menu ,java script news box For your Website, ASP.net News box source Code example, News Slider

Download Complete tutorial  click here  

Popular posts from this blog

Design Marathi website Using HTML CSS

          Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages  Design Marathi website Using HTML CSS, Design Marathi website Using PHP, Design Marathi website Using JSP, Design Marathi website Using ASP, Design Marathi website Using C# Dot Net, Design Marathi website Using Vb Dot Net, मराठी वेबसाईट मराठी वेबसाईट बनवन अगदी सोप आहे मी या ब्लॉग मध्ये दिलेल्या स्टेप्स वापरून तुम्ही काही क्षणात मराठी वेब पेज तयार करू शकता  Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages    Design Marathi website U

what is Blogger

what is Blogger, what is Blogger short info, Blogger hindi information,  Blogger.com एक फ्री Blog Publishing Platform है. जिसकी सहायता से Free Blog बनाकर Texts, Images, Videos आदि आसानी से शेयर की जा सकती है. और दुनिया को अपने लेखन कौशल से अवगत कराया जा सकता है. Blogger की गिनती Content Management Systems में होती है. क्योंकि यह Content को Yearly, Monthly, Weekly, Daily, Catigarically, Labels आदि के द्वारा Manage करता है. और ये सभी Entry पाठकों के लिए उपलब्ध रहती है. Google Blogger Kya Hai in Hindi Blogger पर जो ब्लॉग बनाया जाता है. वह blogspot.com का Sub-Domain होता है. जो Google Server पर Hosted रहता है. Blogger Users गूगल सर्वर को Access नही कर पाते है. लेकिन गूगल अकाउंट से उन्हे Blogger Dashboard पर अनुमति मिल जाती है. इसलिए वे अपना Blog Manage आसानी से कर सकते. Blogspot.com के अलावा Users को Country Specifit Domain Name भी उपलब्ध करवाया जाता है. मिसाल के तौर पर एक Indian Blogger Users अगर अपना ब्लॉग बनाता है तो वह blogspot.com के स्थान पर blogspot.in का चुनाव कर

how to add a youtube video to your website html

embed youtube video in html without iframe,html embed youtube video,how to insert a video in html from computer,iframe video autoplay in html,embed video html,youtube embed code generator,youtube refused to connect html,how to insert mp4 video in html, Use following steps 1. Create basic html page 2. Login to your Google account 3. Visit  www.youtube.com 4. Search video you want to add in your website 5. Select video  6. Click on share button at bottom  you can see share option   7. Click on embed as shown  8. Copy code and paste in html page save and run html page  embed youtube video in html without iframe,html embed youtube video,how to insert a video in html from computer,iframe video autoplay in html,embed video html,youtube embed code generator,youtube refused to connect html,how to insert mp4 video in html,