Toggle card position using jQuery

StackOverflow https://stackoverflow.com/questions/23433294

Domanda

I'm trying to set up a website of bios for my characters I've made up. Each bio is on a "card" with class .container. When the page loads, all the cards are on the left side of the screen, and a dialog appears telling the user that clicking a card one "activates" it, i.e. "moves it to the right-side of the screen to be read."

I've successfully coded the page so that when clicked, the appropriate card moves to the right side of the screen. I've also successfully programmed the code so a double-click returns the card to its place on the left side of the screen. My problem is that that isn't what I want. I want a single click to activate a inactive/deactivated card, and I want a single click to deactivate an active one.

As I said, the code ran fine when the two actions (activating and deactivating) were in their own event handlers, but I cannot get them to run when they're in the same event handler. I can't figure out why.

HTML:

<html>
<head>
    <title>My Characters</title>
    <link rel="stylesheet" type="text/css" href="data\My Characters.css"/>
    <script src="data/jQuery.js"></script>
</head>

<body>
<header>
    <h1>My Characters</h1>
    <h2>All the different characters I've created over the years, many of whom have superpowers based on animals.</h2>
</header>

<article id="background">
<section id="main">

<section class="container" id="Vacuum">
    <h3>The Vacuum</h3>

    <p>
        Born the child of an inventor, the Vacuum's father made it big when he perfected a hand-held design for the L-RAD sonic beam weapon. Licensing his design to the military netted the Vacuum's immediate family 8.5B USD.
    </p>

    <p>
        As a result, from a young age, the Vacuum learned martial arts, developing a unique system devoid of blocks and strikes, relying instead on locks, flips, and holds.
    </p>

    <p>
        A secondary effect of his contact with military personnel is that the Vacuum was genetically altered in such a way that he can now control air, i.e. <i>aerokinesis</i>. Due to the extent of his powers , he has steel braces around his wrists, limiting his powers. he wears a comfortable sweat-suit with a custom mask that has a built-in night-vision visor.
    </p>
</section>

<section class="container" id="Mu">
    <h3>Mu</h3>
    <p>
        Mu is a lifelong crime-fighter, staring with his fifteen-year military career. After ending his enlistment as a general, he spent twenty-five years as an undercover police officer, and another ten years behind a desk at the FBI.
    </p>

    <p>
        During his time with the military, he was experimented on by a secret Government department, genetically altering Mu in such a way as to allow him to control friction.
        <br />
        The purpose of the experiment was to enable Mu to chase down and capture the previous genetic experiments: civilian and military prisoners recruited by a mole hoping to overthrow the US Government from within.
    </p>
</section>

<section class="container" id="Elasmobranchii">
    <h3>Elasmobranchii</h3>
    <p>
        A former Navy SEAL recruited by the mole to act as a field leader for the traitorous plot. Elasmobranchii joined "the cause" after his unit was denied benefits following a disastrous mission. 
        The mission was an utter failure due to a clerical error, resulting in a cover-up. The cover-up was successful due to both a smear campaign and a few choice assassinations directed at the SEALs involved.
    </p>

    <p>
        Elasmobranchii is named for the subclass containing sharks, skates, and rays. In accordance with this name, Elasmobranchii has superhuman senses of smell, touch, and hearing; as well as superhuman strength and speed. His greatest sense, however, is his electroreceptive sense: he can detect a one-volt battery from 1,000 miles away.
        <br />
        As if all this weren't enough, he also has a long, venomous, barbed tail he can use as an additional weapon or to pick up small objects.
    </p>
</section>

<section class="container" id="Phyllobates">
    <h3>Phyllobates</h3>

    <p>
        Phyllobates was a promising boxer that spent his nights doing "favors" for the mob. After several years in prison, he was recruited by a Government mole to participate in a genetic testing program. The result of this testing was that Phyllobates could punch in 15/100ths of a second, exude any poison ingested through his pores, and leap about sixty feet up or over. He also has the ability to climb walls.
    </p>
</section>

</section>  
</article>
<script src="data/My Characters.js"></script>
</body>
</html>

CSS:

*
{
    position: static;
}

body
{
    background-image: url('Scorched Asphalt.png');
    background-size: cover;
    margin: 0;
    padding: 0;
}

header
{
    width: 100%;
    text-align: center;
    background-color: rgba(238, 238, 238, 1);
    border: 2px solid black;
    margin: 0;
    padding: 0;
}

h1
{
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
}

h2
{
    margin-top: 0;
    font-size: large;
}

hr
{
    color: black;
    border: 1px double black;
    border-style: double;
    width: 75%;
    margin: 0;
}

#main
{
    width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1em;
    padding-left: 1em;
    line-height: 1em;
}

