I spent an hour trying to get the jQuery UI accordion to work and it just wasn’t right. So I wrote my own. And then, the next day, I made it simpler.
Get the files here.
Archive for the 'CSS' Category
Written with wordpress in mind, but you can adapt as necessary.
Often you have levels of pages. You’ll have top level pages, and some of them have child pages, and some of those child pages have grandchild pages. Usually what you want is for the menu/navigation/sidebar to limit what it’s displaying. You don’t want to see everything, only what’s under where you are now in the hierarchy.
Default case: ONE TWO THREE
Case 2: ONE (current page item) - CHILDA - CHILDB - CHILDC TWO THREE
Case 3: ONE (current page parent, current page ancestor) - CHILDA (current page item) - - GRANDCHILD - CHILDB - CHILDC TWO THREE
Case 4 ONE (current page ancestor) - CHILDA (current page parent) - - GRANDCHILD (current page item) - CHILDB - CHILDC TWO THREE
Alright, so here’s the CSS to make this happen:
#menu ul li ul { display: none; } #menu ul li.current_page_ancestor ul { display: block; } #menu ul li.current_page_ancestor ul li ul { display: none; } #menu ul li.current_page_ancestor ul li.current_page_parent ul { display: block; } #menu ul li.current_page_parent ul li.current_page_item ul { display: block; } #menu ul li.current_page_parent ul li.current_page_item ul li ul { display: none; } #menu ul li.current_page_item ul { display: block; } #menu ul li.current_page_item ul li ul { display: none; }
This kind of table has been around for years. It’s nice to finally know how to make them.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <html>
<head>
<title>jQuery day 2 of 15</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
// this stripes our table very nicely
$("table tbody tr:odd").addClass("alt");
// now add the hover bit
$("table tbody tr").hover(
function() {
// over
$(this).addClass("highlight");
},
function() {
// out
$(this).removeClass("highlight");
}
);
});
</script>
<style>
table {
margin: 50px auto 0 auto;
border: 1px solid #666666;
}
thead tr {
background-color: #666666;
}
th {
font-weight: bold;
color: #ffffff;
padding: 5px;
}
td {
width: 200px;
padding: 5px;
}
.alt {
background-color: #cccccc;
}
.highlight {
background-color: #ff9900;
}
.highlight td {
border-top: 1px solid #666666;
border-bottom: 1px solid #666666;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</body>
</html> |
ReviewAnything was a short-lived project to set up a web application which would allow people to register user accounts and post quick reviews about anything. Users would tag reviews in any way they saw fit, be it “movies” or “downtempo.” It uses a lot of the same classes I use in other projects, which is what OOP is good for. It was also a place to experiment with AJAX, and I was able to get a type-ahead feature working for the tags. The entire thing is available here.
Here’s some cool code to make a nice looking block of code in CSS.
p.code {
font-family: Courier;
font-size: 8pt;
white-space: pre;
}