Javascript height change 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)

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?

1 Like
2

Have a look at this.

1, I put the mouse actions only on the groups and took any on the text elements inside off.
2, Removed all the calls to JS of the timelines.
3, put the calls to the JS on the mouse actions. This gave a bit better control as the delay on the timelines firing the JS is removed and made it easier to follow.

Screen Shot 2017-03-23 at 23.47.32.JPG544×786 70.1 KB

NAV 2_MH1.hype.zip (97.5 KB)

1 Like
3

@MarkHunte The problem is with the nav-bar closing. It takes 2 seconds to close the navbar, and since you open the new nav bar (height=600) and then the 2 seconds for closing the first navbar is over(height=60), the overall height becomes 60 even though the new navbar is open.

In your solution there is no navbar closing animation. Do you think there’s a way to implement the navbar closing animation into your method?

My idea was to have a sort of counter to see if the navbar is open, the height changing then checks the counter to see if it should reset height to 60.

========
Height = 60 requires counter to equal 0;

Open Navbar 1 (height=600 at 00:00) counter++ (counter=1)
Open navbar 2 (height = 600 at 00:00) counter++ (counter = 2)
Navbar 1 will close automatically, as iPad see’s mouseOver on navbar 2 and mouseOUT on navbar 1:
(2 second animation to close navbar1) counter-- (counter = 1)
(height = 60? only if counter = 0)

Click anywhere else on page = mouseOUT for navbar 2:
(2 second animation to close navbar2) counter-- (counter = 0)
(height = 60? Yes becuse counter = 0)

==========

For some reason, this didn’t work for me. It seems to work on paper but something is going wrong.
Do you have any suggestions?

4

I will have a look again to add animation , should be doable.

I take it though in my example you are no longer getting the both showing or being hidden problem

5

@MarkHunte Yeah works flawlessly on he iPad now. How do you think you’ll bring back the closing animation?

6

@MarkHunte have you found a solution?

7

Is this different from Javascript height timing problem ?

8

I did have a look, and to be honest was still mulling it over.

I had a working modal that allowed for animation, a slow drop down and rise up. The timing was controlled that only changed the height of the document back if the both menus where below 35px.

This worked up to an extent but not 100% hence me mulling it over.

I see @jonathan has answered on another thread a fix for you counter idea. ( did not realise you posted twice )