...

View Full Version : css transition of content. slide out suggestion?



themindco
03-17-2012, 07:57 AM
Hello,

I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? So far this only is working for Chrome. My site is live with the working slide in at The Mind Company (http://www.themindspot.com). Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions?

CSS:


header {
z-index:100;
position:relative;
display: block;
background-color: #272727;
height:100px;}

#contentBody {
min-height:48em;}

footer {
position:relative;
display: block;
background-color: #272727;
height:168px; }

#aboutPage {
display:none;}

#productPage {
display:none;}

#contactPage {
display:none;}

.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}

.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}

Script:


function $_(IDS) { return document.getElementById(IDS); }

function ani(){
document.getElementById(classID).className ='aniOut';
}

function checkPage(classID, url){
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
$_(classID).className ='aniIn';
sel[i].style.display = tmp;}
$_(classID).style.display = 'block';
loadContent(classID, url); }

function loadContent (classID, url){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();}

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(classID).innerHTML=xmlhttp.responseText;}}

xmlhttp.open("GET","content/"+url,true);
xmlhttp.send();}


HTML:


<!-- Header Areas: (Constent visual)-->
<header>
<li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
<li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
<li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>

<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<section id="aboutPage"></section>
<section id="productPage"></section>
<section id="contactPage"></section>
</div>

<!-- Footer Area: (Constant visual)-->
<footer></footer>

themindco
03-17-2012, 10:10 PM
I have posted a more complete question and examples of what I have attempted here:

http://stackoverflow.com/questions/9752597/transition-with-ajax-and-css3



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum