SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sorting links with jQuery

    I finished the JS Live course and have spent the last couple days discovering different jQuery libraries. A lot of limitations I had are suddenly feeling like they have potential solutions, but I feel I am running the risk of diving into the deep end with only a beginner's swimming ability.

    In my perfect world, here is what I would like to do:
    - have a series of simple text links (see below) whose order can be modified without the need to manually code the HTML source.
    - use jQuery feature like jQueryUI (Sortable) to allow for quick and easy modification of said order
    - have the ability to save the changes

    Ideally, this page would be for clients whose sites have a basic image gallery. They would be able to access this "link order configuration page" via a server-side scripted login page only they can access.

    I kind of liked NextGen's gallery for WordPress, but even if I was utilizing a WP theme at the moment I require something a bit simpler.

    I just want to be able to allow the client to reorder the HTML links with an easy JS interface that can save changes to the actual HTML without the need to use a WYSIWYG editor and force the client to hand code the links themselves.

    So, am I trying to run before learning to walk or is this potentially doable?

    Here's the basic HTML structure:
    Code HTML4Strict:
    <!DOCTYPE...
    .
    .
    <body>
     
    <div id="links>
       <a href="images/pic1.jpg" title="Picture 1">Picture 1</a>
       <a href="images/pic2.jpg" title="Picture 2">Picture 2</a>
       <a href="images/pic3.jpg" title="Picture 3">Picture 3</a>
       <a href="images/pic4.jpg" title="Picture 4">Picture 4</a>
    </div>
     
    </body>
    </html>
    "To be truly dedicated to something
    you must be willing to betray it.
    " -SW

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Totally doable, if you're generating the list of links from a CMS / database type app, then you could add a sort order field.
    You can then use jQuery draggable/droppable with sortable to build a nice rich interface that allows clients to drag items around the list. Then you figure out the sort order and save them.

    Let us know how you go
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    Totally doable, if you're generating the list of links from a CMS / database type app, then you could add a sort order field.
    You can then use jQuery draggable/droppable with sortable to build a nice rich interface that allows clients to drag items around the list. Then you figure out the sort order and save them.

    Let us know how you go
    Thanks for the info, John

    That's the only part I do not yet know how to do. I can generate links from, for example, a certain sub directory via PHP, and I understand enough to easily set up the specific event listeners to hook up to the jQuery UI library.

    My limited knowledge so far tells me the DOM modifications made by JS are not visible in terms of viewing the HTML source code. A quick search of "save DOM changes to HTML" led me here, but I am not certain this is the correct way to go about this.

    Back to I go...
    "To be truly dedicated to something
    you must be willing to betray it.
    " -SW

  4. #4
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of messing around I just used its serialize method and plugged changes into an MySQL table.

    A few more steps perhaps, but gets the job done
    "To be truly dedicated to something
    you must be willing to betray it.
    " -SW


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
  •