Many people have asked me to update my example of an iGoogle interface to the lastest version of jQuery. I have also repaired a problem with the database connection (I had moved my webpage to a different hosting company).
Here is the new version: http://www.jsabino.com/test2/
I have used jQuery 1.6.2 and jQuery UI 1.8.16.
You can also download the full source code here: http://www.jsabino.com/iNettutsDB3.zip
Thank you very much for all your comments.
Mario
El blog de Súper Mario 
Tanks for the update, I got one question : how can i make the widget to be collapsed while being dragged and expanded back on drop???
will very appreciate your answer.
It would be easy.
Just call $(this).parents(settings.widgetSelector).toggleClass(‘collapsed’); when dragging starts (inettuts.js line # 210) and stops (inettuts.js line # 213)
I did as you say:
looks like this:
start: function (e,ui) {
$(this).parents(settings.widgetSelector).toggleClass(‘collapsed’);
…
and
stop: function (e,ui) {
$(this).parents(settings.widgetSelector).toggleClass(‘collapsed’);
…
but it does nothing 😦
i also tried to use $(this).toggleClass(‘collapsed’); instead of the
$(this).parents(settings.widgetSelector).toggleClass(‘collapsed’);
and it did hide the content of the widget while being dragged , but the widget itself did not collapsed and stayed the same size,
any ideas on what could it be?
Thanks ahead!
Daniel
Any other ideas on how can i achieve it?
thx
Hi Daniel
Try replacing inettuts.js with this one:
http://www.jsabino.com/test2/inettuts_daniel.js
It works for me.
Thx 4 the code, it works for me now…
Except for 1 thing, when I click on the widget header (without dragging it ) its being collapsed in and out , which as a result pops the lower widget up and down… I tried to tell the difference between simple click and drag and drop , but without any luck
any idea how can i tell the difference between clicked widget and a widget that being dragged?
hola pudiste redondear los bordes en internet explorer porque me da problemas y las clases desaparecen … saludo
Great Stuff!
I was wondering if you had a way to add the widgets to the top of the list instead of the bottom. So the newest widget would be on the top.
Any help would be greatly appreciated!
Mike
Hi Mike
To add widgets to the top of the list instead of the bottom, you must change line #54 from inettuts.js file: replace «append» with «prepend».
Perfect. Thank you very much!
Great work…
Mike
Hey, Awesome mod I have integrated it into my forums! Users know can have a awesome looking profile!
The thing I added was a «active: false/true» statement, I wanted to know how to make it so the below will «NOT» show a gadet, if the statement is set to true. Hope you can help me sir!
Here is my setting:
Twitter : {
movable: true,
removable: true,
collapsible: false,
editable: true,
active: true,
But I need the twitter gadget to «not show» not the header, or anything, I need it to disappear completely if ACTIVE is set to «false» like:
active: false,
I have created a function for it underneath the other functions you’ve made:
if (thisWidgetSettings.active) {
}
Now I just need to know what to put in there to make it «Hide» the Twitter gadget (the top title bar of it and the content) make it completely hidden.
Why I want this? because I have a made a Twitter gadet for my members in my profile show/hide there gadget on there profile!
Thanks for everything, I really hope you can help me god bless!
Hi Nick
You can hide a widget with:
if (thisWidgetSettings.active) { $(this).hide(); }Wow god bless, let me just show a quick screenshot of what my profile page looks like/website, and how I integrated your mod with every forum user on my site!
This is amazing now I can setup custom profile gadgets in peoples Settings page to show/hide, hence I integrated the .js internally I can now pass my php values and stuff from the user into the script making it way more awesome.
Thanks abunch jsabino this is epic news! Will keep you posted on my site! It’s launching soon!
Great work!!
I like to see that my code is useful for someone…
hey i have seen your dashbord.its cool.can you teach me how?because it related to my final year project in my university.please):
Jsabino if you have any more awesome scripts please let me know! I love it
Hey Mario! sorry I have one other problem (Related to php too)
This code here:
loadWidget : function(id) { $.post("widgets_rpc.php?name={$ibforums->input['showuser']}", {"id":id}, function(data){ $("#"+id+" "+iNettuts.settings.contentSelector).html(data); }); },This is going to my widgets_rpc.php?name=XXX.
The problem is, I have a query in that file that selects all the information for the user right? But I have like 5 Widgets, so it is running that query each time it post’s for each $ID, so in the long run it is running 5 queries everytime somone visit’s a profile, when it’s supposed to only run «1», the reason this is because I am passing dynamic content through, how would I get the same results but only running 1 Query, but separating them out into the boxes without actually $.post each time? Cause it just is useless to waste 5 Queries each time somone visit’s a profile you know?
Thank you,
-Nick
There are many ways to solve that problem. The easier one is to store the query result in a session variable. You only execute the query if the session varible is empty. Otherwise, you get the result from the session variable.
session_start(); if (!isset($_SESSION["data"])) { $_SESSION["data"]="user data"; // Exe the query here... } echo $_SESSION["data"];Hey, I am a bit confused on the $_SESSION[«data»]=»user data»; part, hence I have multiple Cases, for About Me, Signature, Twitter…
Here is my code.
if ($id == "Twitter"){ echo '<a href="http://twitterhack.html?name='.$member'icq_number'.'" rel="nofollow">http://twitterhack.html?name='.$member'icq_number'.'</a>'; }else{ echo ""; } switch ($id) { case "PostInfo": echo "{$info['name']} {$info['member_title']} {$info['avatar']} Posts: <b>{$info['posts']}</b> ({$info['postspd']} per day) {$ibforums->lang['joined']}: {$info['joined']} Local time: {$info['local_time']} Location: {$info['location']} Birthday: {$info['birthday']} Last Seen: {$info['online?']} {$info['top']} {$info['last_activity']} <a></a> Warn: {$ibforums->lang['tt_warn']} <a>{$percent}</a>% "; break; case "AboutMe": echo "$editimage {$member['aboutme']} "; break; case "Signature": echo " $editimage2 {$member['signature']} "; break; }You saw my screenshot, that is what generates that.
This is my MYSQL Part which is above everything.
$DB->query(«SELECT * from ibf_members where id = ‘$id2’
$member = $DB->fetch_row();
The $DB->fetch_row just makes it so I can use my $member[‘xxx’] for my dynamic content (I am sure you know that already ,lol) Just incase!
So after looking over my code and your code to, I am confused on where you got SESSION[«DATA»] from? did you just make that variable name up «DATA»? And Should I be applying that to $member then? hence it points to my query? Thanks again, -Nick
You could have something like this at the begining of your PHP file:
session_start();
if (!isset($_SESSION["member"])) {
$DB->query(“SELECT * from ibf_members where id = ‘$id2’");
$_SESSION["member"] = $DB->fetch_row();
}
$member=$_SESSION["member"];
…
This way you only execute the query the first time that user call the page. $member array is stored in a session variable. You don’t have to change your if/switch structure.
Hey. I think I am just going to try to use a new value under the Gadget names like this:
Twitter : {
movable: true,
removable: true,
collapsible: false,
editable: true,
active: false,
mycontent: «this is all my twitter info i can put w/e here»,
}
Now I want to display whatever content I put into the variable mycontent!
It has something to do with: thisWidgetData[0], but I cant seem to find it.
Oops, I found it
loadWidget : function(id) {
$.post(«widgets_rpc.php?name={$ibforums->input[‘showuser’]}», {«id»:id},
function(data){
$(«#»+id+» «+iNettuts.settings.contentSelector).html(data);
});
},
Okay, I want to just disable the post ajax stuff, and simply just use the «mycontent» variable and put whatever I want for each widgetIndividual Class.
So when I am done it will look like this:
AboutMe : {
movable: true,
removable: false,
collapsible: false,
editable: true,
mycontent: «About me Content here»,
},
PostInfo : {
movable: true,
removable: false,
collapsible: false,
editable: true,
mycontent: «My User Info Content here»,
},
Signature : {
movable: true,
removable: false,
collapsible: false,
editable: true,
mycontent: «My Signature stuff Content here»,
},
Twitter : {
movable: true,
removable: true,
collapsible: false,
editable: true,
mycontent: «my TwitterContent here»,
}
I think this would be alot better in my opinion and I know it’s possible. Do you think there will be a performance increase or loss if I go this way? Otherwise I want to see If I can do it, any help is appreciated Mario, Thanks for your time. Sorry I am asking so much questions, I am a java/php Learner.
Oh, wow I am really close!
Twitter : { movable: true, removable: true, collapsible: false, editable: true, active: false, mycontent: "twitter is so cool rofl", loadWidget : function(id) { $.post("widgets_rpc.php?name={$ibforums->input['showuser']}", function(data){ $("#"+id+" "+iNettuts.settings.contentSelector).html('+ mycontent'); }); },Does not seem to work 😦
The loadWidget function should look like this:
loadWidget : function(id) { $.post("widgets_rpc.php", {"id":id}, function(data){ var thisWidgetSettings = iNettuts.getWidgetSettings(id); if (thisWidgetSettings.mycontent) data+=thisWidgetSettings.mycontent; $("#"+id+" "+iNettuts.settings.contentSelector).html(data); }); },I think it would be better to keep control of widget content in the widgets_rpc.php file, but there are many ways to have the same result.
Hehe, wow, I am going to beable save alot of queries now! I will be just using the «mycontent» field and pass all my php stuff in there for each Gadget, and just show it like that, instead of using the $.post. Your code works wonderfully! I can now put mycontent: «HEY», on each individual gadget! Very nice work Jsabino! Thank you so much!
I am going to be removing the $.post (If I can) cause it’s setup on profile based systems and it’s dynamic already.
God bless man… I love you (no homo!)
Oh, is there anyway I can have it:
var mycontent: «text/bla/blah»,
because if it’s not a Variable, I have to have all my stuff in 1 line, it’s hard to code like that, but if there is no way, I will just have it all in 1 line then 🙂
Hey, is there anyway you can implement a Color Picker (simple one) into this? im about to launch my site, and I think users should have the ability to use a custom color of there choice/etc.
Here is a editor that I would love for you to try to get it to work with this.
http://www.izzywebsite.com/tools/jquery-color-picker#
Or this
http://andreaslagerkvist.com/jquery/colour-picker/
They are both lightweight.
You can view list of them here:
http://www.jquery4u.com/plugins/10-color-pickers-plugin/
if you would a couple of dollars over paypal (USD) I can help.
Thanks man god bless this is a wonderful script, hope you can make a mod by implementing one of these. I will email you.
Hi Nick
What do you mean with «implement a color picker»?
Users can change the color of every widget by clicking on edit button. Are you talking about allowing to choose any color instead of only from a palette of 6 different colors? If this is the idea, it can be done, but it requires some coding because colors are now taken from css styles.
Mario,
I am attempting to completely remove the background color of black and any ability of the code to change the color. How would I go about doing this? In the inettuts.js file there are a couple lines like this:
$(‘body’).css({background:’#000′});
and there is one reference in the css file. I can change the color by modifying the color reference, but I can’t completely remove the code that changes the background. I have the background already set using another set of css files and themes and this code takes over when it is executed.
Any help would be appreciated.
thanks
mike
Hi Mike
The original code was made to init loading widgets with a background color (line #31 of inettuts.js), and then change the color when it finishes loading (lines 256, 267 and 323). Just search and replace $(‘body’).css({background:’#000′}); with your color four times or remove those commands and use a css style. You will have to edit column separator images too because they have a black background.
If you don’t want to allow the user to change widgets color, remove from line 112 to 118 (both included). It’s the part that renders the change widget color feature:
.append((function(){ var colorList = '<li class="item"><label>Available colors:</label><ul class="colors">'; $(thisWidgetSettings.colorClasses).each(function () { colorList += '<li class="' + this + '"/>'; }); return colorList + '</ul>'; })())Thank you. I will report back if I have any problems.
I am not sure I was clear in my description of the problem. I don’t want to change the background colors of the widgets. I am interested in removing the black background that covers the entire page. I would like a user to be able to change a widget color. I don’t want the entire page’s color to change to black.
none of this at the top of the page
thanks again
So the purpose of using a DB is to replace the use of cookies? If so, how does it know to restore the box positions upon my return? I see this being an issue on a shared IP if two people visit.
Hi
Yes, the purpose of using a DB is to replace the cookies. The DB stores the same information: positions, colors, titles…
In my example I have used IPs to identify users to keep it simple, but of course you should use the user id stored in a session variable or something like that. My code is intended to be used in a web where users must be logged in to access the page (I use it in an enterprise intranet portal I have developed).
Unfortunately doing so is beyond my skill set. Would you consider making an option to use a cookie, or even better, cookies by default unless the user logs in with either Facebook or OpenID?
I’m sure a lot of people would find this useful as your example is more useful on an Internet site, not Intranet portal. Not to mention the only one kept up-to-date out of the other 7 I’ve looked at.
*poke*
So… anyone willing to update this script to be used on a public website?
Give me some days and I will update the script. I will use a config var so it could work with a DB or cookies to be used on a public web.
Thank you. I’m sure a lot of people will appreciate you doing so. 🙂
Hi Catherine
I have the cookie option ready. Check the demo here: http://jsabino.com/test4
You can download the source code here: http://jsabino.com/iNettutsDB4.zip
Now there is a setting called «saveToDB». If it’s true, it will save widgets config to the database. If it’s false, it will use cookies.
I will write a new post explaining the code when I have some time left.
Thank you so much. I’m going to play around with it and provide some feed back. 🙂
While you’re doing the explanation, it would be nice to know how to have «widgets» with content pre-populated. Say if I wanted to have a widget box with text or php code in it.
Hey, jsabino, forget about the Color Picker idea. I need some help though, was wondering if it’s possible to add a «Move Left, Move Right» little icons next to the edit bar. So when a user clicks on it, it will move that widget over to the left or the right, would be wonderful if this would be possible jsabino!!
Also here is a screenshot of your mod in action on my beta forums!
As you can see it works wonderful,etc! I love it.
I integrated my bbcode editor in there too. but when people click on those colors, the widget-h3 is not changing the color onclick, but when you refresh, it does change the color, Because I added this:
Under
initWidget : function (opt) {
Problem is when «onclick for the color» it doesn’t update the color in my H3 tag, it only does it on the «LI» tag, I am completely stumped, been trying for hours now and have no resort to go to, except for you.
If you could fulfill these 2 requests, it would be wonderful, God bless, Thank you
because I added
«» Under the InitWidget function, some reason wordpress deleted that code
WordPress keeps deleting my code im trying to give you, which is
Easy. After this line from «addWidgetControls» function:
$(this).parents(settings.widgetSelector) .removeClass(thisWidgetColorClass[0]) .addClass($(this).attr('class').match(colorStylePattern)[0]);add the next one:
$(this).parents(settings.widgetSelector).find('h3') .removeClass(thisWidgetColorClass[0]) .addClass($(this).attr('class').match(colorStylePattern)[0]);Try it and tell me if it’s working.
Wow awesome, that worked! Wow, didn’t know it was that easy! Ty mario!!!!
You’re one awesome dude, lol. Now just need to see if the move left/right things are possible, I will mess around with it later, g2g atm.
I also did integrate it with the db, i simply just changed the cookie variable to read my field from mysql, it works wonderful, if there are more updates tho should i re-download and look? 🙂
god bless
Version4 doesn’t seem to echo the widget content like the demo.
I’d like to have «widget» boxes displayed on the index when somebody visits. I’ve added the code below, but once refreshed it duplicates the box. I don’t understand why?
TitleContentSome idea’s to better the script.
1. Remove the create widget portion and allow for predefined content boxes.
2. Add a button to restore boxes (from a list) that have been removed.
Visual example: http://imgur.com/a/tBT1m
I’d love to work with you on improving the interface. 🙂
Hi Catherine
Sorry, I’ve been some days off…
Although this version doesn’t need a DB to work, widgets get their content with an ajax call to a PHP file. Check if you have PHP working fine.
I can’t check your code, but you are right. My code duplicates the boxes. I have to take a look at this. And I will include both ideas.
It will be great if you work on improving the code. You could create a new version and I could help you and publish it here with your name. I am really busy right now but I promise to answer.
Unfortunately I am not a programmer and know very little about PHP. My skill set is in design. I look forward to the revisions and duplicate fix. I’ll test it soon as I see your update.
Thank you for all your work.
Hey Mario…. had any time to look at those fixes/additions?
Just checking in again to see if you had any time to make those fixes we discussed? 🙂
Hey, jsabino any way to add a simple «Move Left» Button or «move Right» button next to the edit button and when they click it, it sends the content box to the right or left (whatever they choose) with ajax, so they don’t have to drag ? This would be awesome.
Hi Nick
It’s a good idea, but it’s no so easy to do it. I will try it if I have some time free next week.
Thank you for your comments.
Mario, any thoughts on my last comment?
Really looking forward for it JSABINO! God bless!
Good morning Mario,
Have you had any time to look at those changes/fixes?
So I assume this has lost it’s steam? lol
Can you please update the code with what we discussed back on December 21?
Hi,
i think this is a great script, thanks very much for it! I would love to try it but, unfortunately, download link is not working:
http://jsabino.com/iNettutsDB4.zip
Could someone give me a working link, please? I would be very grateful.
Thanks again.
Forget it, now it works again. Thanks anyway. 🙂
Nice Post, when i drag left to right any div its add new row, could you tell me how do i add replacement functionality, like A1, A2, B1, B2, C1, C2, if i move A2 to C1 then C1 should move to the A2 place and A2 move to the C2 place.
Hi, how can i make collapsible work with jquery 1.9.1 and ui, 1.10.3?
Hi Jsabino
Thanks for spreading such a great work and knowledge transfer.
How can we perform resize on widgets?
Hi Jsabino
Any ideas in how to implement this in SPRING MVC? I am not too sure about storing the user preference it in the database and retrieving it ? Any idea? Thanks.
How would i let the users to choose which widget they want to put on the page
Hello everyone, This is sort of a «hail Mary» attempt, I know that it’s been a little while since the last comment was given on this thread.
Basically, I just found this script and it’s amazing! Hats off to the author, and to Mario for making it SOOO much better!
My question: I am wanting to have a few pre-determined widgets, and then have the option to add more. I have tried to edit the widget content in widgets_rpc.php but no matter what I do or change it does not effect the widgets.. Any ideas? In fact, if I completely take out this file from the folder, it still acts normal.. the widgets created always have «content for widget #» in them.
Anyways, here’s hoping someone is out there that can help, thanks again for spending time to make such an awesome script.
hey! Sorry guys, as usual, right after I posted the question it made me think more about it and realize the issue.
If anyone is as silly as me and has the same problem, my solution was to change the path in inettuts.js for widgets_rpc.php to and abolute path.
then to add:
if ($id==»widget2″)
echo «Madrid weather: sunny…»;
As instructed in earlier comments