www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Is it possible to attach a style to an image in an array?

  1. #1
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34

    resolved [RESOLVED] Is it possible to attach a style to an image in an array?

    I'm not even sure if I'm asking the right thing: I've got a sequence of images that can be clicked through but I'd like a few - not all - of the images to be shunted a certain number of pixels to the right.
    I don't know if there's a way to attach a style determining the position of an image (maybe 2.png in the example below) relative to the position of images in the rest of the sequence whilst leaving the rest alone?

    Code:
    <script type="text/javascript">
    function preload(arr) {
    for(var i=0; i<arr.length; i++) (new Image()).src = arr[i];
    }
    var picsA = ["1.png", "2.png", "3.png", "4.png", "5.png", "6.png"];
    preload(picsA);
    var index = 0; picNumberA = 0;
    function showNextPicA() {
    if (picNumberA == (picsA.length -1)) {
    picNumberA = 0;
    } else {
    picNumberA = picNumberA + 1;
    }
    document.getElementById('placeholderA').src = picsA[picNumberA];
    }
    </script>
    I'm really sorry to be straying so far beyond my understanding and so grateful for any help - thanks for reading so far!

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Something like this might work:

    Code:
    <script type="text/javascript">
    function preload(arr) {
    for(var i=0; i<arr.length; i++) (new Image()).src = arr[i];
    }
    var picsA = ["1.png", "2.png", "3.png", "4.png", "5.png", "6.png"];
    var styleA = [0,10,0,0,0];
    preload(picsA);
    var index = 0; picNumberA = 0;
    function showNextPicA() {
    if (picNumberA == (picsA.length -1)) {
    picNumberA = 0;
    } else {
    picNumberA = picNumberA + 1;
    }
    document.getElementById('placeholderA').src = picsA[picNumberA];
    document.getElementById('placeholderA').style.marginLeft=styleA[picNumberA]+"px";
    }
    </script>
    Might have to use paddingLeft instead marginLeft - not where I can test at the moment....
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Oh my gosh you did it! Record response time? That works a treat! Thank you so much! That really saves the day!

    Uh... now I feel ungrateful but I've suddenly got a part two...

    Basically these sequences are also drag and drop-able, thanks to an external .js file and initiated like this:

    Code:
    <img src="1.png" id="placeholderA" class="dragableElement" onClick="return showNextPicA();">
    The problem I've created is that when you release from dragging, the onClick="return showNextPicA();" kicks in.

    Is there any way to stop this happening when the 'click' is part of a drag? I was trying:

    Code:
    ondragend="return false;"
    but that's probably nonsense. Again, I'm well over my head and so amazed by the knowledge around here - thanks again TheBearMay!

  4. #4
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    I've been playing around, but can't seem to come up with a sandbox example that will bubble the way you're describing it. Is there somewhere I can grab the code you're using at the moment?
    54 68 65 42 65 61 72 4D 61 79

  5. #5
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Sorry, I should have done that! Thanks for having a go:

    http://www.suresure.co.uk/Temp/drag.html

    and here's the code I'm using:

    http://www.suresure.co.uk/Temp/dragable-content.js

    The first click/drag is unresponsive then every drag after that seems doomed to also a click. Thanks again for this, I really appreciate it.

  6. #6
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Sorry about the delay, but I believe I may have a way around this finally. Tried canceling the Click event, but when I did that the drag didn't work so a couple things to do:

    1. Insert the line:
      Code:
      var lastMove;
      at the top of the drag script (right after the comment block is as good a place as any).
    2. Insert this code as the last line of the function moveDragableElement:
      Code:
      lastMove = new Date();
    3. Insert this code as the first line of your function showNextPicA
      Code:
      if (new Date() - lastMove < 500) return false;


    Code simply makes sure that there is a 500ms pause between the last movement of the image and taking action on the onclick event - you can play around with the 500ms in the last line to suit your sensitivity on the click.
    54 68 65 42 65 61 72 4D 61 79

  7. #7
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    I can't believe you persisted with this - it works beautifully! Thank you so much - I wish I had some knowledge to give back! Really, massive thanks for this.

  8. #8
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Hang around here long enough and keep trying things and asking questions, the knowledge will come.
    54 68 65 42 65 61 72 4D 61 79

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles