1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript title fetching and image layering

Discussion in 'jQuery' started by Thaikhan, Jan 29, 2014.

  1. #1
    I have several questions and any help will be greatly appreciated!

    Looking here: http://jsfiddle.net/Thaikhan/ANLUs/4/

    I'm trying to make a system where items can be clicked in and out of a manipulable screen (dragged and re-sized) called .frame.

    Code (Text):
    1. $('.inventory').on('click', 'img', function () {
    2. $(this).resizable({
    3.     aspectRatio: 1,
    4.     containment: "parent",
    5.     minHeight: 50,
    6.     minWidth: 50
    7. });
    8.  
    9. $(this).parent().appendTo(".frame").draggable({
    10.     containment: "parent",
    11.     cursor: "move"
    12. });
    13. });
    14.  
    15. $('.frame').on('dblclick', '.ui-draggable', function () {
    16.     $(this).appendTo(".inventory");
    17.     $(this).draggable("destroy");
    18.     $("img", this).resizable("destroy");
    19.  
    20. });
    This part works, except for when they are double clicked back to .inventory, I would like the images to take on the css of ".inventory img {}" and reset their size, float left, not overlap, etc.

    That's one part of my question. The second part deals with layering.

    What I would like to do is populate a sortable list with the titles of the objects that are in .frame and have the order of the list items change the z-values of the images. Please see the Fiddle. I really don't know how to go about changing the z-values or fetching the titles to create the list.

    Again, any help is super appreciated.

    Thanks a million!
    Thaikhan, Jan 29, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Well-Known Member

    Messages:
    1,224
    Likes Received:
    109
    Best Answers:
    51
    Trophy Points:
    160
    #2
    Lets see - the first part of your question is easy, just change this line:
    Code (Text):
    1.  
    2.     $("img", this).resizable("destroy");
    3.  
    to
    Code (Text):
    1.  
    2.   $("img", this).resizable("destroy").attr('style','');
    3.  
    Not entirely there yet, but at least the new function populates the list properly
    http://jsfiddle.net/ANLUs/9/
    I think that it wouldn't be too hard manipulating the z-index if you add some sort of ID to each list item - that way you can easily manipulate each element and be sure which one is on top. Remember that unless you have a lot of elements, this can probably be achieved by iterating through every element each time, instead of creating some complicated check for each item (just check through the list, get the order of IDs, and then apply a z-index based on their place in an array)
    PoPSiCLe, Jan 29, 2014 IP
  3. Thaikhan

    Thaikhan Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    When it's all said and done, the inventory images will be populated with a subset of a greater set of hundreds of images stored in a SQL database. Each image will have a unique ID. Eventually I want to be able to save the ID's of the images in the frame, their positions, and their z-index values in a database so a user can save what they have created and come back to edit it. A single frame might include >50 images so I would like to handle layering in the sortable list fashion. Thank you so much for your help so far @PoPSiCLe !
    Thaikhan, Jan 29, 2014 IP
  4. PoPSiCLe

    PoPSiCLe Well-Known Member

    Messages:
    1,224
    Likes Received:
    109
    Best Answers:
    51
    Trophy Points:
    160
    #4
    I see. That will involve quite a bit more jQuery to get around, but it should be perfectly doable. Unfortunately, a JS-fiddle isn't really the best approach for such a project, as it's a lot to consider. But as long as each element has its own ID, and you can calculate each element's height and width, z-index etc. you can relatively easily store this in the database. For the z-index values, you need to send this back to the element in question (the img) via the sortable-functions callback - that should do it quite nicely.
    PoPSiCLe, Jan 29, 2014 IP
  5. Thaikhan

    Thaikhan Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Yeah, once I got the basic JS working I was going to switch over to the server to fiddle with the php. I'm still struggling to figure out what the callback function would look like, however. Between having to actively update the list on each click-in and dblclick-out and changing the z-indices, I'm pretty lost. I am also very novice in js. Thank you again for your help!
    Thaikhan, Jan 29, 2014 IP
  6. Thaikhan

    Thaikhan Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    I was thinking that items, depending on their position in the list, could be given an absolute z-value. The first item would have a z-index of 1, the second, 2, and so on. This would have to be recalculated after every change to the list and may not be the best way to go about doing it. (I also have no idea how to code it...)
    Thaikhan, Jan 29, 2014 IP
  7. PoPSiCLe

    PoPSiCLe Well-Known Member

    Messages:
    1,224
    Likes Received:
    109
    Best Answers:
    51
    Trophy Points:
    160
    #7
    Question: will the list and number of images always be equal? Ie, 5 images, 5 items in the list, 10 images, 10 items in the list, and so on?
    PoPSiCLe, Jan 30, 2014 IP
  8. Thaikhan

    Thaikhan Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    Yes, this is where I have it so far: http://jsfiddle.net/Thaikhan/Qcu65/4/

    Just need to now make the order of the list effect the z-indices.

    I was thinking that the code could, on click of a li in #sortable, grab the ID's, associate an number (1++) with them based on the order, and then apply that number to the corresponding z-index in the frame. However, there are a couple problems in doing it that way.

    1. The way it's coded now, on addition or removal of an img, the list resets all changes made to it and reorders back to the order that the img were added to frame. So I guess changing the order of the list could change the order of the img in frame? I don't know how to do that... It may have to be completely redone...

    2. I just realized that individuals will have >=1 numbers of the same item in their inventory. 5 hearts, for instance. So, when it is clicked out of the inventory, the system needs to be able to copy it, create a unique ID for it, create a unique Title for it (e.g. "Heart 3", to display in the #sortable list), and subtract one from the inventory item counter. To do so, a counter needs to be put on every item icon in the inventory where their are >1 to work with. I was thinking, as far as server efficiency, it would probably be best to do all of this locally, and then when a user hits a "Submit/Save" button, have the php not only save the frame (so ID's or names of same images have to be unique) but also re-save the inventory and each item's corresponding count. The inventory img list will be populated on load from a database query. I'm not sure how to store the quantity of each item.

    I know that was a lot but thanks a million!
    Thaikhan, Jan 30, 2014 IP
  9. Thaikhan

    Thaikhan Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    There are also problems with items disappearing out of frame. It seems that the relative positioning is pushing some things out when you remove an image after they have been moved.
    Thaikhan, Jan 30, 2014 IP