Multi
Multi
Adding Classes with jQuery
Topic Started: Monday, 11. April 2011, 01:03 (497 Views)
Cory
Member Avatar
Level 5
Classes to Element
Quote:
 
<script type='text/javascript'>
$("#stats td:contains(Total Forum Posts)").addClass("stat_data");
$("blockquote dl:contains('Code:')").parent().addClass("code_block");
</script>
The first snippet, for example, will add a class to the Board Statistics table cell that contains "Total Forum Posts". The second snippet adds a class to the code blockquotes so they can be styled differently than blockquotes. The green text is the selector you are designating; you'll want to try and make it as specific as possible. The orange text is the text contained within the element. The blue text is the name of the custom class you wish to add. The :contains() selector is one selector I often use when adding classes, but you can use whatever is necessary to successfully add the class.

Browser Classes
Code:
 
<script type='text/javascript'>
if ($.browser.mozilla) {
$('body').addClass('mozilla');
}
if ($.browser.webkit) {
$('body').addClass('webkit');
}
if ($.browser.msie) {
$('body').addClass('ie');
}
if ($.browser.opera) {
$('body').addClass('opera');
}
</script>
The script above will add classes to the following web browsers for browser-specific CSS issues.
  • .mozilla - Mozilla Firefox
  • .webkit - Webkit-Based Browsers (Namely, Safari and Google Chrome)
  • .ie - Internet Explorer
  • .opera - Opera
Resolution Classes
Quote:
 
<script type='text/javascript'>
if (screen.width === 1024) {
$('body').addClass('1024');
}
</script>
Edit the green text accordingly, to the resolution width you wish to designate.


InvisionFree is known to not have many class and ID specifications as ZetaBoards does. However, there's ways to add classes with JavaScript and create complex selectors to style elements that do not have a ID or class attached to it.

The first script allows you to use jQuery on your InvisionFree board which allows you to easily add classes to elements.

Admin CP Posted Image Skinning & Styles Posted Image Board Wrappers Posted Image Javascript
Code:
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Admin CP Posted Image Skinning & Styles Posted Image Board Wrappers Posted Image Footer
Code:
 
<script type="text/javascript">
if(location.href.match('showforum')||location.href.match('showtopic')) {
$('#navstrip + br + div[align="left"], #navstrip + br + script + a + div[align="left"]').addClass('forum_rules');
}
</script>
The above code is an example that allows you to add a class to style the forum rules that appears in forums and topics you have it enabled in. The following CSS is what may be used to style the forum rules.

Admin CP Posted Image Skinning & Styles Posted Image Manage Style Sheets
Code:
 
.forum_rules {
background: #FFF;
border: 1px solid #000;
}
You can change and add additional properties as you see fit.

You can also create complex selectors that are based on surrounding elements, like so.
Code:
 
script + br + div .titlemedium {
background: #FFF;
}
That, for example will style the titlemedium on subforums only.
Codes · Themes & Skins · Documentations
Posted Image Code Search

Posted Image
Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Very nice doc Cory, thanks man. :)
Joe
Off
Profile
Quote
Top
 
tokyodrift
Member Avatar
Level 9
Outline Documentations
T H E M E S

Documentation accepted in to the Themes database
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Sweet document. :o
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..