The Reddit pi Icon and :hover

October 19th, 2011

Today I had a task come up on my list that I’ve been interested in digging into for a while. After seeing the reddit π icon, and learning that it’s awesome, as well as reference to the movie The Net, I wanted to make use of the idea to hold some info on page generation times and a few other things useful as a dev on a site I’m working on.

So, digging in with Chrome’s developer tools, I looked into figuring out how to do it. At first, I thought it was a Javascript thing, using jQuery and mouseOver events, because that’s how it could have been done. However, that seemed a little heavy for this purpose, since it’d require some Javascript be loaded on each load. So, examining it a bit closer, I dug into the CSS, and discovered a new use of the pseudo property :hover.

Today I learned that you can use :hover on a parent element to change properties on a child element. Of course, it makes perfect sense now to use it like that, but it was one of those Ooohhhh! moments that you get when something obvious smacks you in the face.

Here’s one way to do the reddit π icon:
<style type="text/css">
#pibottom{float: right; padding-top: 4px;}
#pi{color: #a0a0a0; font: 16pt serif; padding: 2px;}
#picontent{font-size: 11pt; display: none;}
#pibottom:hover #picontent{display:inline;}

<br clear="all">
<div id="pibottom">
<span id="pi">&pi;</span>&nbsp;<span id="picontent">Load in ‘ . getScriptTiming() . ‘ sec. Ran ‘ . getCountDBQueries() . ‘ queries.</span>

jQuery and CKEditor Popout Editor

March 12th, 2010

I had to integrate CKEditor into a site that I was building for a client. One of the requirements of this integration was to be able to edit the content as it was seen on the page. So, for example, if you are on the About Us page, you could click on an edit link on the bottom of the content column, and be able to edit it in place. Other than that requrement, the implementation was up to me to figure out.

After several hours of hacking out code, a lot of Google research and documentation reading, and some Stack Overflow questions, I was able to piece together a solution.

This solution requres jQuery (I built with v1.4.2), jQueryUI (v1.8.0+), and CKEditor (v3.2+).

[code lang=”js”]<script type="text/javascript">

function redirect(url, outsite){
location.href = url;
location.href = CONFIG_HREF_SITE + url;

function editdialog(editid){
var editwin = ‘<div><form action="formprocess/’+editid+’" method="post" class="inform"><div id="editorheader"><label for="coltitle">Column Title: </label><input type="text" name="coltitle" id="coltitle"></div><br><div id="editorcontent"><textarea id="ckeditcolcontent"></textarea></div><input type="hidden" value="edit"></form></div>’;
var $dialog = $(editwin).dialog({
autoOpen: false,
title: "Editor",
height: 520,
width: 640,
closeOnEscape: false,
open: function(event, ui){
buttons: {
"Save and Close": function(){
var editor = $("#ckeditcolcontent").ckeditorGet();
var coltitle = $("#coltitle").val();
var colcontent = $("#ckeditcolcontent").val();
$.post("formprocess/"+editid, {coltitle: coltitle, colcontent: colcontent}, function(data){
redirect(location.href, 1);
"Cancel": function(){redirect(location.href, 1);}

$.getJSON("ajax/" + editid, function(data){
$("#coltitle").attr("value", data.header);

var config = new Array();
config.height = "280px";
config.resize_enabled = false;
config.tabSpaces = 4;
config.toolbarCanCollapse = false;
config.toolbar_Full = [["Cut","Copy","Paste","-","Undo","Redo","-","Bold","Italic","Underline","Format", "-", "NumberedList","BulletedList","-","Link","Unlink","-","Image","Table"]];

config.width = "600px";
var editid = $(this).attr("href");
return false;

WordPress - Entries (RSS) and Comments (RSS) - © 2011 Ben Dauphinee