SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioning causing carousel to glitch

    None of the carousel plugins I use are working properly. Usually I need to resize my browser before everything is displayed properly. This is not practical because mine is a mobile app.

    I have nailed down the problem to positioning. The transition between pages requires the positioning to be Absolute (see #page > div). However, the carousel requires the Relative positioning.

    I tried adding an extra <div></div> around the carousel and positioning that to be relative, but it isn't doing the trick. Anyone know how to fix this...

    Transition.css:

    Code:
    #page {
      position: relative;
    }
    
    #page > div {
      display:none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    
    #page > div.current {
        display: block;
    }

    HTML:

    HTML Code:
    <!doctype html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="cleartype" content="on">
      <link rel="stylesheet" href="css/transition.css?v=1">
      <link rel="stylesheet" href="css/elastislide.css?v=1">
    </head>
    
    <body>
    <div id="page">  
    
    <div id="pageLogin" class="pageLogin current">
        <a href="#pageSearch" id="signIn" class="button small brown"><span>Sign in</span></a>
    </div>
    
    
    <div id="pageSearch" class="pageSearch">
        <!-- Elastislide Carousel -->
        <div id="carousel" class="es-carousel-wrapper">
        <div class="es-carousel">
        <ul>
            <li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
            <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
            <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
            <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
            <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
        </ul>
        </div>
        </div>
        <!-- End Elastislide Carousel -->
    </div> <!--! end #pageSearch-->
    </div><!--end #Page-->
    
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.elastislide.js"></script>
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Could we get a site to loook at? I copied the HTMl/CSS to a file to look at but really it doesn't help paint the picture. If I could look at what you were describing I could help more. You saying "isn't" doing the trick is vague, and I don't even have enough code to possibly make a guess.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the transition.css and the script.js that will make the html work. (you still need to download elastislide)

    transition.css

    Code:
    #page {
      position: relative;
    }
    
    /*fade in out*/
    
    #page > div {
      display:none;
      width: 100%;
    
    }
    
    
    
    #page > div.current {
        display: block;
    }
    
    .in, .out {
    	-webkit-animation-timing-function: ease-in-out;
    	-webkit-animation-duration: 300ms;
    }
    @-webkit-keyframes fade-in {
    	from { opacity: 0; }
    	to { opacity: 1; } 
    }
    .fade.in {
    	-webkit-animation-name: fade-in;
    	z-index: 10;
    }
    .fade.out {
      z-index: 0;
    }
    .show.in {
      z-index: 10;
      -webkit-animation-name: fade-in;
      -webkit-animation-duration: 10ms; }
    
    .show.out {
      z-index: 0;
    }
    
    /* Push in/out */
    @-webkit-keyframes inFromRight {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); } 
    }
    .push.in {
    	-webkit-transform: translateX(0);
    	-o-transform: translateX(0);
    	-webkit-animation-name: inFromRight; 
    }
    
    @-webkit-keyframes outToLeft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
    }
    .push.out {
    	-webkit-transform: translateX(-100%);
    	-o-transform: translateX(-100%);
    	-webkit-animation-name: outToLeft; 
    }
    
    @-webkit-keyframes inFromLeft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); } 
    }
    .push.in.reverse {
    	-o-transform: translateX(0);
    	-webkit-animation-name: inFromLeft; 
    }
    
    @-webkit-keyframes outToRight {
    	from { -webkit-transform: translateX(0); }
    	to { -webkit-transform: translateX(100%); } 
    }
    .push.out.reverse {
    	-o-transform: translateX(100%);
    	-webkit-animation-name: outToRight; 
    }

    script.js:

    Code:
    var pageState = {};
    $(document).ready(function(){
    
    
    
    //ELASTISLIDE
    	$('#carousel').elastislide({
    				imageW 		: 80,
    				minItems	: 3,
    				border		: 0
    			});
    
    //SLIDE PAGE
    	$("#signUp, #signIn").click(function(e){
    		e.preventDefault();
    		changePage("#pageSearch","push");
    	});
    	
    	
    	
    //BACK
        $(".back").live("click",function(e){
        e.preventDefault();
        window.history.back();
      });
    
     });//END ready
    	
    window.addEventListener("popstate", function(event) {
      if(!event.state){ 
        return;
      } 
      // Transition back - but in reverse.
      transition(
        event.state.page, 
        event.state.transition, 
        !event.state.reverse
      );
      pageState = {
        state: {
          page: event.state.page,
          transition: event.state.transition,
          reverse: event.state.reverse
        },
        title: "",
        url: event.state.page
      };
    }, false);
    
    function changePage(page, type, reverse) {
      // Store the transition with the state
      if(pageState.url){
        // Update the previous transition to be the NEXT transition
        pageState.state.transition = type;
        window.history.replaceState(
          pageState.state,
          pageState.title,
          pageState.url);
      }
      // Keep the state details for next time!
      pageState = {
        state: {
          page: page,
          transition: type,
          reverse: reverse
        },
        title: "",
        url: page
      };
      window.history.pushState(pageState.state, pageState.title, pageState.url);  
      // Do the real transition
      transition(page, type, reverse);
    }
    
    function transition(toPage, type, reverse){
      if(toPage) {
        // Set the current icon
        $("#tabBar").attr("className", toPage.slice(1));
      }
      
      var toPage = $(toPage),
        fromPage = $("#page .current"),
        reverse = reverse ? "reverse" : "";
      
      toPage.find(".back").toggle(true);
    
      if(toPage.hasClass("current") || toPage === fromPage) { 
        return; 
      };
    
      // For non-animatey browsers
      if(!("WebKitTransitionEvent" in window)){
          toPage.addClass("current");
          fromPage.removeClass("current");
          return;
      }
      
      toPage
        .addClass("current " + type + " in " + reverse)
        .one("webkitAnimationEnd", function(){
          fromPage.removeClass("current " + type + " out " + reverse);
          toPage.removeClass(type + " in " + reverse);
        });
      fromPage.addClass(type + " out " + reverse);
    }

  4. #4
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This positioning problem also causes the jQuery UI accordion to not fully display as well. As in, the slide down is also hidden (display:none) or partially displays.

    The problem has to do with display:none and positioning on the child elements of page > div.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    As Ryan said, we need to see this live. Otherwise, it's like bringing in all the separate parts of a car and asking us why the car makes a funny noise when you drive it.

  6. #6
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can download the accordion file here: http://www.box.com/s/maf9jmcujq6dosy2s69x

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by 20andup View Post
    you still need to download elastislide
    Quote Originally Posted by 20andup View Post
    You can download the accordion file here: http://www.box.com/s/maf9jmcujq6dosy2s69x
    It's not really practical to require us to download things and rebuild the page so that we can help you ... unless someone is feeling especially generous. But I don't have the time. Anyhow, I hope you find a solution!

  8. #8
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The file has elastislide and everything included.

    But I understand. Thanks though!

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    As said, we really need to see it live/complete to weigh in for anything meaninful... but it sounds like you're just bloating out the page with scripting for nothing of value... and, well... good lord...

    Code:
    #page > div {
      display:none;
      position: absolute;
    WHY would you EVER apo every div inside #page -- even with the selector that's just asking for the page to break. That makes it sound like you're building the page with nothing in flow; how are you getting the height then?

    APO (absolute positioning) can be very powerful for simple effects, but using it to build your entire layout (which is what it looks like you are doing) is just ASKING for the page to not work right... that it also looks like you're doing scripted show/hide with no scripting off degradation likely isn't helping matters.

  10. #10
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The APO is necessary so that the pages can transition. I am following Sitepoint's "Build mobile websites and apps for smart devices".

    In the book, they mention its so that the pages can be stack like cards and transition between pages. Here's their code archive which does the same.

    https://github.com/spbooks/mobile1/

    You bring up a good point though. The question really is can you relative position an object inside an absolute positioned parent. (obviously, I have not been able to do this)

    I have only heard of absolute positioning an object inside a relative position parent.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 20andup View Post
    In the book, they mention its so that the pages can be stack like cards and transition between pages. Here's their code archive which does the same.
    In other words another reason most of the sitepoint books do more damage than harm... gotcha.

    Such nonsense pretty well pissing all over maintainability and accessibility. My advice, forget anything they're telling you there as I've not seen code that bad since the last time I dealt with something built in frontpage. "transition between pages" being geekspeak for "gee ain't it neat" animooted nonsense that does nothing more than RUIN actually using the site in a meaningful manner.

    But to keep that in perspective, I say that about 99% of the garbage vomited up by people using jquery.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can position an element to be relative inside of an absolute parent, but why would you? Honestly curious. That's a weird combination.

    I don't think the SP books are that bad to be honest. Sure it's not the greatest in the world, and can get out of date pretty fast, but it's a good learning source. My brother had a copy of one of them when he was trying to learn more about this stuff.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay... finally found the answer to the problem. Its actually the display:none and display:block, that was applied to the pages. The cascading effect of display: block caused the carousel's positioning display list style instead of side-by-side.

    Instead of display:none, I use visibility:hidden, height: 0, overflow: hidden. Then I just reverse it when the page displays.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Display:block doesn't cascade, unless you mean that your CSS was so "general" that it applied to the display lists as well, aka you wrote the rule in your CSS. THe display lists style by default makes it vertical.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

Bookmarks

Posting Permissions

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