h3
{
    padding: 0;
    margin: 0;
}

#Vacuum
{
    left: 50px;
    top: 80px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, 1);
    color: white;
}
#Mu
{
    left: 75px;
    top: 125px;
    background-color: rgba(125, 100, 50, 1);
}

#Elasmobranchii
{
    left: 100px;
    top: 165px;
    background-color: rgba(50, 100, 125, 1);

}

#Phyllobates
{
    left: 125px;
    top: 205px;
    background-color: rgba(255, 255, 255, 1);
}

.container
{
    width: 33%;
    height: 67%;
    border: solid black 2px;
    margin: 0;
    padding: 1em;
    border-radius: .5em;
    font-weight: bold;
    position: absolute;
}

.active
{
    left: 33%;
    top: 380px;
}

jQuery/Javascript:

$(window).load(function(){

    //Inform the user on how the site works
    alert('\nClick a card to make it active.\nClick it again to de-activate it.');

    $('.container').click(function()
    {
        if($(this).css('left') == '50px'||'75px'||'100px'||'125px')
    {
        //Restore #Vacuum to its original position
        $('#Vacuum').css('left', '50px');
        $('#Vacuum').css('top', '80px');
        $('#Vacuum').css('z-index', '1');

        //Restore #Mu to its original position
        $('#Mu').css('left', '75px');
        $('#Mu').css('top', '125px');
        $('#Mu').css('z-index', '2');

        //Restore #Elasmobranchii to its original position
        $('#Elasmobranchii').css('left', '100px');
        $('#Elasmobranchii').css('top', '165px');
        $('#Elasmobranchii').css('z-index', '3');

        //Restore #Phyllobates to its original position
        $('#Phyllobates').css('left', '125px');
        $('#Phyllobates').css('top', '205px');
        $('#Phyllobates').css('z-index', '4');

        //Make the clicked '.container' the active one
        $(this).css('top', '15%');
        $(this).css('left', '50%');
        $(this).css('z-index', '5');
        $(this).addClass('active');
    }//End of IF condition

    else
    {
        //Restore #Vacuum to its original position
        $('#Vacuum').css('left', '50px');
        $('#Vacuum').css('top', '80px');
        $('#Vacuum').css('z-index', '1');

        //Restore #Mu to its original position
        $('#Mu').css('left', '75px');
        $('#Mu').css('top', '125px');
        $('#Mu').css('z-index', '2');

        //Restore #Elasmobranchii to its original position
        $('#Elasmobranchii').css('left', '100px');
        $('#Elasmobranchii').css('top', '165px');
        $('#Elasmobranchii').css('z-index', '3');

        //Restore #Phyllobates to its original position
        $('#Phyllobates').css('left', '125px');
        $('#Phyllobates').css('top', '205px');
        $('#Phyllobates').css('z-index', '4');

        //De-activate the clicked '.container'
        $(this).removeClass('active');
    }
})//End of container.click

});//End of document
È stato utile?

Soluzione

Hi there were a bunch of things wrong with your approach

here's a working jsfiddle: http://jsfiddle.net/TpxNa/1/

1) you can't use addclass to adjust styles with your jquery since you are setting inline styles with the jquery already and the inline will take precedence.

2) you have to use $(document).on('click' ... instead of .click(function()... because we need to dynamically change the targets for jquery.

css add an inactive class

.inactive {
}

Html

add inactive to all the containers like below

<section class="container inactive" id="Phyllobates">

jquery

$(document).ready(function () {
    alert('Click a card to make it active.Click it again to de-activate it.');

    $(document).on('click', '.inactive', function () {
        $('#Vacuum').css({ 'left': '50px', 'top': '80px', 'z-index': '1' });
        $('#Mu').css({ 'left': '75px', 'top': '125px', 'z-index': '2' });
        $('#Elasmobranchii').css({ 'left': '100px', 'top': '165px', 'z-index': '3' });
        $('#Phyllobates').css({ 'left': '125px', 'top': '205px', 'z-index': '4' });

        $(this).css({ 'top': '15%', 'left': '50%', 'z-index': '5' });
        $(this).addClass('active');
        $(this).removeClass('inactive');
    });

    $(document).on('click', '.active', function () {
        $('#Vacuum').css({ 'left': '50px', 'top': '80px', 'z-index': '1' });
        $('#Mu').css({ 'left': '75px','top': '125px', 'z-index': '2' });
        $('#Elasmobranchii').css({ 'left': '100px', 'top': '165px', 'z-index': '3' });
        $('#Phyllobates').css({ 'left': '125px', 'top': '205px', 'z-index': '4' });

        $(this).removeClass('active');
        $(this).addClass('inactive');
    });
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top