SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Headline ticker help?

    Hi All,

    I have a ticker that works well and shows a new section every 'x' seconds.

    http://www.sloughtownfc.net/numbering.php

    However, what i'd really like is the numbering to change colour depening on what the current ticker is, or number has been clicked on.

    HTML Code:
    <input type="image" name="one" onClick="DisplaySlides(0)" src="numbers/1.jpg" value="First Story" />
    <input type="image" name="two" onClick="DisplaySlides(1)" src="numbers/2.jpg" value="Second Story" />
    <input type="image" name="three" onClick="DisplaySlides(3)" src="numbers/3.jpg" value="Third Story" />
    <input type="image" name="four" onClick="DisplaySlides(4)" src="numbers/4.jpg" value="Fourth Story" />
    Is this possible and would someone kindly be able to help me do this?

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You would change the active input element to a different src image, and change the rest back to their default image values.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Would it be possible to post an example?

    Many Thanks

    Chris

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It would better if the images were in a div, because then we could do things like this

    Code html4strict:
    <div id="slides">
        <input type="image" ...>
        <input type="image" ...>
        ...
    </div>

    Code javascript:
    var slides = document.getElementById('slides');
    var slideInputs = slides.getElementByTagName('input');
    for (var i = 0; i < slideInputs.length; i++) {
        if (slideInputs.type === 'image') {
            // do stuff
        }
    }

    But with what we have here right now, we'll have to use a slightly different way.

    What will work is to add the image for the active number to the array that already exists

    Code javascript:
     ['numbers/one.jpg', 'First Headline', '<span class="topstory">First Headline</span><br /><span class="text">Info goes here</span>', 'numbers/1active.jpg'],

    Then use that active image information from the DisplaySlides() function, where you add the following

    Code javascript:
    var inputs = document.getElementsByTagName('input');
    var slideInput;
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === 'image') {
            slideInput = inputs[i];
            if (i === SNo) {
                slideInput.oldImage = slideInput.src;
                slideInput.src = imgArray[SNo][3];
            } else {
                if (slideInput.oldImage) {
                    slideInput.src = slideInput.oldImage;
                    slideInput.oldImage = null;
                }
            }
        }
    }
    Last edited by paul_wilkins; Apr 21, 2008 at 13:51.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Magic! Thank you so much!

  6. #6
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Sorry to be a pain, but I can't seem to get it working. I've added the code, but it's not displaying the numbers as a different colour.

    Please could you/anyone help?

    http://www.sloughtownfc.net/numbering.php

    Many Thanks

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by chris_stfc View Post
    Sorry to be a pain, but I can't seem to get it working.
    Pleas re-read the following.

    Quote Originally Posted by pmw57 View Post
    Then use that active image information from the DisplaySlides() function, where you add the following
    The code that was given should be added to the afore-mentioned function, not placed outside of it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks, i've tried adding that within the function displayslides() but it still does not seem to work (I tried that originally like so)?

    http://www.sloughtownfc.net/numbering.php

    Thanks

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The numbers that show are images, such as "numbers/1.jpg"
    For them to be a different colour, you need to show a different image that is of that different colour.

    That different image is defined at the end of the imgArray array, "numbers/1active.jpg" for example.

    If you haven't created those images of a different colour, there won't be anything to see, and those other images will instead show the alt attribute text.
    Last edited by paul_wilkins; Apr 21, 2008 at 12:42.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    That's the bit I don't get though. I have created the images. I've tried the paths for the alternative images as asbolute and relative, and they are defintely there and uploaded to my server?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It looks like an array index is missing. Do you see what is being assigned to the image?
    'http://www.sloughtownfc.net/numbers/four.jpg,Fourth&#37;20Headline,%3Cspan%20class=%22topstory%22%3EFourth%20Headline%3C/span%3E%3Cbr%20/%3E%3Cspan%20class=%22text%22%3EMore%20info%20yet%20again%3C/span%3E,http://www.sloughtownfc.net/numbers/4active.jpg'

    This means that the whole array is being assigned, instead of just part of it.
    The appropriate line on your page looks like this:

    Code javascript:
    slideInput.src = imgArray[3];

    That [SNo] is missing from the code on your page.
    Please update your code so that it looks like this:

    Code javascript:
    slideInput.src = imgArray[SNo][3];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •