Results 1 to 3 of 3

Thread: Virtualpaginate

  1. #1
    Join Date
    Apr 2011
    Posts
    23
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default Virtualpaginate

    1) Script Title:
    Virtual Pagination script v2.1
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...pagination.htm
    3) Describe problem:

    Hi, I have been using your script for 3 years now and it has been great! So first of all thank you for making it! (i'm using the demo 3)
    To the problem:
    My site (http://netti-tv.net/yle) gets images from rss feed and is really slow at loading the page course it loads all of the images the same time. So my question is: is there a way that the Virtual Pagination would only load the images in the first tab? And when you press an other tab it would then start loading the image?

    Reason why I need a fix to this is that the site loads for 20 seconds and i'm pretty sure it takes lots of potential costumers...
    http://gtmetrix.com/compare/EkBoFTpO/VuY8EgdX <- Statics

    Hopefully somebody can help me. I would really appreciate it.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    It is all according how you a loading the RSS feed
    I can not see how it is loading on the page so I assume that it is server side
    it may be possible to manage the feed if it were client side
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    X-Tream (03-06-2013)

  4. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    It is all according how you a loading the RSS feed
    I can not see how it is loading on the page so I assume that it is server side
    it may be possible to manage the feed if it were client side

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    
    <style type="text/css">
    /*<![CDATA[*/
    /* Example 2 */
    .rssentry {     /* div containing of each RSS entry */
     width:200px;height:200px;background-Color:#FFFFCC;font-Size:12px;float:left;margin-Left:10px;margin-Top:10px;border:solid red 1px;
    }
    
    .rsslink{
     font-weight:bold;
    }
    
    .rsscontent {  /* div containing body of each RSS content */
     margin-Top:10px;font-Size:14px;
    }
    
    .rsssource {     /* div containing body of each RSS source */
     font-Size:14px;font-Weight:bold;margin-Top:5px;
    }
    
    .rssdate {      /* div containing body of each RSS date */
     font-Size:10px;margin-bottom:5px;
    }
    
    /* Pagination */
    
    #pagination {
     position:relative;left:240px;top:20px;width:500px;height:50px;
    
    }
    
    .default {
      position:relative;top:20px;width:16px;height:16px;float:left;margin-Right:5px;background-Color:red;text-Align:center;font-Size:12px;cursor:pointer;
    }
    
    .mouse {
     background-Color:#FFCC66;
    }
    
    .active {
     background-Color:green;
    }
    
    #display2 {
      position:absolute;left:100px;top:100px;width:500px;height:500px;border:solid red 1px;
    }
    
    .button {
     position:absolute;left:-105px;top:20px;width:100px;background-Color:#FFCC66;border:solid black 1px;text-Align:center;cursor:pointer
    
    }
    
    .forward {
    }
    
    .back {
     left:105px;
    
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
      google.load('feeds','1');
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <input type="button" name="" value="Forward" onmouseup="zxcTabbedFeedsNext('display2',1);" /><input type="button" name="" value="Back" onmouseup="zxcTabbedFeedsNext('display2',-1);" />
    
    <div id="pagination" >
    <div class="button forward" >forward</div>
    <div class="button back" >back</div>
    </div>
    <div id="display2" ></div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Tabbed Feeds (04-March-2013) DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcTabbedFeedsNext(id,ud){
     var o=zxcTabbedFeeds['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
     if (o){
      o.next(ud);
     }
    }
    
    
    function zxcTabbedFeedsGoTo(id,nu){
     var o=zxcTabbedFeeds['zxc'+id];
     if (o){
      o.goto(nu);
     }
    }
    
    function zxcTabbedFeeds(o){
     var oop=this;
     if (typeof(o.RSSData)=='object'&&o.RSSData.constructor==Object&&this.rss){
      this.rssdata=o.RSSData;
      setTimeout(function(){ oop.rss(o); },1000);
     }
    }
    
    zxcTabbedFeeds.prototype={
    
     ready:function(o,clds){
      var id=o.DisplayID,nu=o.DisplayNumber,pag=o.Pagination,obj=document.getElementById(id),pgs=Math.ceil(clds.length/nu),ary=[],ba=[['forward','mouseup','next',1],['back','mouseup','next',-1]],b,z0=0,z1=0;
      for (;z0<clds.length;z0++){
       if (!ary[Math.floor(z0/nu)]){
        ary[Math.floor(z0/nu)]=[];
       }
       ary[Math.floor(z0/nu)].push([clds[z0],clds[z0].getElementsByTagName('IMG')[0]]);
      }
      o=zxcTabbedFeeds['zxc'+id]=this;
      o.obj=obj;
      o.pobj=obj;
      o.ary=ary;
      o.lgth=ary.length-1;
      o.pages=[];
      o.cnt=-1;
      if (typeof(pag)=='object'&&o.paginate){
       o.paginate(pag);
      }
      for (;z1<2;z1++){
       b=o.bycls(ba[z1][0],o.pobj)[0];
       b?o.addevt(b,ba[z1][1],ba[z1][2],ba[z1][3]):null;
      }
      o.goto(0);
     },
    
     paginate:function(p){
      var obj=document.getElementById(p.ParentID);
      if (obj){
       var o=this,html=p.HTMLArray,dcls=p.DefaultClass;
       var mcls=p.MouseOverClass||'',acls=p.ActiveClass||'',ps=this.bycls(dcls,obj),html=typeof(html)=='object'&&html.constructor==Array?html:[],pge,cls,z0=0,z1=0;
       o.pobj=obj;
       for (;z0<=o.lgth;z0++){
        pge=ps[z0]?ps[z0]:pge?pge.cloneNode(true):document.createElement('DIV');
        if (!ps[z0]){
         obj.appendChild(pge);
        }
        o.pages[z0]=[pge];
       }
       for (;z1<=o.lgth;z1++){
        pge=o.pages[z1][0];
        cls=pge.className||dcls;
        o.pages[z1][1]=[cls,cls+' '+mcls,cls+' '+acls];
        pge.className=o.pages[z1][1][z1!=o.cnt?0:2];
        !pge.innerHTML?pge.innerHTML=html[z1]?html[z1]:z1+1:null;
        this.addevt(pge,'mouseover','pagmse',z1,true);
        this.addevt(pge,'mouseout','pagmse',z1,false);
        this.addevt(pge,'mouseup','goto',z1);
       }
       o.pge=o.pages[o.cnt];
      }
     },
    
     pagmse:function(nu,ud){
      var pge=this.pages[nu];
      if (pge&&pge[0].className!=pge[1][2]){
       pge[0].className=pge[1][ud?1:0];
      }
     },
    
     goto:function(nu){
      var o=this,ary=o.ary[nu];
      if (ary&&nu!=o.cnt){
       o.pge?o.pge[0].className=o.pge[1][0]:null;
       clearTimeout(o.to);
       for (var z0=0;z0<ary.length;z0++){
        if (ary[z0][1]&&!ary[z0][2]){
         ary[z0][2]=new Image();
         ary[z0][2].src=ary[z0][1].src;
        }
       }
       o.load(ary,nu);
      }
     },
    
     next:function(ud){
      var o=this;
      nu=o.cnt+ud;
      nu=nu>o.lgth?0:nu<0?o.lgth:nu;
      o.goto(nu);
     },
    
     load:function(ary,nu){
      for (var o=this,z0=0,z1=0;z0<ary.length;z0++){
       if (ary[z0][2]&&ary[z0][2].width<40){
        o.to=setTimeout(function(){ o.load(ary,nu); },200);
        return;
       }
      }
      while (o.obj.firstChild){
       o.obj.removeChild(o.obj.firstChild);
      }
      for (var z1=0;z1<ary.length;z1++){
       o.obj.appendChild(ary[z1][0]);
      }
      o.pge=this.pages[nu];
      o.pge?o.pge[0].className=o.pge[1][2]:null;
      o.cnt=nu;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     },
    
     bycls:function (nme,el){
      for (var els=el.getElementsByTagName('*'),a=[],z0=0; z0<els.length;z0++){
       if((' '+els[z0].className+' ').match(' '+nme+' ')){
        a.push(els[z0]);
       }
      }
      return a;
     },
    
    //** RSS Feed Code.
    
     rss:function(o){
      if (this.loadingimg){
       this.o.obj.appendChild(this.loadingimg);
      }
      var oop=this,rssdata=this.rssdata,z0=0,pointer;
      rssdata.Entries=typeof(rssdata.Entries)=='number'?rssdata.Entries:5;
      this.rssary=[];
      this.rsscnt=0;
      for (;z0<rssdata.Feeds.length;z0++){
       pointer=new google.feeds.Feed(rssdata.Feeds[z0][1]);
       pointer.setNumEntries(rssdata.Entries);
       pointer.load(function(label){ return function(data){ oop.rsscombine(o,data,label); } }(rssdata.Feeds[z0][0]));
      }
     },
    
     rsscombine:function(o,data,label){
      var feed=!data.error?data.feed.entries:'',z0=0;
      if (feed==''){
       alert('Google Feed API Error: '+data.error.message);
      }
      for (;z0<feed.length;z0++){
       data.feed.entries[z0].label=label;
      }
      this.rssary=this.rssary.concat(feed);
      this.rsscnt+=1;
      if (this.rsscnt==this.rssdata.Feeds.length){
       if (this.rssdata.GroupByLabel){
        this.rssary.sort(function(a,b){
          var l='0123456789abcdefghijklmnopqrstuvwxyz';
          a=l.indexOf(a.label.toLowerCase().charAt(0));
          b=l.indexOf(b.label.toLowerCase().charAt(0));
          return a<b?-1:a>b?1:0;
         });
       }
       else {
        this.rssary.sort(function(a,b){
          return new Date(b.publishedDate)-new Date(a.publishedDate);
        });
       }
       this.rssformat(o);
      }
     },
    
     rssformat:function(obj){
      var oop=this,rssdiv=document.createElement('DIV'),rssdata=this.rssdata,o=(typeof(rssdata.DisplayOptions)=='string'?rssdata.DisplayOptions:'').toLowerCase(),rssary=this.rssary,clds=[],a,div,z0=0,date;
    //  this.o.obj.appendChild(rssdiv);
    //  if (this.mde[0]=='left'){
    //   rssdiv.style.width='10000px';
    //  }
      for (;z0<rssary.length; z0++){
       clds[z0]=document.createElement('DIV');
       clds[z0].className='rssentry';
       rssdiv.appendChild(clds[z0]);
       a=document.createElement('A');
       a.className='rsslink';
       a.href=rssary[z0].link;
       a.target=rssdata.LinkTarget;
       a.innerHTML=rssary[z0].title;
       clds[z0].appendChild(a);
       div=document.createElement('DIV');
       div.className='rsscontent';
       div.innerHTML=/full/.test(o)?rssary[z0].content:rssary[z0].contentSnippet;
       clds[z0].appendChild(div);
       div=document.createElement('DIV');
       div.className='rsssource';
       div.innerHTML=/source/.test(o)?'Source('+(z0+1)+'): '+rssary[z0].label+' ':'';
       clds[z0].appendChild(div);
       div=document.createElement('DIV');
       div.className='rssdate';
       date=new Date(rssary[z0].publishedDate);
       div.innerHTML=/date/.test(o)?o.indexOf('time')!=-1?date.toLocaleString():date.toLocaleDateString():'';
       clds[z0].appendChild(div);
      }
      this.ready(obj,clds)
     }
    
    }
    
    new zxcTabbedFeeds({
     DisplayID:'display2',
     DisplayNumber:4,
     RSSData:{
      Feeds:[
       ['Yahoo News','http://rss.news.yahoo.com/rss/topstories'],
       ['BBC','http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml/']
      ],
      LinkTarget:'_new',
      DisplayOptions:'date time Source fullcontent',
      GroupByLabel:true,
      Entries:10
     },
     Pagination:{     //(optional) an object defining the pagination options.                    (object, default = no pagination)
      ParentID:'pagination',      // the unique ID name of the pagination parent DIV. (string)
      DefaultClass:'default',     // the common class name of the page element.       (string)
      MouseOverClass:'mouse',     //(optional) the class name modifier for mouseover. (string, default = no modifier)
      ActiveClass:'active',       //(optional) the class name modifier for active.    (string, default = no modifier)
      HTMLArray:['1','2','3','4'] //(optional) the inner HTML for each page.          (string, default = in line HTML)
     }
    });
    
    /*]]>*/
    </script></body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    X-Tream (03-06-2013)

Similar Threads

  1. Virtualpaginate - change display
    By piotrex41 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-17-2012, 11:10 PM
  2. Virtualpaginate.js Help
    By omarkhan in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-17-2010, 09:56 AM
  3. Virtualpaginate.js Need Help
    By jamkoo in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-15-2010, 05:12 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •