Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Support request] Reveal card

Home Forums Support Reveal card

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #314720
    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:
    Reveal card

    I have head pain from this.

    Thank you in advance.

    Best
    Nikola

    GeneratePress 1.3.46
    #314738
    Leo
    Staff
    Customer Support

    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?

    #314745
    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

    #314748
    Tom
    Lead Developer
    Lead Developer

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

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

    #314750
    Tom
    Lead Developer
    Lead Developer

    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

    #314751
    Nikola

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

    #314752
    Tom
    Lead Developer
    Lead Developer

    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.

    #314753
    Nikola

    It is all just bundled. :/

    #314851
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #315966
    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

    #315968
    Leo
    Staff
    Customer Support

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

    #316017
    Nikola

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

    #316087
    Tom
    Lead Developer
    Lead Developer

    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

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.