IT experts

Miscellanous

Tooltips

Normal Tooltip - This is a normal tooltip with default settings.

Code
How it works

<a href="#" class="normaltip" title="Hello, I am aToolTip">Normal Tooltip</a>

In order to activate the tooltip you need to add class="normaltip" class and insert the necessary text to the title attribute.

Fixed Tooltip - This is a fixed tooltip that doesnt follow the mouse.

Code
How it works

<a href="#" class="fixedtip" title="Hello, I am aToolTip  <img src='images/small_pic5.jpg' alt='' title='Nice Horsy'  />">Fixed Tooltip</a>

In order to activate the tooltip with fixed position you need to add class="fixedtip" class and insert the necessary text to the title attribute.

On Click Tooltip - This is a click activated tooltip with content passed in from 'tipContent' param

Code
How it works

<a href="#" class="clicktip" >On Click Tooltip</a>

In order to activate the tooltip with fixed position you need to add class="clicktip" class and insert the necessary text to the title attribute. Then you will need to add the following script to the head section:

$('.clicktip').aToolTip({  
					clickIt: true,  
					tipContent: 'Hello I am aToolTip with content from param'  
				});

where the value of tipContent parameter defines the tooltip text.

TOP

SlideDown elements

Normal slideDown

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices arcu quis turpis pretium et porttitor magna sollicitudin. Cras venenatis quam et tellus tristique bibendum eget ut lacus. Morbi tristique risus non augue viverra a adipiscing felis interdum. In eget elit massa.

SlideDown trigger

Code
How it works

<dl class="slideDown">
	<dt>SlideDown trigger</dt>
	<dd>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
	</dd>
</dl>

Here you will simply need to add slideDown class to any dl-list (<dl class="slideDown">).

TOP

Absolute position slideDown

SlideDown trigger (absolute position desc): Mauris dapibus rhoncus lectus, id viverra risus imperdiet vitae. In consequat luctus quam, sit amet hendrerit mauris commodo sit amet. Suspendisse fermentum lorem quis turpis semper faucibus. Nullam ornare libero ac felis interdum non adipiscing nisi facilisis.
Donec felis dolor, tincidunt dignisspendisse ac risus at estdunt dignisspendisse ac risus at estdunt dignisspendisse ac risus at estdunt dignisspendisse ac risus at estdunt dignisspendisse ac risus at estdunt dignisspendisse ac risus at est consequat pulvinar. Pellentesque dolor massa, volutpat tempor tempus gravida, adipiscing at augue. Fusce id tellus dui, nec pretium urna. Vivamus ac turpis neque. Vestibulum sed enim augue, eget cursus justo. Praesent nec erat eget elit feugiat interdum non ac purus. Ut nisl mauris, mollis sagittis cursus sed, rhoncus sit amet ipsum. Duis vel nisl orci. Maecenas in tortor sit amet mauris condimentum hendrerit mattis at arcu. Suspendisse potenti.

Jt vel dolor sapien. Phasellus mauris risus, euismod sed pretium consequat, aliquet in nisl. Nulla ut ligula id odio sagittis tincidunt. Nam sit amet massa est. Praesent sollicitudin sollicitudin turpis, vel dignissim metus tincidunt sed. Vestibulum mattis, purus quis molestie feugiat, est elit gravida mi, ut vehicula tortor lectus eu erat. Mauris neque nisi, eleifend eu tincidunt nec, sollicitudin vel turpis. Vestibulum mattisuismod sed pretium consequat, aliquet in nisl. Nulla ut ligula id odio sagittis tincidunt. Nam sit amet massa est. Praesent sollicitudin sollicitudin turpis, vel dignissim metus tincidunt sed. Vestibulum mattis, purus quis molestie feugiat, est elit gravida mi, ut vehicula tortor lectus eu erat. Mauris neque nisi, eleifend eu tincidunt nec, sollicitudin vel turpis. Vestibulum mattis, purus quis molestie feugiat, est elit gravida mi, ut vehicula tortor lectus eu erat.

