Javascript height timing problem

1

I’ve created a navigation bar with two drop-down menus. There was an issue with the height of the navigation bar overlapping content underneath, making it inaccessible. I therefore made the height of the div 70px, and then the mouseover runs a JS that makes the height 600px and back to 70px on mouse-out.

This works fine on computers, but on tablets there is no delay between the two menus - when you switch from one menu to another, the closing menu ends up making he height 70px when it should remain 600px.

Here is a video to show you what happens.

A possible solution I tried and failed with was a counter:
Counter starts at 0, mouse-over -> counter++.
Mouse out -> counter–

the JS to decrease size only runs if count == 0.

So therefore until both menu’s have closed, the counter will not be 0.

For some reason this doesn’t work though. I’ve included an original document from the video, and the one testing my potential solution.

Any help would be appreciated.

Original:
NAV.hype.zip (88.6 KB)

Solution attempt:

NAV - HELP.hype.zip (102.6 KB)

2

I’m still having difficulty figuring out a solution to this problem. Any help is greatly appreciated.

3

It might be your touch settings. I’m using my iPad now, so I’m just imagining what the problem might be, but I’m thinking it should be on touch start / mouse down – not on click. A click is a full cycle of down then up. When I work on crossplatform projects, keeping the different events straight is tricky.

I’m not sure, but that might be the problem you’re having. Checking the document preferences might help, as I think there’s a setting that might be related to this.

4

It needs to be on mouse over to accommodate desktop users. I think its more of a timeline issue, here is whats currently happening:

When mouse over one drop down on its OWN.
Mouse over -

  1. Click first drown down (start timeline A1 - open dropdown 1)
  2. Document height set to 600. (increase)
  3. Drop down appears (2 seconds)

Mouse out - (PLAY TIMELINE IN REVERSE)
(Start timeline A2 - close dropdown 1)

  1. Drop down disappears (2 seconds wait until 2. occurs)
  2. Document height set to 60. (decrease)

What happens on IPADS (clicking between the menus - no wait time before each timeline is finished)

  1. Dropdown 1 tap (Start timeline A1 - open dropdown 1)
  2. Document height set to 600. (increase)
  3. Dropdown 1 appears (wait 2 seconds timeline A1)
    4.1 Dropdown 2 mouseover/tap (Start timeline B1 - Open dropdown 2)
    4.2 Dropdown 1 Mouseout activated (Timeline A2 - close dropdown 1)
    4.3 Timeline B1 : Document height set to 600. (increase)
    4.4 Timeline B1 : Dropdown 2 appears (2 seconds)
    4.5 Timeline A2 : Drop down disappears (2 seconds wait until 4.6 occurs)
    4.6 Timeline A2 : Document height set to 60. (decrease)

Therefore…
Since timeline A2 and B1 will start at the same time -
B1 immediately increases height, then opens dropdown 2
A2 first has to close dropdown - takes 2 seconds.
A2 Makes document size 60 - PROBLEM.

If you swapped between the two on a desktop quick enough, the same problem would occur.

What I tried to do in my solution was check to see if another dropdown was opening, and therefore not make the document height decrease.

Another solution:
Can you force a timeline to wait until another one is finished?

5

If you're using mouseovers, that might be your problem.

The buttons sometimes light up on mobile. That shouldn't happen in an environment where a cursor doesn't exist... but it does.

You could move this into custom JavaScript and control the timelines from there. That way, you could do device detection and use the appropriate events. You could also check the current position of the timeline, to then do corrections if necessary.

6

Did you read the explanation I wrote about the timelines? The problem is with the setup and how the timelines work with each other.

The opening dropdown increases the height at 0.0s
And then the closing dropdown decreases it again at 2.0s.

I haven’t been able to figure a way around it.

7

Note this problem can happen on Desktop too if you move the mouse fast enough. I did some logging on the increase/decrease just to see what was happening. The ordering was:

1st click:
decreaseHeight
IncreaseHeight

2nd click:
decreaseHeight
IncreaseHeight
IncreaseHeight
decreaseHeight

This makes sense given the timelines to open have an initial decrease and then an increase.

Your solution attempt with the count is probably the easiest fix for the problem. The reason your solution isn’t working is because of that initial decrease. You should make sure the count never dips below zero. Try changing the decrement in decreaseHeight to something like:

count = Math.max(0, count - 1);

This worked for me.

8

@jonathan I couldn’t get it to work. It seems to work fine when I launch it through Hype, but when it’s on the website it doesn’t seem to work (The page height never decrements - objects behind the box can’t be selected/interacted).

NAV - HELP.hype.zip (102.7 KB)

9

On the actual site are you copying over the head that defines the count variable?

I’d need to see the website to know what is going on there since in Hype it works correctly. I even retested the sizing by changing the body background color and it looks good to me.