/    Sign up×
Community /Pin to ProfileBookmark

Responsive conflict Javascript / @media?

Copy linkTweet thisAlerts:
Mar 17.2019

I cannot get the Javascript AND the @media to work. As soon as I call the Javascript (hamburger icon) the @media stops working

https://jsfiddle.net/enm3z56y/33/

Any idea what I am doing wrong? TIA!

to post a comment
CSSJavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMar 17.2019 — The reason is that CSS properites applied by Javascript have a higher priority than those applied in the CSS text.

Solution: Toggle a class by Javascript, then the width can be controlled in the CSS text:

https://jsfiddle.net/Sempervivum/zabf8t1L/6/
Copy linkTweet thisAlerts:
@rootMar 17.2019 — WRONG.

CSS or JavaScript is parsed as they are encountered.

JavaScript can be deferred or requested to load asynchronously.

You can easily find this out by a search, where are you getting your information from?
Copy linkTweet thisAlerts:
@sibertauthorMar 18.2019 — @Sempervivum#1601863

https://jsfiddle.net/Sempervivum/zabf8t1L/6/

Thanks for the tip. But basically it works like my code. Firing Javascript disables the @media query...

How do I avoid this?
Copy linkTweet thisAlerts:
@SempervivumMar 18.2019 — For me the media query does the following:
  • - Show the sidebar permantently on wide screens.

  • - Show and hide the sidebar controlled by the hamburger button on narrow screens.

    And this works in my browser (Opera).

    If this is not what you intend, please describe your requirement.
    • Copy linkTweet thisAlerts:
    @sibertauthorMar 18.2019 — > If this is not what you intend, please describe your requirement.

    It should work almost exactly like this: https://jsfiddle.net/enm3z56y/33/

    BUT using the Javascript (both in my example as well in yours) disable the @media query - sort of. After you use the hamburger icon to hide / show nav bar, resizing the screen will not hide / show nav menu automatically.

    Your example is better though, because the behavior is perfect when the nav bar is closed. But do not work when the nav bar is opened by hamburger icon (it does not close when resizing). But the hamburger icon should always be present. Regardless of screen size.
    Copy linkTweet thisAlerts:
    @SempervivumMar 18.2019 — The status of the sidebar is remembered, i. e. when the screen is narrow, the user opens the sidebar, then the window is made wide and then narrow again, the sidebar doesn't close. Is this what you mind? If so, it can be fixed by this javascript:

    https://jsfiddle.net/Sempervivum/zabf8t1L/17/
    Copy linkTweet thisAlerts:
    @sibertauthorMar 18.2019 — > @Sempervivum#1601885 The status of the sidebar is remembered, i. e. when the screen is narrow, the user opens the sidebar, then the window is made wide and then narrow again, the sidebar doesn't close. Is this what you mind? If so, it can be fixed by this javascript:

    > [https://jsfiddle.net/Sempervivum/zabf8t1L/17/](https://jsfiddle.net/Sempervivum/zabf8t1L/17/)

    Yes, it solves the problem with small screens, but the hamburger icon is not working with bigger screens. Probably because the class "visi" is removed on bigger screens (my guess)?
    ``<i>
    </i> if (window.innerWidth &gt; 500) {
    n.classList.remove("visi");
    }<i>
    </i>    ``
    ×

    Success!

    Help @sibert spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.26,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...