I try to build my moilfirst megamenu

Question

0.00/5 (No votes)

See more:

As I refresh browser, I lose the expected appearance. I guess it is because of the use of resize function. I need help with the refresh for everything to stay as it is supposed to be and happens with Windows resize.

What I have tried:

I tried width jQuery function. I was thinking on media query too but I am not really sure about it.

HTML

  1  <!DOCTYPE html>
  2  <html>
  3  <head>
  4  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  5  <style>
  6  ul li{list-style-type: none;}
  7  	.dv1{
  8      	width:100%;
  9          height:50px;
 10          background:green;
 11  	/*	*/
 12      }
 13      .dva,.dvb,.dvc,.dvd{
 14      	width:100%;
 15          height:150px;
 16          background:lightgreen;
 17          margin-top:0;
 18      }
 19      .article{
 20      	width:24%;
 21          background:pink;
 22          border: 1px solid red ;
 23  		display:inline-block;
 24      }
 25  	.btn1a{width:100%;}
 26  </style>
 27  </head>
 28  <body onresize="myFunction()">
 29  
 30  <p>Try to resize the browser window to display the windows height and width.</p>
 31  
 32  <p id="demo"></p>
 33  <div class="article">
 34  <div class="dv1"><button class="btn2a">Slide down Drinkss</button></div>
 35  <div class="dva">
 36  	<h3>List of Drinks:</h3>
 37        <ul>
 38          <li><span>Coffee</span><button class="btn1a">Coffee</button></li>
 39          <li><span>Tea</span><button class="btn1a">Tea</button></li>
 40          <li><span>Coca Cola</span><button class="btn1a">Coca Cola</button></li>
 41        </ul>
 42        
 43  </div>
 44  <button class="btn1a">Slide up</button>
 45  </div>
 46  <div class="article">
 47  <div class="dv1"><button class="btn2b">Slide down Alcohols</button></div>
 48  <div class="dvb">
 49  	<h3>List of Alcohols:</h3>
 50        <ul>
 51          <li>Beer</li>
 52          <li>Vine</li>
 53          <li>Spirits</li>
 54        </ul>
 55        
 56  </div>
 57  <button class="btn1b">Slide up</button>
 58  </div>
 59  <div class="article">
 60  <div class="dv1"><button class="btn2c">Slide down Alcohols</button></div>
 61  <div class="dvc">
 62  	<h3>List of Drinks:</h3>
 63        <ul>
 64          <li>Coffee<button class="btn1c">Slide up</button></li>
 65          <li>Tea<button class="btn1c">Slide up</button></li>
 66          <li>Coca Cola<button class="btn1c">Slide up</button></li>
 67        </ul>
 68        
 69  </div>
 70  <button class="btn1c">Slide up</button>
 71  </div>
 72  <div class="article">
 73  <div class="dv1"><button class="btn2d">Slide down Alcohols</button></div>
 74  <div class="dvd">
 75  	<h3>List of Alcohols:</h3>
 76        <ul>
 77          <li>Beer</li>
 78          <li>Vine</li>
 79          <li>Spirits</li>
 80        </ul>
 81        
 82  </div>
 83  <button class="btn1d">Slide up</button>
 84  </div>
 85  <!--
 86  <button class="btn1">Slide up</button>
 87  <button class="btn2">Slide down</button>-->
 88  <script>
 89  $(document).ready(function(){
 90    
 91  });
 92  function myFunction() {
 93    let w = window.outerWidth;
 94    let h = window.outerHeight;
 95    let txt = "Window size: width=" + w + ", height=" + h;
 96    document.getElementById("demo").innerHTML = txt;
 97    //if ($(window).width()>799){$(".btn1a").hide();
 98  //  }
 99    
100    if (w<800){
101     $(".dva").hide();
102     $(".dvb").hide();
103     $(".dvc").hide();
104     $(".dvd").hide();
105     
106     $("span").hide();
107     
108     $(".btn1a").show();
109     $(".btn2a").show();
110     $(".btn1b").show();
111     $(".btn2b").show();
112     $(".btn1c").show();
113     $(".btn2c").show();
114     $(".btn1d").show();
115     $(".btn2d").show();
116     
117     $(".btn1a").click(function(){
118      $(".dva").slideUp();
119      
120     });
121     $(".btn1b").click(function(){
122      
123      $(".dvb").slideUp();
124     });
125     
126     $(".btn1c").click(function(){
127      
128      $(".dvc").slideUp();
129     });
130     
131     $(".btn1d").click(function(){
132      
133      $(".dvd").slideUp();
134     });
135     
136    $(".btn2a").click(function(){
137      $(".dva").slideDown();
138      
139    });
140    
141    $(".btn2b").click(function(){
142      
143      $(".dvb").slideDown();
144    });
145    $(".btn2c").click(function(){
146      
147      $(".dvc").slideDown();
148    });
149    $(".btn2d").click(function(){
150      
151      $(".dvd").slideDown();
152    });
153    
154    $(".article").css("display","block");
155    }
156    else{
157     $(".dva").show();
158     $(".dvb").show();
159     $(".dvc").show();
160     $(".dvd").show();
161     
162     $("span").show();
163     
164     $(".btn1a").hide();
165     $(".btn2a").hide();
166     $(".btn1b").hide();
167     $(".btn2b").hide();
168     $(".btn1c").hide();
169     $(".btn2c").hide();
170     $(".btn1d").hide();
171     $(".btn2d").hide();
172     $(".article").css("display","inline-block"); 
173     //$(".btn2").css("display","inline");   
174    }
175  }
176  </script>
177  
178  </body>
179  </html>

