Skip to content

Instantly share code, notes, and snippets.

@jconniff

jconniff/arrows-css-border.html

Created February 15, 2013 18:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jconniff/4962185 to your computer and use it in GitHub Desktop.
Save jconniff/4962185 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
arrows-css-border.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="../../../../yui3/build/yui/yui-min.js"></script> -->
<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
</head>
<style>
.sort-arrows {
height: 2em;
padding: 1px; /* keeps margin-top from arrows .up and .down from bleeding through to .sort-arrows (the container div) */
}
.sort-arrows div {
border-style: solid;
border-width: 10px 5px;
width: 0;
height: 0;
font-size: 1px; /* for IE */
border-color: transparent;
}
*html .sort-arrows div {
border-color: pink;
filter: chroma(color=pink);
}
.sort-arrows .up {
border-bottom-color: #ddd;
border-top-width: 0;
margin-bottom: 3px;
}
.sort-arrows .down {
border-top-color: #ddd;
border-bottom-width: 0;
}
.single-down .up, .single-up .down {
display: none;
}
.single-down .down {
border-top-color: #000;
margin-top: 8px;
}
.single-up .up {
border-bottom-color: #000;
margin-top: 6px;
}
</style>
<body>
double
<div class="sort-arrows">
<div class="up"></div>
<div class="down"></div>
</div>
single down
<div class="sort-arrows single-down">
<div class="up"></div>
<div class="down"></div>
</div>
single up
<div class="sort-arrows single-up">
<div class="up"></div>
<div class="down"></div>
</div>
<p></p>
Click arrows below to test sort. (uses only one replaceClass)
<div id="sortable" class="sort-arrows">
<div class="up"></div>
<div class="down"></div>
</div>
<p>This needs to be tested on IE6 to check if the filter: chroma() thing simulates transparency.<br>
Unfortunately Jeff can't test IE6 VM due to Y Domain with PC restrictions.</p>
</body>
<script>
YUI().use('node', function(Y) {
Y.one('#sortable').on('click', function(e) {
if(e.currentTarget.hasClass('single-down')) {
e.currentTarget.replaceClass('single-down', 'single-up');
} else if (e.currentTarget.hasClass('single-up')) {
e.currentTarget.replaceClass('single-up', 'single-down');
} else {
e.currentTarget.addClass('single-up');
}
});
Y.one('#sortable').on('dblclick', function(e) {
e.currentTarget.removeClass('single-up');
e.currentTarget.removeClass('single-down');
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment