Stickman

Sword 2h Sword Dagger Warhammer Dual Dagger Bo Staff Battle Axe reset

Stickman was a project I gave myself to mess around with css transitions. Click some buttons. All animation you see is powered by css. I simply use jquery to swap a class on the top level div and style handles the rest. I eventually want to use something like this to display characters in Light Gray RPG.

AC Collapser

On every page I am using a custom function to help manage all my content in collapsable columns. You simply click the top headline or arrow and it will display/hide the content within. You can use it on your page if you like, here is the code.

HTML:

Two divs with the following classes:

<div class="collapser">
<h2>AC Collapser</h2>
</div>
<div class="collapserContent">
<p>Content goes here. </p>
</div>
JS:

Make sure you have jquery on your page.

$(".collapser").on("click", function () {
if ($(this).is('.expanded')) {
$(this).next('.collapserContent').slideUp();
}
else {
$(this).next('.collapserContent').slideDown();
}
$(this).toggleClass("expanded");
});
CSS:

The content is hidden by default. the JS makes it visible. I am also using font awesome for the arrows.

.collapser {
overflow: hidden;
position: relative;
cursor: pointer;
}
.collapser:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
color: #DC6B64;
right: 20px;
top: 20px;
line-height: 1em;
font-size: 24px;
}
.collapser.expanded:before {
content: "\f106";
}
.collapserContent {
display: none;
}

HTML markup puts content on the page.

CSS gives it style.

JS gives actions.

AC Pop

code example ac pop watch sample coding
AC Pop | click me

All over this site I am using a custom pop up function I created.

Feel free to use this simple pop up on your site. Just use the markup below and add the CSS and JS to your site.

HTML:

the 'data-pop' attribute activates the magic

<figure class="gal" data-pop>
	<img src="img/photo/macro/IMG_3665.JPG">
</figure>
JS:

This function toggles the .full class when clicked. Make sure you have jquery on your page.

$('[data-pop]').on("click", function () {
$(this).toggleClass("full");
});
CSS:

This makes the figure and image full screen when .full is applied

[data-pop].full {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
background: #111;
text-align: center;
z-index: 1;
}
[data-pop].full img {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}

So there it is, a super simple, super light pop up that always keeps the full screen image at max size without any cropping. There are optional features I have baked in like caption display and gallery support with next and previous buttons. Feel free to view all the source and add those in if you like.

AC ARC CORE