[Support request] Reveal card

[Nikola]

Hi Tom,

Can you help me with this topic.

I want reveal cards on this page http://test.nikolakalinovic.com/zlatibor-apartmani/.
For now you can only see normal cards, and i have problems for couple of days to make them reveal. I dont now how to do that. I tried so many things and nothing worked.

This is actual html for card:

<div class="card-apartmani">
<div class="card-apartmani-slider">[masterslider id="3"]</div>
<div class="card-apartmani-opis"><span class="card-apartmani-opis-levo"><i class="fa fa-user"></i> 3 - 5 osoba</span><span class="card-apartmani-opis-desno"><i class="fa fa-bed"></i> 2 sobe</span></div>
<div class="card-apartmani-content">
<div class="card-apartmani-title">
<h3>Apartman 1</h3>
</div>
<div class="card-apartmani-tekst">Kompletno opremljeni apartman od 32 m2 sa dve odvojene sobe, kapaciteta 3 -5 osoba, u prizemlju, prilagođen osobama sa invaliditetom.</div>
<div class="card-apartmani-action"><a href="http://test.nikolakalinovic.com/apartmani/apartman-1/">Saznajte više</a></div>
</div>
</div>

This is css:

.card-apartmani {
    display: block;
    position: relative;
    margin: 1rem 1rem 1rem 1rem;
    background-color: #ffffff;
}

.card-apartmani-opis {
    display: block;
    background-color: #c6b087;
    padding: 15px 20px 15px 20px;
    text-align: center;
}

.card-apartmani-opis-levo  {
    width: 50%;
    display: inline-block;
}

.card-apartmani-opis-desno  {
    width: 50%;
  display: inline-block;
}

.card-apartmani-blok {
    display: block;
}

 .card-apartmani-tekst {
   padding: 0px 20px 20px 20px;
}

 .card-apartmani-title {
   padding: 20px 20px 0px 20px;
}

.card-apartmani-title h3 {
   text-transform: none !important;
}

.card-apartmani .card-apartmani-action:last-child {
    border-radius: 0 0 2px 2px;
}

.card-apartmani .card-apartmani-action {
    position: relative;
    background-color: inherit;
    border-top: 1px solid rgba(160,160,160,0.2);
    padding: 15px 20px 15px 20px;
}

.card-apartmani-slider {
    background-color: #c6b087;
}

This is what i want to make:

I have head pain from this.

Thank you in advance.

Best
Nikola

[Leo]

Hi Nikola,

Not sure what you meant by reveal card?

Everything on this page: http://test.nikolakalinovic.com/zlatibor-apartmani/ seems to be working to me?

Can you provide an example or where you got the code from?

[Nikola]

Hi Leo,

Everything is working, but i want to add on my card button or icon, when visitor click on it, card produce one extra layer with information, like a flip card, or rotate card, or something similar.

http://test.nikolakalinovic.com/wp-content/uploads/2017/05/2017-05-06.png

Look at picture above. When visitor click on link reveal, i want to card reveal a new layer with some information like some tittle, text and link. And when visitor want to see a normal card, just need to click close in the right bottom.

I send it html and css code from card on my site in hope that you can give me solution and where to put a additional html and css code to produce mentioned effect.

I hope that maybe now you understand me.

Best
Nikola

[Tom]

Typically something like that would require javascript. Are you following a specific tutorial to build the reveal cards?

[Nikola]

No, i dont follow. I tried myself in past days, i read it on the internet, but i can not find nothing simple and effective. I now that i need one more div for information that has to be reveald, one div for clickable button or icon and some simple javascript. But, i did not find the way to implement on actual card that i where made.

I want the same effect like this on this card http://materializecss.com/cards.html

Find simple reveal card on that page.

[Tom]

You would need to include the necessary Materialize CSS in order for that to work. The HTML alone won’t do it.

There’s a tutorial here which might be helpful: https://davidwalsh.name/css-flip

You can find a lot by searching: css reveal cards

[Nikola]

I now that i need css but the dilema is which. 😀

[Tom]

If you can isolate the necessary CSS in Materialize then I would definitely go for that. Not sure if they provide separate CSS for each feature or if it’s all just bundled.

[Nikola]

It is all just bundled. :/

[Tom]

I figured it would be. You’ll need to find another solution (I don’t have a go-to one).

If you find one you like definitely let me know 🙂

[Nikola]

Hello Tom, i resolve the problem, but i need one more thing.

I find a solution from your link https://davidwalsh.name/css-flip

But i want toogle button, how to insert that. I dont want to card flip when is hovered, i want only by click. In the link above, he speaks about that but i dont now how to insert it in you theme.

Where i need to put this javascript comment document.querySelector("#myCard").classList.toggle("flip") and how to put it, or maybe how to target button with that javascript comment?

Thanks in advance.

Best,
Nikola

[Leo]

Could you try adding that to the wp_head field in GP hooks?
https://docs.generatepress.com/article/hooks-overview/

[Nikola]

Ok, but how to target button wich will flip the card?

[Tom]

Hmm I’m not sure that’s what the code will do – I believe that’s simply to initiate the flip on hover using javascript instead of CSS.

Try replacing this: ontouchstart

With: onclick

[Nikola]

Yea, i can do that. But, another problem comes up.

When i put that, something like this in a code editor of a section, <button onclick="document.querySelector('#flip-toggle').classList.toggle('flip');"class="button transparent crni">Nazad</button>, everything is ok, the button flip the card, but when i move to visual editor in section, and go back to code editor, the code “onclik” disappear.

How to resolve that? It is very disturbing to insert the same code over and over again.

[Author]

Posts