Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Unhappy Sortable divs with cookies?

    I have a sortable div page http://bt5.awardspace.com and the sortable works just fine.. I can move the divs around and set the cookie.. I can also read the cookie.


    http://bt5.awardspace.com/index.html


    http://bt5.awardspace.com/jquery-1.2.6.min.js

    http://bt5.awardspace.com/interface.js

    If you go to my example site and then reorder the divs and then refresh the page you will see the cookie string at the bottom.. but the divs return back to their orginal order.

    Example cookie string:
    sort1[]-links&sort1[]-slide&sort1[]-biz&sort2[]-shop&sort3[]-local&sort3[]-images&sort3[]-feeds&sort3[]-news

    the issue is that i cant read the cookie and then change the content to what the user set it as.. i am trying to do what they do at bbc.co.uk

    I found this script that randomly reorders divs. anyone have any ideas how i can use the below script to read the cookie i set up and cange it

    http://www.javascriptkit.com/script/script2/imageorder.shtml


    I can't find the answer anywhere.. PLEASE HELP...

    Note: this has to be done by js not a server side script. I am using a framework called Django no server side scripts can be run cause it uses a template system..

  • #2
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Bump bump

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    with a crude drag &drop

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; utf-8" />
    <title>Sortables demo - Interface plugin for jQuery</title>
    
    <!-- CSS HIDE SUM -->
    <style type="text/css">
    .sum{
    display:none;
    }
    </style>
    
    <!-- JS HIDE ME SUM -->
    <script type="text/javascript">
    	document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
    </script>
    
    <!-- CSS -->
    <style type="text/css" media="all">
    html
    {
    	height: 100%;
    }
    img{
    	border: none;
    }
    body
    {
    	background: #fff;
    	height: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    .groupWrapper
    {
    position:relative;
    	width: 32%;
    	float: left;
    	margin-right: 1%;
    	min-height: 400px;
    }
    .serializer
    {
    	clear: both;
    }
    .groupItem
    {
    position:relative;
    	margin-bottom: 20px;
    	background-color:#FFFFFF;
    	border:1px solid #666666;
    }
    .groupItem .itemHeader
    {
    	line-height: 28px;
    	background-color: #cccccc;
    	border-top: 2px solid #666666;
    	color: #000;
    	padding: 0 10px;
    	cursor: move;
    	font-weight: bold;
    	font-size: 16px;
    	height: 28px;
    	position: relative;
    }
    
    .sortHelper
    {
    	border: 3px dashed #666;
    	width: auto !important;
    }
    .groupWrapper p
    {
    	height: 1px;
    	margin: 0;
    	padding: 0;
    }
    
    </style>
    
    
    <!-- Cookie and ready -->
    <script type="text/javascript">
    
    
    
    
    function serialize(s)
    {
    
    };
    
    
    /* COOKIES */
    
    
    
    </script>
    
    <!-- Restore order  -->
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
     if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
     zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
     zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
    }
    
    function zxcElsByClass(zxccls,zxcp,zxctag) {
     zxcp=zxcp||document;
     zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
     zxctag=zxctag||'*';
     for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
      if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
     }
     return zxcary;
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcMse(zxcevt){
     if (document.all) return [zxcevt.clientX,zxcevt.clientY];
     return [zxcevt.pageX,zxcevt.pageY];
    }
    
    
    function zxcDragInit(zxcevt,zxccls){
     var zxcary=zxcElsByClass(zxccls[0],false,'DIV');
     for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
      zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
      for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
        zxcdivary.push(zxcdivs[zxc0a]);
        zxcdivs[zxc0a].nu=(zxcnu++)+'';
      }
     }
     if (zxcReadCookie('zxcnme')){
      var zxccookievalue=zxcReadCookie('zxcnme');
      zxccookievalue=zxccookievalue.split(';')
      for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length;zxc1++){
       zxcs=zxccookievalue[zxc1].split(':');
       zxcp=zxcparary[zxcs[0]];
       for (var zxc1a=1;zxc1a<zxcs.length;zxc1a++){
        zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
       }
      }
     }
    
     for (var zxcpary=[],zxcary=zxcElsByClass(zxccls[1]),zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
      zxctitle=zxcElsByClass(zxccls[2],zxcary[zxc0],'DIV');
      if (zxctitle.length>0){
       zxcpary.push(zxcary[zxc0]);
       zxctitle[0].drag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zxcary[zxc0].offsetWidth+'px'},document.getElementsByTagName('BODY')[0]);
       zxctitle[0].drag.divary=zxcdivary;
       zxctitle[0].drag.parary=zxcparary;
       zxctitle[0].drag.obj=zxcary[zxc0];
       zxcAddEvt(zxctitle[0],'zxcMseDown','mousedown');
      }
     }
    }
    
    var zxcDragObj=false;
    
    function zxcMseDown(zxcevt){
     var zxcp=this.parentNode;
     zxcDragObj=[this.drag,zxcPos(zxcp)[0],zxcPos(zxcp)[1],zxcMse(zxcevt)];
     zxcES(this.drag,{visibility:'visible',left:zxcPos(zxcp)[0]+'px',top:zxcPos(zxcp)[1]+'px'});
     return false;
    }
    
    function zxcDrag(zxcevt){
     if (zxcDragObj){
      var zxcmse=zxcMse(zxcevt);
      zxcES(zxcDragObj[0],{left:zxcDragObj[1]-(zxcDragObj[3][0]-zxcmse[0])+'px',top:zxcDragObj[2]-(zxcDragObj[3][1]-zxcmse[1])+'px'});
     }
    }
    function zxcMseUp(){
     if (!zxcDragObj) return;
     var zxcdpos=zxcPos(zxcDragObj[0]);
     var zxcary=zxcDragObj[0].parary;
     for (var zxc0=0;zxc0<zxcary.length;zxc0++){
      var zxcpos=zxcPos(zxcary[zxc0]);
      if (zxcdpos[0]>zxcPos(zxcary[zxc0])[0]&&zxcdpos[0]<zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth){
       zxcary[zxc0].appendChild(zxcDragObj[0].obj);
      }
     }
     var zxcstring='';
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      zxcary[zxc1].ary1=[]
      var zxcdivs=zxcDragObj[0].divary;
      for (var zxccnt=1,zxc1a=0;zxc1a<zxcdivs.length;zxc1a++){
       if (zxcdivs[zxc1a].parentNode==zxcary[zxc1]){
        zxcary[zxc1].ary1.push(zxc1a)
       }
      }
     }
     var zxcstring='';
      for (var zxc1=0;zxc1<zxcary.length;zxc1++){
       zxcstring+=zxc1+':'+zxcary[zxc1].ary1.join(':')+';';
     }
     zxcCreateCookie('zxcnme',zxcstring,1)
     zxcES(zxcDragObj[0],{visibility:'hidden'});
     zxcDragObj=false;
    }
    
    zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader']);
     zxcAddEvt(document,'zxcMseUp','mouseup');
     zxcAddEvt(document,'zxcDrag','mousemove');
    // zxcAddOOPEvt(zxcobj,'mouseover',this.preview,this)
    
    function zxcCreateCookie(zxcnme,zxcv,zxcdays){
     document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
    }
    
    function zxcReadCookie(zxcnme){
     zxcnme+='=';
     var zxcsplit = document.cookie.split(';');
     for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
      var zxcs=zxcsplit[zxc0];
      while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
      if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
     }
     return null;
    }
    
    
    /*]]>*/
    </script>
    </head>
    <body>
    
    
    
    
    
    
    <div id="sort1" class="groupWrapper">
    	<div id="feeds" class="groupItem">
    		<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000);  return false;"><a href="google.com">Feeds</a> 	</div>
    
    		<div class="itemContent">
    		<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none';  document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow"  onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none';  document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
    		</div>
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    		</div>
    	</div>
    
    	<div id="news" class="groupItem">
    		<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000);  return false;">News</div>
    
    		<div class="itemContent">
    				<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none';  document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow"  onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none';  document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
    		</div>
    			<strong>Test Headline</strong>
    			<p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    
    <strong>Test Headline</strong> <p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    		</div>
    	</div>
    
    </div>
    
    
    
    
    
    
    
    
    <div id="sort2" class="groupWrapper">
    	<div id="shop" class="groupItem">
    		<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000);  return false;">Shopping</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    	<div id="links" class="groupItem">
    
    		<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000);  return false;">Links</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    			</ul>
    		</div>
    	</div>
    
    	<div id="images" class="groupItem">
    		<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000);  return false;">Images</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    </div>
    
    
    
    
    
    
    
    
    
    
    <div id="sort3" class="groupWrapper">
    	<div id="local" class="groupItem">
    		<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000);  return false;">Local</div>
    		<div class="itemContent">
    
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    
    	</div>
    
    	<div id="biz" class="groupItem">
    		<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000);  return false;">Biz</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    	<div id="slide" class="groupItem">
    		<div class="itemHeader" onmouseup="setTimeout('serialize();', 1*1000);  return false;">Slideshows</div>
    
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    
    		</div>
    	</div>
    
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    
    </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/

  • Users who have thanked vwphillips for this post:

    webdevised (10-01-2008)

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks vwphillips i will take a look at it and see what i can do.. your the first that has come up with something...

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I looked at the code.. how are you doing the reordering from the cookie??

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    with ammentments and notes

    Code:
    function zxcDragInit(zxcevt,zxccls){
     var zxcary=zxcElsByClass(zxccls[0],false,'DIV');
     for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
      zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
      for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
        zxcdivary.push(zxcdivs[zxc0a]);  // here we create an array of divs
        zxcdivs[zxc0a].nu=(zxcnu++)+'';  // here we give each div a sequential number
      }
     }
     if (zxcReadCookie('zxcnme')){
      var zxccookievalue=zxcReadCookie('zxcnme');
    
      alert(zxccookievalue)
      zxccookievalue=zxccookievalue.split('#')
      for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
       zxcs=zxccookievalue[zxc1].split(':');
    alert(zxcs); // field 0 = the parent number, subsequent fields the div nu
       zxcp=zxcparary[zxcs[0]];
       for (var zxc1a=1;zxc1a<zxcs.length;zxc1a++){
        zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
       }
      }
     }
    ..........
    Code:
    function zxcMseUp(){
     if (!zxcDragObj) return;
     var zxcdpos=zxcPos(zxcDragObj[0]);
     var zxcary=zxcDragObj[0].parary;
     for (var zxc0=0;zxc0<zxcary.length;zxc0++){
      var zxcpos=zxcPos(zxcary[zxc0]);
      if (zxcdpos[0]>zxcPos(zxcary[zxc0])[0]&&zxcdpos[0]<zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth){
       zxcary[zxc0].appendChild(zxcDragObj[0].obj);
      }
     }
     var zxcstring='';
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){  // an array of parent nodes
      zxcary[zxc1].ary1=[]
      var zxcdivs=zxcDragObj[0].divary; // an array of dragable divs
      for (var zxccnt=1,zxc1a=0;zxc1a<zxcdivs.length;zxc1a++){
       if (zxcdivs[zxc1a].parentNode==zxcary[zxc1]){
        zxcary[zxc1].ary1.push(zxcdivs[zxc1a].nu);
       }
      }
     }
     var zxcstring='';
      for (var zxc1=0;zxc1<zxcary.length;zxc1++){
       zxcstring+=zxc1+':'+zxcary[zxc1].ary1.join(':')+'#';
     }
     zxcCreateCookie('zxcnme',zxcstring,1)
     zxcES(zxcDragObj[0],{visibility:'hidden'});
     zxcDragObj=false;
    }
    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/

  • Users who have thanked vwphillips for this post:

    webdevised (10-01-2008)

  • #7
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    how are the divs labeled in the cookie.. example: 0:0:1:2:4:5:6:1

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    the cookie value is 0:1:7#1:0#2:3:4:5:6:2
    split('#')[0] =0:1:2
    split('#')[0].split(':')[0]= 0 = first wrapper
    split('#')[0].split(':')[1] = 1= div.nu
    split('#')[0].split(':')[2] = 7= div.nu

    try

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; utf-8" />
    <title>Sortables demo - Interface plugin for jQuery</title>
    
    <!-- CSS HIDE SUM -->
    <style type="text/css">
    .sum{
    display:none;
    }
    </style>
    
    <!-- JS HIDE ME SUM -->
    <script type="text/javascript">
    	document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
    </script>
    
    <!-- CSS -->
    <style type="text/css" media="all">
    html
    {
    	height: 100%;
    }
    img{
    	border: none;
    }
    body
    {
    	background: #fff;
    	height: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    .groupWrapper
    {
    position:relative;
    	width: 32%;
    	float: left;
    	margin-right: 1%;
    	min-height: 400px;
    }
    .serializer
    {
    	clear: both;
    }
    .groupItem
    {
    position:relative;
    	margin-bottom: 20px;
    	background-color:#FFFFFF;
    	border:1px solid #666666;
    }
    .groupItem2
    {
    position:relative;
    	margin-bottom: 20px;
    	background-color:#FFFFFF;
    	border:1px solid #666666;
    }
    .groupItem .itemHeader
    {
    	line-height: 28px;
    	background-color: #cccccc;
    	border-top: 2px solid #666666;
    	color: #000;
    	padding: 0 10px;
    	cursor: move;
    	font-weight: bold;
    	font-size: 16px;
    	height: 28px;
    	position: relative;
    }
    
    .sortHelper
    {
    	border: 3px dashed #666;
    	width: auto !important;
    }
    .groupWrapper p
    {
    	height: 1px;
    	margin: 0;
    	padding: 0;
    }
    
    </style>
    
    
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Drag & Drop with persistance (30-Sep-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    var zxcDragObj=false;
    
    function zxcDragInit(zxcevt,zxccls){
     var zxcparary=zxcElsByClass(zxccls[0],false,'DIV');
     for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
      zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
      for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
       zxcdivary.push(zxcdivs[zxc0a]);
       zxcdivs[zxc0a].nu=(zxcnu++)+'';
      }
     }
     if (zxcReadCookie(zxccls[0])){
      var zxccookievalue=zxcReadCookie(zxccls[0]);
      zxccookievalue=zxccookievalue.split('#')
      for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
       zxcs=zxccookievalue[zxc1].split(':');
       zxcp=zxcparary[zxcs[0]];
       for (var zxc1a=1;zxc1a<zxcs.length-1;zxc1a++){
        zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
       }
      }
     }
     var zxcmark=zxcES('DIV',{position:'absolute',overflow:'hidden',overflow:'hidden',left:'0px',top:'0px',width:'0px',height:'0px'});
     var zxcblank=zxcES('DIV',{position:'relative'});
     zxcblank.className=zxccls[1]
     for (var zxcpary=[],zxcary=zxcElsByClass(zxccls[1]),zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
      var zxctitle=zxcElsByClass(zxccls[2],zxcary[zxc0],'DIV');
      if (zxctitle.length>0){
       zxcpary.push(zxcary[zxc0]);
       zxctitle[0].drag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zxcary[zxc0].offsetWidth+'px'},document.getElementsByTagName('BODY')[0]);
       zxctitle[0].drag.divary=zxcdivary;
       zxctitle[0].drag.parary=zxcparary;
       zxctitle[0].drag.obj=zxcary[zxc0];
       zxctitle[0].drag.blank=zxcblank;
       zxcES(zxctitle[0].drag.blank,{width:zxcary[zxc0].offsetWidth+'px',height:zxcary[zxc0].offsetHeight+'px'});
       zxctitle[0].drag.mark=zxcmark;
       zxctitle[0].drag.nme=zxccls[0];
       zxctitle[0].drag.cls=zxccls[1];
       zxctitle[0].drag.days=zxccls[3];
       zxcAddEvt(zxctitle[0],'zxcMseDown','mousedown');
      }
     }
    }
    
    function zxcMseDown(zxcevt){
     var zxcp=this.drag.obj;
     zxcp.parentNode.insertBefore(this.drag.mark,zxcp);
     //           0        1            2              3    4              5               6
     zxcDragObj=[this.drag,zxcPos(zxcp),zxcMse(zxcevt),zxcp,this.drag.mark,this.drag.blank,zxcLeftRight(this.drag.divary,zxcPos(zxcp)[0])];
     zxcES(this.drag,{visibility:'visible',left:zxcPos(zxcp)[0]+'px',top:zxcPos(zxcp)[1]+'px'});
     return false;
    }
    
    function zxcDrag(zxcevt){
     if (zxcDragObj){
      var zxcmse=zxcMse(zxcevt);
      zxcES(zxcDragObj[0],{left:zxcDragObj[1][0]-(zxcDragObj[2][0]-zxcmse[0])+'px',top:zxcDragObj[1][1]-(zxcDragObj[2][1]-zxcmse[1])+'px'});
      zxcBlank(zxcDragObj);
     }
    }
    
    function zxcBlank(zxcdrag){
     if (zxcdrag[3].parentNode.nodeName=='DIV') zxcdrag[3].parentNode.removeChild(zxcDragObj[3]);
     var zxcdpos=zxcPos(zxcdrag[0]);
     var zxcary=zxcdrag[6];
     var zxccol=zxcColum(zxcdrag[6],zxcdrag,zxcdpos).parentNode;
     if (!zxccol) zxccol=zxcColum(zxcdrag[0].parary,zxcdrag,zxcdpos)||zxcdrag[4].parentNode;
     var zxcary=zxcElsByClass(zxcdrag[0].cls,zxccol,'DIV');
     for (var zxcset=false,zxc1=0;zxc1<zxcary.length;zxc1++){
      var zxcpos=zxcPos(zxcary[zxc1])[1]+zxcary[zxc1].offsetHeight/2;
      if (zxcpos>zxcdpos[1]){
       zxccol.insertBefore(zxcdrag[5],zxcary[zxc1]);
       zxcset=true;
       break;
      }
     }
     if (!zxcset) zxccol.appendChild(zxcdrag[5]);
    }
    
    function zxcMseUp(){
     if (zxcDragObj){
      zxcDragObj[5].parentNode.replaceChild(zxcDragObj[3],zxcDragObj[5]);
      var zxcstring='';
      var zxcary=zxcDragObj[0].parary;
      for (var zxc1=0;zxc1<zxcary.length;zxc1++){
       zxcstring+=zxc1+':';
       var zxcdivs=zxcElsByClass('groupItem',zxcary[zxc1],'DIV');
       for (var zxccnt=1,zxc1a=0;zxc1a<zxcdivs.length;zxc1a++) zxcstring+=zxcdivs[zxc1a].nu+':';
       zxcstring+='#';
      }
      zxcDragObj[0].style.visibility='hidden';
      zxcCreateCookie(zxcDragObj[0].nme,zxcstring,zxcDragObj[0].days);
      zxcDragObj=false;
     }
    }
    
    function zxcLeftRight(zxcary,zxcpp){
     var zxclr=[[],[]];
     for (var zxc0=0;zxc0<zxcary.length;zxc0++){
      var zxcpos=zxcPos(zxcary[zxc0])[0];
      if (zxcpos!=0&&zxcpos!=zxcpp){
       zxclr[zxcpos<zxcpp?0:1].push(zxcary[zxc0]);
      }
     }
     zxclr[1]=zxclr[1].reverse();
     return zxclr[0].concat(zxclr[1]);
    }
    
    function zxcSortLeft(zxca,zxcb){
     zxca=zxca.offsetLeft;
     zxcb=zxcb.offsetLeft;
     return zxca<zxcb?1:zxca>zxcb?-1:0;
    }
    
    function zxcColum(zxcary,zxcdrag,zxcdpos){
      for (var zxc0=0;zxc0<zxcary.length;zxc0++){
       var zxcpos=zxcPos(zxcary[zxc0])[0];
       if ((zxcpos<zxcdrag[1][0]&&zxcdpos[0]<zxcpos+zxcary[zxc0].offsetWidth)||(zxcpos>zxcdrag[1][0]&&zxcdpos[0]+zxcdrag[0].offsetWidth>zxcpos)){
        return zxcary[zxc0];
       }
      }
     return false;
    }
    
    function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
     if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
     zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
     zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
    }
    
    function zxcElsByClass(zxccls,zxcp,zxctag) {
     zxcp=zxcp||document;
     zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
     zxctag=zxctag||'*';
     for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
      if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
     }
     return zxcary;
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcMse(zxcevt){
     if (document.all) return [zxcevt.clientX,zxcevt.clientY];
     return [zxcevt.pageX,zxcevt.pageY];
    }
    
    function zxcCreateCookie(zxcnme,zxcv,zxcdays){
     document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
    }
    
    function zxcReadCookie(zxcnme){
     zxcnme+='=';
     var zxcsplit = document.cookie.split(';');
     for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
      var zxcs=zxcsplit[zxc0];
      while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
      if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
     }
     return null;
    }
    
     zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader',1]);
     zxcAddEvt(document,'zxcMseUp','mouseup');
     zxcAddEvt(document,'zxcDrag','mousemove');
    
    
    /*]]>*/
    </script>
    </head>
    <body>
    
    
    
    
    
    
    <div id="sort1" class="groupWrapper">
    	<div id="feeds" class="groupItem">
    		<div class="itemHeader"><a href="google.com">Feeds</a> 	</div>
    
    		<div class="itemContent">
    		<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none';  document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow"  onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none';  document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
    		</div>
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    		</div>
    	</div>
     	<div id="news" class="groupItem">
    		<div class="itemHeader" >News</div>
    
    		<div class="itemContent">
    				<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none';  document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow"  onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none';  document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
    		</div>
    			<strong>Test Headline</strong>
    			<p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    
    <strong>Test Headline</strong> <p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    		</div>
    	</div>
    
    </div>
    
    
    
    
    
    
    
    
    <div id="sort2" class="groupWrapper">
    <div id="shop" class="groupItem">
    		<div class="itemHeader" >Shopping</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    	<div id="links" class="groupItem">
    
    		<div class="itemHeader" >Links</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    			</ul>
    		</div>
    	</div>
    
    	<div id="images" class="groupItem">
    		<div class="itemHeader" >Images</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    </div>
    
    
    
    
    
    
    
    
    
    
    <div id="sort3" class="groupWrapper">
    	<div id="local" class="groupItem">
    		<div class="itemHeader" >Local</div>
    		<div class="itemContent">
    
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    
    	</div>
    
    	<div id="biz" class="groupItem">
    		<div class="itemHeader" >Biz</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    	<div id="slide" class="groupItem">
    		<div class="itemHeader" >Slideshows</div>
    
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    
    		</div>
    	</div>
    
    </div>
    http://bt5.awardspace.com/
    
    </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/

  • Users who have thanked vwphillips for this post:

    webdevised (10-01-2008)

  • #9
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Can you do me one more favor.. can you take the drag and drop feautre out of your script.. still keep the read the cookie and reorder the div part just take out the drag and set cookie option.. please....

  • #10
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I GOT IT!!!!!!!! THANK YOU SO MUCH!!.. Please look on my site at

    http://bt5.awardspace.com/

    to see it work and to view the code... it uses the other drag and drop code but uses your reorder code.. if you see anything that you think needs to be changed to make it work better or faster please let me know!!!!


    -WD

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    function serialize(s)
    {
     var zxcstring='';
     for (var zxcdivs,zxcparary=zxcElsByClass('groupWrapper',false,'DIV'),zxc0=0;zxc0<zxcparary.length;zxc0++){
      zxcstring+=zxc0+':';
      zxcdivs=zxcElsByClass('groupItem',zxcparary[zxc0],'DIV');
      for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
       zxcstring+=zxcdivs[zxc0a].nu+':';
      }
      zxcstring+='#';
     }
    
    var now = new Date();
    now.setTime(now.getTime() + 1000 * 60 * 60 * 24 * 365);
    
    
    document.cookie = "groupWrapper="+ zxcstring +";expires=" + now;
    };
    I get an error in IE at line 233 works in MozFF
    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/

  • Users who have thanked vwphillips for this post:

    webdevised (10-02-2008)

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    this works in IE and MozFF with same functionality as your page

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; utf-8" />
    <title>Sortables demo - Interface plugin for jQuery</title>
    
    <!-- CSS HIDE SUM -->
    <style type="text/css">
    .sum{
    display:none;
    }
    </style>
    
    <!-- JS HIDE ME SUM -->
    <script type="text/javascript">
    	document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
    </script>
    
    <!-- CSS -->
    <style type="text/css" media="all">
    html
    {
    	height: 100%;
    }
    img{
    	border: none;
    }
    body
    {
    	background: #fff;
    	height: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    .groupWrapper
    {
    position:relative;
    	width: 32%;
    	float: left;
    	margin-right: 1%;
    	min-height: 400px;
    }
    .serializer
    {
    	clear: both;
    }
    .groupItem
    {
    position:relative;
    	margin-bottom: 20px;
    	background-color:#FFFFFF;
    	border:1px solid #666666;
    }
    .groupItem2
    {
    position:relative;
    	margin-bottom: 20px;
    	background-color:#FFFFFF;
    	border:1px solid #666666;
    }
    .groupItem .itemHeader
    {
    	line-height: 28px;
    	background-color: #cccccc;
    	border-top: 2px solid #666666;
    	color: #000;
    	padding: 0 10px;
    	cursor: move;
    	font-weight: bold;
    	font-size: 16px;
    	height: 28px;
    	position: relative;
    }
    
    .sortHelper
    {
    	border: 3px dashed #666;
    	width: auto !important;
    }
    .groupWrapper p
    {
    	height: 1px;
    	margin: 0;
    	padding: 0;
    }
    .blank {
      border:dashed red 3px;
    	margin-bottom: 20px;
    }
    
    </style>
    
    
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Drag & Drop with persistance (30-Sep-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    // Initialised by a <BODY> or window event call to function:
    // zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);
    // where parameter 0 is an array
    //  field 0 = the class name of the draggable div's parent node class name (string)
    //  field 1 = the class name of the draggable div's class name (string)
    //  field 2 = the duration of the cookie persistance in days. (digits, for no cookie use -1)
    //  field 3 = (optional) the class name if the draggable div's title bar class name (string, default is the draggable div)
    //  field 4 = (optional) the class name if the draggable div's blank class name (string, default is the draggable div outline)
    
    // Functional Code - No Need to change
    
    var zxcDragObj=false;
    
    function zxcDragInit(zxccls){
     zxccls[2]=zxccls[2]||-1;
     var zxcparary=zxcElsByClass(zxccls[0],false,'DIV');
     for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
      zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
      for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
       zxcdivary.push(zxcdivs[zxc0a]);
       zxcdivs[zxc0a].nu=(zxcnu++)+'';
      }
     }
     if (zxcReadCookie(zxccls[0])){
      var zxccookievalue=zxcReadCookie(zxccls[0]);
      zxccookievalue=zxccookievalue.split('#')
      for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
       zxcs=zxccookievalue[zxc1].split(':');
       zxcp=zxcparary[zxcs[0]];
       for (var zxc1a=1;zxc1a<zxcs.length-1;zxc1a++){
        zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
       }
      }
     }
     var zxcmark=zxcES('DIV',{position:'absolute',overflow:'hidden',overflow:'hidden',left:'0px',top:'0px',width:'0px',height:'0px'});
     var zxcblank=zxcES('DIV',{position:'relative'});
     zxcblank.className=zxccls[4]||zxccls[1];
     for (var zxcpary=[],zxcary=zxcElsByClass(zxccls[1]),zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
      zxcpary.push(zxcary[zxc0]);
      zxcary[zxc0].data=[zxcmark,zxcblank,zxcparary,zxccls];
      var zxcdrag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zxcary[zxc0].offsetWidth+'px',height:zxcary[zxc0].offsetHeight+'px'},document.getElementsByTagName('BODY')[0]);
      var zxcobj=zxcElsByClass(zxccls[3],zxcary[zxc0],'DIV')[0]||zxcary[zxc0];
      zxcobj.drag=zxcdrag;
      zxcobj.drag.obj=zxcary[zxc0];
      zxcAddEvt(zxcobj,'zxcMseDown','mousedown');
     }
    }
    
    function zxcMseDown(zxcevt){
     var zxcp=this.drag.obj;
     zxcES(zxcp.data[1],{width:zxcp.offsetWidth+'px',height:zxcp.offsetHeight+'px'});
     zxcp.parentNode.insertBefore(zxcp.data[0],zxcp);
     //           0        1            2              3    4 = mark     5 = blank    6 = parary   7 =cls
     zxcDragObj=[this.drag,zxcPos(zxcp),zxcMse(zxcevt),zxcp,zxcp.data[0],zxcp.data[1],zxcp.data[2],zxcp.data[3]];
     zxcES(this.drag,{visibility:'visible',left:zxcPos(zxcp)[0]+'px',top:zxcPos(zxcp)[1]+'px'});
     return false;
    }
    
    function zxcDrag(zxcevt){
     if (zxcDragObj){
      var zxcdrag=zxcDragObj;
      var zxcmse=zxcMse(zxcevt);
      var zxcdpos=[zxcdrag[1][0]-(zxcdrag[2][0]-zxcmse[0]),zxcdrag[1][1]-(zxcdrag[2][1]-zxcmse[1])];
      zxcES(zxcdrag[0],{left:zxcdpos[0]+'px',top:zxcdpos[1]+'px'});
      zxcBlank(zxcdrag,zxcdpos);
      if (zxcdrag[3].parentNode.nodeName=='DIV') zxcdrag[3].parentNode.removeChild(zxcdrag[3]);
     }
     return false;
    }
    
    function zxcBlank(zxcdrag,zxcdpos){
     for (var zxcdc=zxcdpos[0]+zxcdrag[0].offsetWidth/2,zxcary=zxcdrag[6],zxcpc,zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
      var zxcpc=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
      if (zxcpc<zxcc){ zxcc=zxcpc; zxcnu=zxc0; }
     }
     var zxccol=zxcary[zxcnu]||zxcdrag[4].parentNode;
     zxcary=zxcElsByClass(zxcdrag[7][1],zxccol,'DIV');
     for (var zxcset=false,zxc1=0;zxc1<zxcary.length;zxc1++){
      zxcpc=zxcPos(zxcary[zxc1])[1]+zxcary[zxc1].offsetHeight/2;
      if (zxcpc>zxcdpos[1]){
       zxccol.insertBefore(zxcdrag[5],zxcary[zxc1]);
       zxcset=true;
       break;
      }
     }
     if (!zxcset) zxccol.appendChild(zxcdrag[5]);
    }
    
    function zxcColum(zxcary,zxcdrag,zxcdx){
     var zxcdc=zxcdx+zxcdrag[0].offsetWidth/2;
     for (var zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
      var zxcpos=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
      if (zxcpos<zxcc){
       zxcc=zxcpos;
       zxcnu=zxc0;
      }
     }
     return zxcary[zxcnu];
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      var zxcpos=zxcPos(zxcary[zxc1])[0];
      if ((!zxcdrag[9]&&zxcdx>zxcpos&&zxcdx<zxcpos+zxcary[zxc1].offsetWidth)){
       return zxcary[zxc1];
      }
     }
     for (var zxc1=zxcary.length-1;zxc1>=0;zxc1--){
      var zxcpos=zxcPos(zxcary[zxc1])[0];
      if ((zxcdrag[9]&&zxcdx+zxcdrag[0].offsetWidth>zxcpos)) return zxcary[zxc1];
     }
     return false;
    }
    
    function zxcMseUp(){
     if (zxcDragObj){
      zxcDragObj[5].parentNode.replaceChild(zxcDragObj[3],zxcDragObj[5]);
      var zxcstring='';
      var zxcary=zxcDragObj[6];
      for (var zxc1=0;zxc1<zxcary.length;zxc1++){
       zxcstring+=zxc1+':';
       var zxcdivs=zxcElsByClass(zxcDragObj[7][1],zxcary[zxc1],'DIV');
       for (var zxc1a=0;zxc1a<zxcdivs.length;zxc1a++) zxcstring+=zxcdivs[zxc1a].nu+':';
       zxcstring+='#';
      }
      zxcDragObj[0].style.visibility='hidden';
      zxcCreateCookie(zxcDragObj[7][0],zxcstring,zxcDragObj[7][2]);
      zxcDragObj=false;
     }
    }
    
    function zxcElsByClass(zxccls,zxcp,zxctag) {
     zxcp=zxcp||document;
     zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
     zxctag=zxctag||'*';
     for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
      if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
     }
     return zxcary;
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    function zxcMse(zxcevt){
     if (document.all) return [zxcevt.clientX,zxcevt.clientY];
     return [zxcevt.pageX,zxcevt.pageY];
    }
    
    function zxcCreateCookie(zxcnme,zxcv,zxcdays){
     document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
    }
    
    function zxcReadCookie(zxcnme){
     zxcnme+='=';
     var zxcsplit = document.cookie.split(';');
     for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
      var zxcs=zxcsplit[zxc0];
      while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
      if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
     }
     return null;
    }
    
    function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
     if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
     zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
     zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
    }
    
    //zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader',1,'blank']);
    zxcAddEvt(document,'zxcMseUp','mouseup');
    zxcAddEvt(document,'zxcDrag','mousemove');
    
    
    /*]]>*/
    </script>
    </head>
    <body onload="zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);">
    
    <div id="sort1" class="groupWrapper">
    	<div id="feeds" class="groupItem">
    		<div class="itemHeader"><a href="google.com">Feeds</a> 	</div>
    
    		<div class="itemContent">
    		<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none';  document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow"  onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none';  document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
    		</div>
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    		</div>
    	</div>
     	<div id="news" class="groupItem">
    		<div class="itemHeader" >News</div>
    
    		<div class="itemContent">
    				<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none';  document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow"  onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none';  document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
    		</div>
    			<strong>Test Headline</strong>
    			<p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    
    <strong>Test Headline</strong> <p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    		</div>
    	</div>
    
    </div>
    
    
    
    
    
    
    
    
    <div id="sort2" class="groupWrapper">
    <div id="shop" class="groupItem">
    		<div class="itemHeader" >Shopping</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    	<div id="links" class="groupItem">
    
    		<div class="itemHeader" >Links</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    			</ul>
    		</div>
    	</div>
    
    	<div id="images" class="groupItem">
    		<div class="itemHeader" >Images</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    </div>
    
    
    
    
    
    
    
    
    
    
    <div id="sort3" class="groupWrapper">
    	<div id="local" class="groupItem">
    		<div class="itemHeader" >Local</div>
    		<div class="itemContent">
    
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    
    	</div>
    
    	<div id="biz" class="groupItem">
    		<div class="itemHeader" >Biz</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    	<div id="slide" class="groupItem">
    		<div class="itemHeader" >Slideshows</div>
    
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    
    		</div>
    	</div>
    
    </div>
    http://bt5.awardspace.com/
    
    </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/

  • Users who have thanked vwphillips for this post:

    webdevised (10-02-2008)

  • #13
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks again.. your a life saver.. couldnt have done it with out you.. at least now you can had a script to your library... LOL

  • #14
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    quick questions.. on your current code can you change the drag to click and hold to move instead of just click???

  • #15
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    change the drag to click and hold to move instead of just click???
    Not shure I understand as a click will be seen as a mousedown and mouseup so all thats left is doubleclick.

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; utf-8" />
    <title>Sortables demo - Interface plugin for jQuery</title>
    
    <!-- CSS HIDE SUM -->
    <style type="text/css">
    .sum{
    display:none;
    }
    </style>
    
    <!-- JS HIDE ME SUM -->
    <script type="text/javascript">
    	document.write("<style type=\"text/css\">.newshideMe, .feedshideMe {display:none;} .sum{display:block;}</style>");
    </script>
    
    <!-- CSS -->
    <style type="text/css" media="all">
    html
    {
    	height: 100%;
    }
    img{
    	border: none;
    }
    body
    {
    	background: #fff;
    	height: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    .groupWrapper
    {
    position:relative;
    	width: 32%;
    	float: left;
    	margin-right: 1%;
    	min-height: 400px;
    }
    .serializer
    {
    	clear: both;
    }
    .groupItem
    {
    position:relative;
    	margin-bottom: 20px;
    	background-color:#FFFFFF;
    	border:1px solid #666666;
    }
    .groupItem2
    {
    position:relative;
    	margin-bottom: 20px;
    	background-color:#FFFFFF;
    	border:1px solid #666666;
    }
    .groupItem .itemHeader
    {
    	line-height: 28px;
    	background-color: #cccccc;
    	border-top: 2px solid #666666;
    	color: #000;
    	padding: 0 10px;
    	cursor: move;
    	font-weight: bold;
    	font-size: 16px;
    	height: 28px;
    	position: relative;
    }
    
    .sortHelper
    {
    	border: 3px dashed #666;
    	width: auto !important;
    }
    .groupWrapper p
    {
    	height: 1px;
    	margin: 0;
    	padding: 0;
    }
    .blank {
      border:dashed red 3px;
    	margin-bottom: 20px;
    }
    
    </style>
    
    
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Drag & Drop with persistance (30-Sep-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    // Initialised by a <BODY> or window event call to function:
    // zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);
    // where parameter 0 is an array
    //  field 0 = the class name of the draggable div's parent node class name (string)
    //  field 1 = the class name of the draggable div's class name (string)
    //  field 2 = the duration of the cookie persistance in days. (digits, for no cookie use -1)
    //  field 3 = (optional) the class name if the draggable div's title bar class name (string, default is the draggable div)
    //  field 4 = (optional) the class name if the draggable div's blank class name (string, default is the draggable div outline)
    
    // Functional Code - No Need to change
    
    var zxcDragObj=false;
    
    function zxcDragInit(zxccls){
     zxccls[2]=zxccls[2]||-1;
     var zxcparary=zxcElsByClass(zxccls[0],false,'DIV');
     for (var zxcnu=0,zxcdivs,zxcdivary=[],zxcparary=zxcElsByClass(zxccls[0],false,'DIV'),zxctitle,zxc0=0;zxc0<zxcparary.length;zxc0++){
      zxcdivs=zxcElsByClass(zxccls[1],zxcparary[zxc0],'DIV');
      for (var zxc0a=0;zxc0a<zxcdivs.length;zxc0a++){
       zxcdivary.push(zxcdivs[zxc0a]);
       zxcdivs[zxc0a].nu=(zxcnu++)+'';
      }
     }
     if (zxcReadCookie(zxccls[0])){
      var zxccookievalue=zxcReadCookie(zxccls[0]);
      zxccookievalue=zxccookievalue.split('#')
      for (var zxcp,zxcs,zxc1=0;zxc1<zxccookievalue.length-1;zxc1++){
       zxcs=zxccookievalue[zxc1].split(':');
       zxcp=zxcparary[zxcs[0]];
       for (var zxc1a=1;zxc1a<zxcs.length-1;zxc1a++){
        zxcp.appendChild(zxcdivary[zxcs[zxc1a]]);
       }
      }
     }
     var zxcmark=zxcES('DIV',{position:'absolute',overflow:'hidden',overflow:'hidden',left:'0px',top:'0px',width:'0px',height:'0px'});
     var zxcblank=zxcES('DIV',{position:'relative'});
     zxcblank.className=zxccls[4]||zxccls[1];
     for (var zxcpary=[],zxcary=zxcElsByClass(zxccls[1]),zxctitle,zxc0=0;zxc0<zxcary.length;zxc0++){
      zxcpary.push(zxcary[zxc0]);
      zxcary[zxc0].data=[zxcmark,zxcblank,zxcparary,zxccls];
      var zxcdrag=zxcES(zxcary[zxc0].cloneNode(true),{position:'absolute',visibility:'hidden',zIndex:'101',left:'0px',top:'5px',width:zxcary[zxc0].offsetWidth+'px',height:zxcary[zxc0].offsetHeight+'px'},document.getElementsByTagName('BODY')[0]);
      var zxcobj=zxcElsByClass(zxccls[3],zxcary[zxc0],'DIV')[0]||zxcary[zxc0];
      zxcobj.drag=zxcdrag;
      zxcobj.drag.obj=zxcary[zxc0];
      zxcAddEvt(zxcobj,'zxcMseDown','click');
     }
    }
    
    function zxcMseDown(zxcevt){
     if (zxcDragObj) return;
     var zxcp=this.drag.obj;
     var zxcppos=zxcPos(zxcp);
     zxcES(zxcp.data[1],{width:zxcp.offsetWidth+'px',height:zxcp.offsetHeight+'px'});
     zxcp.parentNode.insertBefore(zxcp.data[0],zxcp);
     zxcp.parentNode.replaceChild(zxcp.data[1],zxcp);
     //           0        1       2              3    4 = mark     5 = blank    6 = parary   7 =cls
     zxcDragObj=[this.drag,zxcppos,zxcMse(zxcevt),zxcp,zxcp.data[0],zxcp.data[1],zxcp.data[2],zxcp.data[3]];
     zxcES(this.drag,{visibility:'visible',left:zxcppos[0]+'px',top:zxcppos[1]+'px'});
    
     return false;
    }
    
    function zxcDrag(zxcevt){
     if (zxcDragObj){
      var zxcdrag=zxcDragObj;
      var zxcmse=zxcMse(zxcevt);
      var zxcdpos=[zxcdrag[1][0]-(zxcdrag[2][0]-zxcmse[0]),zxcdrag[1][1]-(zxcdrag[2][1]-zxcmse[1])];
      zxcES(zxcdrag[0],{left:zxcdpos[0]+'px',top:zxcdpos[1]+'px'});
      zxcBlank(zxcdrag,zxcdpos);
     }
     return false;
    }
    
    function zxcBlank(zxcdrag,zxcdpos){
     for (var zxcdc=zxcdpos[0]+zxcdrag[0].offsetWidth/2,zxcary=zxcdrag[6],zxcpc,zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
      var zxcpc=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
      if (zxcpc<zxcc){ zxcc=zxcpc; zxcnu=zxc0; }
     }
     var zxccol=zxcary[zxcnu]||zxcdrag[4].parentNode;
     zxcary=zxcElsByClass(zxcdrag[7][1],zxccol,'DIV');
     for (var zxcset=false,zxc1=0;zxc1<zxcary.length;zxc1++){
      zxcpc=zxcPos(zxcary[zxc1])[1]+zxcary[zxc1].offsetHeight/2;
      if (zxcpc>zxcdpos[1]){
       zxccol.insertBefore(zxcdrag[5],zxcary[zxc1]);
       zxcset=true;
       break;
      }
     }
     if (!zxcset) zxccol.appendChild(zxcdrag[5]);
    }
    
    function zxcColum(zxcary,zxcdrag,zxcdx){
     var zxcdc=zxcdx+zxcdrag[0].offsetWidth/2;
     for (var zxcc=1000,zxcnu=-1,zxc0=0;zxc0<zxcary.length;zxc0++){
      var zxcpos=Math.abs((zxcPos(zxcary[zxc0])[0]+zxcary[zxc0].offsetWidth/2)-zxcdc);
      if (zxcpos<zxcc){
       zxcc=zxcpos;
       zxcnu=zxc0;
      }
     }
     return zxcary[zxcnu];
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      var zxcpos=zxcPos(zxcary[zxc1])[0];
      if ((!zxcdrag[9]&&zxcdx>zxcpos&&zxcdx<zxcpos+zxcary[zxc1].offsetWidth)){
       return zxcary[zxc1];
      }
     }
     for (var zxc1=zxcary.length-1;zxc1>=0;zxc1--){
      var zxcpos=zxcPos(zxcary[zxc1])[0];
      if ((zxcdrag[9]&&zxcdx+zxcdrag[0].offsetWidth>zxcpos)) return zxcary[zxc1];
     }
     return false;
    }
    
    function zxcMseUp(){
     if (zxcDragObj){
      zxcDragObj[5].parentNode.replaceChild(zxcDragObj[3],zxcDragObj[5]);
      var zxcstring='';
      var zxcary=zxcDragObj[6];
      for (var zxc1=0;zxc1<zxcary.length;zxc1++){
       zxcstring+=zxc1+':';
       var zxcdivs=zxcElsByClass(zxcDragObj[7][1],zxcary[zxc1],'DIV');
       for (var zxc1a=0;zxc1a<zxcdivs.length;zxc1a++) zxcstring+=zxcdivs[zxc1a].nu+':';
       zxcstring+='#';
      }
      zxcDragObj[0].style.visibility='hidden';
      zxcCreateCookie(zxcDragObj[7][0],zxcstring,zxcDragObj[7][2]);
      zxcDragObj=false;
     }
    }
    
    function zxcElsByClass(zxccls,zxcp,zxctag) {
     zxcp=zxcp||document;
     zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
     zxctag=zxctag||'*';
     for (var zxcels=zxcp.getElementsByTagName(zxctag),zxcreg=new RegExp('\\b'+zxccls+'\\b'),zxcary=[],zxc0=0;zxc0<zxcels.length;zxc0++){
      if (zxcreg.test(zxcels[zxc0].className)) zxcary.push(zxcels[zxc0]);
     }
     return zxcary;
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    function zxcMse(zxcevt){
     if (document.all) return [zxcevt.clientX,zxcevt.clientY];
     return [zxcevt.pageX,zxcevt.pageY];
    }
    
    function zxcCreateCookie(zxcnme,zxcv,zxcdays){
     document.cookie=zxcnme+'='+zxcv+';expires='+new Date(new Date().getTime()+zxcdays*86400000).toGMTString();+';path=/';
    }
    
    function zxcReadCookie(zxcnme){
     zxcnme+='=';
     var zxcsplit = document.cookie.split(';');
     for(var zxc0=0;zxc0<zxcsplit.length;zxc0++) {
      var zxcs=zxcsplit[zxc0];
      while (zxcs.charAt(0)==' ') zxcs=zxcs.substring(1,zxcs.length);
      if (zxcs.indexOf(zxcnme)==0) return zxcs.substring(zxcnme.length,zxcs.length);
     }
     return null;
    }
    
    function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e,zxcp);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e,zxcp); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e,zxcp); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxcobj,zxcfun,zxcevt,zxcp){
     if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
     zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
     zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt,zxcp);
    }
    
    //zxcAddEvt(window,'zxcDragInit','load',['groupWrapper','groupItem','itemHeader',1,'blank']);
    zxcAddEvt(document,'zxcMseUp','dblclick');
    zxcAddEvt(document,'zxcDrag','mousemove');
    
    
    /*]]>*/
    </script>
    </head>
    <body onload="zxcDragInit(['groupWrapper','groupItem',1,'itemHeader','blank']);">
    
    <div id="sort1" class="groupWrapper">
    	<div id="feeds" class="groupItem">
    		<div class="itemHeader"><a href="google.com">Feeds</a> 	</div>
    
    		<div class="itemContent">
    		<div class="sum" style="width:100px;"><a href="#" id="feedshide" style="display:none;" onClick="hideByClass('feedshideMe'); document.getElementById('feedshide').style.display='none';  document.getElementById('feedsshow').style.display='block';" >Hide Summaries</a><a href="#" id="feedsshow"  onClick="showByClass('feedshideMe'); document.getElementById('feedsshow').style.display='none';  document.getElementById('feedshide').style.display='block';" >Show Summaries</a>
    		</div>
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="feedshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    		</div>
    	</div>
     	<div id="news" class="groupItem">
    		<div class="itemHeader" >News</div>
    
    		<div class="itemContent">
    				<div class="sum"><a href="#" id="newsshide" style="display:none;" onClick="hideByClass('newshideMe'); document.getElementById('newsshide').style.display='none';  document.getElementById('newsshow').style.display='block';" >Hide Summaries</a><a href="#" id="newsshow"  onClick="showByClass('newshideMe'); document.getElementById('newsshow').style.display='none';  document.getElementById('newsshide').style.display='block';" >Show Summaries</a>
    		</div>
    			<strong>Test Headline</strong>
    			<p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    
    <strong>Test Headline</strong> <p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    <strong>Test Headline</strong> <p  class="newshideMe">sdfsdfssdf ds fsd fsdf dfsdf sffffffffffffffd</p><br />
    		</div>
    	</div>
    
    </div>
    
    
    
    
    
    
    
    
    <div id="sort2" class="groupWrapper">
    <div id="shop" class="groupItem">
    		<div class="itemHeader" >Shopping</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    	<div id="links" class="groupItem">
    
    		<div class="itemHeader" >Links</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    			</ul>
    		</div>
    	</div>
    
    	<div id="images" class="groupItem">
    		<div class="itemHeader" >Images</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    </div>
    
    
    
    
    
    
    
    
    
    
    <div id="sort3" class="groupWrapper">
    	<div id="local" class="groupItem">
    		<div class="itemHeader" >Local</div>
    		<div class="itemContent">
    
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    
    	</div>
    
    	<div id="biz" class="groupItem">
    		<div class="itemHeader" >Biz</div>
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    		</div>
    	</div>
    
    	<div id="slide" class="groupItem">
    		<div class="itemHeader" >Slideshows</div>
    
    		<div class="itemContent">
    			<ul>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
    			</ul>
    
    		</div>
    	</div>
    
    </div>
    http://bt5.awardspace.com/
    
    </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/


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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