Posted 30-Aug-23 3:33am

Frank-Cziryek

Updated 13-Sep-23 3:45am

Deeksha Shenoy

v3

Add a Solution

Comments

Member 15627495 30-Aug-23 9:44am

the 'innerHtml' send back tags ( with text contents )

try : innerText

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2023-08-30T04:40:00

Your code is rather messy.

Here's a JSFiddle of what you've got at the moment: Edit fiddle - JSFiddle - Code Playground[^]

Just about all of your script can be replaced by media queries:
Using media queries - CSS: Cascading Style Sheets | MDN[^]

CSS

@media (max-width: 799px) {
    .dva, .dvb, .dvc, .dvd, span {
        display: none;
    }
    .btn1a, .btn2a, .btn1b, .btn2b, .btn1c, .btn2c, .btn1d, .btn2d {
        display: initial;
    }
    .article {
        display: block;
    }
}

@media (min-width: 800px) {
    .dva, .dvb, .dvc, .dvd, span {
        display: initial;
    }
    .btn1a, .btn2a, .btn1b, .btn2b, .btn1c, .btn2c, .btn1d, .btn2d {
        display: none;
    }
    .article {
        display: inline-block;
    }
}

The button click event handlers should be added outside of the resize event handler:

JavaScript

$(".btn1a").click(function() {
    $(".dva").slideUp();
});

$(".btn1b").click(function() {
    $(".dvb").slideUp();
});

$(".btn1c").click(function() {
    $(".dvc").slideUp();
});

$(".btn1d").click(function() {
    $(".dvd").slideUp();
});

$(".btn2a").click(function() {
    $(".dva").slideDown();
});

$(".btn2b").click(function() {
    $(".dvb").slideDown();
});

$(".btn2c").click(function() {
    $(".dvc").slideDown();
});

$(".btn2d").click(function() {
    $(".dvd").slideDown();
});

That just leaves your resize function updating the label to show the window size. You should use innerWidth/innerHeight instead of outerWidth/outerHeight, since you only want to know about the space available to your document, not the entire browser window. You should attach the event handler through code, rather than the onresize attribute on the body. And you should invoke the handler once when the page loads, so that the label is updated immediately rather than waiting for the user to resize the window.