Download dragable RSS boxes script

Demo

Bookmark and Share

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:

<div id="floatingBoxParentContainer">
</div>

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.

  1. Column index(1 = first column, 2 = second column)
  2. Fixed height of box. Pass false if it should be dynamic
  3. false = We don't want to pass a RSS url
  4. 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

If you like my script, please rate it 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.

Comments

Phil
Great script - works well most browsers.

Doesn't work in IE8 because IE8 sends a 'mouseUp' event right when you start dragging a box!
Phil at 10:50PM, 2011/04/14.
PHIL
Regarding my last post. Its actually not IE sending an onMouseUp event. Its this line of code in the script:

if(document.all && e.button != 1 ){
onMouseUp();
return;
}

The onMouseUp() gets called while you are dragging a box and the box immediately drops without moving anywhere.
PHIL at 11:32PM, 2011/04/16.
Szeca
I have a problem, I copied the script on the server and show me just empty boxes. There is no way I can do to fetch me and display RSS feeds. Is it enough to copy the script on the server and everything should work, are there any tricks? Do I need a mysql database for proper operation of the script?
Please help and thanks in advance.
Szeca at 11:09AM, 2011/04/26.
ksaltik
I have tabs on my site and I want to put different rss box on this tabs. U try to enter floatingBoxParentContainer with different names and add more than one jdragable-boxes.js file to my site and change the varable but first one with default values loaded.

So how can I solve this issue...
ksaltik at 10:44PM, 2011/05/03.
Cardei
I have the same problem, I copied the script on the server and show me just empty boxes. There is no way I can do to fetch me and display RSS feeds. Is it enough to copy the script on the server and everything should work?

Thanks!

Cardei
Cardei at 07:04PM, 2011/07/06.
mmadi
I had the same problem.
To make the RSS loading works in each PHP version, you just have to replace "< ?" by "< ?php" (without space) in the "readRSS.php" file.

mmadi at 04:56PM, 2011/07/08.
Admin comment
DHTMLGoodies
The issue with the PHP short tag <? has been resolved in the latest zip file.
DHTMLGoodies at 06:23PM, 2011/07/08.
Cardei
Hello,
For me is still not working.
I downloaded the new .zip file and even with <?php is still do the same thing.

The Dragboxes are work fine, You can drag an drop then but the RSS is not shown.

Maybe somebody know how we can fix that.

You can see my issue at:
http://guiando.es/red/social/modules/noticias/dragable-boxes/dragable-boxes.html
Cardei at 06:45PM, 2011/07/25.
Mohammad Reza
Hi All
i want a script site igoogle like with user registration and save any user data and save page in sql
just like igoogle
if be for rss not important

thanks for your kindness
mrshadpoor@yahoo.com
Mohammad Reza at 04:17PM, 2011/08/15.
dimitra
Congratulations for the great script..But we are facing a "tiny" problem..When it comes up to catch greek RSS the text is unreadable..I suppose the problem is the iso encoding..We changed it to UTF-8 but its still not working...We even created an htaccess file for that but no changes..

Any ideas?

thank you
dimitra at 04:46AM, 2011/08/18.
muzzakkir
nice
muzzakkir at 03:50PM, 2011/11/25.
muzzakkir
great to have
muzzakkir at 03:51PM, 2011/11/25.
Rajesh
Thanks for provide me

Rajesh at 09:32AM, 2011/12/27.
deana
admin!help!i have copied the code but why the rss doesnt came out?is it related to database?
deana at 06:00PM, 2012/04/24.
Nicole Kpi
Just wonder, why after the copy-paste the RSS didn't come out? Is it somehow related to the database? Or are there any problem?

Thanx in advance.
Nicole Kpi at 08:25AM, 2013/03/29.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com