Question

I had a very helpful answer last week on how to build this script, which works great except one small problem. It’s easiest to explain with visual aid http://avalon.eaw.com/#finishes

this uses the backgroundPosition property to animate the color changes. the only problem is that the “horn” options are hard-coded such that if you are currently viewing a speaker that has white cab with a colored horn and want to change the cabinet to black, it changes the horn to black as well. there is no way currently to view a black cab with colored horn.

to fix it i need to make a conditional statement but am not sure how to make it work. something like

function colorChange() {
    // Use xposition and yposition which are changed by JS function above
    $("#target").css('background-position', xposition+'px '+yposition+'px');
    if$("#target").css('background-position') == {x:-754}
        updatePositions({x:-377});
    if$("#target").css('background-position') == {x:-377}
        updatePositions({x:-754});
}

////// EDIT ///////
a moderator just deleted a follow-up to this problem i posted in order to try and help find an answer. thanks for inhibiting any possible help mr moderator! i am getting increasingly frustrated with this forum. at any rate, i’ve REposted it below in hopes that someone can help find a solution.

well i have an answer that DIDN’T work, but hopefully it will help someone find one that DOES work. after doing some more reading on jquery shorthand i tried making a separate function just for the cabinet-piano swatch:

function colorChangePiano() {
    var bp = $("background-position").css;
    $("#target").css("background-position", (bp = {x:-1131}) ? "{x:-377}" : "{x:0}");
}

i know there’s something wrong with the syntax itself, but a bigger problem is that it’s not roped in to the function that drives the rest of the swatches:

// variable outside of function() scope
var xposition, 
    yposition;

// Update values of xposition and or yposition
function updatePositions(axes) {
    // Check to see which axis was passed in x, y or both, then update values
    if (typeof(axes.x) !== 'undefined') xposition = axes.x;
    if (typeof(axes.y) !== 'undefined') yposition = axes.y;

    //Call function to actually move BG image
    colorChange();
}

// Function move BG image, using variables declared above
function colorChange() {
    // Use xposition and yposition which are changed by JS function above   
    $("#target").css('background-position', xposition+'px '+yposition+'px');
}

for the sake of being through, here’s a couple examples of the html calls:

<a href="#" onclick="updatePositions({x:-1131})"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a>
<a href="#machine" onclick="updatePositions({y:-999})"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p>
<a href="#" onclick="updatePositions({x:-754})"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a></a>
<a href="#" onclick="updatePositions({x:0})"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a>

this site has to go live tonight and i’m starting to freak out a little bit. does anyone have any insight at all?

Answer 1

Thanks to my good (and very smart) friend Eli Huntington there is an answer – albeit a very complicated one. Here is the link to the working website, and the snippets of code that relate to this question. Hopefully it helps some other poor soul. There is a related thread here ( jquery background change one axis only ) with a much simpler related question that I hope gets answered. There just has to be an easier way to do this.

website: http://avalon.eaw.com/

script: (finishScroll and finishScroll2 are localScroll plugin function not related to this particular question)

// FINISHES SCRIPT //
// Make an object to hold various information about the application
finishes = {

cabinets: { // Columns
    colors: ['polar', 'piano'], // Add new cabinet colors here

    /*
     * New cabinet colors are represented in columns and can be 
     * added to the sprite to the right edge.
     * After adding two new columns  to the Sprite
     * add the following after polar_custom: '-1131px' (don't forget comma):
     * 
     *      anycolor_standard: '-1508px' //(i'm guessing)
     *      anycolor_custom:   '-1885px' //(also guessing)
     * 
     */
    piano_standard  : '0px',   // Column where horn matches grill
    piano_custom    : '-377px', // Column where horn is custom color
    polar_standard  : '-754px',
    polar_custom    : '-1131px'
},
colors: { // Rows
    // New colors can be added to the sprite at the bottom and then added last here with the position (from the sprite)
    siren:      '0px',
    medallion:  '-333px',
    starlight:  '-666px',
    machine:    '-999px'
},
current_cabinet_color: 'piano',  // Will be updated by click events to updateCabinet
current_grille_color: 'siren',  // Will be udpated by click events to updateCabinet
current_horn_color: 'standard'  // Will be udpated by click events to updateCabinet

};

function updateCabinet(component, color) {
if(!component || !color) return false;  // Exit if missing values

// Take component and update the 'finishes' object above based on which part we are changing
switch(component) {
    case 'cabinet':
        finishes.current_cabinet_color = color;
        break;
    case 'horn':
        if(color != 'piano' && color != 'polar') {
            finishes.current_horn_color = 'custom';
        } else {
            finishes.current_horn_color = 'standard';
        }
        break;
    case 'grille':
        finishes.current_grille_color = color;
        break;
    default:
        return false;  // Invalid component name passed in
}

// Now that we have updated the 'finishes' object, we can get our xpos and ypos values from it
xpos = finishes.cabinets[finishes.current_cabinet_color + '_' + finishes.current_horn_color];
ypos = finishes.colors[finishes.current_grille_color];

// Finally make sure we have good values for xpos and ypos and do the CSS udpate
if(xpos && ypos) {
    $('#target').css('background-position', xpos+' '+ypos );
}
return true;
}

HTML:

<!-- FINISHES -->
<div id="finishes" class="item"><a name="finishes"></a>
    <div id="swatches" class="content">
        <div class="finishscroll">
            <p class="text">Avalon by EAW represents a radical departure from any dance club loudspeaker ever created, including our own original Avalon Series. Everything about Avalon by EAW breaks new ground. The system design turns the loudspeaker inside-out, mounting the MF/HF horn outside the grille. And the grille - concave and sculpted in clean, straight lines - expresses the symmetry that unifies the design.</p>
            <div id="target"></div>
            <div id="label-cab" class="label">cabinet</div>
            <ul id="swatch-cab" class="swatch">
                <li class="patch"><a href="#piano" onclick="updateCabinet('cabinet','piano')"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a></li>
                <li class="patch"><a href="#polar" onclick="updateCabinet('cabinet','polar')"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a></li>
            </ul>
            <div id="label-horn" class="label">horn</div>
            <div id="content-finishscroll" class="swatch">
                <div class="scroll-section">
                    <ul>
                        <li id="piano" class="patch">
                            <a href="#" onclick="updateCabinet('horn','piano')"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a>
                        </li>
                        <li id="polar" class="patch">
                            <a href="#" onclick="updateCabinet('horn','polar')"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="finishscroll2">
            <div id="label-grille" class="label">grille</div>
            <ul id="swatch-grille" class="swatch">
                <li class="patch"><a href="#siren" onclick="updateCabinet('grille','siren')"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a></li>
                <li class="patch"><a href="#medallion" onclick="updateCabinet('grille','medallion')"><img src="/images/cabinets/swatches/swatch-medallion.jpg" /><p>medallion</p></a></li>
                <li class="patch"><a href="#starlight" onclick="updateCabinet('grille','starlight')"><img src="/images/cabinets/swatches/swatch-starlight.jpg" /><p>starlight</p></a></li>
                <li class="patch"><a href="#machine" onclick="updateCabinet('grille','machine')"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p></a></li>
            </ul>
            <div id="content-finishscroll2">
                <div class="swatch" style="width:73px;">
                    <ul>
                        <li id="siren" class="patch">
                        <a href="#" onclick="updateCabinet('horn','siren')"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a>
                        </li>
                        <li id="medallion" class="patch">
                        <a href="#" onclick="updateCabinet('horn','medallion')"><img src="/images/cabinets/swatches/swatch-medallion.jpg" /><p>medallion</p></a>
                        </li>
                        <li id="starlight" class="patch">
                        <a href="#" onclick="updateCabinet('horn','starlight')"><img src="/images/cabinets/swatches/swatch-starlight.jpg" /><p>starlight</p></a>
                        </li>
                        <li id="machine" class="patch">
                        <a href="#" onclick="updateCabinet('horn','machine')"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="position:absolute; top:450px; left:-60px"><img src="http://avalon.eaw.com/images/shadow-finishes.png" /></div>
    </div>
</div><!-- #finishes -->

happy coding!