Download dragable RSS boxes script

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the entire project from this zip file.

Setup

Server side script

This script requires that you have access to PHP on your server.

Files included in package

dragable-boxes.html = The main HTML you open in your browser
css/dragable-boxes.css = Layout for the script
js/dragable-boxes.js = Javascript for the script
js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack)
readRSS.php = File that reads RSS data from a source. This file is called by use of Ajax in dragable-boxes.js
magpierss/* = RSS parser download from http://magpierss.sourceforge.net/
images/* = Images used in the script

Layout

The layout of my demo page and the dragable boxes is specified in the css/dragable-boxes.css file. I have put in some comments which will help you understand it.

All the boxes are created as sub elements of a div with id "floatingBoxParentContainer". You will find this div inside the dragable-boxes.html file. Code:

Creating a RSS box

Inside the dragable-boxes.js file, you will find a function like this:

/* You customize this function */
function createDefaultBoxes()
{
  createARSSBox('http://rss.cnn.com/rss/cnn_topstories.rss',2,false,5,1);
       createARSSBox('http://feeds.feedburner.com/reuters/topNews/',3,false,5);
       createARSSBox('http://rss.news.yahoo.com/rss/world',3,false,5);
  createARSSBox('http://rss.pcworld.com/rss/latestnews.rss',1,false,5);
     createARSSBox('http://www.w3.org/2000/08/w3c-synd/home.rss',1,false,5,30);

}

This function creates the default RSS boxes on your page. The header of this function looks like this:

function createARSSBox(url,columnIndex,heightOfBox,maxRssItems,minutesBeforeReload)

The arguments sent to this function are these:

url = URL of RSS file(example: http://www.dhtmlgoodies.com/rss/dhtmlgoodies.xml)
columnIndex = Which column you want this box to be placed. Example "1" for the first column
heightOfBox = Here, you can specify a fixed height for your RSS box. Example: 150 for a height of 150 pixels. Put in false if height should be dynamic
maxRssItems: Maximum number of RSS items. This is also an optional argument. If omited, all records in the rss file will be shown inside the box(if less than 100).
minutesBeforeReload: Automatically reloads RSS source after n minutes.

Note! This function is only executed if no RSS sources is remembered in cookies.

Create boxes with static HTML

You can create boxes with plain HTML from inside the function createDefaultBoxes. This is an example of how this could be done:

/* Create static boxes */

var htmlContentOfNewBox = '<DIV>Content of static box.</div>'
var titleOfNewBox = 'This is a static box';
if(!staticObjectArray['staticObject1']){
  var newIndex = createABox(1,100,false,'staticObject1');
  document.getElementById('dragableBoxContent' + newIndex).innerHTML = htmlContentOfNewBox;
  document.getElementById('dragableBoxHeader_txt' + newIndex).innerHTML = titleOfNewBox;
}else{
  document.getElementById('dragableBoxContent' + staticObjectArray['staticObject1']).innerHTML = htmlContentOfNewBox;
  document.getElementById('dragableBoxHeader_txt' + newIndex).innerHTML = titleOfNewBox;
}

First, we save the HTML title and content of this static box in two Javascript variables. The next thing we have to do is to check if the box is stored in a cookie. If it's not, then create a new box by calling the createABox function.

The createABox function takes 4 arguments.

Column index(1 = first column, 2 = second column)
Fixed height of box. Pass false if it should be dynamic
false = We don't want to pass a RSS url
Unique ID = It's important that this fourth param is unique for each of your static boxes.

Finally, we put the content of our Javascript variables as visible content of the static box.

Note! The user will not be able to delete static boxes. The position of the box is stored in a cookie.

Javascript variables

Inside the dragable-boxes.js file, you have a section called "USER VARIABLES" at the top of the page. These are variables you can customize. Here's a list of these variables:

var numberOfColumns = 3;
var columnParentBoxId = 'floatingBoxParentContainer';
var src_rightImage = 'images/arrow_right.gif';
var src_downImage = 'images/arrow_down.gif';
var src_refreshSource = 'images/refresh.gif';
var src_smallRightArrow = 'images/small_arrow.gif';

var transparencyWhenDragging = false;
var txt_editLink = 'Edit';
var txt_editLink_stop = 'End edit';
var autoScrollSpeed = 4;
var dragObjectBorderWidth = 1;
var useCookiesToRememberRSSSources = true;
var nameOfCookie = 'dragable_rss_boxes'; // Name of cookie

numberOfColumns = Number of columns for your RSS boxes
columnParentBoxId = ID of the <DIV> that is parent to your RSS boxes
src_rightImage = Path to the right pointing arrow at the top of the RSS boxes
src_downImage = Path to the down pointing arrow at the top of the RSS boxes
src_refreshSource = Path to refresh button at the top of the RSS boxes
src_smallRightArrow = Path to small right pointing arrow at the left of each news item inside a RSS box.
transparencyWhenDragging = The RSS boxes will become transparent while dragging if this variable is set to true.
txt_editLink = Label, edit link.
txt_editLink_stop = Label, end edit link.
autoScrollSpeed = Speed of auto scroll. The script scrolls automatically up or down when drag is in progress and your mouse cursor is near the top or bottom edge of the browser window. This variable controls the speed of this scrolling.
dragObjectBorderWidth = Border width of your RSS boxes. This variable is used to determine with of the dotted rectangle indicating where a RSS box will be dropped.
useCookiesToRememberRSSSources = Remember RSS sources by use of cookies
nameOfCookie = Name of cookie used in the script. Useful if you use this script more than one place and want a separate cookie for each page. Solution: delete this line from the dragable-boxes.js file and define nameOfCookie in your individual HTML files.

Reset back to default

There is a function resetDragableBoxes which you can use to reset the script back to it's default state, i.e. delete all RSS boxes on the page and create the predefined boxes. This is example of a link to this function: <A href="#" onclick="resetDragableBoxes();return false">Reset back to default</A>

Rate this script at Hotscripts.com

Update log

October, 28th, 2006 -> Preserving box state(expanded or collapsed) by saving it in cookie.
September, 18th, 2006 -> Fixed some js errors when moving the mouse outside the browser while drag is in progress.
September, 5th, 2006 -> Added support for shadows behind boxes.
May, 30th, 2006 -> Added bugfix saving cookies if you have more than one static box on a page.
April, 27th, 2006 -> Added new feature: Static boxes
April, 19th, 2006 -> Added new feature: Reset back to default. The name of the cookie used in the script has also been moved to a variable instead of beeing hardcoded into the script. This gives you the possibility of using separate cookies for separate pages.
March, 25th, 2006 -> Using magpieRSS instead of lastRSS. New magpierss folder included. Modified readRSS.php to use this RSS reader. No changes made to other files.