my todays ;-) question is about the "Android-Hover-phenomenon".
I spare the term "so-called" because my research didn't produce a common name for the lack of hover-state on tap-operated Android devices. As far as I know, this is the case with any Android version to this day.
The problem:
On iOS devices, it takes 2 taps to open a link, where the first tap is handled as hover-event and only the second tap generates the click-event.
On Android-devices a screen tap generates a click directly. Thus it is not possible to access a submenu, because when trying that, the main menu entry containing that sub-menu entry is triggered. In other words: There's no way to access a sub-menu without triggering the main menu entry first. I know that turning off a parent menu entry by '#' helps, yet don't consider that a solution. Also, we need to make use of hover-states on other occasions but the menu.
As far as I can see, this has not been discussed anywhere in the Kalium-Space so far.
Outside the Kalium-realm I found several discussions and approaches to the issue, mostly in j-script that makes use of the user agent information.
My questions to you are:
1) Are you aware of the issue?
2) Can you recommend a particular approach? I'll make contact to services on Envato Studio in the near future anyway.
Thanks for your explanation, this topic was never discussed in our forum so I guess there is something weird happening here.
I have checked the code that handles submenus and found that once clicking link that contains submenu it firstly should open submenu and stop location direct:
Maybe that will solve this issue so here is the file for you:
Download this file and replace it in this directory (of the theme): /assets/js
If you don't see the change immediately, please hard-refresh your browser (CTRL/CMD+R) because it takes longer to load the changes, as they are saved in browser cache. Another option is to open new private/incognito window and try if it works.
If this is not going to work for you then I need further debugging of the issue.
Firstly, I'm sorry for coming back that late ... I appreciate a lot that you're taking a look into this.
> this topic was never discussed in our forum > so I guess there is something weird happening here.
Unfortunately, that weirdness hasn't changed with the code file you kindly provided. It is still in place now.
From your words I understand that handling touch screen devices is already a feature in Kalium and it doesn't work on my site for unknown reasons, right?
However, when I visit the Main Demo on your Kalium demo site, my tablet produces no submenu either. Precisely spoken, a submenu is visible for a brief moment before the page changes. Do you have a different result?
As a testing device I only have an Android tablet with OS 4.4.2 at hand (latest Chrome and Firefox browser apps installed). Sometimes I have access to an iPhone 6 and what I find strange, is that the iPhone behaves just like the Android device (although it is told that iOS takes care of the missing hover state).
I'm sorry that I cannot be of further assistence to you and I would appreciate, if you could take a second deeper look on what's going on. However, I cannot estimate the efforts and timeconsumption of doing that. Please set a reasonable limit. Thank you.
No worries about late reply, it is important for us to fix this.
It took me several hours to find this issue and reproduce it, so I have applied a fix for that, so you can try it and see if it works for you:
1. Download this file and replace it in this directory (of the theme): /assets/js
2. Download this file and replace it in this directory (of the theme): /assets/js
If you don't see the change immediately, please hard-refresh your browser (CTRL/CMD+R) because it takes longer to load the changes, as they are saved in browser cache. Another option is to open new private/incognito window and try if it works.
Thats great! Well, the hover effect was not implemented because main menu (desktop size) was not shown in tablets of size lower than 768 pixels so I didn't had chance to test this.
As for updates, you don't need to worry about future updates, the fix will be included in the update.
that's good news, indeed. I think this ticket deserves to be closed after this achievement. I just have one and a half questions/remarks left :-)
Fixing hover states on tapping devices for the main navigation/menu is of course of higher priority than the hover states on thumbnails. Will Laborator consider to fix those as well, maybe at a later point in time? (I'm talking about the hover effects that can be applied in 'Theme Options/Portfolio Settiings')
If not ... do you think an experienced programmer should be able to extend your menu-fix to our thumbnails so we can 'hover' on those, too?
So, thanks for your invitation to share my thoughts on what kind of solution I'm actually looking for (not an easy thing to find out :-). Please bear in mind that I only have limited knowledge on CSS and no knowledge on JS.
From my researches my conclusion is this: The vast majority of 'solutions' tries to detect device capabilities which even modernizr doesn't do correct in every case anymore. There are many designers that favour not to use hover effects anymore.
I find the path you walked with the submenu is most relyable and I understood your solution to work like this:
If a click-event on a hover-enabled element takes place - detect whether the hover-animation was triggered (here: the submenu is present) - if yes, follow the link/redirection - if no, cancel the redirection, then activate the hover-animation instead, then loop
It seems to me, that this approach could be extended to the portfolio thumbnail hover-effects as well. That is, redirect only if the full/distanced background hover is present (assuming that's possible).
An additional method might be considered to prevent hover-states from 'hanging' (which would lead to multiple hover animations being visible).
This is not a universal solution (it would be tailor-shaped to the animations you designed in Kalium), yet it would be a feature that makes Kalium stand out further from competition (you checked other themes and 'they all had the same problem').
What I don't know is whether side-effects do occur, such as a slightly increased response time for non-touch devices. As a safety measure, 'enable touchscreen support for thumbnail hover effect' could be made an option that can be turned on or off in Portfolio Thumbnail Options.
I hope I could contribute a little bit. Thanks again for your help on the submenus. I'm very satisfied!
Best regards, Wolfgang
PS. Regarding our own site: We will most likely not benefit from any hover solution you choose to implement (or not) for the portfolio thumbnails.
The reason is: We make extensive use of hover in combination with the css3 grayscale filter. Our thumbnails are 100% grayscale by default and turn colored (=0% grayscale) when hovered (see screenshot). We would like to have text information to show up on hovering, yet unfortunately the built-in Kalium hover effect 'steals' the hover from the thumbnail. When the text shows up the thumbnail turns gray again which is unwanted.
We hope to solve that with a customizaton service over at Envato Studio.
well that wasn't just one weekend and not all of them were great ;-) but here we go ... thanks for the patience!
Three weeks ago you asked: "As for your problem with text appearing on hover, I would like what exactly do you want to achieve, maybe I can help you on that?"
I have created two images that demonstrate what we want to achieve with hovering on thumbnails. The definitive 'showstopper' is the fact, that when the Portfolio Thumbnail Overlay Effect is actvated, the thumbnail itself isn't hovered any more and becomes grey again (=css filter, default 100% greyscale on all thumbnails).
I hope the two images make that clear. You can see it for yourself here ...
This morning I finally managed to put a request for quote on the desk of a local developer that hopefully is capable to tweak that nifty feature into our site. We asked for implementation of a tooltip that is triggered by the hovering. Thus we can leave the built-in Thumbnail Options Effect turned off and the thumb won't lose the hover.
We are tweaking Kalium quite far this way ... I hope you don't mind :-) I am optimistic that we will find some solution, yet your advises and comments are of course very welcome.
my delays are bigger than yours, you're twice as fast easily :-)
Yes it works and indeed we're getting close to actually use the Kalium Hover effect on the live site and save the cost for own developments. Only 'close' however, because still no text appears if the user hovers just the image and is not moving the mouse into the title zone.
It would be more than generous, if you provide this missing part of the solution as well and I do not expect this. I am lucky to have found a very savy and cooperative developer that supports us on our way to site completion and he estimates, that he could probably solve this.
So, your help would of course be highly appreciated, yet please feel free to close this ticket very soon. Thank you!
Best regards, Wolfgang
PS: We've remapped our webspace to its target domain, new WP credentials are in ticket 1127671.
I am sorry for the delay of reply, we were working on Kalium compatibility with WooCommerce 3.0.3 and it took us more than 2 weeks, so I couldn't check your ticket.
Sure I will give you the other remaining part of the code, but I need to access your site again.
However when I accessed your site it requires authentication (not WP admin login) and with the provided credentials I was not able to login:
please don't mind ... and yes, as we are still not quite finished, the site is protected by a htaccess password (user: = domain name w/o tld; pass: 'schmetterling')
In fact, I had Kalium's Hover Effects turned on until the day before yesterday. Yet now, they are turned off because our developer has implemented "tooltipster", which will allow full control over the displayed content.
So, it is me who is sorry, because the work you put into our little problem is not going to be released.
Wow ... it's realy time to close this record long ticket, isn't it? If 5 stars for user friendlyness and support would not already be the max, I would douple up!
All right buddy, no problem about that. We are going to release some new hover features in the upcoming updates, so keep tuned with latest updates of Kalium and read the changelog. We are trying to make the best theme there, haha!
I will close this ticket now and whenever you need help, feel free to open a ticket. Wish you good luck with your site.
Dear developers @ Laborator,
my todays ;-) question is about the "Android-Hover-phenomenon".
I spare the term "so-called" because my research didn't produce a common name for the lack of hover-state on tap-operated Android devices. As far as I know, this is the case with any Android version to this day.
The problem:
On iOS devices, it takes 2 taps to open a link, where the first tap is handled as hover-event and only the second tap generates the click-event.
On Android-devices a screen tap generates a click directly. Thus it is not possible to access a submenu, because when trying that, the main menu entry containing that sub-menu entry is triggered. In other words: There's no way to access a sub-menu without triggering the main menu entry first. I know that turning off a parent menu entry by '#' helps, yet don't consider that a solution. Also, we need to make use of hover-states on other occasions but the menu.
As far as I can see, this has not been discussed anywhere in the Kalium-Space so far.
Outside the Kalium-realm I found several discussions and approaches to the issue, mostly in j-script that makes use of the user agent information.
My questions to you are:
1) Are you aware of the issue?
2) Can you recommend a particular approach? I'll make contact to services on Envato Studio in the near future anyway.
Looking forward to your reply.
Thanks and best regards,
Wolfgang
PS. just in case, site credentials on ticket
https://laborator.ticksy.com/ticket/1015167/
are still valid.
Hi Wolfgang,
Thanks for your explanation, this topic was never discussed in our forum so I guess there is something weird happening here.
I have checked the code that handles submenus and found that once clicking link that contains submenu it firstly should open submenu and stop location direct:
(view large version)
But I don't know why
Is not working in your case! I will also add:
Maybe that will solve this issue so here is the file for you:
Download this file and replace it in this directory (of the theme): /assets/js
If you don't see the change immediately, please hard-refresh your browser (CTRL/CMD+R) because it takes longer to load the changes, as they are saved in browser cache. Another option is to open new private/incognito window and try if it works.
If this is not going to work for you then I need further debugging of the issue.
Hi Arlind,
Firstly, I'm sorry for coming back that late ... I appreciate a lot that you're taking a look into this.
> this topic was never discussed in our forum
> so I guess there is something weird happening here.
Unfortunately, that weirdness hasn't changed with the code file you kindly provided. It is still in place now.
From your words I understand that handling touch screen devices is already a feature in Kalium and it doesn't work on my site for unknown reasons, right?
However, when I visit the Main Demo on your Kalium demo site, my tablet produces no submenu either. Precisely spoken, a submenu is visible for a brief moment before the page changes. Do you have a different result?
As a testing device I only have an Android tablet with OS 4.4.2 at hand (latest Chrome and Firefox browser apps installed). Sometimes I have access to an iPhone 6 and what I find strange, is that the iPhone behaves just like the Android device (although it is told that iOS takes care of the missing hover state).
I'm sorry that I cannot be of further assistence to you and I would appreciate, if you could take a second deeper look on what's going on. However, I cannot estimate the efforts and timeconsumption of doing that. Please set a reasonable limit.
Thank you.
Kind regards,
Wolfgang
Hi Wolfgang,
No worries about late reply, it is important for us to fix this.
It took me several hours to find this issue and reproduce it, so I have applied a fix for that, so you can try it and see if it works for you:
1. Download this file and replace it in this directory (of the theme): /assets/js
2. Download this file and replace it in this directory (of the theme): /assets/js
If you don't see the change immediately, please hard-refresh your browser (CTRL/CMD+R) because it takes longer to load the changes, as they are saved in browser cache. Another option is to open new private/incognito window and try if it works.
Woohoo ... works like a charm! Arlind, that's just great ... thank you very much!
Do I have to take any precautions regarding future Kalium updates to prevent these two files from being overwritten?
Thanks!
Wolfgang
Hi Wolfgang,
Thats great! Well, the hover effect was not implemented because main menu (desktop size) was not shown in tablets of size lower than 768 pixels so I didn't had chance to test this.
As for updates, you don't need to worry about future updates, the fix will be included in the update.
Hi Arlind,
that's good news, indeed. I think this ticket deserves to be closed after this achievement. I just have one and a half questions/remarks left :-)
Fixing hover states on tapping devices for the main navigation/menu is of course of higher priority than the hover states on thumbnails. Will Laborator consider to fix those as well, maybe at a later point in time? (I'm talking about the hover effects that can be applied in 'Theme Options/Portfolio Settiings')
If not ... do you think an experienced programmer should be able to extend your menu-fix to our thumbnails so we can 'hover' on those, too?
Thanks again,
Wolfgang
Hi Wolfgang,
Actually we are looking for a way to make these hover effect appear only on tapping.
I have checked other theme forest themes about this problem and they seem to have it the same!
Would be great if you could suggest us any alternative to this and we will consider adding it to our theme.
Wish you a great week
Hi Arlind,
So, thanks for your invitation to share my thoughts on what kind of solution I'm actually looking for (not an easy thing to find out :-). Please bear in mind that I only have limited knowledge on CSS and no knowledge on JS.
From my researches my conclusion is this: The vast majority of 'solutions' tries to detect device capabilities which even modernizr doesn't do correct in every case anymore. There are many designers that favour not to use hover effects anymore.
I find the path you walked with the submenu is most relyable and I understood your solution to work like this:
If a click-event on a hover-enabled element takes place
- detect whether the hover-animation was triggered (here: the submenu is present)
- if yes, follow the link/redirection
- if no, cancel the redirection, then activate the hover-animation instead, then loop
It seems to me, that this approach could be extended to the portfolio thumbnail hover-effects as well. That is, redirect only if the full/distanced background hover is present (assuming that's possible).
An additional method might be considered to prevent hover-states from 'hanging' (which would lead to multiple hover animations being visible).
This is not a universal solution (it would be tailor-shaped to the animations you designed in Kalium), yet it would be a feature that makes Kalium stand out further from competition (you checked other themes and 'they all had the same problem').
What I don't know is whether side-effects do occur, such as a slightly increased response time for non-touch devices. As a safety measure, 'enable touchscreen support for thumbnail hover effect' could be made an option that can be turned on or off in Portfolio Thumbnail Options.
I hope I could contribute a little bit.
Thanks again for your help on the submenus. I'm very satisfied!
Best regards,
Wolfgang
PS.
Regarding our own site: We will most likely not benefit from any hover solution you choose to implement (or not) for the portfolio thumbnails.
The reason is: We make extensive use of hover in combination with the css3 grayscale filter. Our thumbnails are 100% grayscale by default and turn colored (=0% grayscale) when hovered (see screenshot).
We would like to have text information to show up on hovering, yet unfortunately the built-in Kalium hover effect 'steals' the hover from the thumbnail. When the text shows up the thumbnail turns gray again which is unwanted.
We hope to solve that with a customizaton service over at Envato Studio.
Hi Wolfgang,
Thank you very much for your contribution on making Kalium even a better theme.
Your suggestion is very good, and it is a good option to "disable hover effects on mobile" as "under the hood" setting in portfolio section.
So I have added this to our todo list and will try to implement in the near future.
As for your problem with text appearing on hover, I would like what exactly do you want to achieve, maybe I can help you on that?
Hi Arlind,
I'm glad that I could contribute.
> As for your problem with text appearing on hover, [...]
Thank you for your offer! I'll definitively come back to that, it just takes a few days ...
Kind regards,
Wolfgang
Dear Wolfgang,
Thank you very much for your contribution. No worries, we will take care of this.
Have a great weekend there
Hi Arlind,
well that wasn't just one weekend and not all of them were great ;-) but here we go ... thanks for the patience!
Three weeks ago you asked: "As for your problem with text appearing on hover, I would like what exactly do you want to achieve, maybe I can help you on that?"
I have created two images that demonstrate what we want to achieve with hovering on thumbnails. The definitive 'showstopper' is the fact, that when the Portfolio Thumbnail Overlay Effect is actvated, the thumbnail itself isn't hovered any more and becomes grey again (=css filter, default 100% greyscale on all thumbnails).
I hope the two images make that clear. You can see it for yourself here ...
http://irgendwas.domainfactory-kunde.at/repastell/
This morning I finally managed to put a request for quote on the desk of a local developer that hopefully is capable to tweak that nifty feature into our site. We asked for implementation of a tooltip that is triggered by the hovering. Thus we can leave the built-in Thumbnail Options Effect turned off and the thumb won't lose the hover.
We are tweaking Kalium quite far this way ... I hope you don't mind :-)
I am optimistic that we will find some solution, yet your advises and comments are of course very welcome.
All the best
Wolfgang
Hi Wolfgang,
I am sorry for the delay of response, I wasn't in the office for a week and my colleagues couldn't help you with this.
If you add the following custom JS:
<script type="text/javascript"> jQuery( '.hover-state' ).hover( function() { var $item = jQuery( this ).closest( '.portfolio-item' ); $item.addClass( 'text-title-hovered' ); }, function() { var $item = jQuery( this ).closest( '.portfolio-item' ); $item.removeClass( 'text-title-hovered' ); } ); </script>and Custom CSS:
.portfolio-item.text-title-hovered .thumb .lazyloaded { -webkit-filter: grayscale(0%); filter: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id=…es='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale); -webkit-transition: .3s ease-in-out; -moz-filter: grayscale(0%); -moz-transition: .3s ease-in-out; -o-filter: grayscale(0%); -o-transition: .3s ease-in-out; filter: grayscale(0%); }This will keep the color of image when hovering the subtitle:
http://drops.laborator.co/h6iP
Does this helps you?
Hi Arlind,
my delays are bigger than yours, you're twice as fast easily :-)
Yes it works and indeed we're getting close to actually use the Kalium Hover effect on the live site and save the cost for own developments. Only 'close' however, because still no text appears if the user hovers just the image and is not moving the mouse into the title zone.
It would be more than generous, if you provide this missing part of the solution as well and I do not expect this. I am lucky to have found a very savy and cooperative developer that supports us on our way to site completion and he estimates, that he could probably solve this.
So, your help would of course be highly appreciated, yet please feel free to close this ticket very soon. Thank you!
Best regards,
Wolfgang
PS:
We've remapped our webspace to its target domain, new WP credentials are in ticket 1127671.
https://laborator.ticksy.com/ticket/1127671/
Dear Wolfgang,
I am sorry for the delay of reply, we were working on Kalium compatibility with WooCommerce 3.0.3 and it took us more than 2 weeks, so I couldn't check your ticket.
Sure I will give you the other remaining part of the code, but I need to access your site again.
However when I accessed your site it requires authentication (not WP admin login) and with the provided credentials I was not able to login:
(view large version)
Could you please verify and send me the login again.
Sorry for waiting
Hello Arlind,
> I am sorry for the delay ...
please don't mind ... and yes, as we are still not quite finished, the site is protected by a htaccess password (user: = domain name w/o tld; pass: 'schmetterling')
In fact, I had Kalium's Hover Effects turned on until the day before yesterday. Yet now, they are turned off because our developer has implemented "tooltipster", which will allow full control over the displayed content.
So, it is me who is sorry, because the work you put into our little problem is not going to be released.
Wow ... it's realy time to close this record long ticket, isn't it?
If 5 stars for user friendlyness and support would not already be the max, I would douple up!
Thanks again Arlind!
Wolfgang
Hi Wolfgang,
All right buddy, no problem about that. We are going to release some new hover features in the upcoming updates, so keep tuned with latest updates of Kalium and read the changelog. We are trying to make the best theme there, haha!
I will close this ticket now and whenever you need help, feel free to open a ticket. Wish you good luck with your site.
Cheers and have a great week ahead