Absolute positioning causing carousel to glitch

**20andup** · Feb 9, 2012 12:49

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>

**RyanReese** · Feb 9, 2012 13:44

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.

**20andup** · Feb 9, 2012 23:36

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);
}

**20andup** · Feb 11, 2012 00:22

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.

**ralph.m** · Feb 11, 2012 06:46

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.

**20andup** · Feb 11, 2012 07:13

You can download the accordion file here: http://www.box.com/s/maf9jmcujq6dosy2s69x

**ralph.m** · Feb 11, 2012 07:24

Originally Posted by 20andup

you still need to download elastislide

Originally Posted by 20andup

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!

**20andup** · Feb 11, 2012 07:29

The file has elastislide and everything included.

But I understand. Thanks though!

**deathshadow60** · Feb 11, 2012 07:35

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.

**20andup** · Feb 11, 2012 07:44

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.

**deathshadow60** · Feb 11, 2012 08:31

Originally Posted by 20andup

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.

**RyanReese** · Feb 11, 2012 12:43

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.

**20andup** · Feb 12, 2012 09:56

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.

**RyanReese** · Feb 12, 2012 10:39

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.

User Tag List

Thread: Absolute positioning causing carousel to glitch

Thread Tools

Display

Absolute positioning causing carousel to glitch

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions