SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to read id value of img inside a div

    I have a set of images fadeing in and fadeing out, and basically i want some text to follow suit, so when the background of the image is white the text is black and when the background if the image is black the text is white.

    This is the code of that bit below:

    Code:
    <div class="text_Colour">
    <h1 style="text-transform:uppercase; font-size:14px; font-weight:normal;">James Sommerin Restaurant Penarth...</h1>
    </div>
    
    <div id="BackgroundImage">
    <img id="image1" class="BackgroundImage ImageLeft" alt="" src="images/home_Slider/Sommerin_4.jpg">
    <img id="image2" class="BackgroundImage ImageLeft" alt="" src="images/home_Slider/Sommerin_3.jpg">
    <img id="image3" class="BackgroundImage ImageLeft" alt="" src="images/home_Slider/Sommerin_2.jpg">
    <img id="image4" class="BackgroundImage ImageLeft" alt="" src="images/home_Slider/Sommerin_1.jpg">
    </div>
    Code:
    if($('#BackgroundImage.img')=='image4'){
    $('.text_Colour').css({ color: '#000000' });
    }else{
    $('.text_Colour').css({ color: '#ff0000' });
    }
    I dont think I'm far off if it cant be done, but could do with some help.

    Here is the link to see it in action.

    http://www.accend4web.co.uk/sommerin/main.php

  2. #2
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried doing it by src too, but just cant seem to get the value I need.

    Code:
    if($('#BackgroundImage img src')=='images/home_Slider/Sommerin_1.jpg'){
    $('.text_Colour').css({ color: '#000000' });
    }else{
    $('.text_Colour').css({ color: '#ff0000' });
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Germany
    Posts
    20
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why do you use jQuery for this at all? If it isn't dynamic, but rather all of them have a fixed background colour, then just add the text colour with:

    Code:
    .text_Colour {
        color: #ff0000;
    }
    .text_Colour:nth-child(4) {
         color: #000000; 
    }
    * assuming that this is the order for the text

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right I see, i didnt know this but it will need to be changed slightly as its the 4th child of another div if you know what I mean that needs to change the text colour of content of some other div.

    Code:
    <div class="c_content">
    <div class="text_Colour">
    <h1 style="text-transform:uppercase; font-size:14px; font-weight:normal;">James Sommerin Restaurant Penarth...</h1>
    </div>
    <div id="BackgroundImage">
    <img id="image1" class="BackgroundImage ImageLeft" alt="" src="images/home_Slider/Sommerin_4.jpg">
    <img id="image2" class="BackgroundImage ImageLeft" alt="" src="images/home_Slider/Sommerin_3.jpg">
    <img id="image3" class="BackgroundImage ImageLeft" alt="" src="images/home_Slider/Sommerin_2.jpg">
    <img id="image4" class="BackgroundImage ImageLeft" alt="" src="images/home_Slider/Sommerin_1.jpg">
    </div>
    </div>
    So the nth-child(4) child bit needs change to the images in the other div

  5. #5
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,388
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Just be aware that the :nth-child() selector only works on IE9+ (http://www.quirksmode.org/css/selectors/).
    Last edited by fretburner; Aug 5, 2013 at 05:09. Reason: Added reference

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi fretburner,

    I'm struggling to get it working anyway, as cant seem to work out how to get it to read the value of another div to influence the tect colour of an element in another div.

    The way I had it with jscript worked at one point, and then when I added another image it seemed to fall out of sink.

  7. #7
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you're close--what about something like:
    Code:
    if($('#BackgroundImage img.attr(id)')=='image4'){ $('.text_Colour').css({ color: '#000000' }); }else{ $('.text_Colour').css({ color: '#ff0000' }); }

  8. #8
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,388
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    You're already keeping track of the current ID in your JS, because you're using it here to change the image:
    Code JavaScript:
    $("#SiteWrapper .bgMove #BackgroundImage .BackgroundImage:eq("+currentID+")").fadeIn(1500);

    so why not just check against that value?
    Code JavaScript:
    if(currentID == 4){
        $('.text_Colour').css({ color: '#000000' });
    }else{
        $('.text_Colour').css({ color: '#ff0000' });
    }

  9. #9
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys,

    Like you i thought I was close too, but for some reason the images are not working as I thought and when i try and echo it out using document.write I get white out.

    Have put the code as below, and still seems to be a problem somewhere:

    Code:
    function changeBackground() {
        //console.log(currentID);
        if(currentID == 1){
            $("#BackgroundImage").stopTime();
            changeBgTimer = 4000;
            $("#BackgroundImage").everyTime(changeBgTimer, function(){
                changeBackground();
            });
            $("#SiteWrapper .bgMove #BackgroundImage .BackgroundImage:eq("+currentID+")").fadeIn(500);
        } 
        else {
    	    $("#BackgroundImage").stopTime();
            changeBgTimer = 4000;
            $("#BackgroundImage").everyTime(changeBgTimer, function(){
                changeBackground();
    	    });
            $("#SiteWrapper .bgMove #BackgroundImage .BackgroundImage").fadeOut(1500);
    	    $("#SiteWrapper .bgMove #BackgroundImage .BackgroundImage:eq("+currentID+")").fadeIn(1500);
    		if($('#BackgroundImage img.attr(id)')=='image4'){ $('.text_Colour').css({ color: '#000000' }); }else{ $('.text_Colour').css({ color: '#ff0000' }); }
    	}
        if (currentID + 1 == totalImage) currentID = 0; else currentID++;
    }

  10. #10
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    strange both ideas make every sense and should work, but they dont! AAAAAAAAGGGGGGGHHHHHHHHH!!

  11. #11
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    somehting isnt right guys, its not counting the images as normal, it cant be as both your ideas should do the trick but for some reason or another its out of skip

  12. #12
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,388
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    OK, I saved a copy of your page to my machine to play around with, and I've got a solution for you (which also cuts out some redundant code). Note that I've only shown the section of code which needs changing:

    var changeBgTimer = 5000;
    var currentID = 1;

    Code JavaScript:
    function changeBackground() {
        var textColour = (currentID == 3) ? '#ffffff' : '#000000';
     
        $('.text_Colour').css({ color: textColour });
        $("#SiteWrapper .bgMove #BackgroundImage .BackgroundImage").fadeOut(1500);
        $("#SiteWrapper .bgMove #BackgroundImage .BackgroundImage:eq("+currentID+")").fadeIn(1500);
     
        currentID = (currentID + 1 == totalImage) ? 0 : currentID + 1;
    }

    You don't need to keep calling the everyTime function. Just once when the page loads is enough.

  13. #13
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You nailed it, thanks fretburner....

    Works really nice now and can take it forward at last.

    Thank you very much, always much appreciated.

    Lee


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
  •