Databases
StackOverflow2013
Postsdbo
POJavascript based media query
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript based media query
    primarykey
    data
    text
    <p>I'm trying to develop a responsive navigation menu which dynamically creates a "More.." menu item when the screen size goes below certain width.</p> <p>Heres my code so far:</p> <p>Html :</p> <pre><code>&lt;ul id="menuElem" class="clearfix"&gt; &lt;li class="HighLighted"&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 6&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Javascript :</p> <pre><code>function MoreMenu () { //Checks if sub-menu exsists if ($(".sub-menu").length &gt; 0) { //if it does then prepends second-last menu item to sub menu $(".sub-menu").prepend($("#menuElem &gt; li:nth-last-child(2)")); } else { //if it doesn't exsist then appends a list item with a menu-item "more" having a sub-menu and then prepends second-last menu item to this sub menu. $("#menuElem").append("&lt;li class='more'&gt;&lt;a href='#'&gt;More...&lt;/a&gt;&lt;ul class='sub-menu'&gt;&lt;/ul&gt;&lt;/li&gt;"); $(".sub-menu").prepend($("#menuElem &gt; li:nth-last-child(2)")); } } function RemoveMoreMenu () { //checks if sub-menu has something if ($(".sub-menu li").length &gt; 0) { //if it does then the first child is taken out from the sub-menu and added back to the main menu. $(".sub-menu li:first-child").insertBefore($("#menuElem &gt; li:last-child")); //if sub-menu doesn't have any more children then it removes the "more" menu item. if ($(".sub-menu li").length === 0) { $(".more").remove(); } } } function Resize() { benchmark = 800; //Maximum width required to run the function $(window).resize((function() { currentWidth = $(window).width(); //Current browser width if (benchmark - currentWidth &gt; 0) { //checks if the browser width is less than maximum width required and if true it trigers the MoreMenu function MoreMenu (); console.log("screen size resized down"); } else { } })); } </code></pre> <p>The problem is when I run the <code>Resize()</code> function it actually runs <code>MoreMenu()</code> function for every window resize activity which is below 800px - which is not ideal.</p> <p>So, is there any way to run that <code>MoreMenu()</code> function just once when the screen size goes below 800?</p> <p>Thanks in advance -Struggling to get my head around javascript :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdavioooh
    1. USVarinder
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJavascript based media query
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload