CODEWITHSUNDEEP
jqueryiphonecssmobile-safariresponsive-design
Zander
Zander

Reputation: 2684

How do I 'hide' content off screen on the iPhone?

I'm building a responsive web app where the mobile/skinny part of it hides various panels off screen. I have found that positioning these items off to the right-hand side i.e. left: 100% 'hides' does not hide the item correctly because mobile safari still shows it even though it is positioned outside the html and body areas.

I want to slide these hidden items in by adding this class: .focused (using a jQuery click event), which changes the left value to 0. The class has a CSS transform applied to it which handles the animation too.

While testing, I have found that positioning the hidden panels off to the left-hand side work correctly.

Can anyone offer a better solution to the one I have? I really need the hidden content to be positioned on the right-hand side.

Here's some CSS to show you what's happening:

#hidden-item {
  position: absolute;
  top: 50px;
  left: 100%;
  width: 100%;

  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}


#hidden-item.focused {
  left: 0;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

Upvotes: 3

Views: 1739

Answers (2)

Jon H
Jon H

Reputation: 11

I know this post is rather old but I recently had this same issue. I used the viewport meta data tag to deal with this, using a fixed width. Also applying a fixed width and overflow-x: hidden to the body with a media query in the CSS, may help.

<meta name="viewport" content="width=960; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;">

Hope this helps someone.

Upvotes: 1

tobyj
tobyj

Reputation: 298

You are nearly there by the looks of it. You need to make sure that the parent element of #hidden-item has width set and position:fixed or absolute.

Check out this jsfiddle with your css slightly modified: http://jsfiddle.net/HNrCD/2/

Upvotes: 0

Related Questions