Category Archives: my life

The Super Huge Gallery of Photos from Coming to America: The Fresh African Party

That moment when you share your biggest dreams with your closest friends and they love and support you… Yeah I got mine on camera. Continue reading →

“Now I’m getting pissed off,” he said.

my life

Bryant said he was “especially” upset about Odom joining the Mavs, who not only beat the Lakers, but beat them by 36 points in Game 4 of the Western Conference semifinals to put an end to the Phil Jackson era.

Kobe Bryant: ‘Tough’ to sit back

my life

Odom was not present at the practice facility while his teammates spoke to reporters and posed for photos in their gold home jerseys. Continue reading →

The Most Known Unknowns

my life

I’ve been using this, but… let’s say you resize your window to like 100px wide. Then content starts to get cut off on the left side and you can’t scroll to it. Is there a fix for this? Continue reading →

Georgia Tech in Top 10 Universities EVER

my life

Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width. Continue reading →

Test Post 5

my life

Unless they are really wealthy, it’s a disaster. You just can’t divide up one income stream and have it support two households without a significant drop in everyone’s living standard.

Test Post 4

my life / power / spirit / Uncategorized

Eddie Murphy, Martin Lawrence, David Alan Grier.

Twitter feed loading

Follow @itsarchel

popular
recent
related

What is DOMtab?

back to menu

How to use DOMtab

Applying DOMtab to your pages is easy, all you need is to call the script in the head of the document:

<script type="text/javascript" src="domtab.js"></script>

DOMtab expects the following classes and element structure to work:

<div class="domtab">
  <ul class="domtabs">
    <li><a href="#t1">Test 1</a></li>
    <li><a href="#t2">Test 2</a></li>
[... and so on ...]
  </ul>
  <div>
    <h2><a name="t1" id="t1">Proof 1</a></h2>
    <p>Test to prove that more than one menu is possible</p>
    <p><a href="#top">back to menu</a></p>
  </div>
  <div>
    <h2><a name="t2" id="t2">Proof 2</a></h2>
    <p>Test to prove that more than one menu is possible</p>
    <p><a href="#top">back to menu</a></p>
  </div>
[... and so on ...]
</div>

The showing and hiding of sections is achieved by reading out the hash data of the link url and retrieving the parent element of the element with the ID the original link points to.

The links to remove are identified via a pattern in their href attribute, preset to "#top".

If there is an element with the id domtabprintview in the document, DOMtab will create a link to show all elements in this one.

You can change all the settings in the script itself, as all HTML expections are parameters:

tabClass:'domtab', // class to trigger tabbing
listClass:'domtabs', // class of the menus
activeClass:'active', // class of current link
contentElements:'div', // elements to loop through
backToLinks:/#top/, // pattern to check "back to top" links
printID:'domtabprintview', // id of the print all link
showAllLinkText:'show all content', // text for the print all link

back to menu

Previous and next links

In this version I added the option to have previous and next links to navigate around the tabs in addition to clicking them.

If you want DOMtab to generate those, all you need to do is to add the class "doprevnext" in addition to the domtab class to the div in question:

<div class="domtab doprevnext">
  <ul class="domtabs">
    <li><a href="#t1">Test 1</a></li>
    <li><a href="#t2">Test 2</a></li>
    <li><a href="#t3">Test 3</a></li>
    <li><a href="#t4">Test 4</a></li>
  </ul>
  [... ad nauseam...]
</div>

DOMtab then generates the following link list in each of the sections, automatically removing the previous link in the first and the next in the last section:

<ul class="prevnext">
  <li class="prev"><a href="#">previous</a></li>
  <li class="next"><a href="#">next</a></li>
 </ul>

Once again, you can override any of these settings in the script's parameters:

prevNextIndicator:'doprevnext', // class to trigger links
prevNextClass:'prevnext', // class of the prev and next list
prevLabel:'previous', // HTML content of the prev link
nextLabel:'next', // HTML content of the next link
prevClass:'prev', // class for the prev link
nextClass:'next', // class for the next link

Both labels are set via innerHTML rather than the proper method :-). This allows you to use images if wanted:

prevLabel:'<img src="massivebuttonprev.png" alt="previous" />',

back to menu

Category Archives: my life

The Super Huge Gallery of Photos from Coming to America: The Fresh African Party

“Now I’m getting pissed off,” he said.

Kobe Bryant: ‘Tough’ to sit back

The Most Known Unknowns

Georgia Tech in Top 10 Universities EVER

Test Post 5

Test Post 4

The Super Huge Gallery of Photos from Coming to America: The Fresh African Party

Dress Like A Lady

Love Her Look: Melanie Fiona

5 Healthy, Easy Replacements You Can Make

Archives