Replace a div when arriving at a given input

Asked

Viewed 85 times

2

I’m making a form where the user should enter the credit card details. When informing appears in the div above, but when you arrive at a certain input (Security code) I want you to hide the div from above and show the div that is hidden. Follows the code:

https://jsfiddle.net/3nrqbn9L/ (There was no character limit available to post here.)

I’ve tried that way:

$('#cartaoCodigoSeguranca').focus(function()){
$('.flip-container').css('transform: rotateY(180deg');}
css

2 answers

1


First, your script has some syntax errors, you closed a parentheses in the wrong place, and also closed a quotes in the wrong place...

inserir a descrição da imagem aqui

Now let’s go to your code

inserir a descrição da imagem aqui

After fixing this I also set the CSS for when you do the .focus() in the input right he rotate the Card, and the .blur() it returns the card to the original position.

What I did was put a new class (.gira) in the flipcard when you focus on input, this new class has the same property as the :hover. That was it, and .blur() I take this class.

Follow the final code. OBS: I adjusted the CSS of div.content just so you can see the focus on the input by activating the animation. TB took Base-64 and SVG just to fit the code here in Snippet

$('#cartaoCodigoSeguranca').focus(function () {
    $('.flip-container').addClass('gira');
})
$('#cartaoCodigoSeguranca').blur(function () {
    $('.flip-container').removeClass('gira');
})
@font-face {
    font-family: 'ocr_a_std';
    src: url();
    font-weight: normal;
    font-style: normal;
}

