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

    Sliding content. Advice for out slide?

    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. 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>
    Last edited by themindco; 03-17-2012 at 07:35 AM.

  • #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


  •  

    Posting Permissions

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