- This topic has 19 replies, 3 voices, and was last updated 6 years, 10 months ago by Leo.
-
AuthorPosts
-
May 6, 2017 at 7:41 am #314720Nikola
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
NikolaMay 6, 2017 at 9:27 am #314738LeoStaffCustomer SupportHi 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?
May 6, 2017 at 9:40 am #314745NikolaHi 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
NikolaMay 6, 2017 at 9:49 am #314748TomLead DeveloperLead DeveloperTypically something like that would require javascript. Are you following a specific tutorial to build the reveal cards?
May 6, 2017 at 9:55 am #314749NikolaNo, 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.
May 6, 2017 at 10:01 am #314750TomLead DeveloperLead DeveloperYou 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
May 6, 2017 at 10:04 am #314751NikolaI now that i need css but the dilema is which. 😀
May 6, 2017 at 10:07 am #314752TomLead DeveloperLead DeveloperIf 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.
May 6, 2017 at 10:09 am #314753NikolaIt is all just bundled. :/
May 6, 2017 at 7:39 pm #314851TomLead DeveloperLead DeveloperI 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 🙂
May 9, 2017 at 11:38 am #315966NikolaHello 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,
NikolaMay 9, 2017 at 11:55 am #315968LeoStaffCustomer SupportCould you try adding that to the wp_head field in GP hooks?
https://docs.generatepress.com/article/hooks-overview/May 9, 2017 at 2:18 pm #316017NikolaOk, but how to target button wich will flip the card?
May 9, 2017 at 8:06 pm #316087TomLead DeveloperLead DeveloperHmm 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
May 10, 2017 at 1:28 am #316201NikolaYea, 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.
-
AuthorPosts
- You must be logged in to reply to this topic.