Hover state remain after "unhover"

[rondy88]

Hi!

I’m having troubles with the hover state to remain after “unhovered”. I’m not the best with Axure. But as you can see in this calendar interaction link below for AirBnb, once you click on a date & the dates in between stay hovered is something I’d like to replicate on Axure. I’m not sure if the Repeater widget is something that would help me with this, I’m really not sure. Can anyone tell me how I could go about doing this?

http://airbnb.io/react-dates

Thanks!

[mbc66]

@rondy88,

To achieve the multiple states in that AirBnB example, you’ll need more than just a hover and selected state because any date cell can have (at least) 6 states. You can do it in Axure, and there are (probably more than) a few ways to solve this. Yes, using a repeater will help with this, but it will be a bit of work to get it done.

Before we get into the repeater stuff, let’s address the multiple states that a date can have and how to handle displaying those. Here are the states I see in your linked example:

1. Normal
   
2. Disabled (prior to current date)
   
3. Hovered (but not selected or “between”)
   
4. Selected (start or end date after clicked)
   
5. “Between” (after the start date and between the currently hovered date or end date)
   
6. Hovered-Between (when end date selected and a “between” date is hovered)
   

The most common way to handle more than normal/hover/selected/disabled states is with a dynamic panel (dp): create duplicate states in your dp for each special widget state. In your case, you could have six dp states, each with a copy of a “date” rectangle widget, styled as needed. Or, you could have one rectangle widget with a transparent fill and a number (for the date), and a dynamic panel with a colored rectangle (but no number-text) for each of the states. This would reduce the need to assign each date-number 6 times. This will likely be important when you set up your repeater. The basic approach then, would be to have your date-number widget have a normal state with black text, disabled state with gray text, and selected state with white text. Its OnMouseOver code would need to control the state of your underlying dp, to set it to a “normal/disabled” or “normal hover” or “after-start/between” or “between-hover” state as appropriate.

If I get some time in the next day or so I could try to work up an example .rp if that would help.

Here are few threads from the forums that might help in the meantime:

Filtering a repeater by multi-select calendar

Is there a way I can filter a repeater by a multiselect calendar by using conditional logic? In the file attached I want to multi-selects dates (say 10 - 18 march) and filter the repeater for those dates. Thanks in advance, select dates.rp (204 KB)

Flexible Calendar Matrix Widget

Hi katmobrien, Welcome to the forum. Generally speaking, the way to create a highlighted row (or highlighted column) effect would be to use Interaction Styles or even to use a separate widget that moves and hovers over the content where it underlies the cursor directly. For the most part, many of the examples posted on the forum show ways to highlight rows but not columns, which is probably influenced by the fact that rows, specifically, can be manipulated through Actions (…

[rondy88]

@mbc66,

Thanks so much for this!

I tried to follow the instructions you listed. From my understanding, I’ve ended up creating -

• One rectangle with text with dp as follows – a normal state, one disabled state & one with white text.
• Another rectangle with colours associated with the following states – default, disabled, hovered, selected, between & hovered-between.

I then read your advice on “OnMouseOver” then I got quite confused. I don’t think it has anything to do with your explanation, I’m just not that well trained in the tool.

If you do get a chance, an example.rp from you would be greatly appreciated & would help out heaps!

Thanks for the threads. I will keep trying & will notify you through this thread if I’ve made much progress!

[mbc66]

@rondy88,

Yeah… this is fairly advanced prototyping. A pretty good challenge for me to get all the states and effects right, and there’s still a bit to do to get it quite right, but here is (the start of) a solution.

https://puew71.axshare.com
CalendarDatePicker.rp (324.1 KB)

…and more work yet to try explaining it all. Maybe sometime…

[rondy88]

@mbc66,

Wow! Thank so much. This has helped a bucket load. I’m just looking through it now with a work colleague who has used Axure for a lot longer than I have.

It does seem very advanced, but we’re just wanting to implement it into a grid calendar for user testing. Will show you the end result… if we manage to get there haha!

[[[[[ UPDATE ]]]]]
Thanks so much for your help @mbc66 . We’ve come up with a simpler solution for what we’re trying to achieve. Definitely taking your feedback on board & greatly appreciate your time!

Cheers!

[bermanatalie]

solution

Hi mbc66,
May I ask you if you could please advise how to create a date picker with a date range selection?
In the posted file, I have a mockup design for a single date selection that supports automatic snapping of the highlighted date to the current date in user’s calendar.
I was wondering if there is an option to augment this design (on the left) with an option to select a date range (on the right).

Preview

date range.rp (278.6 KB)

Thanks in advance!
Natalie

[system]

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.