Trying to read id value of img inside a div

JavaScript
1

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:


<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>



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

Tried doing it by src too, but just cant seem to get the value I need.


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

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:


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

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.


<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

Just be aware that the :nth-child() selector only works on IE9+ (http://www.quirksmode.org/css/selectors/).

6

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

I think you’re close–what about something like:


if($('#BackgroundImage img.attr(id)')=='image4'){ $('.text_Colour').css({ color: '#000000' }); }else{ $('.text_Colour').css({ color: '#ff0000' }); }
8

You’re already keeping track of the current ID in your JS, because you’re using it here to change the image:

$("#SiteWrapper .bgMove #BackgroundImage .BackgroundImage:eq("+currentID+")").fadeIn(1500);

so why not just check against that value?

if(currentID == 4){
    $('.text_Colour').css({ color: '#000000' });
}else{
    $('.text_Colour').css({ color: '#ff0000' });
}
9

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:


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

strange both ideas make every sense and should work, but they dont! AAAAAAAAGGGGGGGHHHHHHHHH!!

11

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

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;

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

You nailed it, thanks fretburner…

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

Thank you very much, always much appreciated.

Lee