Landing page with dropdown nav using plain JS

Community feedback

• 

  hebrerillo•350

  @hebrerilloPosted over 2 years ago

  Hello Elaine! You did a great work, so congratulations!

  Now, there is a bug that happens with fixed positioned popups. I happened to have the same problem with this challenge.

  Try to display your site in a smartphone in landscape, or just by using the responsive mode of Firefox or Chrome with a display of 830px X 330px. You will see that the 'Register' button is cut from the viewport, and you cannot scroll down to see the button. In real smartphones, the address bar takes some space of the view port.

  That is because fixed popups do not push down the body when the content exceeds the height of the view port size. But absolute positioned popups do.

  I tell about this bug because you are pretty advanced ;) The rest of your implementation is awesome!

  Marked as helpful

  2

  ---

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @hebrerillo Thank you for alerting me to this! I had changed the structure I used in my other project and had forgotten about this issue, and I ended up changing the structure there as well so I forgot what I did. 😅

  I just had a look at your code and site as well, which I'll keep as a reference. Thanks again for helping me check! 😊

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @hebrerillo I just fixed the height issue; it turns out I needed a function as well, which I think is also something you had in your code. So anyway I added one as a temporary fix and will experiment more later as I'm not entirely satisfied with the temp fix yet. If you happen to test it again on your device, let me know if the bar stretches to the bottom. Thanks!

  1

  

  hebrerillo•350

  @hebrerilloPosted over 2 years ago

  @elaineleung yes! You fixed it ;)

  But you did not need any JavaScript to fix it at all. Just by setting the popup to an absolute position is enough.

  The JavaScript I have in the HTML file is to calculate the minimum height of the document on mobile devices. That is because I want the footer to stick to the bottom.

  If you open my solution and remove the button, the central image or the text from the HTML, you will realize that the footer still sticks to the bottom (only for mobile). When I tested that on the responsive mode of Firefox, everything was working. But when I tested it on a real mobile device, the footer was hidden because of the address bar of mobile devices, which is included in the view port height.

  The JavasScript code subtracts the height of the address bar from the minimum height of the document. That way, the footer is always visible :)

  I am going to document this in the file.

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @hebrerillo The position: absolute alone did not work for me; while it was able to scroll, the background color gets cuts off at the bottom regardless whether I use min-height or height at 100vh or 100%. But I figured it out in the end with something else without needing JS; I just added bottom: 0 and with overflow-y:auto, and the nav can scroll whether I use position fixed or absolute.

  Yes, the mobile missing/covered footer has been a longstanding topic of discussion in a few places I've seen! I saw an interesting solution to it recently that I haven't yet tried out but would love to soon.

  1

  

  hebrerillo•350

  @hebrerilloPosted over 2 years ago

  @elaineleung I am glad you managed to fix it!

  By the way, could you please tell me about the solution to fix the footer problem on mobile screens? I am very interested!

  I also tried to use 'min-height: -webkit-fill-available;', as explained here: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

  But I wasn't able to get it to work :(

  Thanks a lot in advance!

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @hebrerillo I've also seen the fill available solution, haven't fully tested it out yet. About the footer solution, here's the link if you're interested: https://dev.to/fenok/stretching-body-to-full-viewport-height-the-missing-way-2ghd. Let me know if you manage to get it to work!

  1

  

  hebrerillo•350

  @hebrerilloPosted over 2 years ago

  @elaineleung thank you so much!! I will give it a try and will let you know ;)

  1
• 

  P

  Harm Intemann•590

  @ghintemaPosted over 2 years ago

  Hi Elaine,

  did you notice, that when you reduce screen size below the 960px-Brakepoint you get to see the slide-menu for a sec?? You might think it's irrelevant as no real user plays along with dev-tools. But the thing is: You also see the effect when changing from landscape to portrait-mode. This can be annoying... No idea how to fix this, as I don't know nothing about JS so far. But I thought it's worth mentioning... Never mind if you already knew it!! :)

  Marked as helpful

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @ghintema Thank you Harm, and yes I did notice it already even in the React version I built before this one. I may have found a solution to the problem and will try it out in the days to come. Anyway, I appreciate the mention!

  0

  

  P

  Harm Intemann•590

  @ghintemaPosted over 2 years ago

  @elaineleung I may get back to you for the solution in the future when I start working with js-react... :)

  0
• 

  Yacine Kahlerras•820

  @yacineKahlerrasPosted over 2 years ago

  Hi Elaine very impressive work, i tried to make it as pixel perfect as yours but couldn't you are really amazing ! i do have one small suggestion though, you can hide the active dropdown when you click anywhere else on the page by doing document.body.addEventListener("click", disableAllDropdownsFunction, true); i read your code so you function might look like this i think : function disableAllDropdownsFunction() { dropDownBtns.forEach((btn) => toggleElement(btn, true, handleDropDown)); }

  Marked as helpful

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @yacineKahlerras Thank you Yacine! Yes, that's a good idea; I only had the action on the links where clicking the links would close the dropdowns, but I think your suggestion is needed as well. I'm continually adding/fixing this solution when I have the time, so will keep this mind for sure!

  1
• 

  Jordan•140

  @joanFaseDevPosted over 2 years ago

  Works like a charm on my screen. Impressive and inspiring work, especially the transition between mobile and desktop design. It's well documented too which is great for aspiring developpers like me. Keep up the good work and happy coding!

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @joanFaseDev Thank you Jordan, happy coding to you also!

  1
• 

  Rajesh Singh•280

  @Rajeshsingh127Posted about 2 years ago

  Hi Elaine! Excellent work. I'm a beginner and I'll take your code as a reference for wherever I get stuck. Thanks again..!

  0