Frage

Trying to change the background color of a box when it is flipped (it would be much easier to show you what I mean: (http://iam.colum.edu/students/jordan.max/demo/demo.php). I am new to jQuery and did a tutorial, and very easily able to de-engineer the code and figure out what to do to make it do what I want. I did this with relative ease up until I tried to change the color of the background when the element is flipped. It's very odd, because when I use 'inspect element' and i click the mouse thing over the object it says I set the background in "element" but that is non-existent in my CSS. Not trying to be confusing (this probably did sound confusing which is why I gave the link), hopefully someone knows what my issue is.

demo.php

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Sponsor Flip Wall With jQuery &amp; CSS | Tutorialzine demo</title>

        <link rel="stylesheet" type="text/css" href="styles.css" />
        <link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script type="text/javascript" src="jquery.flip.min.js"></script>

        <script type="text/javascript" src="script.js"></script>

    </head>

    <body>

        <h1>Sponsor Flip Wall With jQuery &amp; CSS</h1>
        <h2><a href="http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/">Go Back to Portfolio &raquo;</a></h2>

<?php

    // Each sponsor is an element of the $sponsors array:

    $sponsors = array(
        array('github','The biggest social network in the world.','http://www.facebook.com/'),
        array('twitter','The leading software developer targeted at web designers and developers.','http://www.adobe.com/')
    );


    // Randomizing the order of sponsors:

    shuffle($sponsors);

?>



        <nav id="main">

            <figure class="sponsorListHolder">


        <?php

            // Looping through the array:

            foreach($sponsors as $company)
            {
                echo'
                <div class="sponsor" title="Click to flip">
                    <div class="sponsorFlip" > 
                            <p>'.$company[0].'</p>
                    </div>

                    <div class="sponsorData">
                        <div class="sponsorDescription">
                            '.$company[1].'
                        </div>
                        <div class="sponsorURL">
                            <a href="'.$company[2].'">'.$company[2].'</a>
                        </div>
                    </div>
                </div>

                ';
            }

        ?>

                <aside class="clear"></aside>
            </figure>

        </nav>
        <footer>
            <p class="note">None of these companies are actually sponsors of Tutorialzine.</p>
        </footer>
    </body>
</html>

script.js

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden from view with display:none)
                    // into the clicked .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

styles.css

*{
    /* Resetting the default styles of the page */
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:lightgreen;
    font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
    margin-bottom:30px;

}

.sponsor{
    width:400px;
    height:400px;
    float:left;
    margin:4px;
    padding: 30px;
    background: #F66F89;
    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsor:active{
    background: #F66F89;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;  
    background: #61D89F;
    color:#0196e3;
    font-family: 'Oregano', cursive;
    font-size: 2em;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}



.sponsorFlip img{
    /* Centering the logo image in the middle of the sponsorFlip div */
    /* Not being used right now 
    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
    */
} 
.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}

.sponsorDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;

}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}


/* The styles below are only necessary for the styling of the demo page: */


#main{
    position:relative;
    margin:0 auto;
    width:960px;
}

h1{
    padding:30px 0;
    text-align:center;
    text-shadow:0 1px 1px white;
    margin-bottom:30px;
    background-color: #F66F89;
}

h1,h2{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

h2{
    font-size:14px;
    font-weight:normal;
    text-align:center;

    position:absolute;
    right:40px;
    top:40px;
}

.note{
    font-size:12px;
    font-style:italic;
    padding-bottom:20px;
    text-align:center;
}

a, a:visited {
    color:#0196e3;
    text-decoration:none;
    outline:none;
    color: lightgreen;
}

a img{
    border:none;
}
War es hilfreich?

Lösung

If I'm not mistaken you can use "color" as a parameter

   elem.flip({
                direction:'lr',
                speed: 350,
                color: 'blue', //color
                onBefore: function(){}
    })
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top