Jim B's Blog

I was trying to figure out the minimum required to do a left to right, top to bottom, right to left, and bottom to top transition of the entire page in HTML5 for Safari.

I found some examples and determined these types of page transitions are just manipulation of location of your element on the page.

Here's an example of a page sliding in from left to right. The basics here are

setting a position to absolute for your item,
setting the start location (in this example left margin)
setting the -webkit-transition: all 0.5s ease-in-out;
and then on loading the page, changing the class to a class with a different left margin (I used jquery here since it's the easiest to accomplish)

Here's the code:

<!DOCTYPE html>

<html>

   <head>

   <title>Title of My Page</title>
<meta charset="utf-8">
<meta name="description" content="The head tag contains the title and meta tags - important to the search engines, and information for the browser to properly display the page.">

<style type="text/css">
/* set the starting position for the element */
.previous{
left: -100%;
}
/* setup the element to move */
#Home{
display:block;
position: absolute;
top:0px;
width: 100%;
height: 100%;
   -webkit-transition: all 0.5s ease-in-out;
background: #cbd2d8;

}
/* set the final location of the element */
.current{
   left: 0px;
}
</style>
<script type="text/javascript" src="jquery-1.4.3.js"></script>

<script type="text/javascript">
// change the class for #Home which changes the left location
$(document).ready(function() {
   $("#Home").removeClass("previous");
   $("#Home").addClass("current")
});
</script>

   </head>

<body>
   <div id="Home" class="previous">
   Content Goes Here
   </div>
   </body>
   </html>

To make the page go from right to left, change the css classes to:
.previous{
left: 100%;
}
.current{
   left: 0px;
}

Left to right:
.previous{
left: -100%;
}
.current{
   left: 0px;
}

Top to bottom:
.previous{
top: 100%;
}
.current{
   top: 0px;
}

Bottom to Top:
.previous{
top: -100%;
}
.current{
   top: 0px;
}



Quick and Easy

I've tried a couple of times to install Zope 2 from various instructions I found online. Each give me a unique set of problems. I've installed a fresh version of Python 2.6 in previous post, and have used these instructions for installing Zope 2 using a buildout.

Here's my following/adaptions of instructions from http://docs.zope.org/zope2/zdgbook/GettingStarted.html

$ mkdir zopeproj1
$ cd zopeproj1/
$ touch buildout.cfg
$ wget -c http://svn.zope.org/repos/main/zc.buildout/trunk/bootstrap/bootstrap.py

--22:09:09-- http://svn.zope.org/repos/main/zc.buildout/trunk/bootstrap/bootstrap.py
=> `bootstrap.py'
Resolving svn.zope.org... 74.84.203.155
Connecting to svn.zope.org[74.84.203.155]:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 3,807 [application/x-httpd-cgi]

100%[===================================================================================================>] 3,807 --.--K/s

22:09:09 (1.00 MB/s) - `bootstrap.py' saved [3807/3807]

$ ls
bootstrap.py buildout.cfg

$ ~/myprojects/opt/Python-2.6.4/bin/python2.6 bootstrap.py
Downloading http://pypi.python.org/packages/2.6/s/setuptools/setuptools-0.6c11-py2.6.egg
Creating directory '/Users/jbglenn/myprojects/zope2/zopeproj1/bin'.
Creating directory '/Users/jbglenn/myprojects/zope2/zopeproj1/parts'.
Creating directory '/Users/jbglenn/myprojects/zope2/zopeproj1/eggs'.
Creating directory '/Users/jbglenn/myprojects/zope2/zopeproj1/develop-eggs'.
Generated script '/Users/jbglenn/myprojects/zope2/zopeproj1/bin/buildout'.

$ mate buildout.cfg

made buildout look like this:

[buildout]
parts = zope2
        instance
extends = http://download.zope.org/Zope2/index/2.12.0/versions.cfg

[zope2]
recipe = zc.recipe.egg
eggs = Zope2
interpreter = zopepy

[instance]
recipe = plone.recipe.zope2instance
user = admin:admin
http-address = 8080
eggs = ${zope2:eggs}

$ ./bin/buildout

Here are parts of the results of buildout (in case anyone is following along). These show the errors/warnings I get. It did finish buildout "successfully" though and works so far:

Got plone.recipe.zope2instance 4.0a2.

Getting distribution for 'Zope2>=2.12.1'.

src/AccessControl/cAccessControl.c:596: warning: initialization from incompatible pointer type

src/AccessControl/cAccessControl.c:598: warning: ‘intargfunc’ is deprecated

src/AccessControl/cAccessControl.c:598: warning: initialization from incompatible pointer type

src/AccessControl/cAccessControl.c:599: warning: ‘intargfunc’ is deprecated

src/AccessControl/cAccessControl.c:599: warning: initialization from incompatible pointer type

src/AccessControl/cAccessControl.c:600: warning: ‘intintargfunc’ is deprecated

src/AccessControl/cAccessControl.c:600: warning: initialization from incompatible pointer type

src/AccessControl/cAccessControl.c:601: warning: initialization from incompatible pointer type

src/AccessControl/cAccessControl.c:602: warning: initialization from incompatible pointer type

src/AccessControl/cAccessControl.c:606: warning: ‘intargfunc’ is deprecated

src/AccessControl/cAccessControl.c:606: warning: initialization from incompatible pointer type