Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    13
    Thanked 0 Times in 0 Posts

    css transition of content. slide out suggestion?

    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. 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:
    Code:
    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:
    Code:
    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:
    Code:
    <!-- 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>

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Moved

    I have posted a more complete question and examples of what I have attempted here:

    http://stackoverflow.com/questions/9...-ajax-and-css3
    Last edited by themindco; 03-17-2012 at 10:13 PM. Reason: title


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •