PDA

View Full Version : Virtualpaginate



X-Tream
03-03-2013, 08:42 PM
1) Script Title:
Virtual Pagination script v2.1
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/virtualpagination.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.

vwphillips
03-04-2013, 01:57 PM
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

vwphillips
03-04-2013, 05:42 PM
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


<!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=t his.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>