1. I've started a massive SPAM purge, any accounts that have spammed are being removed, also for a short period new user signups are disallowed until the SPAM cleaning is finished.

css transition of content. slide out suggestion?

Discussion in '(X)HTML / CSS' started by shakemelikeapig, Mar 16, 2012.

  1. shakemelikeapig

    shakemelikeapig Member

    Joined:
    Dec 4, 2009
    Messages:
    63
    Likes Received:
    2
    Trophy Points:
    8
    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 (Text):
    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 (Text):
    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 (Text):
    <!-- 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>
    CF
    Loading...
  2. majikstone

    majikstone New Member

    Joined:
    Nov 7, 2012
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    If the question is still relevant, I suggest using jQuery for animations. In your case, it won't make any difference since your page is dependent on Javascript anyway (because of Ajax).

    Anyway, jQuery abstracts away browser differences and gives you a clean API for just about anything you would want to do with Javascript, including animations (api jquery com/animate/).

    Right now you're using CSS animations which is not really a finished standard, as most browser have some differences in its implementation.

Share This Page