Page 1 of 1

Treefrognursery template on touchscreen

Posted: Wed Aug 12, 2015 5:13 am
by Tata
I have found a problem with http://treefrognursery.cmsimple.sk when opened on touch screen devices. The four frogs on welcome screen have attached expandable DIVs with "hover" attribute. But on devices with touscreen (iPad/mobile) the "hovering" does not work as expected. How suggest you to solve it?

Re: Treefrognursery template on touchscreen

Posted: Wed Aug 12, 2015 11:27 am
by lck

Re: Treefrognursery template on touchscreen

Posted: Thu Aug 13, 2015 8:14 am
by Tata
Thx, will give a try.
@EDIT
extended ":hover" by ":focus"
Nothin has changed. On iPad does it not work. On ":hover" shall the DIV change its height And eexpand shoving the hidden cintent. On click then shall it open the target of the link.
On ":hover" it does nothing, after click it leads to new page. Only on return to previous page the hidden DIV is shown.

Re: Treefrognursery template on touchscreen

Posted: Fri Aug 14, 2015 2:26 pm
by lck
Interessant, zumindest auf meinem Smartphone HTC Desire S. Klickt man auf eine freie Stelle, z.B. links oder rechts vom Text "TREE FROG NURSERY", so erscheint der verteckte Text wie bei hover. Das heißt das Touch auf eine freie Stelle wird als hover interpretiert. Vielleicht mag das jemand mit anderen mobilen Geräten testen und berichten.

@Tata
You can use/try the useful css3 :target selector, additional to hover.
Hover for Desktop devices, target for mobil devices.

Something like this might work. Not testet! Without the template, it is always a problem.

Create a "Read more" -Link visible over the hidden Text under "TREE FROG NURSERY" with <a href="#readmore">Read more</a>

Give the hidden Text an id <p id="readmore" ...

Hide Text
#readmore {display: none;}

Display Text by hover
.newsbox1-in:hover #readmore {display: block;}

Display Text by target by click the link
#readmore:target {display: block;}