Skip navigation

Kaccordion Multipack Demo

Welcome to the demo page for, that’s right, you’ve guessed it - The Kaccordion Multipack, taaadaaaaaa!!!

Basically the purpose of this page is to demo how you can spiffy up your Wordpress 2.0+ blog with the Kaccordion Multipack plugin that can be downloaded from this page, www.elektronramp.com or even right here, Kaccordion_Multipack_1.1.zip

Needless to say that you’ll of course need JavaScript enabled to view any of this so I assume that’s the case.

Feel free to look/snoop/poke around on the page or in the source and see how thing are put together. Most stuff regarding look and feel can be changed through the included CSS. But basically to make it work with Wordpress just install the plugin and either code the html like it is on this page or use the buttons in the editor, they are there to make your life easier. Have fun!!

IMPORTANT! This version is NOT compatible with the old (0.1) version. So in case you have some old markup in your pages from the old plugin you’ll need to change this in order for the new version to work properly. Sorry for the inconvenience but this is based off of a completely different framework so this change was necessary. :-)

You can do a nice smooth scroll directly to what you want by hitting the links below

| Draggable Content Windows | Plain Draggable Content | Tooltips | Imagebox | Reflections |

Accordions up the ying yang - love ‘em or hate ‘em

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum odio urna, hendrerit ac, nonummy et, tempor commodo, eros. Etiam ac dui id lectus imperdiet euismod. In vitae est. Nunc quis lacus. Aenean convallis. Aliquam erat volutpat. Aliquam justo eros, tristique sit amet, fringilla et, bibendum ac, arcu. Nulla in lacus non lectus volutpat vehicula. Sed non magna imperdiet nisi pharetra ullamcorper. Nullam quis quam.

Ut quis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nunc ligula, egestas in, dictum a, porttitor in, pede. Curabitur blandit faucibus massa. Aliquam nonummy laoreet libero. Phasellus euismod erat eu risus. Ut placerat egestas risus. Donec nisl nibh, aliquam vel, porttitor non, condimentum quis, risus. Vestibulum eleifend vulputate lectus. Aliquam id turpis. Aliquam erat volutpat.

Ut quis massa

Ut quis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nunc ligula, egestas in, dictum a, porttitor in, pede. Curabitur blandit faucibus massa. Aliquam nonummy laoreet libero. Phasellus euismod erat eu risus. Ut placerat egestas risus. Donec nisl nibh, aliquam vel, porttitor non, condimentum quis, risus. Vestibulum eleifend vulputate lectus. Aliquam id turpis. Aliquam erat volutpat.

Morbi odio

Nulla lorem lacus, congue nec, suscipit nec, hendrerit sit amet, lorem. Vestibulum dolor. Donec et ante et massa mollis sagittis. Nullam elementum cursus justo. Proin leo ante, consequat eu, tincidunt ac, consectetuer ac, massa. Cras dictum. Aliquam quis enim. Quisque ac magna et lorem porta tincidunt. Fusce nulla. Praesent euismod sagittis mauris. Curabitur eu nisl. Duis purus. Pellentesque justo nibh, mattis non, sollicitudin a, aliquam vitae, urna. Suspendisse tempor odio ut turpis ornare accumsan. Fusce leo. Mauris molestie nisl quis purus.

Phasellus non nisl

Etiam mi justo, accumsan a, scelerisque auctor, tempus sed, enim. Vivamus tristique ipsum quis lectus. Cras nec lectus. Duis luctus convallis massa. Ut augue enim, aliquam vel, posuere accumsan, bibendum ut, leo. Nunc sed purus. In vel neque. Donec lobortis, tellus at dignissim porta, ante sapien facilisis nibh, non ullamcorper dolor purus in urna. Nulla libero. Nulla eget est. Quisque est mauris, semper at, tincidunt et, lacinia sed, ligula. Nullam dolor ligula, ullamcorper at, accumsan sit amet, eleifend vitae, libero.

