JQuery Tip: Use JQuery to alter css

This is a quick tip if you want to easily override some css or hide some elements on a specific page, using JQuery is really easy and it works well. Of course, the example below is overkill as you can easily use css to do the same thing, I am simply showing that it is possible.

1: make sure you have a link to JQuery in your master page in the HEAD:

<script src="'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>  

2: add a content editor web part to the page you wish to alter

3: use the css() method to target any html tag, css class or id
EXAMPLE:
Say you want to hide the quicklaunch on a page. Use the IE Developer tools to inspect the page and find the outer wrapper for the quicklaunch (.ms-quicklaunchouter). Now add the following code to your content editor web part in code view:


<script>
$(document).ready(function() {
$('.ms-quicklaunchouter').css('display','none');
});

</script>

The area where the .ms-quicklaunchouter is displaying is where you would reference any html tag, ID, or class. ‘Display‘ is where you reference the property, and ‘none‘ is where you reference the value. With this one method you can override pretty much anything on your site.

If you want to override a style across your site collection, create a functions.css file, link it to your masterpage under the initial JQuery link, and put all of your functions there.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s