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 use jQuery to fade in/out li a:hover css background-color?

    How to show something only when user prints?

    In jQuery, how do I animate the “max-height” CSS property?

    IE8 and lower showing background white

    How to determine if a device is in portrait or landscape mode using CSS

    How to change a defined value to a unspecified value by css?

    CSS - How to change backgound colour for item avatar in ionicframework?

    How to align navigation links after navigation menu is collapsed using bootstrap

    How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

    how to use bootstrap's modal dialog only, instead of the whole bootstrap.css to aviod conflicting with my own css

    How to display a binary search tree using CSS, HTML and a bit of Javascript?

    How to change CSS style upon clicking button with JS

    Issue with changing how containers look based on values in an MD array

    how can I apply css based on parent div class

    when a div is showing do some thing for me and when its hidden stop that , with jquery its possible?

    How to make a border which wraps around text

    How do I specify a css margin-top for foundation row div?

    how to remove css property “element{}” [closed]

    How to add a border bottom like the image?

    What CSS properties govern how a webpage reacts to window resizing?

    how to align first li left and second li center in the ul element

    how does responsive design work?

    How to point to a specific icon in an icon set?

    How to externally style with CSS the specific 3 td tags on the html table generated by the pager row of a asp.net gridview control

    How to deselect a table's head and certain tds with css

    Using CSS, how can I change the alignment of a click-to-open UL menu?

    HTML4 strict: border=“0” is deprecated, how to replace it

    CSS: How to center texts with transitioning position?

    Font-awesome not properly displaying on Firefox / how to vend via CDN?

    How to center an image over another image in CSS