Lorem ipsum dolor2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum odio urna, hendrerit ac, nonummy et, tempor commodo, eros. Etiam ac dui id lectus imperdiet euismod. In vitae est. Nunc quis lacus. Aenean convallis. Aliquam erat volutpat. Aliquam justo eros, tristique sit amet, fringilla et, bibendum ac, arcu. Nulla in lacus non lectus volutpat vehicula. Sed non magna imperdiet nisi pharetra ullamcorper. Nullam quis quam.

Ut quis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nunc ligula, egestas in, dictum a, porttitor in, pede. Curabitur blandit faucibus massa. Aliquam nonummy laoreet libero. Phasellus euismod erat eu risus. Ut placerat egestas risus. Donec nisl nibh, aliquam vel, porttitor non, condimentum quis, risus. Vestibulum eleifend vulputate lectus. Aliquam id turpis. Aliquam erat volutpat.

Ut quis massa2

Ut quis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nunc ligula, egestas in, dictum a, porttitor in, pede. Curabitur blandit faucibus massa. Aliquam nonummy laoreet libero. Phasellus euismod erat eu risus. Ut placerat egestas risus. Donec nisl nibh, aliquam vel, porttitor non, condimentum quis, risus. Vestibulum eleifend vulputate lectus. Aliquam id turpis. Aliquam erat volutpat.

Morbi odio2

Nulla lorem lacus, congue nec, suscipit nec, hendrerit sit amet, lorem. Vestibulum dolor. Donec et ante et massa mollis sagittis. Nullam elementum cursus justo. Proin leo ante, consequat eu, tincidunt ac, consectetuer ac, massa. Cras dictum. Aliquam quis enim. Quisque ac magna et lorem porta tincidunt. Fusce nulla. Praesent euismod sagittis mauris. Curabitur eu nisl. Duis purus. Pellentesque justo nibh, mattis non, sollicitudin a, aliquam vitae, urna. Suspendisse tempor odio ut turpis ornare accumsan. Fusce leo. Mauris molestie nisl quis purus.

Phasellus non nisl2

Etiam mi justo, accumsan a, scelerisque auctor, tempus sed, enim. Vivamus tristique ipsum quis lectus. Cras nec lectus. Duis luctus convallis massa. Ut augue enim, aliquam vel, posuere accumsan, bibendum ut, leo. Nunc sed purus. In vel neque. Donec lobortis, tellus at dignissim porta, ante sapien facilisis nibh, non ullamcorper dolor purus in urna. Nulla libero. Nulla eget est. Quisque est mauris, semper at, tincidunt et, lacinia sed, ligula. Nullam dolor ligula, ullamcorper at, accumsan sit amet, eleifend vitae, libero.

The markup for the “Accordion” is like this:

<dl class="Kaccordion">
    <dt class="toggle">your title</dt>
        <dd>
	    whatever content you like including most xhtml markup.
        </dd>
    <dt class="toggle">your next title</dt>
        <dd>
	    some more of your delicious content.
        </dd>
    <dt class="toggle">your 3rd title</dt>
        <dd>
	    yet even more of your delicious content.
            I think you get my drift as this is getting ridiculous :0)
        </dd>
</dl>

Back to top

Fancy draggable content window - this is sweet!

Feast on this ->     Click me to open window

Window example



 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eget lectus in diam iaculis tempor. Suspendisse consectetuer, justo nec euismod sodales, augue nisi convallis diam, in posuere pede turpis at massa. Donec mi nunc, iaculis eu, vehicula sed, malesuada eget, ligula. In eu urna. Suspendisse pede quam, tempor id, tempor at, placerat eget, massa. Maecenas porta elementum tellus. Ut nulla diam, posuere non, consequat nec, fermentum vitae, turpis. Pellentesque tempor metus at lorem. Donec nulla ipsum, euismod in, pretium vitae, ornare nonummy, lectus. Aliquam ullamcorper. Vestibulum eget leo. Proin pretium, enim vitae bibendum accumsan, dolor urna feugiat felis, et ultrices ipsum odio et dui. Praesent non eros sit amet nisi laoreet aliquet. Nulla diam. Maecenas et sem eget lorem porttitor tincidunt. Donec sed dui.

