*** SOLVED *** Problems with Icon on Page size 1920 px

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
nrgiser
 
 
Posts: 35
Joined: Sun May 20, 2018 8:47 am

*** SOLVED *** Problems with Icon on Page size 1920 px

Post by nrgiser » Sun Oct 07, 2018 1:08 am

Hi there,

I have a built a website and on my computer at work I have a touch screen (This is not where I have built the website) when I go to a certain page like our room page I have Icons and when you drag your mouse over them a small text box comes up telling you what that Icon means like "Air-Con" or "Cable TV" all works fine at home using my computer where I use a mouse, but when at work and use the touch screen and go to the "Rooms" page and touch the Icon to show the text, the page always goes up to the top of the web page itself and does not show the text. I have tried to add in the "Events" ontouchstart to show the text box and "ontouchend" to hide the text box, but this causes a conflict with the other event "onmouseover" to show and "onmouseout" to hide, so I cannot use both events on the same page at the same time. I now only have "onmouseover" and "onmouseout" in the events on my 1920px page but I still have the problem when I am using my larger touch screen computer at work that the web page will scroll to the top when I touch any of the Icons on that page. I have no problems with any other page size that I have with the website, including page size 320px for the phones. It is just with the 1920px page size.

Here is the URL to that page >>

https://www.ocean-bay-beach-resort.com/rooms

I am also having the same issue with the actual room web page too where there is also Icons.

Any help in this matter would be greatly appreciated.

Thank you.

User avatar
crispy68
 
 
Posts: 401
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Problems with Icon on Page size 1920 px

Post by crispy68 » Sun Oct 07, 2018 3:21 am

You have the same issue on my desktop using the mouse. If I click on one of the icons, it will jump to the top.

You have a hover event for the icon so it will only work when you hover over it with the mouse. Touching with your finger is like clicking the mouse button. It is reacting like its a link. You have '#' in for the link which will cause it to jump to the top of the screen.

As for a solution or alternative, I don't have an answer for you.

However, i would ask why do you have the text appearing only when you hover over the icon?

In my opinion (maybe not worth much), but the idea of using an icon is to visually relay information to the user versus simply using text. If the icon chosen is widely understood (slash thru the cigarette) then using the icons is successful. However, I know sometimes it is hard to find the perfect icon to represent a particular idea so you end up find something close and hope it works. For example, your snowflake I have no idea what it means. Is it cold in the rooms? Even for me hovering over it, I'm still not sure what 'air-con' is. I see there is wi-fi. Is it free or paid? Don't know unless I hover over the icon.

My suggestion would be to simply have the text underneath the icon already visible (like in your main menu) and nix the hovering effect.


edit: A few minutes later it dawned on me what 'air-con' meant. I assume this meant 'air conditioning'. I'm used to seeing it written as 'A/C'. :mrgreen:

nrgiser
 
 
Posts: 35
Joined: Sun May 20, 2018 8:47 am

Re: Problems with Icon on Page size 1920 px

Post by nrgiser » Sun Oct 07, 2018 4:21 am

Hi Crispy68,

Thank you for taking the time to send me a reply to my inquiry.

I did not intend for user to the site to click on the icon only to hoover over them, and when they did the text would display, explaining what that icon meant. The reasons for doing this was so that I could fit larger text messages on the screen, especially the 320 px screen for the phone. There was no way that I could write all that information on that screen without the text popping in and out when someone hovered over it or touched the Icon on their screen. There is just not the room on the screen to have all that text visible at the same time. Also it makes the site a little more interactive too for the user.

The Wi-Fi text does state "Free Wi-Fi" when you hover over it, so people will know that information. As for "Air-Con" it simply means that the room has air-conditioning. Most people who stay with us, tend to ask does it have air-con or has the room got air-con, it is just lazy English and abbreviated from air-conditioning.

Anyway I will wait and hope to hear from someone who may have an answer for me, to this original question. I do appreciate your time in replying.

Thank you.

User avatar
Pablo
 
Posts: 14099
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Problems with Icon on Page size 1920 px

Post by Pablo » Sun Oct 07, 2018 7:20 am

Maybe this helps?

Set the URL of the icon to

Code: Select all

javascript:void(0)
to prevent an empty anchor from being added.

Also note that events are not specific to breakpoints, they will be activate in all breakpoints.
When using events to show/hide objects the option 'Include visibility' should be off.

Related FAQ -> When using events, the visibility is affected by breakpoints:
https://www.wysiwygwebbuilder.com/forum ... 10&t=63817

nrgiser
 
 
Posts: 35
Joined: Sun May 20, 2018 8:47 am

Re: Problems with Icon on Page size 1920 px

Post by nrgiser » Tue Oct 09, 2018 12:27 am

Hi Pablo,

Thank you as usual for helping me. I set the Icon URL to "javascript:void(0)" and that has prevented the page from scrolling to the top, so your solution work a treat for me. You may mark this thread as "Solved"

Thank you once again.

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests