Hide by breakpoint

I Need Help
21

It doesn’t work.

22

Ok, I will try two more, if not works tomorrow I will write a code that works.

<script>
$('body').click(function(event){
   $dropdowns.not($dropdowns.has(event.target)).hide();
});
</script>
23

Thank you for the code. But I am sorry to say it too does not work.

If select “Bloc #products-dropdown” and then delete “d-none” & “d-lg-block” classes in the right sidebar, then I can close the dropdown without problem. But using those two classes on the dropdown Bloc prevent me from closing it.

24

Ok, I will found a way tomorrow… sorry for the non code… that’s why I never right code in iPad, I can’t see were are the mistakes… I sketch code in iPad…

1 Like
25

Thank you for your kindness, @Pealco. Maybe your code is perfect and those two Classes are creating problems. I think so because those Classes are not doing what they are supposed to do!

Have a wonderful evening!

26

This peace of sh****** of code is driving me crazyyyyyyyy…

But I beat him…

There you go, and I even add the burger menu to close as soon as the system detect a resize trigger, because the same thing happens in that menu…:

<script>
$(window).resize(function () {
   var x = document.getElementById("products-dropdown");{
  	x.style.display = "none";
  }
});
$(window).resize(function () {
   var x = document.getElementById("burger-menu");{
  	x.style.display = "none";
  }
});
</script>

Just paste it in the beginning of the header code in page preferences.
And you can clear all the -d and - whatever in classes regarding viewport…

27

I absolutely love your feistiness and being direct about what’s on your mind. I’m exactly like that. Love it! :slight_smile:

I will test your code first thing on Monday and then report back.

Thank you so much for your continued help, @Pealco!

28

@Pealco
I deleted “d-lg-block” from my #burger-menu then pasted your code into Page Settings > Header. It works great! Thank you! However, I have 5 ID’s that I want to hide on the first page, not just “products-dropdown”. I read online that getElementById() supports only a single ID, but I also read that I should be able to assign a class to each object and then use getElementsByClassName(). But when I substituted that into your code (see below) it didn’t work.

<script>
$(window).resize(function () {
   var x = document.getElementsByClassName("hideme");{
  	x.style.display = "none";
  }
});
$(window).resize(function () {
   var x = document.getElementById("burger-menu");{
  	x.style.display = "none";
  }
});
</script>

When I test the above code in Safari, I get the following Console error:

TypeError: undefined is not an object (evaluating 'x.style.display = "none"')

UPDATE#1: I hacked together the following code which fixes the problem:

<script>
$(window).resize(function () {
   var x = document.getElementsByClassName("hideme");
   var i;
   for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
   }
});
$(window).resize(function () {
   var x = document.getElementById("burger-menu");{
   x.style.display = "none";
   }
});
</script>

UPDATE#2: I found a new problem. When scrolling on an iPhone, the menu vanishes, as shown in the video below. Any ideas on how to fix this would be appreciated. Thank you.

29

Hello @JDW glad you found a solution, and that my code had guide you to the right solution.
Here to help you if you have further needs…

30

Please see my previous post. I just now updated it with a video showing a new problem.

31

I’m in iPad but I think there had to be because of the second part of the code, about the burger menu, just delete the following code and try it:

$(window).resize(function () {
   var x = document.getElementById("burger-menu");{
   x.style.display = "none";
   }
});
32

Deleting that code fixes the problem, but of course the menu stays displayed when switching display size.

I found the following discussion:

Based on that, I hacked together the following code, but I must have made a mistake because it doesn’t work:

<script>
$(window).resize(function () {
   var x = document.getElementsByClassName("hideme");
   var i;
   for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
   }
});

jQuery(document).ready(function($) {
    // Store the window width
    var windowWidth = $(window).width();
   // Verify if window width has actually changed
   if ($(window).width() != windowWidth) {
   // Update the window width for next time
   windowWidth = $(window).width(); 
$(window).resize(function () {
   var x = document.getElementById("burger-menu");{
   x.style.display = "none";
   }
   }
   // Otherwise do nothing
    });
});
</script>

UPDATE: Sometimes the most simple solution is the best solution. I will use the following code in Page Settings > Header:

<script>
$(window).resize(function () {
   var x = document.getElementsByClassName("hideme");
   var i;
   for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
   }
});
</script>

And I will add the “d-lg-none” class to my “#burder-menu”. That combination seems to work fairly well.

Thank you for your help, @Pealco.

33

No problem, if I can tomorrow I’ll give a look at the code, and what is happening…

1 Like