SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Sweden
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change order of boxes

    Hello! I'm a new member of this forum. It's the first english speaking forum for me (I'm from Sweden).

    I use these functions to add boxes with input-elements to a form:

    Code JavaScript:
    function GetNextId()
    {
    var baseName="node";
    var tagType="DIV";
    var tagId,id;
    var maxId=0;
    oDivs=document.getElementsByTagName(tagType);
    	for (i=0;i<oDivs.length;i++)
    	{
    	tagId=oDivs[i].id;
    		if (tagId.indexOf(baseName)==0)
    		{
    		id=parseInt(tagId.substr(baseName.length));
    		maxId=(id>maxId)?id:maxId;
    		}
    	} 
    return(maxId+1);
    }
     
    function addContent(what)
    {
    var ni = document.getElementById('arrangableNodes'); 
    var num = GetNextId();
    var divIdName = 'node'+num; 
    var newdiv = document.createElement('li');
    newdiv.setAttribute("id",divIdName);
     
    	if (what == 'text')
    	{
    	newdiv.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" class="small"><tr><td colspan="2"><input type="text" name="rubrik_'+num+'" style="width:515px;" value="Rubrik" onFocus="if (this.value==this.defaultValue) this.value=\'\';" /></td></tr><tr><td colspan="2"><textarea name="text_'+num+'" style="width:515px;" rows="8"></textarea></td></tr><tr><td><strong>Bild:</strong> <input type="file" name="new_fileUrl'+num+'"> <select name="align_'+num+'"><option value="right">Högerjusterad</option><option value="left">Vänsterjusterad</option></select></td><td><a href="#" onclick="javascript: remove(\'add_Item_'+num+'\'); return false"><b style="color: #FF1E00;">- Ta bort stycke</b></a></td></tr></table><input type="hidden" name="what[]" value="text"><input type="hidden" name="id[]" id="idkey" value="'+num+'">'; 
    	}
    	if (what == 'gallery')
    	{
    	newdiv.innerHTML = '<table width="500" cellspacing="7" cellpadding="0" border="0"><tr><td class="c_row" colspan="2"><span class="rub3">Bildgalleri</span></td></tr><tr><td class="c_row2"><input type="button" value="Spara sidan först!" disabled /></td><td align="right" class="c_row" width="80"><a href="#" onclick="javascript: remove(\'add_Item_'+num+'\'); return false"><b style="color: #FF1E00;">- Ta bort</b></a></td></tr></table><input type="hidden" name="galleryid_'+num+'" value=""><input type="hidden" name="what[]" value="gallery"><input type="hidden" name="id[]" id="idkey" value="'+num+'">'; 
    	}
     
    ni.appendChild(newdiv);
    }
     
    function remove(divNum) 
    {
    var olddiv = document.getElementById(divNum); 
    olddiv.parentNode.removeChild(olddiv); 
    }

    But I miss a function. A function to change order of the boxes, up and down in order list. How to do?

    Sorry for my bad english, hope you understand anyway, didn't got any answers from the swedish forums.

    This is a very high priority for me as you can understand. Hope someone can help me here!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres some code I created to move table rows (TR's) up and down within a tbody element.

    Code:
    	this.attributeUp = function(which) {
    		var rowId = which.id;
    		var tbody = which.parentNode;
    		while(tbody.nodeName != 'TBODY')
    			tbody = tbody.parentNode;
    		var rowIndex = -1;
    		var rows = tbody.getElementsByTagName('TR');
    		for(var i = 0; i < rows.length; i++) {
    			if(rows[i].id == rowId) {
    				rowIndex = i;
    				break;
    			}
    		}
    		if(rowIndex > 0) {
    			if(rows[rowIndex-1].getAttribute('static') == 'true')
    				return;	
    			var previousRow = rows[rowIndex-1];
    			var newRow = which;
    			tbody.removeChild(which)
    			tbody.insertBefore(newRow, previousRow);
    		}
    	}
    	this.attributeDown = function(which) {
    		var rowId = which.id;
    		var tbody = which.parentNode;
    		while(tbody.nodeName != 'TBODY')
    			tbody = tbody.parentNode;
    		var rowIndex = -1;
    		var rows = tbody.getElementsByTagName('TR');
    		for(var i = 0; i < rows.length; i++) {
    			if(rows[i].id == rowId) {
    				rowIndex = i;
    				break;
    			}
    		}
    		if(rowIndex < rows.length-1) {
    			if(rows[rowIndex+1].getAttribute('static') == 'true')
    				return;
    			var previousRow = rows[rowIndex+1];
    			var newRow = which;
    			tbody.removeChild(which)
    			tbody.insertBefore(newRow, previousRow.nextSibling);
    		}
    	}


  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Sweden
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see hmm.. I'm not so good at Javascript. I think your code should work for list-elements (UL) too, shouldn't it? My thought is to replace TBODY with UL and TR with LI. Do you think that work? And how do I call to the script with the up and down links?

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've changed it to use lists and provided a sample.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="all" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function moveUp(which) {
                    var UL = which.parentNode;
                    while(UL.nodeName != 'UL')
                        UL = UL.parentNode;
                    var rowIndex = -1;
                    var rows = UL.getElementsByTagName('LI');
                    for(var i = 0; i < rows.length; i++) {
                        if(rows[i] == which) {
                            rowIndex = i;
                            break;
                        }
                    }
                    if(rowIndex > 0) {
                        var previousRow = rows[rowIndex-1];
                        var newRow = which;
                        UL.removeChild(which)
                        UL.insertBefore(newRow, previousRow);
                    }
                }
                function moveDown(which) {
                    var UL = which.parentNode;
                    while(UL.nodeName != 'UL')
                        UL = UL.parentNode;
                    var rowIndex = -1;
                    var rows = UL.getElementsByTagName('LI');
                    for(var i = 0; i < rows.length; i++) {
                        if(rows[i] == which) {
                            rowIndex = i;
                            break;
                        }
                    }
                    if(rowIndex < rows.length-1) {
                        var previousRow = rows[rowIndex+1];
                        var newRow = which;
                        UL.removeChild(which)
                        UL.insertBefore(newRow, previousRow.nextSibling);
                    }
                }
            </script>
        </head>
        <body>
            <ul>
                <li><span>Content 1</span> | <a href="javascript:void(0);" onclick="moveUp(this.parentNode);">Up</a> <a href="javascript:void(0);" onclick="moveDown(this.parentNode);">Down</a></li>
                <li><span>Content 2</span> | <a href="javascript:void(0);" onclick="moveUp(this.parentNode);">Up</a> <a href="javascript:void(0);" onclick="moveDown(this.parentNode);">Down</a></li>
                <li><span>Content 3</span> | <a href="javascript:void(0);" onclick="moveUp(this.parentNode);">Up</a> <a href="javascript:void(0);" onclick="moveDown(this.parentNode);">Down</a></li>
            </ul>
        </body>
    </html>


  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Sweden
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful! It works! Thanks!


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
  •