Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    Quote Originally Posted by kristinachilds View Post
    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 .

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •