Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: [DHTML] Extremely Easy In-place-editing [outdated]

  1. #1
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default [DHTML] Extremely Easy In-place-editing [outdated]

    1) CODE TITLE: quickEdit

    2) AUTHOR NAME/NOTES: BYK

    3) DESCRIPTION: This library is for quickly and efficiently editing of text and image based page components. The functions included in this library are not for external use generally and all you have to do is read the "initEditables()" function's explanation to start using this good system with almost no JavaScript knowledge at all. This library is very useful for user profile pages' or dynamically generated pages' editing operations. This editing is used for page. We can correct this as "in-page-editing" which includes images. You should see the demo video to completely understand what I mean.

    The explanation is as follows
    This function initializes the ALL editable elements.
    For an element to be considered as an "editable element" it should have editaction, editparams and editcond properties.

    editaction property contains the adress of the server side page which will receive the change request, just as a form element's action property.
    editparams property contains the additional parameters AND THE NAME OF THE VARIABLE WHICH THE NEW VALUE WILL BE ASSIGNED.
    editcond property contains a Javascript expression or simply 1 or 0 which determines WHEN THE ELEMENT CAN BE EDITED.
    editfade property will add an extra FADE EFFECT when user gets his/her mouse over the editable element, it fades to the given value (0<=value<=1)
    edittype property defines the text-based editable elements editing elements. To be more clearly, if you set edittype="TEXTAREA" then the script will generate a TEXTAREA instead of a TEXT INPUT for the editing of that editable element.
    4) URL TO CODE: http://amplio-vita.net/JSLib
    Demos are on the given URL but a direct link to the short and brief(90secs) YouTube video demo is here: http://www.youtube.com/watch?v=d6zcaWdkQJ0

    Note: This library is a part of the amplio-vita JSLib project and needs its ajax_main.js to run. All explanations are made on the uncompressed library as comments. Please give feedback to improve our library.

  2. #2
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    I really need feedback about this library. Why did nobody commented? If the video demo is not explanatory enough please tell me so that I can know and improve it.

    Or if the method did just not seem well to you, then please tell it also.

  3. #3
    Join Date
    Dec 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Documentation

    It might help to give more detail about how to implement your scripts, including the HTML required to implement them in a page layout. Look at most of the other script submissions on DD as an example. A little more documentation and instruction will go a long way for potential users of the script. It would also be helpful to see a working demo of this. The site you link to doesn't exhibit the script at all, at least not that I can determine.

    From your demo it looks like this is a very useful tool, and one that I'm looking forward to implementing. It's just not possible to get a good grasp of what you've done without a way to give it a trial.

  4. #4
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    First of all thank you for your valuable comment on the forum. I'm working on a "live" demo

    Ok this is hard to understand with only explanations, here is an example

    HTML Code:
    <div id="daDiv" editaction="edit_data.php" editparams="editedArea=theDiv&value=" editcond="isAdmin" edittype="textarea">Some text</div>
    First, the editcond is checked, here it just looks the value of the JavaScript variable "isAdmin". If it is true, it allows the user to edit the area. How the user understands he/she can edit the area? The script automatically changes the editable element's class to "editableElement" when the user hovers the cursor on it. So you should define a good looking editableElement class in your CSS. You can enter any JavaScript expression in the editcond parameter for evaluation. But do not forget that you still have to check user rights from serverside.

    Then the edittype. If you write 'edittype="textarea"' when the user clicks on the editable element, he/she will see a textarea instead of a textbox which is the default.

    Ok, the editaction and the editparams should be considered together I think.

    When user edits the text, the scripts makes a POST call like this "edit_data.php?editedArea=theDiv&value=[Newly entered text]" and waits a "1" as a response. If the page sends back a different response, it shows an error message to the user which indicates that the operation was not successful.

    OK this was the text part, image part is similar. Let's look at an example again.

    HTML Code:
    <img id="daImg" editaction="edit_image.php" editparams="imageID=3&image=" editcond="isAdmin" editfade="0.5" />
    Actually nearly everything is here. editcond defines whether the user can change the image or not. But this time, to take more attention from the user we add the editfade parameter. When the user gets the cursor over our image if he/she has right to change the image it will both change its class to "editableElement" and will fade to 0.5 opacity(50%).

    editaction and editparams are the same as the text based ones, only the response from the page should be different. The script waits a response in the following format:
    path=[the path to the new image]

    If the response is anyhow different from the above format the script informs the user that the operation has failed, else it sets the images path to the path given in the response.

    If there is any unclear point please do not hesitate to ask.

    Note: This script also requires the visual_main.js for fade effects. I forgot to mention this in the first post, sorry

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by BYK View Post
    I really need feedback about this library. Why did nobody commented? If the video demo is not explanatory enough please tell me so that I can know and improve it.

    Or if the method did just not seem well to you, then please tell it also.
    If you are looking for feedback, and not submitting a finished script, this is the wrong forum. Moving to javascript.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    This IS a finished script. But finished scripts can be improved, right? So can you move the subject back to script submissions?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by BYK View Post
    I really need feedback about this library. Why did nobody commented? If the video demo is not explanatory enough please tell me so that I can know and improve it.

    Or if the method did just not seem well to you, then please tell it also.
    Quote Originally Posted by BYK View Post
    This IS a finished script. But finished scripts can be improved, right? So can you move the subject back to script submissions?
    Give it some time, you might actually get more feedback here. Once you have incorporated all of the suggestions you deem worthwhile, you may then submit it again.

    To all, give BYK's script some attention and feedback, please.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

  9. #9
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

  10. #10
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    I like the script, but I don't like the way it makes the page invalid.

    Code:
    <li>Count of the Item : <span id="itemCount" editcond="1" editaction="itemCountChange.php" editparams="itemId=1&itemCount=">2</span></li>
    By adding all of these extra attributes to the span tag would cause it not to validate (at least not HTML 4.01 strict). If you could find a better way to implement the script without causing this little issue, I think you would have a good little thing there.

    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •