What is the best way to create a sticky style page with scanned and retrieved content?

Question

I looked at sticky notes with php and jquery and jStickyNote , and although both of them look pretty elegant, they miss some of the elements that I follow. I could not find a way to allow specific users to change the styles they created, and also did not find a good way to save their sheets in my database. I, and would like to continue to use php, mysql and jquery. I thought with the first link that I could just save the image created in the folder and save the URL in this database, but then I can’t go back and let the user change the contents of the sticky. With the second link, there seems to be no support for keeping it sticky at all. I would also like to create a function in which adding sheets to the bulletin board (so that everyone can see) makes it random, which looks natural. Any ideas for any of these issues?

Answer 1

Here are 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 } 

Answer 2

Have you looked at any code? I looked at jStickyNote very quickly.

Basically, a “sticky note” is a text area with CSS that is surrounded by a div element.

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

• Add one button to each note that says “Save” or with a similar value.
• When the user clicks the "Save" button, you need to grab the text from this particular textarea element, and then save this text in the database.

With that said, you probably need to create some kind of database with a user table and a table with an inscription. The sticknote table may have a foreign key for the user table. You will also want to add some login features to your site, and then upload the correct notes for the authenticated user.

Good luck

Answer 3

You can see http://sticky.appspot.com - the code was released by the Google appengine team.

Answer 4

Sorry for not going into details, but you can change the plugin code to load the php script whenever the save button is pressed (or the field moves or even on the keyboard) with $ .ajax (), going through this horizontal and vertical positions and the contents of the note (say $ ("# note-content"). text ()) and the script connect these things to the database with the MySQL query. Just serialize your data and submit it. This gets more complicated if you want your users to have a few notes, but start with one. Where do you hang yourself, exactly? I would be more specific, but I'm not sure what you already know.

I already thought about adding this feature to the application I'm working on. The thing is, I don’t like these plugins. It should be very simple to write your own, though. Let me know if you need help with anything specific.