Treefrognursery template on touchscreen

About the template and stylesheet - and changing the menu
Post Reply
Tata
Posts: 3601
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Treefrognursery template on touchscreen

Post by Tata » Wed Aug 12, 2015 5:13 am

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?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

lck
Posts: 3211
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Treefrognursery template on touchscreen

Post by lck » Wed Aug 12, 2015 11:27 am

„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3601
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Treefrognursery template on touchscreen

Post by Tata » Thu Aug 13, 2015 8:14 am

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.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

lck
Posts: 3211
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Treefrognursery template on touchscreen

Post by lck » Fri Aug 14, 2015 2:26 pm

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;}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply