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/

Ever have this problem where your centered elements will “wiggle” out of place when you adjust the size of your browser?  It’s just by one pixel, and annoys me to death.

I found this article about it: http://acko.net/blog/css-sub-pixel-background-misalignments

It seems like it’s a margin/padding issue.  I took the offending div element and added “margin-left: 1px;” to it’s class and it worked!  Beautifully   You may also need to nudge any background images by one pixel.

It does concern me that other elements on the page align perfectly, where it was only the #footer div that was giving me grief.

UPDATE

The aformentioned fix applies to 100% divs that have a centered background.  I came across this same problem in a div that was set to margin:auto;.  I went ahead and added “margin-left: 1px;” to the body and that fixed everything up nicely