Your New Jekyll Site

home

JQuery Browser independent styling

13 Jul 2013

JQuery is a javascript library that you can include in your html web page. One way JQuery is used is doing styling. Preferably styling should be done with CSS. Unfortunately, the syntax of CSS varies between browsers. JQuery facilitate this by providing functions that generate css dependent on the client browser. On my site mattiashogstrom.com I use at the time of writing a single html page for the whole site. Clicking the different pages, just hides and reveals DIVs. This is done with 1 line of code. “$(‘.contentpage’).hide();” The dollar sign $ is a shorthand for accessing the JQuery object. What it does is searching for a tag with the class set to contentpage. Then it makes the tag invisible. How this is done is not known for us. Neither should we care. Below you see a small function that changes the page content. The page id in this case corresponds to the id of the DIVs.

function makePageVisible(pageId) {
$('.contentpage').hide(); // Hides all divs
$(pageId).show(); // Show a specific div
}
makePageVisible('aboutPage');