Bootstrap & Javascript

Question

I am progressing on a project using bootstrap and so far so good.

Having just learned about jquery I am using remote actions wherever possible to the point where I'd like to totally jquery the site.

In considering this option I read a SO post that stated sites should be built to work without javascript and then enhanced with js so they degrade gracefully. Fair enough.

Having taken this approach and disabling js to test the degraded functionality of my site I find my bootstrap dropdowns don't work.

If is the case that bootstrap requires js? If so does this mean to create a site that will degrade gracefully I need to build a bootstrap and non bootstrap version?

Tom Dyer · Accepted Answer · 2015-07-24 00:33:19Z

I wouldn't go as far as building two versions of the site. If dropdowns are your only concern then I'd look at detecting when javascript is enabled and implementing a CSS-only version of the dropdown (using :hover and/or :active) when javascript isn't running.

Libraries such as Modernizr do a great job of detecting html5 features etc. but if you only want to detect if javascript is enabled, then the quickest way that I can think of would be adding a class to your body or html tags and simply removing it as part of your JS initialisation. Something like this:

HTML:

<body class="nojs">
    <!-- ... HTML content -->
</body>

Javascript:

jQuery(document).ready(function($) {
    $('body').removeClass('nojs');
});

This would allow you to write some simple CSS to trigger the dropdown visibility when javascript is disabled. Something along the lines of:

CSS:

body.nojs .dropdown:active > li,
body.nojs .dropdown:hover > li {
    display: block;
}

If you need more clarification on how to get this working on your particular site I'd need to see some of your existing HTML markup but hopefully this should be enough to get you on the right track :)

Community · Accepted Answer · 2017-05-23 12:06:07Z

0

Refer to this page, looks like the same to me, you can add some custom css for this.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jul 24, 2015 at 0:18

Charchit

433 bronze badges

Collectives™ on Stack Overflow

Bootstrap & Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related