CodingForums.com - conditional background position link based on current position

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - conditional background position link based on current position (http://www.codingforums.com/showthread.php?t=264450)

conditional background position link based on current position

I have a script that works great except one small problem. It's easiest to explain with visual aid http://avalon.eaw.com/#finishes

this uses the background position 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:

Code:

function colorChange() {

    $("#target").css('background-position', xposition+'px '+yposition+'px');

    if $("#target").css('background-position') == {x:-754} {

        updatePositions({x:-377});

    } else if $("#target").css('background-position') == {x:-377} {

        updatePositions({x:-754});

    }

}

i'm very new to javascript so please be gentle :)

Quote:

Originally Posted by kristinachilds (Post 1239409)

i'm very new to javascript so please be gentle :)

This is jquery, it's a shorthand library for javascript.

If statement must be in parentheses.

Code:

if $("#target").css('background-position') == {x:-754} {

Code:

if ($("#target").css('background-position') == {x:-754}) {

Don't know if this will fix your problem, but it is on the list. You have a second if statement .

i feel like it's *this close*

okay, so really what i want to do is have a single piano swatch check to see where the background position currently is. if it's xposition is -1131 i want it to return an xposition of -377. if it's not -1131 it needs to return to 0. i've been reading up a bit more on jquery shorthand and thought maybe this would work but it doesn't

Code:

function colorChangePiano() {

        var bp = $("background-position").css;

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

}

not sure if you looked at the scripts.js file at all, but the rest of the swatches run on this function

Code:

var xposition, 

    yposition;



// Update values of xposition and or yposition

function updatePositions(axes) { // Should be {x:0,y:0}

        // 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');

}

and these are examples of the html calls

Code:

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

so would it be best/easiest for me to write a conditional statement within the existing updatePositions function instead of writing a whole new function? am i even close on the conditional function above?

also, if there WAS a conditional statement for the single piano swatch, would the html call then look like this?

Code:

onclick="updatePositions()"

this site has to go live tonight and i'm starting to freak out a little bit...

Answer... sortof

A solution - but not the real answer - came courtesy of my friend Eli Huntington (thanks Eli!). A simpler question closer to the original is posted to stackoverflow.com and if anyone cares to try an answer (or reap the results) head over here. I still beleive there is a much less complicated way of achieving this through jquery. The original scripts and code is over at avalonbyeaw.com/index_testes.html so we can keep tinkering with possible solutions.

Here's the solution that got Avalon by EAW's finishes page working:

Code:

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

}

and the html:

Code:

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

hope this helps someone at some point.