CODEWITHSUNDEEP
javascripttwitter-bootstrap
Dercni
Dercni

Reputation: 1224

Bootstrap & Javascript

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?

Upvotes: 1

Views: 56

Answers (2)

Tom Dyer
Tom Dyer

Reputation: 452

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 :)

Upvotes: 1

Charchit
Charchit

Reputation: 43

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

Upvotes: 0

Related Questions