Responsive Design - Toggle a Div's Visibility - how to integrate javascript with css @media


Tags: javascript,html,css,css3,responsive-design

Problem :

I started a previous thread with the same goal but now I have the real question and have created two fiddles jsfiddle #1 AND jsfiddles jsfiddle #2 to show the problem.

I am attempting to use principles of responsive design to adapt to changing screen size. It has these two parts

  • Use CSS to hide/show a vertical menu div (main-nav-vert) using @media based on browser width.

  • Use a Menu button to also hide/show the same div main-nav-vert using javascript.

The problem I am having is that I can find a way to integrate the javascript with the @media rules. I am open to another way (but without jQuery)

The Problem: To test these fiddles and see the problem: Reduce the window size to see the impact of @media and it should hide the menu on the left. Expand the window and the menu should reappear. Now shrink the window again until the menu disappears. Click the button and the menu appears. Click the button a second time to hide it. NOW, expanding the window will no longer show the menu.

Try #1 (jsfiddle #1)

  • javascript changes the same display property of main-nav-vert that @media is changing.
  • javascript only changes the element NOT the underlying CSS (as shown in the inspector).
  • The element values set by javascript will take precedence over the CSS property set by @media and so ...
  • once the button is pressed, the @media settings will no longer work - being overridden.

Try #2 (jsfiddle #2)

  • javascript alternately sets a new class to the main-nav-vert div (hidden and visible) with each click of the button.
  • the display property for main-nav-vert set by @media will take precedence over the display property from the hidden class and the button will not hide the menu ... UNLESS
  • I override the display property by using !important in the visible and hidden classes, but then @media won't work as before.

Please help. There must be a better way. I am looking for a pure js answer, please no jQuery. Thanks.



Solution :

I found the answer with window.matchMedia and addlistener. Basically, I added a javascript listener for a media query. The javascript fires whenever the condition (screen size) crosses the boundary.

I have posted the jsfiddle with a working solution.

html

<div class="page-container">
    <div class="div-menu-toggle" id="div-menu-toggle">
    <button type="button" onClick="showmenu();">Menu</button>
    </div>
    <div class="main-nav-vert visible" id="main-nav-vert">
    <ul class="nav-vert">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    </div>
    <div class="main-content" id="main-content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
    </div>

css

.main-nav-vert{
    display: block;
    float:left; 
    width:145px;
    border:solid 2px #00f;
}

.div-menu-toggle{
    display: none;
}

.main-content{
    max-width:808px; 
    width: auto;
    padding:0 9px 0 9px;
    margin-left: 145px;
}

javascript

var jmq = window.matchMedia( "(max-width: 480px)" )
var keepOpen = false;

jmq.addListener(jmqListener);
window.onload = function() {
jmqListener(jmq);
};   

function jmqListener(jmq){
var button = document.getElementById('div-menu-toggle');
var menu = document.getElementById('main-nav-vert');
var content = document.getElementById('main-content');
if (jmq.matches) {
    // window width is less than 480px
    //show menu button
    button.style.display = "block";
    if (keepOpen == false){
    // if keepOpen flag is not set, hide the menu
    menu.style.display = "none";
    // set left margin of main-content to fill screen
    content.style.marginLeft = "2px";
    }       
}
else {
    // window width is at least 480px
    //hide menu button
    button.style.display = "none";
    // if show the menu
    menu.style.display = "block";
    // set left margin of main-content to make room
    content.style.marginLeft = "145px";
}    
}

function showmenu() {
var menu = document.getElementById('main-nav-vert');
var content = document.getElementById('main-content');
// with click on menu button
if(menu.style.display == "block"){
    // if menu is already open, hide it
    menu.style.display = "none";
    keepOpen = false;
    // set left margin of main-content to fill screen
    content.style.marginLeft = "2px";
}
else {
    // menu is closed - show the menu
    menu.style.display = "block";
    // set a flag that it is open
    keepOpen = true;
    // set left margin of main-content to make room
    content.style.marginLeft = "145px";
}
}

    CSS Howto..

    How to resize & move css divisions at same time?

    repeated divs loaded by angular could have different contents, how can I make them have automatically adjusted heights?

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    How to trigger css3 rotate effect by clicking?

    How to put padding on SPAN only when not empty

    How to add css to form elements if attribute class is already being used in Jquery

    How to Move Bing Maps Menu to the Right side of Screen

    How can I absolutely position a related image_tag?

    How to pause css animation at orginal state

    How to include CSS for a specific part of the page

    How can I remove vertical padding from ionic icon?

    How to target specific img using css

    How to make a ccs transition only forward

    How to change color and background of whole web site

    Ember css dosen't work + How to create two stylsheets

    How to change the font family of Highchart to Bootstrap css default font family

    how to override min-width

    How to add CSS class to CQ dialog box

    How do i hide html until its processed with javascript?

    CSS selector for showing descendants doesn't work properly

    How to center a image with transparent background in css?

    How to do this kind of Button in CSS?

    How dynamically aligning text on website

    How to hide header on scroll down, show on scroll up like linkedin menu

    How to modify a general css using javascript and jquery and return the result as a new id

    How to apply multiple css transform properties using Jquery

    How to center absolutely positioned elements in css for a pdf

    JavaFx: How to get the corresponding stylesheet for a given style class of a Node?

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    How to get the current year using css?