views:

252

answers:

4

I have had a look at sticky notes with php and jquery and jStickyNote, and while both seem to look pretty nifty they lack some elements I am after. I haven't been able to find a way to allow particular users to modify the stickies they create, nor have I found a good way to save their stickies into my database. I am, and would like to keep using php, mysql and jquery. I have thought with the first link that I could just save the image created into a folder and save the url into that database but then I cannot go back and allow the user to change the content of the sticky. With the second link there does not seem to be support for saving the sticky at all. I'd also like to create a function where adding stickies to a message board (for everyone to see) does so in a randomly placed way that looks natural. Any ideas for either of these problems?

+1  A: 

Hi Ambrosia. Have you looked at any of the code? I took a really quick look at jStickyNote.

Basically, the "sticky note" is a css-styled, text area (that is surround by a div element).

If you want users to be able to save sticky notes/edit past notes, here's what I'd recommend:

  • Add some button to each note that says "Save" or with a similar meaning.
  • When a user clicks the "Save" button, you'll need to grab the text from that specific textarea element and then save that text to a database.

With that said, you'll probably need to design some sort of database with a user table and sticknote table. The sticknote table can have a foreign key to the user table. You'll also want to add some sort of login functionality to your site and then load the correct sticky notes for the authenticated user.

Good Luck!

Alex
+1  A: 

You can have a look at http://sticky.appspot.com - the code has been released by the google appengine team.

alok
Make sure that, if you use the code on that page, you fix it to make it work in IE8. :-)
Justin Grant
+1  A: 

Sorry for not going into specifics, but you could modify the plugin code to load a php script whenever a save button is clicked (or the box is moved, or even on keyup) with $.ajax(), passing it the horizontal and vertical positions and content of the note ( say, $("#note-content").text() ) and have the script plug those things into a database with a MySQL query. Just serialize your data and send it away. This gets more complicated if you want let your users have multiple notes, but start with one. Where is you hangup, exactly? I would be more specific, but I'm not sure what you already know.

I was thinking earlier about adding this feature to an app I'm working on. The thing is, I don't like those plugins. It should be very simple to write your own though. Let me know if you need help with something specifically.

Greg
I would like each user to have multiple stickies and yet for everyone else (not logged in) have every sticky created in a grid layout of sorts. The grid could show a small sticky with the title and date of the post, then upon click zoom up to a larger image of the sticky with the description in there as well as links to a shadowbox of images or something... I don't know if either of those plugins would support images being put into the sticky but perhaps I could just get away with anchor tags that open up a shadowbox.
Ambrosia
This would be a bit of work. Read up on jQuery documentation and build some simple test pages to pass a bit of data back and forth. Check out the stuff describing how to serialize data, use ajax and use events. You will need to pass (by POST or GET) your coordinates, title and body to a script that will insert it into your database. You will need a MySQL table with at least a column specifying which user made the sticky next to your x, y, title, body and you should probably associate it with a user table, so that you can show information on who posted and allow edit/delete. This help at all?
Greg
Yeah a bit, there is no edit function in jStickyNotes so I guess I might have to extend the plugin as well. Not sure how this will go if I only want certain posts editable by certain users.
Ambrosia
Read up on PHP sessions and add a condition to your WHERE clause when you're updating your rows. As in, "WHERE id = $sticky_id AND posted_by = $_SESSION[USER_ID]". I would recommend the O'Reilly "PHP Cookbook" for a start. Just take it one step at a time. You don't have to do everything at once.
Greg
+2  A: 

Here is some javascript that should help:

// Called when the edit (A) button is pressed
function edit(event, editButton)
{
    // Get existing title and change element to textarea
    var stickyTitle = $(editButton).parent().find('p.stickyTitle');
    var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
    $(textareaTitle).text(stickyTitle.html());

    // Get existing description and change element to textarea
    var stickyDescription = $(editButton).parent().find('p.stickyDescription');
    var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
    $(textareaDescription).text(stickyDescription.html());

    // Create save button
    var saveButton = $(document.createElement('div')).addClass('jSticky-create');                    

    // Add save button, then replace title, then replace description, then remove edit button
    $(editButton).before(saveButton);
    $(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
    $(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
    $(editButton).remove();

    // Set description textarea focus and set button actions
    textareaTitle.focus();
    setActions();
}

// Called when the save (tick) button is pressed
function save(event, saveButton)
{
    // Get existing title and change element to paragraph
    var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
    var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
    var newTitleValue = textareaTitle.val();
    $(stickyTitle).html(newTitleValue);

    // Get existing description and change element to paragraph
    var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
    var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
    var newDescriptionValue = textareaDescription.val();
    $(stickyDescription).html(newDescriptionValue);

    // Create edit button
    var editButton = $(document.createElement('div')).addClass('jSticky-edit');

    // Add edit button, then replace title, then replace description, then remove save button
    $(saveButton).before(editButton);
    $(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
    $(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
    $(saveButton).remove();

    // Set button actions
    setActions();

    // Add the object to the ads div
    $('#ads').append(object);

    // Update your database here
    // by calling the saveAd.php
}

function setActions()
{

    // call these after changes are made to anything
    $('.jSticky-create').unbind('click').click(function(e)
    {
        save(e, this);
    });

    $('.jSticky-edit').unbind('click').click(function(e)
    {
        edit(e, this);
    });

    $('.jSticky-delete').unbind('click').click(function(e)
    {
        remove(e, this);
    });
}

function remove(event, deleteButton)
{
    var stickyMaster = $(deleteButton).parent();
    $(stickyMaster).remove();
    //then call savead.php with delete parameter
}