Recently I wrote a tutorial for NETTUTS.com which was published on Monday. "How to Mimic the iGoogle Interface": The tutorial takes the reader through the process of developing a mimic of the iGoogle interface using jQuery and its UI library.
Many of the comments have been really positive, thank you, it’s great to see all my hard work paid off! π
Anyway, a few of the commenters wanted to know how they could save user preferences in some way, and some of them specifically mentioned ‘cookies’ as a reasonable storage medium for such data. To be realistic, the only alternative would be if you had a user-membership system, in which case a database would be ideal..
I’ve created a new (extended) version of ‘iNettuts’ which has the capability to save preferences to a cookie. It seems to work quite well, I’ve tested it on all the main browsers and it’s totally operable!
See the cookie demo | Download the new source.zip
To tryout the new cookie goodness try moving around a couple of the widgets or changing their titles/colours, then refresh the page, or even close the browser, re-open it and go back to the page, your widgets should be just how you left them!
Note: A widget’s collapsed/un-collapsed state is NOT saved – I might work this in at a later stage. « It now saves a widget’s collapsed state!
Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!
thanks man, wonderful example π
Hey James,
that even gr8 with cookie extension,
my mind is already gushing with lot more things which i could achieve with this on any project with similar requirement.
Anyways, hope to see more stuf from you and learn a hell lot of things from your work.
Swapnil, Diego, thanks!! π
There have been some issues reported but I think I’ve solved them, it should be working correctly now.
Great job, thanks james the new version works really well
I have one basic question. When i download your files and run locally, for the 1st time it will always prompt me in IE 7:
To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options
I always have to click “Allowed Blocked Content” whenever i run this application on a new browser IE 7 instance … a bit troublesome.
It runs properly on firefox without issue as above. This issue only occur on IE 7. This applies to other jquery examples too.
Nice! Thanks again man π You own BIG TIME π
@Diego, @Dynamicling, Thanks! π
@Chua, I’m not sure if you can change that. You could try changing the security levels in IE (Tools > Internet options > Security tab). Why are you using IE anyway, what about FF or Opera?
Thanks for the feedback. That’s the problem here. Most public sector customers in my country are using IE 6 or 7. It will be great to support as many users (assuming they use IE, FF or Opera).
Nevertheless, good article π Thanks.
@Chua, Yes but I assume your customers will not be viewing the website locally!? (The security issue in IE which you raised is only a problem when you open a file (with JS) locally)
I am very impressed, well done. It is people like you that push the boundaries and help all us other to progress. Well done.
Oh i see. Thanks for the clarification π
Any chance we could see an example with a database as well?
Simply amazing!
The CSS in IE7 is a bit glitchy however… no rounded corners… the placeholder does not conform to the size of the widget being moved.. padding issues between the header and the content area.
Otherwise… completely awesome!
A plugin for a database connection would be great too… π
Oh… and an add widget plugin too… π
Well… aren’t I the greedy one…
This is ASTONISHING!
I was exactly looking for something like that.
I think you can add a few ajax to make each part independant, and the result will be great.
Thanks for sharing, and good luck for the future (I don’t have any worry for you!!)
this is great. how could i change the code to be able to maximize the widgets to full screen?
thanks!
I modified this a bit to have 2 smaller columns (25%) on the left and right and 1 large column (50%) in the center. However, dragging a widget from the large column to one of the smaller columns works only sporadically. Anyone else encountered this problem?
Great Work, I want to use your code in my project, Can i use it..?
I am also looking for something where the content and heading of each widget is loaded independently using ajax (just like netvibes), if you could give me some light on this or code to get this done that would be great.
“The CSS in IE7 is a bit glitchy howeverβ¦ no rounded cornersβ¦ the placeholder does not conform to the size of the widget being moved.. padding issues between the header and the content area.”
I am having the same issues with IE7, any ideas of how to fix these horrible black boxes i get instead of the original colorful widgets?
This is probably one of the best tutorials I have encountered and I research a lot! Really fantastic work James, you rock!
Hi man, thanks a lot for this tutorial, it’s really great!
I tried the improved version, that uses cookies. It works great, but it doesn’t save the state of window if it was closed. I believe it should not show it.
@Craig, thank you for the compliment! π
@Stian, maybe one day. To be honest I simple haven’t got the time at the moment but if you’re interested in doing it I imagine it would be quite simple to integrate, instead of saving to a cookie when something changes you can make an Ajax request to a server-side script which saves it in to a DB. You would need some way of identifying users though, and that’s a whole other project to be honest.
@Shimy, Yeh I’m annoyed I didn’t have more time to sort out some of the cross browsers quirks, but the important thing is that it’s operable… The reason there are no rounded corners in IE/Opera is because I used the CSS3 border-radius property which only works in Safari/Firefox. I didn’t want to focus on the aesthetics in the original tutorial – it was meant to be more focused towards the underlying technologies. π
@JY, Thanks! π The possibilities are endless and it would take ages to explore all of them – having the widget data load via Ajax would be cool and would open up a whole new bunch of possibilities!
@Charlie, Well, you’d need to add a new button to the handle of each widget (a ‘maximise’ button) and then you’d need to set up some styles for a ‘maximised’ widget, i.e.
@Tom, mmm, I tried this myself during development and I’m afraid to say I’m not sure of a ‘cure’. I think the main reason it behaves so inconsistently is because of the variable sizes of the widgets – maybe if you replaced the helper (the actual object which is dragged) to a smaller placeholder-type box it would work.
@Kaku, Yes, of course you can use it! Loading content via Ajax wouldn’t be too tricky, if you have a widget with an ID of ‘widget1’:
@Ronen, What black boxes, when I view the example in IE the widgets seem to appear okay (except for no rounded corners). The only real problem I see in IE7 is the placeholder (when you drag a widget the placeholder does not keep the right size).
@PoiSoN, I’m glad you like it! π The new ‘Cookie’ version should save the state of all the widgets, what exactly isn’t it saving the state of?
For the placeholder dilemma in IE, you could do something like this in inettuts.js.css:
.widget-placeholder { border: 2px dashed #999; height: auto !important; min-height: 120px;}
This obviously isn’t the greatest fix as it won’t set the placeholder box to the actual size of the content but it will at least be a bit larger.. although this may cause problems with the autosizing in the other, better, browsers.
Anyway… great work again James… you killed this thing… From this day forward you will be referred to as Capt. Bad Ass.
@James.
Well, I’m working on a similar project to this. Only that in my prject I got everything up (User detection, db, width and height of widget getting saved and so on).
The part I can’t get working is the order. I tried the sort.serialize and then save that to the db using php. But I couldn’t get the function to work properly. Sadly the documentation on jQuery.com isn’t detailed enough for me to understand what I’m doing wrong.
@James, If you remove a widget (click on the close button and confirm), and refresh the page, the widget will appear again. So the widgets closed state wasn’t saved.
I improved your code by myself to save the state of the closed widgets as well. If you want, I can send you the changes that should be applied.
Thanks again.
Hi James!Nice article.I am trying to implement it in my existing asp.net application.Can you please tell if i can keep different widths & heights for different widgets according to the requirements.
Thanks in advance!
@James.
Sorry for not making myself not clear enough regarding IE7 issues. I was loading it through an i-frame and that was behaving differently.
I think it is because you load CSS using JS.
I also noted that if you try dragging the widget assuming the hold some heavy component, the whole dragging effect becomes buggy. Do you think it would be possible to hold-off the rendering of the content while dragging the box but still keeping the title area visible?
Great work again James!
Thanks,
Great Job!! I really like to use this for our university student profile page. We are using MySQL data base in the backend. I want to save the settings into the database. I hope you will update the code.
Thanks
@Stian, what syntax are you using to serialize the data? It should be
$(ELEM).sortable('serialize')I think. If it doesn’t work then you could use something similar to the “savePreferences” method in the cookie verison…@Shimy, yeh, nice suggestion. It might be worth creating an IE only stylesheet to get it looking perfect. π
@PoiSoN, lol, I can’t believe I didn’t notice that. If you could send me the code that’d be great – I’m interested to see how you did it…
@Sameer, I’m not sure what you’re asking. You can specify individual widget dimensions in your StyleSheet (as long as you give the widgets unique IDs).
@Ronen, The sortable module allows you to set up a ‘helper’ element which replaces the widget once you start dragging and then the widget returns to normal once you drop it. Read more here: http://docs.jquery.com/UI/Sortables/sortable
@Ehsan, Upgrading the script to interface with a server-side database is not complicated tbh. If you have a look at the code used to save the preferences to a cookie it shouldn’t be too different when sending an Ajax request with that data to a server-side script (PHP for example) which enters the data into a DB.
@James, you can download the code from here: http://virtser.net/blog/file.axd?file=2008%2f11%2finettuts.zip
Here is a better way of handling the IE placeholder problem…
In the head tag of index.html use the following:
Hi James!I want the body background color as white & not the black one.Sadly i am not able to find out from where the black background color is set.I have tried by changing the css but no success.Can you plaese guide me???
Thanks in advance!!!!!!!
@Shimy, thanks π
@Sameer, you need to change it in the CSS and in the JavaScript. In ‘inettuts.js’ search for this line of code:
There should be two occurrences, you can change the color there…
Thanks for QUICK Reply!!!!STILL STRUGGLING……..
I have put #FFFFFF(white) instead of #000 in two lines told by you.Still no success….
Can you please explain in detail what should i do?
@Sameer, I’ve just done the same on a local copy and it worked perfectly. Have you replaced both lines in the JavaScript file? Also, on line 5 of ‘inettuts.css’ you need to change the
bodycolor. Let me know if you’re still struggling. πCHEERS FRIEND!!!!!!!Its finally done……..
I am still working on the same application.Will ask you if any doubts faced…
Thanks friend!!!!!!!!
Nice app. just the one I’ve been looking for in ages and beautiful with the cookie modify.
I have some trouble modifying it to my needs. I need only two columns (that I’ve done) but then I only need to widgets (default one in each column). But when I try to remove one from the HTML page it gives a JavaScript error and the page won’t load.
Anyone have a solution to that???
I have one more issue. I am using the version with cookies. In one of my widgets, I embedded a Flash movie. However, when the script re-appends the widgets to their respective columns on page reload (reading from the cookie), the flash movie is embedded at the bottom of my page in addition to its normal location inside the widget. I’m stumped. Has anyone else seen this issue with Flash and jQuery? Any help would be appreciated.
This work is wonderfull but I have two questions or request to do, I will be gratefull if you can help me.
1. Is there a way to make than the widgets could only be moved into the left an rigth column and not can be dropped into the central column in the center column the widgets can be dragged and dropped only into it.
I don’t know if I explain to me well, but basicly y have two different areas to drag an drop the widgets independ each other.
I have the Idea of to have a news reader where is going to be 5 widgets one is going to be biggest than the other and it is going to be the principal and the other four are going to be smaller in the bottom of this something like a gallery with the image than show and the thumbnails of the of the other.
The question is is there someway of do than when I drop some of the “thumbnails” in the place of the principal it replace it and the widget than was there take the place of the other, it means than it becomes a “thumbnail”.
I dont know if I expalin to me well, the thing is than the widges switch places when I drop one in the place of the other.
there is someway to do this??? could you helpme??
Thanks in advance and excuse me for my bad english
Thanks for the great work, its jsut what im looking for.
I have having a few issues with the cookies. I am using this application on multiple pages on my site, however when i change the setting of the widgets on one page it ruins the widgets on the other. I have attached a new inettuts.js to each page and given each one a unique saveToCookie:, name. However, ideally, i would like to use just one javascript file for each page, as each page will be dynamically produced. Any ideas?
Cheers in advance
Oh yeah, also it is totally incompatible with IE6 right?
Hi James!It works great on IE 7.I am also able to save the changes for different users in the database.Its also working fine.BUT when i access the same page on IE 6 all the arrangement of the widgets changes & the page looks different for the two versions of the browser.It behaves differently on IE 6 & does not allow to bring back the widgets in the 3 rd column if they all are previously adjusted in the first 2 columns…
Any help appreciated!!!!!!!!!!!!
I have been trying to use a php include into the index.html but no go- anyone know how this can be done, if i change the html to .php css wont work. Also i would like the style of the page without the movable windows and edit functions –i just like the look of the template .Anyone out there who can help.
James, this is absolutely fenomenal!
Just love this implementation, and trying it out, and perhaps I can use it at a site I’m planning to restructure.
I am totally newbie to jQuery, but the more I dig into it, the more power I think it has.
Have some questions though.
1. Is there a special thing that you add the inettuts.js.css in the code?
Is there some performance to gain, or why can’t I just add it in the head-area?
2. Are you planning on the possibility do add widgets to the page?
I was thinking on something like e function to add a widget, and have a couple of predefined contents to add as content to the widget.
@PoiSoN, your code works perfectly, the widget don’t show up again.
But what if I want to show a widget again? Is it possible to have a “Thrash bin” as a widget and show deleted widgets there, and a function to get them back?
I know I can get them back by cleaning out my cookies, but the “Trash widget” would be great, or maybe an implementation of my thoughts in (2.) above.
Keep up the very very good work James, will keep looking for improvments to this appplication!
(James, thanks for creating this – it’s wonderful and I’m learning a lot about CSS and jQuery by playing with it.)
I’ve been able to greatly customize the look of the boxes (thanks to Firebug), even tweaking the columns so that the third column is a bit skinnier than the other two.
One thing I’d love to be able to do is when the user hits the page, some of the boxes are shown collapsed, rather than them all being open. It seems like you would need a new widgetIndividual to define a new state, collapsed, but not sure where to start implementing the actual functionality. Can anyone help?
(I’m not actually using the cookie functionality right now, if that matters.)
Thanks!
James you are a legend, what a fantastic tutorial and it works so smoothly.
Thank you
hi, James, it’s a nice work, isn’t it?
I met a problem recently about iNettuts, since I write a button also with a onclick event to add a widget to the portal, in the event I use javascript code to create a new “li” and add to the “ul”, the “li” has the same features as the ones on the portal, and also I add both iNettuts.addWidgetControls() and iNettuts.makeSortable() events, however the first event is ok, the second can’t work?? Therefore, the new added widget can be edited, and the moved sign appeared when I put the mouse on it but it can’t be dragged.
What’s the problem, and how I can solve it?? Could you please do me a favor, if you sovle it, please email me([email protected]) ,
thanks a lot.
BTW, Merry Christmas~
James
thank’s alooooooooooooooooooooot
now my app. worked good
but i want to add new tow button on head first to add text and the secound to remove this text
please help
You are GREAT!
Thanks to this post!
Amazing piece of Work…. been exploring webparts with .net framework but their way to messy and bloated, and the mark-up is dreadful. James work has enabled me to prototype something using Jquery and SQL for persistence in just three days. Once again thanks for great piece of work.
Hi, James, itβs a nice work, isnβt it?
I met a problem recently about iNettuts, since I write a button also with a onclick event to add a widget to the portal, in the event I use javascript code to create a new βliβ and add to the βulβ, the βliβ has the same features as the ones on the portal, and also I add both iNettuts.addWidgetControls() and iNettuts.makeSortable() events, however the first event is ok, the second canβt work?? Therefore, the new added widget can be edited, and the moved sign appeared when I put the mouse on it but it canβt be dragged.
Whatβs the problem, and how I can solve it?? Could you please do me a favor, if you sovle it, please email me([email protected]) ,
thanks a lot.
Fantastic peace of work James!
Have you had chance to look at Poison’s amendments for saving the state following the closure of a widget?
It works well in IE6/7 and FF but have not been able to get it to work in Google Chrome? Have you or anyone else fixed the problem?
Keep up the great work
Hi james,
i have used widget for inettuts-with-cookies in our website, here default widget everything comes with movable and dragable option. but i used add more widget..
code given below:
insertWidget(“#column1”, {
color: “blue”,
title: “Testing”,
content: “Testing content from guna”
});
function insertWidget(where, opt) {
var selectorOld = iNettuts.settings.widgetSelector;
iNettuts.settings.widgetSelector = ‘.new’;
clonewidget = ”+opt.title+”+opt.content+”;
$(where).append(clonewidget);
iNettuts.addWidgetControls();
iNettuts.settings.widgetSelector = selectorOld;
iNettuts.savePreferences();
here i can able to add new widget but i cant able to drag and drop for new widget simultaneously its not stored in cookies..
please how to solve this..?
i am waiting for your reply..
Hi James,
congratulations to this excellent tutorial.
I encountered some small problem, when you change
the body to an fix width and center it with margin: 0 auto,
the dragging doesn’t behave as is should.
After you clicked the handle the and start moving the mouse
the whole widget jumps X pixel to the right.
where X = (widthHTML – widthBody) / 2
The issue appears at least with the following browsers:
– Firefox 3.0.5 and IE 7
but not in Safari 3.2.1
Does someone have an idea how to solve this?
James, you are a legend among men.
The only thing I am missing to make this a complete for me is to be able to a list of the available widgets in checkbox for maybe, so that the user can select from the checkboxes which widgets to display (just like on http://www.bbc.com)
….Actually i managed to code the Widget Picker myself after much pain.
If anyone has a fix for the IE placeholder problem i would appreciate it.
The widget picker sounds like a pretty powerful add-on.
Mark, do you have the code available for download anywhere?
@shimy1984 Widget Picker is available here http://www.alderleygroup.com/inettuts.zip
There is 1 small issue that i have to fix which is all the tick boxes are blank when you first load it if the cookie hasnt yet been built. So just move a widget first then refresh the page.
Should be an easy one to fix though
Thanks Mark!
It doesn’t seem to be working in Firefox… I’ll see if I can figure out what’s up.
Must admit I only tested on IE6 and 7
You can remove the below line from inettut.js as i just put it in for debugging and forgot to remove it:
document.write(thisWidgetData[0] + ”);
Above is on line 281 of inettut.js
Thanks!
I am also working on setting up some default widget layouts for a user’s first visit.
The idea is that depending on their job role they will see different widgets at start up but can customise these using the Widget Picker thereafter within their defined Widget Sets. Will post code when done.
embedded flash would create two, waiting for solution
It’s so **** GREAT
I was searching for this and you did found it. If I ever meet you in real life. I will give you a chocolate bar
Very good code.Thanks.
But this code don`t work with jQuery version 1.3 :((((((
Hi James, we are using your demo, and we are changing the header color of our web page too. But we don’t know how to save the cookie into the inettuts save preferences function. Do you have any idea how to save the cookie #header with the save preferences function?
Thanks for your help, your demo is awesome!
Hi James!
A very big thanks for all your works.
I have been able to use the without cookies version perfectly. But this version does not work, I just get the loading gif all the time under IE6.
but it works fine with the IE7.. Any idea why?
Does the new zip file contain the hack from POISON?
Also is it possible to put tables in the differents widgets? if yes how??? If i put a table, the next widget get includes in the widget where i put the table… (doing it for IE6 and IE7..)
Thanks for your support.
Brgds
VooDoo
Hi again!
Have been trying out this and it works pretty nice.
I do have some problems, that I can’t figure out how to solve.
1. Tried to add ThickBox functionality, but that don’t work as expected.
Depending on where on the page the link to open ThickBox Ajax call, the box is not positioned centered and the page is not “dimmed out”.
2. Working in ASP.NET and trying to add database functionality.
I have a dropdownlist that’s populated with names of swimmers, when a postback occours, a list of the swimmer selected should see a table below with their personal times on separate styles and swimming lenghts
If I run the code in a separate page, the table shows up perfectly, but if I include the exact same code in a widget, the widget don’t expand to see the added tables.
How to force the widget to include added content into the widget?
Best regards
Nice!
thank very much for sharing.
I have tried to install your package on a website I’m working on. I’ve got all the files extracted to the proper directories on my server, etc. However, I am getting a javascript error in the inettuts.js file. At line 246, char 21. It’s saying that .attr(‘…’) is null or not an object.
It looks like something, once installed, that will work wonderfully.
However, with this error, I’m unable to render nearly any part of the page beyond the background and header.
Does anyone have any suggestions on how to get it working?
My development enviornment is Websphere, and I’m creating a java-struts application, but I’ve only got the files going and a dummy index page to use to get it started, and it’s not going.
Thanks for any assist.
-Terri
Hi james
Amazing….you made my work more easy
help me to do rounded corners in IE7
hi James
Great job, thanks james.
But this code don’t work with jQuery 1.3.
“.attr(ββ¦β) is null or not an object.”
error means your widgets need an id.
Jason…
I gave all of my widgets an ID, but I still had the same problem.
Any other ideas?
Thanks,
-Terri
great job James.
thanks for all and exactly for the cookies.
Hi Sameer Sohoni
i’m not able to save the changes for different users in the database.
Please help me ASAP
Hi there.
First of….amazing ajax you made.
I have installed it and all is well, just like to know if there is a way to limit the columns.
what i mean is that now i can move all the boxes into one colume leaving the others empty and that will make the page longer. What i would like to do is to somehow limit the main div or something like that, or maybe limit the max number of boxes in each column so when the number is reach, there will be no posibility of moving any more boxes to that colume.
Hi there,
working nearly perfect here. Thanks!
I have a problem, if I remove manually a widget from the source code. After that, while using cookie pref saving, the webside won’t load properly, because I guess the data of the widget which is not available anymore in the source code is still in the cookie data and creates some problems. Is there any workaround for that???
TNX
What a cool gadget is this!!!!
I have edited it a little bit, but it is it possible that there is a limited number of widgets that will be stored in a cookie????
Because in the early phase, the positions of the widgets were stored, but now after i have added more widgets, the positions arent stored anymore.
so,gr8!
can i set it 4 columns,now 3 columns.
very good tutorial loved, i got a problem can u give me hint how to make 6 colums. i don’t know which files i have to change
thank You
Man i have been looking for this kinda thing with cookies enabled for ages, you rock!
Changing the ‘widgetDefault’ settings or introducing ‘widgetIndividual’ settings have no effect, ie. if you set all ‘widgetDefault’ settings to false all widgets can still be moved, collapsed and edited.
This didn’t occur with the ‘no cookies’ version but with this code a widget didn’t have to have a unique ID. Tested with FF3 and the dreadful IE6.
Otherwise wicked code. Thanks.
I retract my last comment – it all works fine (apart from a few expected IE6 CSS issues). Struggled all afternoon with the javascript but replacing ‘inettuts.js’ with a clean original (which I thought I was working from) and all came good.
Excellent code, just what I was looking for.
@Tom, @James
Wondering about this smaller columns issue. I’m wondering if a solution for this would be to shrink the widget upon pickup to the smallest column size then have it grow to column size when you drop it. If this would work please advise on some code. This is awesome by the way.
@James and @all,
I modified this script so it can works with php.
Insteed using Javascript to create cookie, I prefer using PHP to do that.
I used Ajax method to heandle this proccess.
I hope this API could make more easy for those who wan to store in DB and any server-side prossess.
You can download the source code here:
http://www.kandar.info/dt/inettuts_with_php.tar.gz
thx for your great works james.
Amazing tut! Thank you so much for sharing your knowledge
@Kandar: Awesome job!! Do you have also written API documentation? Also if you can create a demo page, it will be best and will help to understand your implementation easily.
James, this is completely awesome and I was hoping that after reading about iNettuts that you’d have a solution to save the state. The cookie implementation is perfect and will allow me to save this to my back-end database via Ajax.
Here’s my problem though. My current app uses
query-1.3.1.min.js (the latest is 1.3.2 as of today)
and
jquery-ui-personalized-1.6rc6.js
If I try to use this version everything breaks. Which is an issue for me because I have existing code that breaks if I try to use what you require:
jquery-1.2.6.min.js
and
jquery-ui-personalized-1.6rc2.js
Any chance of bringing your code up to date with jQuery? Unfortunately it’s impossible to use both libraries at the same time for obvious reasons π
Thanks and please keep up the great work on this–it’s incredible!
Has anyone found a way to implement a helper??? jQuery sortable documentation talks about helper but I couldn’t make it work. If anyone has implemented this idea please dare to share. If james himself can give us a clue or two, I would be very grateful.
Does anyone have a way to get this to work with the latest version of jQuery 1.3.x ?
I go through with the issue jquery-1.3.2.min.js (uncaught exception: Syntax error, unrecognized expression: ))
and found something wrong here with the code below:
return $(‘> li:not(‘ + notSortable + ‘)’, settings.columns);
because when I change this to : return $(settings.columns);
then above js error doesn’t come but dragging works strange
I am not so good with jquery development so if you find something helpful please check in this direction
Thanks
SOLVED: jquery-1.3.2.min.js (uncaught exception: Syntax error, unrecognized expression: ))
JUST CHANGE var notSortable = ”; TO var notSortable = null;
Very, very good example! Great job!
But i have one question:
Has anybody an idea what i must do that the siteadmin can add new widgets?
When i add a new widget the script doesn’t work because this widget is (of course) not in the cookie of the user.
Hi James
The cookie version is great, gonna use it, would you be able to add a feature where visitors can add new panels, once one has been deleted I can’t see a way to add one.
I want to remove the rename facility and have looked at the JavaScript files and not sure what to remove – trial and error may sort this out.
Excellent script.
Stefanovitch
it seems we can not use the script anymore , IE8 and FF 3.8 both failed to run the script
@aneeshtan don’t know what you are talking about, works perfectly for me in IE8 / Chrome / Safari
I get this error trying to use the Cookie version ->
Uncaught TypeError: Object function (selector,context){return new jQuery.fn.init(selector,context);} has no method ‘cookie’ http://blaatblaat/scripts/inettuts.js (line 226)
anybody any ideas ?
Connecting to Database is something everybody is looking for.
Anybody who have worked on this can help us out.
Thanks a lot JAMES!!
@Kapil Chawla
I had that exact same error when I took the intro ID off the fixed widget (to make it so i could move them all), and I tried your fix
var notSortable = null rather than = ” and it worked perfectly.
thanks!
@Joseph
I get this error trying to use the Cookie version ->
Reply
this is because of cookie.jquery.js not included [before] inettuts.js
@Mark
Did you ever get the checkbox dependency and cookie read-in on initial page load working? Thanks!
@James
Can I see an example usage of the ‘widgetIndividual’ settings in use? Perhaps with 2 specified widgets with different settings from each other and from the rest of the herd? I want to implement a couple of widgets with settings different from the others but don’t know the syntax or to set it as an array or function…
Also, is there a conceivable way to remove the header replacement functionality? I have no use for it but can’t take it out without breaking everything.
Thanks!
@TerriLyn
β.attr(ββ¦β) is null or not an object.β
I had the same issue in IE7, not in FF. I then proceeded to empty the entire cache, cookies etc, and it then worked as expected.
Hope this helps.
Can anybody write the code for saving to database using php and mysql? I read the code, modified it, but cant work.. Please, i need it badly!!!
well… does anybody can do it? I tried search all over the web, but i cant found any tutorial that can teach us how to save to database. So far, inettuts-with-cookies is the best tutorial of how to do a igoogle-like interface with jquery, but it limits to saving to cookies only. If only someone can write a tutorial, inettuts-with-mysql(php), that would be DAMN GOOD, and I am 100% sure, you blog/tutorial site will get a huge/rapidly increase in web traffic.
Thank you sir!
i’m on oversea,but now i founded da solution i want! here
Adding a new widget.
Not sure if this the best way to do this, but it seems to work for me.
1. Make a “hidden” widget by setting the display (inline style attribute or in the css file)to none.
2. On the create new widget event (button, anchor or whatever), clone the hidden widget (do a deep clone by setting the parameter for clone to true)
Here is my code: — assume that there is a “hidden” widget with a unique id
var new_widget = $(‘#newwidget’).clone(true); $(‘#column2’).append(new_widget); $(‘.column’).sortable(‘option’,’items’,’.widget’); $(‘.column’).sortable(‘option’,’connectWith’,’.column’); new_widget.find(‘div.widget-content’).html(“Added new Widget “);
new_widget.show(‘slow’);
This seemed to solve the problem of not being able to move the widget once it was created.
Anybody see any problems with this?
JAMES,
I get the error in the below code. In the first line the error is Microsoft JScript runtime error: Object doesn’t support this property or method.
var cookie = $.cookie(settings.saveToCookie);
if (!settings.saveToCookie || !cookie) {
/* Get rid of loading gif and show columns: */
$(‘body’).css({ background: ‘#000’ });
$(settings.columns).css({ visibility: ‘visible’ });
return;
Thanks,
Raj
Has anyone come up with a way to dynamically load PHP into index.php…
Basically replacing the Header and Content with text saved in a db table… I have the basic concept but if you dynamically create the widgets they do not appear.
I am using a mysql table titled sections… here is what it looks like
id header content col
1 Test Heading This is the content 3
The code that is dynmically created is:
<li class=”widget color-green” id=”widget”>
Dang it.. the code didn’t show up… anyway, let me know if you guys have any ideas.
Correction for the IE placeholder issue.
The issue is in IE the placeholder has a default height which does NOT change based on the height of the widget/module you are trying to move around.
I have heavily modified the code so I hope this still matches the demo here. Put this block of code after the start and before the stop events $(settings.columns).sortable({
sort: function(e,ui) {
ui.placeholder
.width(ui.helper.width())
.height(ui.helper.height());
},
James, great job man, best example I have found on the web.
One issue I am having is after adding my content, the heights are all different and the side to side movement is inconsistent in all browsers when the widgets have different heights. Let me know if you find a solution to this.
Hi kandar, This script is nice. Good work man.
Big thanks
It is really a great one.
I have little bit issue with position of element. Up and Down is fine. But when I try to move next or previous it will add third row at bottom.
It is good if we can fix it
Thanks a lot once again.
Hi James,
This is ramana from india. I saw this code. In this code every widget contains the same editable options. My requirement is each widget contains the different editable controls. How do i add and where can i add. Could you pls help me on this issue. Thanks in advance.
I was on bbc.co.uk on Monday – I was blown away by the way it can be customised to suit the user. I have been searching and searching to see how this can be achieved – my search is over – I am completely blown away by this example of your work – it is fantastic! It’s been a long time since a bit of script has impressed me this much. Thank you.
hi could you please please release a new version for lastest jquery:
google.load(“jquery”, “1.3.2”);
google.load(“jqueryui”, “1.7.1”);
it would be very nice thx π
super cool product. Tnx for it.
Hi
great work indeed. There is only one thing I wander if it can be made
I would like to have one widget streching over 2 columns (and not movable).
You know… like bbc.co.uk has.
Hi James,
nice tutorials wanna know if source can be changed to correct the defect.
What happens is the container div i.e a main div which contains all the widgets and columns is given
overflow: auto;. Now what happens is if you start dragging the down widget it comes up due to some relative/absolute positioning. Can u tell me where to modify the code to correct the defect
Really awesome. This was a great help. Would you please tell us how one can add more widgets as in the bbc.co.uk
Thanks
Hi!
Really amazing piece of code!
But pretty useless right now since its not compatible with the latest jQuery + JqueryUI version..
Will.. and when are you gonna update it?
Looks awesome in IE7 & Firefox 3, but dreadful in IE6 – the content area overruns the widget at the bottom and right. Guess I’ll have to add some IE6 hacks since a large percent of our customers still use IE6, as does most of our company (mandated by our networking dept). Small price to pay for the excellent piece of work you have put together here.
Great work – can’t thank you enough!!!
i want to add new panel dynamically ? how it is possible.
Hi guys,
I implemented the restoration function of the item which I removed.
It’s based on PoiSoN’s code.
thanks,
sample:
http://www.v-mpf.jp/mode/
Hi,
I am trying to serialize the data so I send them to database.
in $(settings.columns).sortable({
i put
update : function () { $("input#ivbcol").val($(settings.columns).sortable('serialize')); dbInsert();but this is what I got
array(2) { ["data"]=> array(1) { [0]=> string(1) "(" } ["ajax"]=> β«(1) }I tried with the cookie settings too, and also with $(ELEM)
Can someone please point me to the right direction?
Thanks James for a great script.
@Kapil Chawla,
Thanks for the fix. I was struggling with the issue “uncaught exception: Syntax error, unrecognized expression:” and your suggestion worked like charm!
Hi,
I am running this inettuts with cookies and works great! Only when i make any adjustments in the code (xhtml) and add some more widgets my browser (ie7) runs down. I think it has other cookie settings then, cause when i empty my cache it works fine again. Is there any way to put in the code a rule/code so new visitors don’t get stuck with ie7 browser?
Is there anybody with a solution? thank you..
And maybe for a good idea to add your own rss widget? That should be really cool!
This cool… Owesome work James, keep it up…
Saving to cookie is cool but how can you save this cookie to dababase for different users according to their preferences.. Guyz anyone has an input for this..
Once again thanks a lot James, for sharing this with every one.
@Chris and @Sameer Sohoni
Don’t know how you guyz saved the cookie preferences to database, I tried a lot but no luck as I am a beginer. If any one of you can share the information on saving to database will be so much appreciated and it will be useful for so many people looking for that solution here.
Thnx…
@Mahendar
It really depends on what language you are going to use as your web programming language. Essentially you will serialize the data into a POST request and feed it to a view that will pass it to the database.
The Coolie data are the following character string.
—–
intro,color-green,Widget 1 title,not-collapsed,not-closed;widget2,color-red,Widget 2 title,not-collapsed,not-closed;widget4,color-yellow,Widget 4 title,not-collapsed,not-closed|
widget3,color-blue,Widget 3 title,not-collapsed,not-closed|
widget5,color-orange,Widget 5 title,not-collapsed,not-closed;widget6,color-white,Widget 6 title,not-collapsed,not-closed
—–
I think that you should save these data with an identification cord.
thanks,
Koji
Hi James,
This was an awesome piece of code. Thanks so much for sharing this. One question – is it possible to save the preferences upon closing a widget too?
Thanks!
Dheeru
After using PoiSoN’s addition to save the closed state, we then discovered that the position of each box was NOT being saved unless the movement of box was followed by a title/color change or closure of a box. If all a user did was move the boxes around, and nothing else, the boxes would all return to their default states on refresh.
As a quick & dirty fix, we added a setInterval() on the page, and call the savePreferences function every 30 seconds.
I agree, this is awesome.
I am using it with ajax load and something like setinterval and it seems to work.
The only quirk I have which may not be related to this tut at all is that when I include FusionCharts (flash html object) it gives an IE error and in Firefox hangs over the widget.
Major major props, though, this is actually what my management was asking for for months!
I might see if i can figure out how to modify it so that it can have x number of columns and divide the screen accordingly. (instead of 33%, 100% / N) and such.
i just started using this code and it is great. i have a couple of questions wondering if anyone can give me some pointers?
1. click on edit goes to a different page (our widget has lots of things to edit)
2. how to set each widget’s settings? such as removable to false. i know it can be done just don’t know where and syntax.
thank you
Hi, i tried adding google gadgets(widgets) but the browser forwards the site and all i can see is the gadget itself, without the inettuts. any workraround? thanks!
wow, i try to make it as a tool in my site http://www.urorbit-tools.com π
so you can get it as you wont by easy way.
Hi. I have made an example using a database. I have published it in my blog. The blog is in Spanish but i have writen this post in English (sorry for my poor English).
http://jsabino.wordpress.com/2009/09/19/how-to-mimic-the-igoogle-interface-with-database/
Thank you James. Your contribution is really great.
Great work James, Thank you very much for sharing this, Would you please tell us how can add more widgets to the page from a list like bbc.co.uk
Thank You
James,
Excellent work!
Wanted to ask if you have tried merging the inettuts with google blueprint css?!
Has anyone been able to have that widget picker working in Firefox?
I see you used jQuery with 1.2.6 persion file.
But the newest jQuery persion is 1.3.2 and I have tested this code with 1.3.2, I have found some bug in it.
For example,with the code :
$(settings.columns).sortable({
items: $sortableItems,
connectWith: $(settings.columns),
handle: settings.handleSelector,
placeholder: ‘widget-placeholder’,
forcePlaceholderSize: true,
revert: 300,
delay: 100,
opacity: 0.8,
containment: ‘document’,
start: function (e,ui) {
$(ui.helper).addClass(‘dragging’);
},
stop: function (e,ui) {
$(ui.item).css({width:”}).removeClass(‘dragging’);
$(settings.columns).sortable(‘enable’);
/* Save prefs to cookie: */
iNettuts.savePreferences();
}
});
the “stop” function can not run correctly. So the cookie can not be saved correctly.
I think whether the “jquery-ui-personalized-1.6rc2.min.js” is not so compatible with jQuery 1.3.2 persion ?
But thank you very much for your iNettuts , it has lots of challenge to me .
To Heba:
π
I have run it sucessful with FireFox 3.0.15 .
Maybe your problem is similar as i said above .
Paul-thanks for helping. Great job! I’m having trouble with the move after create part.It moves but doesn’t “stick”
Dear James,
is there any solution for ‘attr[…]’ is null or not an object ?
since i already put every of my widget with a ID,
but this error still occured… plz give some suggestion thanks…
best regards,
Alex
hi guys, i’ve been looking at koji’s code, i love the way he does the restore feature, how do i replicate it, as far as ican see it uses a restore.do but ive not got a clue what’s in it or how to get it to work on my site
Hi guysγ&γthinker,
thank you for being interested in my source code.
this program manage a value of COOKIE.
please download the sample code from here.
http://www.v-mpf.jp/mode/restore.src
this code is written by PHP.
thanks,
koji
Koji or Mario,
Do u know how to implement this to work with Mario’s Database version.
Thanks, Padfoot
hi guys,
please refer to my following comment.
“August 24th, 2009 at 5:43 am”
i think that the simplest method is to manage these values on the database.
thanks,
koji
HI guys. got the page working a treat now thanks for your help.
i have been trying to put http://okonet.ru/projects/modalbox/ in but it doesn’t seem to work…if i put their js code below the window code the widgets work, but the pop up doesn’t, if i switch it around the pop up does but the widget buttons etc dissapear and you cant move them around.
any suggestions would be greatly appreciated
Hey Thanx for this!
I would like to add some function :
– add widgets and delete one
– database : create one field for one widget, like :
widget_id config
1 widget,color-green,Widget 1 title,not-collapsed
2 widget,color-white,Widget 2 title,not-collapsed
3 widget,color-red,Widget 3 title,not-collapsed
4 widget,color-blue,Widget 4 title,not-collapsed
=> Can you help me ?