Results 1 to 2 of 2

Thread: Web 2 layout - drag and drop div's

  1. #1
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Web 2 layout - drag and drop div's

    Hi folks,

    I just want to create a webpage where users can move around elements and hide/ show content thats relevant to them.

    Like the new http://www.bbc.co.uk homepage.

    Users can drag elements around the page, that 'snap' into place. The layout is saved to a cookie for next time they visit the site.

    I've found some basic drag and drop javascript tutorials, but nothing of any detail.

    I've read the next release of Adobe's SPRY framework will have drag and drop but I'd like to do something myself.

    Can anyone point me in the right direction?

  2. #2
    Join Date
    Mar 2008
    Posts
    58
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default

    manipulate the code on how you want it to work
    i just found this in the source link, dont even know if thats it, might be:

    i dont know
    Code:
    // onLoad handler
    function addLoadEvent(func)
    {
    	var oldonload = window.onload;
    	if (typeof window.onload != 'function') {window.onload = func;}
    	else {window.onload = function() {
    		if (oldonload) {oldonload();}
    		func();}}
    }
    
    // IF&L's LINKTRACK SCRIPT
    var LinkTrack = function ()	{
    	this.docLinks  = document.links;
    	this.location= location.pathname;
    }
    
    LinkTrack.prototype.updateHrefs = function () {
    	var currlink, hostname, protocol, linktext;
    	if (!(!document.getElementsByTagName && document.all)) {
    		for (var i=0; i<this.docLinks.length; i++) {
    			currlink = this.docLinks[i];
    			hostname = currlink.hostname ? currlink.hostname.toLowerCase() : ""; 
    			protocol = currlink.protocol.toLowerCase();
    			linktext = currlink.innerText;
    			if (protocol == 'http:' && (hostname != 'bbc.co.uk' && hostname.indexOf('.bbc.co.uk') == -1)) {
    				currlink.href = this.getNewUrl(currlink.href);
    				if (document.all && currlink.innerText.toLowerCase() == currlink.href.toLowerCase()) currlink.innerText = linktext;
    			}
    		}
    	}
    }
    
    LinkTrack.prototype.getNewUrl = function (destination) {
    	var newUrl = '/go';
    	newUrl += this.location;
    	newUrl += (newUrl.substr(newUrl.length-1) == '/')? 'ext/_auto/-/' : '/ext/_auto/-/';
    	newUrl += destination;
    	return newUrl;
    }
    
    var myC = new LinkTrack();
    addLoadEvent(function(){myC.updateHrefs();});
    
    // PopUp Opener
    function popupWindow(src, features)
    {
    	var popup = window.open(src.getAttribute('href'), 'BBCPopupWindow', features);
    	popup.focus();
    	return popup;
    }
    
    // ATK JS Object
    var DisplayOptions = new function ()
    {
    	this.DEFAULT	= "00";
    	this.HIGH_VIZ	= "01";
    	this.SIMPLE		= "02";
    	this.NEWS_PRINT	= "03";
    	this.SLATE		= "04";
    	this.REFLECT	= "05";
    	this.REVERSED	= "06";
    	this.SOFT_1		= "07";
    	this.SOFT_2		= "08";
    	this.BLUE_1		= "09";
    	this.BLUE_2		= "10";
    	this.BLUE_3		= "11";
    
    	this.M2			= "12";
    	this.M1			= "11";
    	this.P1			= "01";
    	this.P2			= "02";
    	this.P3			= "03";
    	this.P4			= "04";
    	this.P5			= "05";
    	this.P6			= "06";
    
    	var sizeOrder   = { "12" : 1,
    						"11" : 2,
    						"00" : 3,
    						"01" : 4,
    						"02" : 5,
    						"03" : 6,
    						"04" : 7,
    						"05" : 8,
    						"06" : 9
    					  }
    
    	this.SPACING_1	= "01";
    	this.SPACING_2	= "02";
    	this.SPACING_3	= "03";
    
    	this.ARIAL		= "01";
    	this.VERDANA	= "02";
    	this.COURIER	= "03";
    	this.TIMES		= "04";
    
    	var linearity	= "00";
    	var colours		= "00";
    	var font		= "00";
    	var size		= "00";
    	var spacing		= "00";
    	var links		= "00";
    	var graphics	= "00";
    	var atkValue 	= "a00b00c00d00e00f00g00";
    
    	var isParsed = false;
    
    	function _parseCookie()
    	{
    		if(!isParsed)
    		{
    			var allCookies = document.cookie;
    			var atkCookie = allCookies.indexOf("ATKoptions");
    			if(atkCookie != -1)
    			{
    				var atkStart = allCookies.indexOf("=", atkCookie);
    				var atkEnd = allCookies.indexOf(";", atkStart);
    				if (atkEnd == -1) {atkValue = allCookies.substring(atkStart + 1);}
    				else {atkValue = allCookies.substring(atkStart + 1, atkEnd);}
    				linearity	= _readValue("a");
    				colours 	= _readValue("b");
    				size		= _readValue("c");
    				spacing		= _readValue("d");
    				font		= _readValue("e");
    				links		= _readValue("f");
    				graphics	= _readValue("g");
    			}
    			isParsed = true;
    		}
    	}
    
    	function _readValue(id)
    	{
    		return atkValue.substr(atkValue.indexOf(id) + 1, 2);
    	}
    
    	function isLinear()
    	{
    		_parseCookie();
    		return (linearity != this.DEFAULT);
    	}
    	this.isLinear = isLinear;
    
    	function getColourScheme()
    	{
    		_parseCookie();
    		return colours;
    	}
    	this.getColourScheme = getColourScheme;
    
    	function getTextSize()
    	{
    		_parseCookie();
    		return size;
    	}
    	this.getTextSize = getTextSize;
    
    	function compareTextSizeTo(testSize)
    	{
    		var diff = sizeOrder[size] - sizeOrder[testSize];
    		if(diff == 0) return 0;
    		else if(isNaN(diff)) return -2;
    		else return (Math.abs(diff)/diff);
    	}
    	this.compareTextSizeTo = compareTextSizeTo;
    
    	function getTextSpacing()
    	{
    		_parseCookie();
    		return spacing;
    	}
    	this.getTextSpacing = getTextSpacing;
    
    	function getPageFont()
    	{
    		_parseCookie();
    		return font;
    	}
    	this.getPageFont = getPageFont;
    
    	function isHighlighted()
    	{
    		_parseCookie();
    		return (links != this.DEFAULT);
    	}
    	this.isHighlighted = isHighlighted;
    
    	function isLowGraphics()
    	{
    		_parseCookie();
    		return (graphics != this.DEFAULT);
    	}
    	this.isLowGraphics = isLowGraphics;
    
    	function getSettingsValue()
    	{
    		_parseCookie();
    		return atkValue;
    	}
    	this.getSettingsValue = getSettingsValue;
    	this.toString = getSettingsValue;
    
    	function isDefault()
    	{
    		_parseCookie();
    		return (atkValue == "a00b00c00d00e00f00g00");
    	}
    	this.isDefault = isDefault;
    }

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
  •