Mauris dapibus rhoncus lectus, id viverra risus imperdiet vitae. In consequat luctus quam, sit amet hendrerit mauris commodo sit amet. Suspendisse fermentum lorem quis turpis semper faucibus. Nullam ornare libero ac felis interdum non adipiscing nisi facilisis.

Code
How it works

<dl class="slideDown absolute">
	<dt>SlideDown trigger</dt>
	<dd>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
	</dd>
</dl>

Here you will simply need to add slideDown and absolute classes to any dl-list (<dl class="slideDown">).

TOP

<div id="twitter" class="twitter"> </div>

You can add Twitter-widget and configure it quite easily:

Insert a div with twitter class and twitter id to a desired location on the page:
<div id="twitter" class="twitter"> </div>
Next you need to configure twitter-widget to use your twitter-account. In order to do this you should change the user name in the initiasization script:
userName: "lorem_ipsum_dol"
Then choose the number of tweets to display:
numTweets: 5

TOP

Tabs

popular
featured
comments

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent scelerisque mollis nisi sit amet blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Phasellus non mi vel turpis gravida rhoncus eget lacinia tellus.

Nulla aliquet ornare nulla, id accumsan nunc aliquet quis. Aliquam commodo urna eu enim tempus id consequat felis volutpat.

Proin non venenatis metus. Donec felis ante, venenatis et pellentesque vitae, pulvinar interdum nisi.

Aliquam commodo urna eu enim tempus id consequat felis volutpat. Proin gravida nunc suscipit felis aliquet molestie.

Cras placerat lectus eu eros vestibulum in ullamcorper nisl egestas. Nam facilisis dictum pulvinar.

Suspendisse luctus nisi eget lectus facilisis eget rhoncus elit lacinia. Duis non enim nisl. Nulla tempor sodales augue sollicitudin lacinia.

Code
How it works

<div class="tabs">
	<ul class="nav">
		<li class="selected"><a href="#tab1">text1</a></li>
		<li><a href="#tab2">text2</a></li>
		<li><a href="#tab3">text3</a></li>
	</ul>
	<div id="tab1" class="tab-content">
		<div class="inner">
			<!-- insert content here -->
		</div>
	</div>
	<div id="tab2" class="tab-content">
		<div class="inner">
			<!-- insert content here -->
		</div>
	</div>
	<div id="tab3" class="tab-content">
		<div class="inner">
			<!-- insert content here -->
		</div>
	</div>
</div>

In order to create tab-blocks (tabs) you need:

Create a block with tabs class (class="tabs").
```
<div class="tabs"> </div>
```
Created a bulleted list with nav class inside this block(<ul class="nav">).
Each list item would represent a tab:
```
<li><a href="#tab1">...</a></li>
```
The href attribute contains the reference to the content block (This will be the tab content).
Add selected class to the first list item.
Then you will need to create a set of <div> tags with tab-content class (class="tab-content"), that represent tabs content. In order to add paddings to the content you will need to use <div> with inner class.
```
<div id="tab1" class="tab-content">
		<div class="inner">
			  
		</div>
</div>
			  
```
Make sure to specify unique id for every tab(id="tab#")

TOP

Accordion

Automation & Electronics

Chemicals

Power Generation

Automation & Electronics

Instruments & Controls

Metals & Metal Products

Code
How it works

<dl id="accordion"> 
	<dt><a href="#">Automation & Electronics</a></dt> 
	<dd> 
		<div class="indent"> 
			<ul class="sub_menu"> 
				<li><a href="#">Accelerators</a></li> 
				<li><a href="#">Access Control Systems</a></li> 
				....
			</ul> 
		</div> 
	</dd> 
	<dt><a href="#">Chemicals</a></dt> 
	<dd> 
		<div class="indent"> 
			<ul class="sub_menu"> 
				<li><a href="#">Lorem ipsum</a></li> 
				<li><a href="#">Dolor sit amet</a></li> 
				<li><a href="#">Praesent vestibulum</a></li> 
				...
			</ul> 
		</div> 
	</dd> 
</dl>

In order to create an accordion you just need to add this HTML coding and add #accordion id dl tag (id="accordion").

TOP