Just a quick note on an issue I ran into today.
When using MySql, if you have a query that looks like this:
Select A, B
From table
where A in (Select C, D From AnotherTable)
Even when the subquery returns a very small resultset, the overall query will slow to a crawl, if it completes at all. This is because of how mysql handles the "in" statement. The only way to really get around it is just to join the two queries and filter, which isn't terrible, though I hope a situation comes up where this solution is untenable.
Friday, February 27, 2009
MySql Subquerys Are Molasses
Monday, February 23, 2009
Peek-a-Boo Divs
I was just messing around with some HTML/CSS/Javascript stuff the other day, and came up with something kind of awesome. It's a div that hides until it has the mouse placed over it, and then hides again when the mouse leaves. It's very similar to a hiding toolbar, and could be very useful if applied correctly.
Due to its ability to be present, although mainly unseen, it would be particularly useful for web pages/applications that require large amounts of content on screen, so that more wouldn't have to be devoted to the standard menu.
I've tested this in IE7, Firefox, Chrome, and Opera. It works no matter the resolution, though I have yet to try it on my G1 (for the size tests, I basically just scrunched firefox and IE down very small). It's W3C compliant (except for the colors, which I don't really care about) for both the html and the CSS. The HTML uses the XHTML 1.0 strict dtd, and there isn't a single table anywhere. This is how I roll.
HTML:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Menu Bar Test</title>
<link rel="stylesheet" href="./menubar.css" />
<script type="text/javascript" src="./menubar.js"></script>
</head>
<body onload='pageLoaded()'>
<!--<div id="collapsedmenubar" class="menubar" onMouseOver="overCollapsedMenu()">
<p>Click here for menu</p>
</div>-->
<div id="fullmenubar" class="menubar" onmouseover="overCollapsedMenu()" onmouseout="leftFullMenu()">
<h1>Menu</h1>
<p>
<a href="index.html">Home</a>
<a href="index.html">Projects</a>
<a href="index.html">Contact Info</a>
</p>
</div>
<div id="content">
<p>This is where the content goes!</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nibh nisi, dapibus vel, elementum eget, vehicula vel, lorem. Donec ipsum est, tincidunt iaculis, nonummy ut, dictum vel, velit. In leo magna, aliquam et, suscipit sed, cursus in, tellus. Suspendisse dui felis, convallis vel, porttitor pellentesque, dapibus vitae, neque. Suspendisse potenti. Sed erat orci, rhoncus at, tempor in, pellentesque vel, tortor. Nam urna. Sed bibendum. Aenean ultrices vehicula lacus. Duis ac arcu. Nulla facilisi. Sed pulvinar risus eget leo. Praesent pulvinar varius ante. Cras lorem nibh, elementum nec, accumsan nec, imperdiet et, felis. Fusce gravida sem et orci. Suspendisse lectus nibh, tempus eget, sagittis sit amet, pretium vel, dui. </p>
<!--There was more Lorem Ipsum, but I dropped it for readability's sake.--%gt;
</div>
<div id="footer">
<p>Here is the footer!</p>
</div>
</body>
</html>
CSS:
*{ /*I know this is bad, but hey, it's a test document.*/
padding: 0px;
margin: 0px;
border: 0px;
}
.floatedlabel{
float:left;
}
.menubar{
background-color: green;
border-left: 5px yellow solid;
border-right: 5px yellow solid;
border-bottom: 5px yellow solid;
color: white;
left: 10%;
position: fixed;
right: 10%;
text-align: center;
top: 0px;
width: 80%;
z-index: 9001;
}
body{
background: lightblue;
padding-top: 5%;
}
h1{
float: left;
}
#content{
background-color: lightgreen;
border: 2px yellow solid;
left: 5%;
position: relative;
width: 90%;
}
#footer{
background-color: lightgreen;
border-left: 2px yellow solid;
border-right: 2px yellow solid;
border-top: 2px yellow solid;
left: 15%;
position: relative;
text-align: center;
top: 5px;
width: 70%;
}
Javascript:
function pageLoaded()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "hidden";
fullmenu.style.top = "-70em";
fullmenu.style.height = "70.2em";
}
function overCollapsedMenu()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "visible";
fullmenu.style.top = "0px";
fullmenu.style.height = "";
}
function leftFullMenu()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "hidden";
fullmenu.style.top = "-70em";
fullmenu.style.height = "70.2em";
}
Oh, sorry, did you want that menu to be at the bottom, maybe for some Mac OS X dock-style menu? Well, in that case, for the menubar, change
top: 0px;
to
bottom: 0px;
and in the javascript replace all instances of "top" with "bottom". Enjoy.
Wednesday, February 4, 2009
PyGame Presentation
It's been a while since I posted, I know, but I've been busy. Here's one of the things that's been occupying my time. I worked up a 2d top-down collecting game demo for the Drexel Game Developer's Group, and a presentation to go along with it. I'm only a week behind schedule for posting it, which is easily attributable to my laziness.
Here's the presentation:
You need to have python and pygame installed to run it, but other than that, just execute runner.py.
Subscribe to:
Posts (Atom)