Forum Replies Created
-
Posts
-
Thank you Andy, Ismail and Yigit for your help. Overall it is a great solution in my opinion and it proves that mobiles (at least Safari on iOS) can process the hover effect perfectly fine on the image hotspots at least by tapping instead of hovering obviously.
The issue with the popup positioning could probably be fixed by adapting the code a bit but it is possible to manually adjust them. I did it successfully in my testing environment. Where can I suggest this to be part of Enfold in the future?
Many thanks.
Dear Ismael,
(EDITED):
I have just tried again and cleared the cache on my mobile device and now I can see the tooltips and they are looking just fine!
I understand your concerns about the tooltips positioning but I can manually change their position one by one and I am sure this will work fine.How can we hide the numbers from the tooltips and also hide the text that is showing below the map? I mean… the text from the tooltips that is being displayed with the numbered bullets? If we hide both, the problem is finally solved :)
Pls check my private contents below as well
Thank you
Hi Ismael,
Thank you for reviving this post with a new attempt, however, the CSS code provided did not produce any effect or change on the image hotspots area.
Regarding the explanations:
“1.) Mobile devices don’t support hover state so it’s not going to work as it should.”
I tried this on iPad which uses the same technology as iPhone for example and hover state works fine there!2.) There is not enough space to accommodate the tool tip especially when you use long text.
We have little text and hope the tool tip does note cover the whole screen… hopefully will not…If there is a way to override the mobile version on mobile at all costs for the image hotspot?
Many thanks
It is sad that a great module such as the image hotspot has a totally different behaviour in mobiles from the desktops and there is no flexibility to simply disable the mobile version on mobiles. I can not be 100% sure as I am not a programmer but according to my brief experience this task seems to be quite easy by applying the right CSS code that “overrides” the mobile version.
I can not agree that this is a “customization of the theme” that is out of your support scope because I am not asking for any changes on the normal theme as it is displayed on desktop. The feature already exists and I do not need any changes. The only quick “fix” I am requesting is to disable the mobile version for the hotspot module and display it exactly as it is show on tablets and desktops, that’s it.
Can you please try to have Yigit or Josue involved on this just to have a quick look to see if they find a quick workaround this? If they don’t have a solution as well after a quick look, my apologies for the long post and thank you all for trying.
Thank you.
Hi Andy,
I am sure Kriesi has valid reasons to show hotspots on mobile and the alternative way to show it is ok for most users but useless for this specific website.
I tested this on iPad (same touchscreen idea) and it worked perfectly so, all I am asking is the CSS code that changes the hotspots model on smaller screens (i.e. mobile devices). If there is a better way to set a specific resolution to show the mobile version to “trick” the hotspots module I am fine with that! Some sort of condition such as “show hotspots mobile version if width <= 100 pixels”. This way the mobile would display it as the desktop version.
Is there anyone else from your team (a colleague or even Kriesi) that can step in to make this happen?
Many thanks.
Hi Andy
Unfortunately the code provided has just removed the text below the image (the text that should appear in the hotspots on mouse hover).
Please check the link in private.Hi Andy,
I just posted twice as it is unusual to wait more than 48h for a reply. I’ll take that in consideration for the future.
As for the link provided I believe this is not exactly what I need. I was asking to “disable” the mobile version of the image hotspots altogether and display it as it shows on desktop screens. Is this possible?
Thank you
Hi there,
Is there any news about this issue with the image hotspots element?
After some consideration, and as I can see this seems to be a difficult task, I wonder if there is a way to simply go with option 1 as mentioned on my last post?
1) Disable the “mobile version” for the image hotspot module and display it in the exact same way as the desktop. This means that instead of showing 8 hotspots in the image and 8 text boxes below the image, it would work in the same way as the desktop does: hover the hotspot and a popup displays the textIf there is a Quick CSS code for this, much better.
Many thanks.
Hi Andy,
Thank you for your help.
The code provided hid the text on mobile. The text should not be hidden.
Two possible scenarios if you can help us, for the mobile version of the image hotspot:
1) Disable the “mobile version” for the image hotspot module and display it in the exact same way as the desktop. This means that instead of showing 8 hotspots in the image and 8 text boxes below the image, it would work in the same way as the desktop does: hover the hotspot and a popup displays the textOR, if the above is not possible:
2) We have the following text next to the image: “Please rollover a city for more details”. Is it possible to replace this text on mobiles only to “refer to key for more information”?
One or the other would work really.
Many thanks for your help.
Thank you Yigit,
I quite prefer the solution you gave me and remove the date and time from the sidebar. It is ok as far as the date is displayed on the article itself. Thank you very much for this.
PS – Pls check my private content below as well.
Thank you for the link Elliot.
Isn’t there a way to use a CSS code to hide the time instead of making changes on the theme files? We use a child theme but still… CSS is much more convenient and easier to revert back the changes in the future if we need to.
Hi Basilis,
Unfortunately the code didn’t work. I still see the date on the side widget of my blog posts.
In addition to the above,
We have the following text next to our image hotspot which is a map:
“Please rollover a city for more details”.This doesn’t make sense on mobile because there is no “rollover” effect.
Is it possible to change the text above on mobiles one to “refer to key for more information”?One shall be replaced by the other basically.
Thank you
Thank you for your patience on this Andy,
It is harder to explain that I thought, but let me try once again, I am sure it will work now.
The Ajax Portfolio is FINE and we want to keep it as it is: http://dns.d.pr/1bvjW/4YYLrrvl
However, after the ajax portfolio opens, the user is (at the moment) able to click on the image and enlarge it to open in a lightbox – I am calling it the “lightbox LINK”: http://dns.d.pr/me4x/2dVzhXWU
This lightbox LINK is what we would like to remove. In other words: http://dns.d.pr/1kFpe/2XpTUQUAI hope this makes it easy to understand.
Thank you
Hi Andy,
Unfortunately that is what we already have at the moment “Open a preview of the entry (known as AJAX Portfolio)” – we need to REMOVE the Preview / ajax / lightbox altogether and when someone clicks on the picture nothing should happen, the picture should NOT enlarge.
Basically… the portfolio item should NOT open in a new page or should NOT open in a lightbox. It is enough to open like this only: http://dns.d.pr/1bvjW/4YYLrrvl
Any quick CSS to remove the preview of the entry on portfolio items?
Thank you
Hi Andy,
All my initial questions have been fixed now with the following codes, however, the lightbox removal is not right.
Using Enfold’s demo example: http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/
I still want to open the image exactly like this: http://dns.d.pr/1bvjW/4YYLrrvl – but the lightbox (http://dns.d.pr/me4x/2dVzhXWU) should not open, ever. We have removed the “zoom into lightbox” icon from the images successfully, now it is just to remove the link from the image itself.Hope I was clear enough, please let me know.
Thank you
Hi Andy,
I meant the first code worked fine to remove this: http://dns.d.pr/15B7P/4UZkLVDv
And now, your second code worked as well to remove the ajax effect: http://dns.d.pr/1k49t/3REcPbmFA new question related to the ajax portfolio, how can I disable the images from showing on a lightbox? I tried to see the settings here but there is no way to remove the link to open the image: http://dns.d.pr/16e3B/6B1reiC0
You may see the image I am referring to here: http://dns.d.pr/RA1M/3UrKw7zlAs for the second issue with the colour in the grid background, it worked, but only partially: http://dns.d.pr/K048/5p7XPiJl
I would like to have all that area in red but it still shows white on the left / right sides of the text.Thank you
Dear Andy,
#1 code worked perfectly fine but I realised that there is also the “enlarge icon” when image expands. Sshot: http://dns.d.pr/1fKAE/4w8SY79f taken from this page: http://kriesi.at/themes/enfold/portfolio/portfolio-2-column/
In addition to the icon removal, how can we disable the image enlargement? From this page: http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/
We want to display the image like this: http://dns.d.pr/1iDX4/43JDlRPz and we want to deactivate the lightbox link that will show the image like this: http://dns.d.pr/14d5E/14IlweJpAs for code #2, it didn’t work. From the same demo page from Enfold, this is the area we would like to change the color (mentioned in red): http://dns.d.pr/1c6xk/5Y7h6MKh
Thank you a lot for all help provided so far.
Hmm…
No, the trigger can also be on desktop computers as well. It is basically a link that will take you to Google’s website.
I noticed that on Enfold’s maps, if I click on Google icon, this works exactly as I expected to work, but it is not obvious for many users that they can click on Google’s logo. Would like to have exactly the same on the pinpoint for example. The GPS coordinates are already there, I am sure it wouldn’t be that hard to create a quick code to add a link to Google, right?Looking forward to get some positive progress from Enfold’s team.
Thank you.
Thank you Yigit,
I have found this as a recommendation in another post and it works, but… isn’t there a way to have the anchor links such as #home and #aboutus to work as in index.php/#home or index.php/#aboutus and use only one menu instead of two menus?
Many thanks.
Hi Andy,
Thank you for your help.
The 1st code is great but it still shows the circle where the arrow was. I assumed the arrow / circle was a single item but I was wrong.
So, how can I hide the circle and the arrow when mouse is over the image? The “image fade” effect shall remain as it is.As for code #2, the font color is changed but I would like to change the background only. Basically, the area mentioned here in the red box: http://dns.d.pr/1hzWq/31UcIDcQ
Many thanks.
