SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Same screen dynamic data

    I'm looking to send data to another region of the page. To be more exact I would like that when an image is clicked the id of that image will be sent to a separate region of the same screen and later (with other information) will be sent on to me so that I can identify which image the user selected. I think it's not so tough but I just can't think of the best way of doing it although I'm pretty sure it requires JS which is why I've posted here. ANy help is always appreciated.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    If the images you want to affect are all in the same area, such as contained in a div, you don't need to do anything special to them.

    Code javascript:
    var el = document.getElementById('gallery');
    var els = document.getElementsByTagName('img');
    var i;
    for (i = 0; i < els.length; i += 1) {
        els[i].onclick = setId;
    }

    If you want this to occur to all images with an id attribute, you don't have to do anything to the images either.

    Code javascript:
    var els = document.getElementsByTagName('img');
    var el;
    var i;
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.id > '') {
            el.onclick = setId;
        }
    }

    If the images you want to affect are scattered around though, you should apply a class name to them and then use that to attach an event to them.

    Code javascript:
    var els = document.getElementsByTagName('img');
    var el;
    var i;
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.className = 'monitor') {
            el.onclick = setId;
        }
    }

    Either way though, set the onclick event to a function that will process the image.

    Code javascript:
    function setId() {
        var form = document.getElementById('myForm');
        form.elements.imageId = this.id;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks for the direction although I must apologise as I can't get it working so let me just clear some things up.

    1) Firstly, just to make sure - is this response designed to transfer the image id to another section of the same screen?

    I've used the second code as I thought it most appropriate from your description.

    2) Where should I position that segment of code?

    3) What is the variable (that I should be changing in accordance with my images)?

    thanks again

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could store the id of the image in a hidden input element for that image. I would also suggest toggling some kind of border on the image so the user knows which images they have selected.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do i go about that Brian? - the hidden input element I mean.
    Last edited by g_force; Sep 10, 2008 at 14:58. Reason: forgot a detail

  6. #6
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I am assuming you intend the user will submit the page at some point and your php/.net or whatever back end you are using will need to know what images a user selected. So I would place a hidden element beside each image which is simply an input type="hidden" -

    Code:
    <input id="imageid01_ind" type="hidden" value="no" />.
    for example where the 01 would be the id of the image and the value of the input is set to no by default.

    When a user clicks on an image I would give it a border to show them they have selected it and set the value of the hidden input to "yes" or remove the border if they are de-selecting it and set the value of the hidden element to "no".

    When the user submits the page I can query each hidden input and if it's value is yes then I know the image associated with that hidden input was selected.

    The downside to this is it's an unobtrusive solution. i.e. someone with script disabled will not be able to use the page. The other option is to use plain old visible checkboxes/radiobuttons beside each image and query them when the user submits the page.

    Again I'm not certain I understand exactly what you are trying to do so it's a bit of guesswork.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are a large number of images on screen which correspond to different products - I want that the user will be presented with their selection in another area of the screen for their confirmation. Also after they submit some more details; all of the information (including image identification) will be posted to me. I hope that's clear.

    For space reasons I cannot use the checkbox suggestion. Also I was thinking about changing the images when selected (rather than borders)

    The script enabled comment is a worry. Perhaps I would be better off sending the info to another page - what do you think? And how could I do that?

    thanks>

  8. #8
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well why not just move the images to the second area showing the user what he has selected and leaving what they haven't selected in the original part of the page. From a usability point of view it makes scanning easier for the user.

    The checkbox scenario while not good for space issues could still be used as a fallback for non-script enabled browsers.

  9. #9
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because each image is the same it is more the area that they represent so it is important that the id of the image is shown in the other region - the image would not differentiate it trust me.

  10. #10
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well if you look at the code pmw57 posted you could make the onclick event for each image in the same way. Maybe call the onclick function something like moveImage. In this function you'll need to manipulate the dom by creating a some kind of span to display the id and appending it to the secondary area.

    If for example you have a div called selectedimages (<div id="selectedimages"></div>) then your function might do the following:-

    Code:
    function moveImage()   {
       var seldiv = document.getElementById("selectedimages");
       var imgidcaption = document.createElement("span");
       imgidcaption = this.id + "_selectedcaption";
       imgidcaption.className = "idlabel";
       var theText = document.createTextNode(this.id);
       imgidcaption.appendChild(theText);
       seldiv.appendChild(imgidcaption);
    }
    Something along those lines. I'm giving this new span a class so it's appearance in this seperate area can be customised. So every time an image is clicked a span will appear in this div displaying the id of the image. Certain checks would have to be done though to ensure the span isn't entered twice for an image. Also if you need to know the selected image id values when the user submits the page you won't get them from this so you'll still need to use something like a hidden input to store them.

    If you want to show a copy of the image in this seperate are you'd need to create a new image and set it's values according the clicked image:-

    Code:
    var newimg = document.createElement("img");
    newimg.id = this.id + "_copy";
    newimg.src = this.src;
    seldiv.appendChild(newimg);

  11. #11
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I'm posting a test page link so that you can get more of an idea of what I'm doing:

    Test Page (currently not available in IE for some idiotic reason)

    Can you advise me from here what I'm doing wrong 'cos presently I can't get the image info onto the 2nd slide in the centre of the screen.

    >In appreciation_
    Last edited by g_force; Sep 11, 2008 at 07:41.

  12. #12
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That page really is a mess if you don't mind me saying. I put up a cleaner example to see if it might help you. just view source to get the script/styles. I would recommending putting both script and styles in external files though once you have it working.

    http://www.systemdotweb.com/imagemove.htm

  13. #13
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    imagine my house! Anyway thanks so much for your efforts here - really impressive. I'm just messing around with that at the moment trying to get just one content div where all of the image ID's can go - you see it's not necessary for the images to go into the content div although that is pretty nice! - Rather I'm trying to make the image change where it is to indicate the selection (you originally suggested a border) and only the ID to move to the content div. Other content will also be in the slides.


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
  •