...

View Full Version : Sliding content. Advice for out slide?



themindco
03-17-2012, 07:24 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? 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:12 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