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 08: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 09: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 09: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 08: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 05: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 02:56PM, 2011/07/08.
Admin comment
DHTMLGoodies
The issue with the PHP short tag <? has been resolved in the latest zip file.
DHTMLGoodies at 04: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 04: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 02: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 02:46AM, 2011/08/18.
muzzakkir
nice
muzzakkir at 02:50PM, 2011/11/25.
muzzakkir
great to have
muzzakkir at 02:51PM, 2011/11/25.
Rajesh
Thanks for provide me
Rajesh at 08: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 04: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 07:25AM, 2013/03/29.
Boisseaugfn
practices up Tumblr

I enjoy their sabbats from your local neighborhood perception which experts claim awards sort and transitions pertaining to inside your geographical area. several other past few months crossquarter is a bit more of a midfestivity. i really hailing from nj-new jersey and so last part of the the month of january, february 1st is the biggest market of the cold season. Imbolc brings the paying attention to meaning of the biggest market of cold, purchasing finding a lot longer and with that the cross over in line with springs. one the start of the cleaning never-ending loop which i justify in this (the organization cross over works on in amongst the sabbats). as well one of the many last possibility of i going hungry decent buttery wintery healthy foods just before I get started in great washing interlude for result (your body's cells purify gets going noisy,during the early boisterous March).One an event of this occurence Sabbat I easy white color candle lights and simple terrible using very own dimensions. I dedust things combined with if you will allow for example,that fifteen additional units of all wintery air straight to never-ending cycle with the stale store air. on the day an individual traditions is to address my figure by using a polish as well milky bath tub, going hungry a vigorous breakfast (always offered that their particular only me and then mother and father I form sosmall but successfulthing not unlike curry shepards ) and burning bay leaving in support of fancies to become a reality early in the year lifestyle to get rid of.ImbolcJanuary 31st january 1stFor detox, moreover midwinterPale Greenfor the capacity furthermore quality. what's more area of lambs ear canal.Lamb, Ewe, memory, SheepThe etymology to do with Imbolc is alleged to guarantee the waist between your old Irish along with refers to the pregnancy Ewes. the car a time full [url=https://www.facebook.com/pg/Chnlove-scam-471737819697545/posts/]chnlove[/url] these are generally breast feeding since will give rise in the spring.Groundhogs (and different burrowing family pets)that they can signify the thawing towards cold months to arrive as burrowing dogs widely known utilizing slumber. Imbolc is a period of time when considering to clean up your property furthermore fall in love with out of critters much like moths which experts claim try to cover up from the winter season deathly chill in the home. in addition,as well as for the reason moths relationship lumination as they are fascinated by associated with these the lit up luminous constructed of wax arrangements. (really enjoy what in halloween you might arrangements weird drive crawler since they're spooky, might be no as they are decent.
Boisseaugfn at 03:49AM, 2021/08/02.

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 - 2024 dhtmlgoodies.com