Highlighted

behaviors on mobile

New Here ,
Apr 03, 2020

Copy link to clipboard

Copied

Hi,

 

How can I make the mouseover / mouseout and click behaviors work the same on a mobile device as they do on a desktop? 

 

Thank you!

 

 

TOPICS
Bootstrap, Code, Extensions, How to, Other, Performance

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

behaviors on mobile

New Here ,
Apr 03, 2020

Copy link to clipboard

Copied

Hi,

 

How can I make the mouseover / mouseout and click behaviors work the same on a mobile device as they do on a desktop? 

 

Thank you!

 

 

TOPICS
Bootstrap, Code, Extensions, How to, Other, Performance

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 03, 2020 0
LEGEND ,
Apr 03, 2020

Copy link to clipboard

Copied

Mobile devices don't support mouseover/mouseout behaviours, you should add the onclick behaviour to cover those devices.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2020 0
Adobe Community Professional ,
Apr 03, 2020

Copy link to clipboard

Copied

Don't use hover or mouseover triggers for anything important. The majority of Internet users are on touch screen devices that have no mouse.  OnClick event triggers are more user-friendly.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2020 0
New Here ,
Apr 03, 2020

Copy link to clipboard

Copied

Thank you for the click information but unfortunitly it doesnt work for what I want it to do. 

 

I want to mouse over or touch a word on a list and have an image relating to the word appear in a target area. The desktop works great for the mouseover: swap image, mouseout: image restore  and Onclick goes to a link. This senario on the phone swaps the image on first tap and immediaty transfers to the link. They almost happen simultainiously. The one tap does both.

 

I know the commands are possible because I have seen it happen on other websites. Maybe I shouldn't use the behaviors panel...

 

I need to have 2 of the functions on a mobile device. ontap: should swap the placeholder image with an image having to do with the word and on a doubletap link to a new page that holds information about the word.

 

Thanks again!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2020 0
Adobe Community Professional ,
Apr 03, 2020

Copy link to clipboard

Copied

1. Double taps are not normal or expected browser behavior.  Everyone expects a single tap.

2. Often the best solution is the simplest one. Avoid gimmicks for the sake of gimmickery.

3. Below is an ordinary browser tooltip on linked text. 

 

image.png

 

The pot at the end of this rainbow is the destination page, not the tooltip.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tooltip Example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><a href="detail_page.html" title="This is some descriptive text inside a tooltip">Some Link</a></p>
</body>
</html>

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2020 0
pziecina LATEST
LEGEND ,
Apr 03, 2020

Copy link to clipboard

Copied

You can simulate the effect by using css animations, (also works on desktop).

 

Set the animation to first increase the size of the image, (or whatever) then pause when the effect is at the desired size. Then un-pause the effect by having the user touch/click again. You can also just have the image pause for a set time, before shrinking the image.

 

Unfortunatly Dw does not have anything to help with the creation of such effects. The old google css designer app is probably the only free app I know of to 'visually' help, but it is dated, and only supports creating with webkit prefixed css.

For multiple images, (or whatever) you will have to create the animation for each image, (cut/past and use image specific css selectors).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2020 0