Nam non dolor. Donec ultricies mattis libero. Donec ac eros. Praesent id arcu. Phasellus odio massa, blandit nec, iaculis ac, blandit nec, enim. Nunc rutrum. Mauris pretium mattis nunc. Integer lectus. Suspendisse potenti. Ut dignissim enim eget ipsum. Suspendisse eget nulla ac dolor volutpat pellentesque. Donec odio diam, pulvinar sed, ornare a, semper in, nisi. Duis a odio id enim lacinia fringilla. Integer rutrum erat in ante. Morbi eleifend ipsum vel quam. Vestibulum in mauris. Donec vulputate hendrerit nulla.

Phasellus nulla ipsum, dapibus et, laoreet quis, volutpat sed, nibh. Nunc massa ipsum, vehicula et, ullamcorper fermentum, imperdiet vitae, enim. Morbi non augue. Morbi vitae sapien. Nulla at metus. Pellentesque a sem id arcu faucibus tincidunt. Pellentesque sit amet urna quis arcu elementum volutpat. Sed sed sapien. Suspendisse cursus. Nulla commodo libero ac tortor dictum pulvinar. Mauris id leo non velit iaculis mollis. Fusce at augue ut mi laoreet molestie. Quisque facilisis. Maecenas ornare mattis justo. Vestibulum vel lorem in nisl venenatis semper. Aliquam erat volutpat. Aliquam tellus turpis, posuere eu, commodo sed, fermentum sit amet, mi.

The markup for the “Fancy draggable content window” is like this:

<div id="window">
    <div id="windowTop">
        <div id="windowTopContent">your window title</div>
	  <img src="http://www.yourURL.com/wp-content/plugins/kaccordion/images/window/window_min.jpg"
                 id="windowMin" />
	  <img src="http://www.yourURL.com/wp-content/plugins/kaccordion/images/window/window_max.jpg"
                 id="windowMax" />
	  <img src="http://www.yourURL.com/wp-content/plugins/kaccordion/images/window/window_close.jpg"
                 id="windowClose" />
	</div>
    <div id="windowBottom">
        <div id="windowBottomContent">
            &nbsp;
        </div>
    </div>
    <div id="windowContent">
        your excellent content goes right here.
    </div>
        <img src="http://www.yourURL.com/wp-content/plugins/kaccordion/images/window/window_resize.gif"
               id="windowResize" />
</div>

*Note that the “Fancy draggable content window” is limited to one per page right now.

Back to top

Plain draggable content with ghosting, muhahahaha

Drag by handle. this can be anything

Drag by handle2. this can be anything

The markup for the “Plain draggable content with ghosting” is like this:

<div id="drag1" class="draggable dragHandle">
    <div>
    </div>
    your content
</div>

Tooltips, and lots of them

This is an old boring link with no tooltip

Cool Tooltip1

Cool Tooltip2

Actually you can tooltip almost anything you want by giving it a class of “tipThis”

This is a div with a freaking tooltip.

Hi! I’m a div element and I like to be tipped

The markup for the “Tooltips” is like this:

<a href="http://www.yourURL.com" title="This is a link| and some more text"
        class="tipThis">some fine link</a>
<!-- If you want a header on your link divide the header with a  |  e.g. title|my other text-->

Back to top

Imagebox - awesome!

Mix comics

Thundercats comics

The markup for the “Imagebox” is like this:

<a href="path to image" title="some title" rel="imagebox-yourGroup">
    <img src="path to image" />
</a>
<a href="path to image" title="some title" rel="imagebox-yourGroup">
    <img src="path to image" />
</a>
<a href="path to image" title="some title" rel="imagebox-yourGroup">
    <img src="path to image" />
</a>
etc.

Back to top

Reflections - Soooo purdy!

The markup for the “Image reflection” is like this:

<img src="path to image" width="width in pixels" height="height in pixels" class="reflect" />

*Note that you MUST specify width and height of the image otherwise the page will be b0rked when viewed in Firefox.

Back to top

The End…or is it?