.mk-icon-sim,
.mk-icon-visa,
.mk-icon-world-map {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.mk-icon-world-map {
    background-image: url();
}

.mk-icon-visa {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="176.982px" height="54.262px" viewBox="19.375 17.805 176.982 54.262" enable-background="new 19.375 17.805 176.982 54.262" xml:space="preserve"><g><polygon fill="#005098" points="81.723,71.287 90.678,18.719 105.012,18.719 96.041,71.287 "/><path fill="#005098" d="M148.015,20.014c-2.838-1.066-7.287-2.209-12.844-2.209c-14.158,0-24.131,7.129-24.219,17.349 c-0.08,7.552,7.119,11.769,12.555,14.282c5.58,2.577,7.455,4.221,7.432,6.522c-0.04,3.524-4.457,5.131-8.578,5.131 c-5.732,0-8.779-0.793-13.485-2.758l-1.844-0.834l-2.012,11.769c3.343,1.467,9.532,2.738,15.962,2.801 c15.064,0,24.837-7.047,24.949-17.962c0.056-5.976-3.76-10.526-12.025-14.28c-5.011-2.433-8.081-4.055-8.049-6.518 c0-2.185,2.597-4.521,8.209-4.521c4.682-0.074,8.081,0.948,10.719,2.014l1.291,0.607L148.015,20.014L148.015,20.014z"/><path fill="#005098" d="M184.757,18.769h-11.072c-3.431,0-5.996,0.936-7.504,4.359l-21.278,48.178h15.048 c0,0,2.453-6.478,3.014-7.901c1.644,0,16.259,0.024,18.351,0.024c0.425,1.84,1.74,7.876,1.74,7.876h13.3L184.757,18.769 L184.757,18.769z M167.088,52.655c1.186-3.03,5.708-14.697,5.708-14.697c-0.08,0.14,1.178-3.044,1.9-5.018l0.97,4.533 c0,0,2.742,12.549,3.318,15.182H167.088L167.088,52.655z"/><path fill="#005098" d="M69.705,18.757l-14.03,35.85l-1.499-7.283c-2.606-8.402-10.743-17.501-19.842-22.055l12.827,45.977 l15.16-0.02l22.56-52.47L69.705,18.757L69.705,18.757z"/><path fill="#F6A500" d="M42.664,18.725H19.551l-0.176,1.092c17.974,4.353,29.871,14.869,34.802,27.506l-5.019-24.162 C48.292,19.833,45.774,18.841,42.664,18.725L42.664,18.725z"/></g></svg>');
    background-size: 80px;
    background-color: #fff;
    visibility: hidden;
}

.mk-icon-sim {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52.603px" height="27.424px" viewBox="22.897 64.288 52.603 27.424" enable-background="new 22.897 64.288 52.603 27.424" xml:space="preserve"><rect x="72.407" y="79.211" fill="none" width="1.025" height="6.497"/><path fill="#444" d="M41.963,84.221v4.517c0,0.546-0.445,0.993-0.991,0.993H22.897v1.981h18.075h26.153H75.5v-1.981h-8.375 c-0.546,0-0.991-0.447-0.991-0.993v-4.517c0-0.546,0.445-0.989,0.991-0.989H75.5v-1.984c-1.865,0-8.375,0-8.375,0 c-0.546,0-0.991-0.444-0.991-0.99V75.74c0-0.546,0.445-0.989,0.991-0.989H75.5v-1.985h-8.375c-1.64,0-2.975,1.335-2.975,2.973v4.518 c0,0.764,0.302,1.455,0.776,1.981c-0.474,0.527-0.776,1.22-0.776,1.982v4.517c0,0.35,0.072,0.68,0.185,0.993H43.763 c0.111-0.313,0.182-0.642,0.182-0.993V84.22c0-0.761-0.297-1.455-0.771-1.982c0.474-0.526,0.771-1.216,0.771-1.981v-4.518 c0-0.762-0.297-1.453-0.771-1.981c0.474-0.527,0.771-1.217,0.771-1.982V67.26c0-0.349-0.071-0.678-0.182-0.99H75.5v-1.982H40.971 H22.897v1.982h18.075c0.546,0,0.991,0.444,0.991,0.99v4.516c0,0.546-0.445,0.991-0.991,0.991H22.897v1.984h18.075 c0.546,0,0.991,0.443,0.991,0.989v4.518c0,0.546-0.445,0.99-0.991,0.99H22.897v1.984h18.075 C41.518,83.232,41.963,83.675,41.963,84.221z"/></svg>');
    background-size: 55px;
}

*,
:after,
:before {
    box-sizing: border-box
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.clearfix:after,
.clearfix:before {
    content: '';
    display: table
}

.clearfix:after {
    clear: both;
    display: block
}

.credit-card-wrap .mk-icon-world-map:before,
.credit-card-wrap .credit-card-number:before {
    content: '';
    position: absolute;
}

.credit-card-wrap {
    /* top:50%; */
    /* left:50%; */
    width: 100%;
    height: auto;
    /*position:fixed;*/
    position: relative;
    border-radius: 20px;
    background: #5D4157;
    /* margin-left:-225px; */
    /*margin-top:-142.5px;*/
    background: -webkit-linear-gradient(to left, #5D4157, #A8CABA);
    background: linear-gradient(to left, #5D4157, #A8CABA);
    box-shadow: 2px 2px rgba(0, 0, 0, .4);
}

.credit-card-wrap .mk-icon-world-map {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: inherit;
}

.credit-card-wrap .mk-icon-world-map:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: rgba(0, 0, 0, .4);
    background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, rgba(0, 0, 0, .2) 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, rgba(255, 255, 255, .2) 10px, rgba(96, 16, 48, 0) 11px), rgba(0, 0, 0, .6);
    background-size: 20px 20px;
}

.credit-card-wrap .credit-card-inner {
    z-index: 100;
    padding: 30px;
    width: inherit;
    height: inherit;
    position: relative;
}

.credit-card-inner footer {
    background: none;
}

.credit-card-wrap .credit-logo .text {
    font-size: 24px;
    font-weight: 500;
    margin-left: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    display: none;
}

.credit-card-wrap .credit-logo .shape {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-color: #dc143c;
    box-shadow: -2px 2px 0 rgba(255, 255, 255, .8);
    border-radius: 40px 0 40px 40px;
    transform: rotate(-45deg);
    display: none;
}

.credit-card-wrap .credit-logo .shape>.txt {
    color: #ccc;
    display: block;
    width: inherit;
    font-size: 14px;
    height: inherit;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    transform: rotate(45deg);
}

.credit-card-wrap .credit-font {
    color: #fff;
    font-size: 18px;
    font-family: ocr_a_std, sans-serif;
    text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);
}

.credit-card-wrap .credit-card-number {
    font-size: 18px;
    text-align: left;
    position: relative;
    letter-spacing: 2px;
    margin-bottom: 20px;
    white-space: nowrap;
}

.credit-card-wrap .credit-card-number:before {
    top: 100%;
    font-size: 12px;
    font-family: Roboto;
    content: attr(data-text);
    display: none;
}

.credit-card-wrap .credit-card-date {
    color: #fff;
    text-align: center;
    margin-top: 19px;
    margin-left: 32px;
    width: 100%;
}

.credit-card-wrap .credit-card-date .title {
    width: 62px;
    color: #deb887;
    font-size: 12px;
    line-height: 14px;
    text-align: right;
    display: inline-block;
    text-transform: uppercase;
}

.credit-card-wrap .credit-card-date .credit-font {
    top: -5px;
    left: 10px;
    position: relative;
}

.credit-card-wrap .credit-author {
    padding-top: 30px;
    position: absolute;
}

.credit-card-wrap .mk-icon-sim {
    width: 55px;
    height: 40px;
    margin: 20px 0;
    border-radius: 8px;
    background-color: #fdd76f;
    position: absolute;
    top: 60px;
}

.credit-card-wrap .mk-icon-visa {
    width: 90px;
    height: 45px;
    top: -50px;
    position: relative;
    visibility: hidden;
}

.credit-card-wrap .footer {
    /* left:30px; */
    /* right:30px; */
    /* bottom:30px; */
    /* position:absolute; */
}

.credit-card-wrap .footer .pull-left {
    width: 100%;
}

.mesAno1,
.mesAno2 {
    width: 49%;
    display: inline-block;
}

.mesAno2 {
    margin-top: 23px;
}

.mesAno3 {
    width: 100%;
    clear: both;
}

.bandeiras label {
    width: 23%;
}

.bandeiras input[type="radio"] {
    display: none;
}

.credt {
    width: 45%;
    display: inline-block;
}

/* O container geral define a perspectiva */

.flip-container {
    perspective: 1000;
}

/* vira os containers frente e verso quando o mouse passa em cima */

.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}


