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 re-size and crop an image client side while maintaining the aspect ratio

    How to set css attribute for pseudo element in Dart

    How to set a css class based on content in rails

    How to link to a CSS if a certain condition happens?

    How do you create a scrolling window over a still background image with CSS?

    CSS or Jquery how to position image in the middle of an li element?

    How do I make a horizontal list of inline elements stack vertically when the div container is resized?

    CSS3 Menu Shows Up Wrong (CSS3/HTML5)

    Bootstrap modal: how to fade in, but immediately disappear on close

    How can razor be used to expand CSS templates?

    How to control the appearance of a widget on client web sites CSS

    How do I divide all margins but last to even out space?

    How to dynamically add a CSS class and implement its style in JavaScript

    Dropdown not showing elements Bootstrap 3

    How to Use IF Statement in Play Framework to Use CSS for Only 1 Page

    Inner div has borders - how to override with a class on an outer div?

    How to center a div being focused? [vertically]

    How to create new lines with less space HTML/CSS

    If I use “getElementById” to alter a CSS style of a single object, how do I alter all elements that inherit the style?

    What is the ::content pseudo-element and how does it work?

    How to remove/close bootstrap css notification? [closed]

    How to change Label color in flex Using CSS?

    How do I get MS Outlook to accept the CSS style display:block?

    How do I apply CSS styling to a
    block?

    How to fit a big picture in a smaller space

    How can I get my text to hug around the top of my image?

    How to use “two-toned” font variants in CSS?

    How do you refer to more than one .css file in html?

    How to mix two image using clipping in css?

    Show div at mouse click position, accounting for scrolling