How to use jQuery or not depending on browser

Hi,

Just started using jQuery in some of our sites, but would really like to know how to NOT use it if the site visitor’s browser won’t support it. I’ve searched these forums for a while now, and re-read several of the relevant e-books I got from Sitepoint, but can’t seem to find anything usable about this issue.

Specifically, I’d like to add some code to the site template that would first determine if the visitor’s browser supports jQuery. If it does, continue on. If it doesn’t, display this instead.

Can anyone point me in the right direction?

Thanks

Hi rbobzin. Welcome to the forums. :slight_smile:

I’d like to add some code to the site template that would first determine if the visitor’s browser supports jQuery. If it does, continue on. If it doesn’t, display this instead.

Remember that jQuery is just JavaScript, so any browser that supports JS will support jQuery—and that’s basically all browsers, as long as JS is enabled.

But if a browser doesn’t support javascript, it will just ignore it, so that’s not really an issue either. You just have to make sure that the site works without JS, so always test the page with JS turned off. :slight_smile:

Hi Ralph,

I understand that JS will be ignored if the browser doesn’t support it or the user has disabled it, but I’m not sure how to set up a page so that it displays the JS content if the browser can handle it, and displays HTML-only content if it can’t. It seems to me there should be some type of IF statement to control that. In other words, how do I set it up so that a JS-capable browser doesn’t display both (JS and HTML-only) content?

Thanks!

There effectively is.

Simply include everything you want visitors without JavaScript to see in the HTML and then in the JavaScript you remove any HTML you don’t want them to see if JavaScript is enabled and add what you do want them to see using a JavaScript if statement. Sometimes you don’t even need an if statement.

For example the following displays ‘not’ in the sentence if JavaScript isn’t available and displays ‘definitely’ in the same spot if JavaScript is available.:

<p>JavaScript is <span id="ex">not</span> available.</p>
<script type="text/javascript">
document.getElementById('ex').innerHTML = 'definitely';
</script>

That’s what I was looking for! Thanks!