I randomly made this little webpage to showcase a lot of 350×200 openers I made for online articles

It’s a pretty simple script built on top of jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<style type="text/css">
body {
    margin:0;
    overflow:hidden;
}
</style>
<script type="text/javascript">
$(function(){
    $("div").mousemove(function(e){
      height = $(window).height();
        width = $(window).width();
        percent = e.clientY * 100 / height;
        move = ($("#box").height()-height) * percent / 100;
        $("body").scrollTop(move);
 
        percent2 = e.clientX * 100 / width;
        move2 = ($("#box").width()-width) * percent2 / 100;
        $("body").scrollLeft(move2);
    });
});
</script>

The CSS hides the scrollbars and removes the default margins from the body.

Then the Javascipt adds an event handler that will fire every time the mouse moves on top of a div – which is always since the page is pretty much just one giant div.  After that it determines what percent of the window you cursor is currently sitting at, and then translates that to the same percentage of the size of that giant div and scrolls the window accordingly.  So regardless of the size of the window you’ll be able to move it around to see all the contents of the div.

Scroll around the box below to see the random goodness:

While I was listening to Sitepoint’s 118th Podcast the other day and they mentioned a very interesting CSS 3 experiment.  Sadly this won’t be working with IE just yet so it’s not something we can put to use right away, but the idea of Pure CSS icons is quite neat   The use of pseudo elements to create the icons out of pure CSS is truly innovative and makes me start to think about all the code that could be cleaned up by taking advantage of pseudo elements as opposed to adding in more DIVs to get certain background and border effects…

Regardless, it’s an interesting peek in to what we’ll be able to achieve once CSS 3 is fully supported

http://nicolasgallagher.com/pure-css-gui-icons/demo/

I stumbled across a website called SelectORacle. What it does is you input a style sheet and it breaks down exactly what is going on! Not too much help for me, but a nice resource to hold on to for newbies.

http://gallery.theopalgroup.com/selectoracle/

I recently added in a way for admin users to download a backup of the database to a CMS I work on.  I came up with something between this solution and this one.  Add this little snippet after a database connection and change “table_1″ and “table_2″ to whichever tables you’d like to output, and add as many tables as you need.

What I like about this script is that it doesn’t save a copy to the server so folks can’t nab it if they know the entire URL, but it can be easily integrated to a web based interface.  It also uses “create table if not exists” which was missing from the other two scripts.  I think a backup should create tables in case you loose the table structure, but it shouldn’t delete the existing data.

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

<?php
function datadump ($table) {
    $result .= "# Dump of $table \n";
    $result .= "# Dump DATE : " . date("d-M-Y") ."\n\n";
    
    $row2 = mysql_fetch_row(mysql_query('SHOW CREATE TABLE '.$table));
    $result .= "\n\n".str_replace('CREATE TABLE','CREATE TABLE IF NOT EXISTS',$row2[1]).";\n\n";
    
    $query = mysql_query("select * from $table");
    $num_fields = @mysql_num_fields($query);
    $numrow = mysql_num_rows($query);
    
    for ($i =0; $i<$numrow; $i++) {
        while($row = mysql_fetch_row($query)) {
            $result .= "INSERT INTO ".$table." VALUES(";
            for($j=0; $j<$num_fields; $j++) {
                $row[$j] = addslashes($row[$j]);
                $row[$j] = ereg_replace("\n","\\n",$row[$j]);
                
                if (isset($row[$j])) $result .= "\"$row[$j]\"" ; else $result .= "\"\"";
                if ($j<($num_fields-1)) $result .= ",";
            }
            $result .= ");\n";
        }
    }
    return $result . "\n\n\n";
}
 
$content = datadump('table_1').datadump('table_2');
 
$file_name = "database_backup.sql";
Header("Content-type: application/octet-stream");
Header("Content-Disposition: attachment; filename=$file_name");
echo $content;
?>

I recently just finished a project called “Twitter Critter” It’s a simple program that works with Twitter to generate an avatar.  All you have to do is enter in your own username, or anyone’s username, and it will create an avatar based on your Tweets.

It searches through your latest 200 tweets and uses those words to determine what color, critter, and what accessories your Twitter Critter will have.  It also generates a cute bio for that Critter based on those choices.  There are thousands of possible combinations, and if you come back after doing some Tweeting your result will change!  You can also Tweet out a permalink to the specific Twitter Critter your generated, and with one click you can set it as you avatar on Twitter.

Click here to get started!  http://twitter-critter.contropa.com/

Related Blogs:

http://rakugakiman.blog6.fc2.com/blog-entry-2827.html