0

I'm writing an app over PhoneGap and I'm using css and jquery. I know I can scale an element but it doesn't seem to have an effect on its visible height. It just shrinks but still keeps space. I need somehow a GPU accelerated height maninpulation. GPU accelerated display/hide would also be fine.

Thanks.

EDIT: the structure I have is

slides-container --- slides ------ slide

slides-container has width: 320px; overflow: hidden; to create a window for the slide to slide. When I remove overflow: hidden; it works fine but then I lose the sliding effect.

Whats happening actually is wheneever I do a move to a slide with a larger height, there is a white flash. I set the slide heights after the movement.

Bilsay
  • 185
  • 2
  • 11
  • As far as I know, height cannot be animated with CSS3 transitions, min-height can however. – Sean Nov 23 '12 at 16:03
  • 3
    See this: http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto – Sean Nov 23 '12 at 16:06
  • If you don't want to tinker around with that though, I'm sure there are many jQuery solutions (albeit not a GPU accelerated one) – Sean Nov 23 '12 at 16:06
  • 1
    I don't think you can control the GPU with phoneGap ... Btw, have you used percentages or fixed heights ? – HamZa Nov 23 '12 at 16:09
  • 1
    @SeanDunwoody, height works just fine. The only restriction is animating to `auto` which cannot be automagically converted to a number.. – Gabriele Petrioli Nov 23 '12 at 16:15
  • Apologies, fuzzy memory + laziness to double check (it's friday) – Sean Nov 23 '12 at 17:42
  • @HamZaDzCyberDeV you can actually use trasform functions to do so. http://www.html5rocks.com/en/tutorials/speed/html5/ – Bilsay Nov 23 '12 at 17:44
  • I ll have a chance to check these on Monday. Will let know of the outcomes but I see things around what I was looking at so should come with something good. Thanks all. – Bilsay Nov 23 '12 at 18:00

2 Answers2

0

I'm not familiar with Phonegap but if you can use jQuery you can create a jQuery animation function on the element.

$('#element').click(function(){
    $(this).animate({height : '200px'},100);
});

The animate function works as follows. ({CSS to manipulate},duration,callback function); The duration is measured in milliseconds and the callback function isn't required.

Some CSS methods such as margin-left and background-colour are different. Margins are written like so marginLeft, marginRight, marginTop. Background-color and any other with a python require to be entered as a string. "background-image".

Hope this was useful.

bashleigh
  • 8,813
  • 5
  • 29
  • 49
  • Beneto, Thanks for the reply. My initial attempt was this and this works perfectly on a browser but on iphone (via PhoneGap) it causes a white flash when the height is changed to a large value. I tried css animations as well but nothing helps as far as I can see. I sense there is a DOM Update causing this flash. -webkit-backface-visibility won't even solve my problem. Thanks anyway. – Bilsay Nov 23 '12 at 17:32
  • Is it a mobile application website or a mobile website? What are you using Phonegap for? – bashleigh Nov 23 '12 at 19:06
  • It's a mobile app written with jQuery, css using PhoneGap. I'll try a couple of stuff talked here and I'll come back with a solution. – Bilsay Nov 26 '12 at 10:37
0

Got the answer. Just haven't implemented it correctly yet.

I think I've seen some people talk about it before but its basically about changing the height of a slide in a container which has is not big enough. Changing the height of the container fixes the issue. What I'm not 100% sure is that to which value should I change height of the container. Anyway that my issue. I ll let know if I find something generic though.

For now I would say make sure the container can fit its elements inside.

Also besides; -webkit-backface-visibility: hidden; this -webkit-transform-style: preserve-3d; also helps.

Bilsay
  • 185
  • 2
  • 11
  • Also one extra thing that helped me was moving the overflow: hidden; to the parent of the div with overflow-x: hidden; overflow-y: scroll; Just thought it might help to someone – Bilsay Dec 04 '12 at 15:53