/*.flip-container, .front, .back {
        width: 320px;
        height: 480px;
    }*/

/* define a velocidade da transição */

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* esconde o verso durante a animação */

.card-front,
.card-back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* frente posicionada sobre o verso */

.card-front {
    z-index: 2;
}

/* verso inicialmente escondido */

.card-back {
    transform: rotateY(180deg);
}


/* Clasees adicionadas  */

.flip-container.gira .flipper{
    transform: rotateY(180deg);
}
.content {
    position: absolute;
    top: 200px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <!-- CARTÃO DE CRÉDITO FRENTE -->
        <div class="credit-card-wrap card-front">
            <div class="mk-icon-world-map"></div>
            <div class="credit-card-inner">
                <!-- <header class="header"> -->
                <div class="credit-logo">
                    <div class="shape"><span class="txt"></span></div> <span class="text">Banco</span>
                </div>
                <!-- </header> -->
                <div class="mk-icon-sim"></div>
                <div class="credit-font credit-card-number" id="cartaoNumeroCartao" data-text="4716">9999 9999 9999
                    9999</div>
                <footer class="footer">
                    <div class="clearfix">
                        <div class="pull-left">
                            <div class="credit-card-date">
                                <div class="credt">
                                    <span class="title">VALID THRU</span>
                                    <span class="credit-font" id="valMonth">01</span>
                                    <span class="credit-font">/</span>
                                    <span class="credit-font" id="valYear">18</span>
                                </div>
                                <div class="credt">
                                    <span class="title">COD.</br> SEG.</span>
                                    <span class="credit-font" id="codSeg">999</span>
                                </div>
                            </div>
                            <div id="cartaoNomeCartao" class="credit-font credit-author">João da Silva</div>
                        </div>
                        <div class="pull-right">
                            <div class="mk-icon-visa"></div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>

        <!-- CARTÃO DE CRÉDITO VERSO -->
        <div class="credit-card-wrap card-back">
            <div class="mk-icon-world-map"></div>
            <div class="credit-card-inner">
                <!-- <header class="header"> -->
                <div class="credit-logo">
                    <div class="shape"><span class="txt"></span></div> <span class="text">Banco</span>
                </div>
                <!-- </header> -->
                <div class="mk-icon-sim"></div>
                <div class="credit-font credit-card-number" style="visibility: hidden;" id="cartaoNumeroCartao"
                    data-text="4716"></div>
                <footer class="footer">
                    <div class="clearfix">
                        <div class="pull-left">
                            <div class="credit-card-date">
                                <div class="credt">
                                    <span class="title"></span>
                                    <span class="credit-font" id="valMonth"></span>
                                    <span class="credit-font">/</span>
                                    <span class="credit-font" id="valYear"></span>
                                </div>
                                <div class="credt">
                                    <span class="title"></br> </span>
                                    <span class="credit-font" id="codSeg"></span>
                                </div>
                            </div>
                            <div id="cartaoNomeCartao" class="credit-font credit-author"></div>
                        </div>
                        <div class="pull-right">
                            <div class="mk-icon-visa"></div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="divider">&nbsp;</div>

    <label>
        <span>
            Nome que está no cartão
            <strong class="color-highlight">*</strong>
        </span>
        <input class="text fields" type="text" id="cartaoNome" name="cartaoNome" value="" autocomplete="off">
    </label>
    <label>
        <span>
            Número de cartão
            <strong class="color-highlight">*</strong>
        </span>
        <input class="text fields" type="text" id="cartaoNumero" name="cartaoNumero" value="" autocomplete="off"
            maxlength="19">
    </label>
    <div class="mesAno1">
        <label>
            <span>
                Validade
                <strong class="color-highlight">*</strong>
                (<a data-tooltip="Mês e ano de expedição da validade do seu cartão">O que é isto?</a>)
            </span>
            <select class="select fields" name="cartaoValidadeMes" id="cartaoValidadeMes">
                <option value="">Mês</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
        </label>
    </div>
    <div class="mesAno2">
        <label>
            <select class="select fields" name="cartaoValidadeAno" id="cartaoValidadeAno">
                <option value="">Ano</option>

            </select>
        </label>
    </div>
    <div class="mesAno3">
        <div class="mesAno1">
            <label>
                <span>
                    Cód. de segurança
                    <strong class="color-highlight">*</strong>
                    (<a data-tooltip="Este é o código de 3 ou 4 dígitos que fica no verso do seu cartão.">O que é
                        isto?</a>)
                </span>
                <input class="text fields mask-nro" type="text" id="cartaoCodigoSeguranca"
                    name="cartaoCodigoSeguranca" value="" maxlength="4" autocomplete="off">
            </label>
        </div>
    </div>
</div>

0

Using jQuery you can use addClass() and removeClass() with CSS for animation.

CSS:

.flip-rotate {
  transform: rotateY(180deg);
}

.flip-container {
  transition: 1s;
}

jQuery:

$('#cartaoCodigoSeguranca').focus(function(){
    $('.flip-container').addClass('flip-rotate');
});

$('#cartaoCodigoSeguranca').blur(function(){
    $('.flip-container').removeClass('flip-rotate');
});

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.