Foundation 6: How to set .is-open-right translateX value with JavaScript


Tags: javascript,css,zurb-foundation,css-transforms,off-canvas-menu

Problem :

I am building a website with Foundation 6 using CSS instead of SCSS. I'm using the responsive off-canvas drill-down menu on small screens, and by default, the off-canvas menu width is 250px.

Problem: I would like this to be the full width of the browser window instead.

Setting the Width

I have used JavaScript to dynamically set the .off-canvas.position-right width to the width of the window, and right to the negative width of the window. I've also set the .off-canvas .drilldown max-width to the width of the window.

This works well, and here's how I did it:

function setOffCanvasWidth() {

    var windowWidth = window.innerWidth,
        offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
        isDrilldown = document.querySelector( '.off-canvas .is-drilldown' );

    offCanvasRight.style.width = windowWidth + "px";
    offCanvasRight.style.right = "-" + windowWidth + "px";
    isDrilldown.style.maxWidth = windowWidth + "px";

}
setOffCanvasWidth();

I'm happy with this part, but it only solves half of the problem.

Moving the Off-Canvas

In addition to dealing with the width of the menu, .is-open-right is moving everything over by -250px using transform: translateX().

I tried including these lines in my function to set the transform: translateX() value to the negative width of the window:

var offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );
offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";

But this didn't work. I think it has to do with the fact that .off-canvas-wrapper-inner doesn't have the class .is-open-right when the window loads. That class is added dynamically after clicking the hamburger toggle button, which has a class of .menu-icon. So I tried adding a click event listener, but it still doesn't work.

Here is my JS code in its entirety:

function setOffCanvasWidth() {

    var windowWidth = window.innerWidth,
            offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
            isDrilldown = document.querySelector( '.off-canvas .is-drilldown' ),
            menuIcon = docuemnt.querySelector( '.menu-icon' ),
            offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );

    offCanvasRight.style.width = windowWidth + "px";
    offCanvasRight.style.right = "-" + windowWidth + "px";
    isDrilldown.style.maxWidth = windowWidth + "px";

    menuIcon.addEventListener( 'click', function() {
        offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";
    } );

}
setOffCanvasWidth();

Where Am I Going Wrong?

I'm not looking for anyone to code the solution for me, necessarily, but any feedback and direction on how I might set the .is-open-right translateX value would be very helpful.

Here is the entire project code: https://github.com/paulshryock/paulshryock/releases/tag/v0.0.1
Here is a live demo: https://paulshryock.github.io/paulshryock/



Solution :

Use a translateX value of -100%. Percentage transformations are based on the element's dimensions, so 100% would be equal the element's width. At this point no JavaScript would be needed.

On that note, I would recommend setting the menu's left to 100% instead of setting right to the negative width.


    CSS Howto..

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    How do I add a link to my CSS background?

    how to make triangle in css [closed]

    How to properly align something that resizes in a specific location

    How do I make an erasing animation in CSS? [closed]

    CSS Selectors - How to apply a defined class on the selector's event

    On textbox focus, how can you change the background color of the element prior to it with only CSS?

    Linking CSS button to email - How can it be done?

    How to get margin to be relative to text amount css

    How to center my text vertically in a circular div with css

    How can I use Rspec to check for the absence of certain CSS classes?

    How do I achieve my bootstrap nav design?

    jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

    how can i add a separator gif between two content areas something like this?

    How can I make my jquery mobile collapsible set larger using css

    How to create a dynamic-width arrow in CSS?

    How do I make entire div a link? [duplicate]

    How to change the current link color in navigation bar

    How to give sentence case to sentences through CSS or javascript? [closed]

    How to add own icons in bootstrap navbar

    how can I access a css class from the appended html div?

    How to add Css classes in TinyMCE editor Styles drop down through coding

    How to load Different css everytime onload

    How to create mirrored image effect with CSS single element

    How to add a delay between cycles of css animation [duplicate]

    How to make layout with 3 elements where 1 is resizable

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    How to apply CSS to half of a point feature?

    Show a box with text when hovering an image

    HTML/CSS - Input [Text] How to disable the browser from offering suggestings in the Dropdown?