PDA

View Full Version : single line of pixels at bottom of viewport.



nosarious
28 Jul 2010, 5:32 PM
I have a project which has two images overlaying each other. One is an image set as teh background of the body, and the other image is a background of a div called in a carousel.

When I am launching from an icon saved to the home screen I can see aline at the bottom of the screen, as if the upper div is not quite tall enough to cover the body.

Is there a way to get the carousel to fill the entire screen?

On another point, when launching from the web page in portrait, I have the address bar get hidden. Unfortunately it only does this 'onload' so the windows are all drawn to the height of the screen before the address bar is moved. The carousel card is too short.

You can see the example by surfing on an iphone/ipod touch here: http://straathof.acadnet.ca/beta1.3/

If anyone can offer suggestions on how to streamline this project, I would appreciate it. Right now the 'lazy rendering' of Sencha is causing strange hiccups during the loading of the system, and I still don't know where (or how) to implement loading graphics...

nosarious
30 Jul 2010, 10:20 AM
I have an example of what is happening. This is all using the carousel system of Sencha.

Basically there is a body background image that fills the viewport. Over top of this is a carousel that contains a div with an image placed within it, that is allowed to overflow the bottom of the div, but is not scrollable. Overtop of that is another div with text that can scroll.

code to achieve this (within the carousel structure is this:

items: [{//this is a static image and cover title
title: 'Tab 0',
layout: 'fit',
contentEl: 'backdrop1',
items: [{// Don't scroll the Cover of the magazine
// scroll: 'vertical',
contentEl: 'c1'
}]
}, {//This article has one image throughout
title: 'Tab 1',
layout: 'fit',
contentEl: 'backdrop2',
items: [{
scroll: 'vertical',
contentEl: 'c2'
}]
}, { // This article has a changeable image
title: 'Tab 2',
layout: 'fit',
items: [{
scroll: 'vertical',
contentEl: 'c3'
}]
},{ // this is empty 'article' to view images
title: 'Tab 2',
layout: 'fit',
}, {// this article has no image set in it
title: 'Tab 3',
layout: 'fit',
items: [{
scroll: 'vertical',
contentEl: 'c4'
}]
}, {// this article has an one image throughout
title: 'Tab 4',
layout: 'fit',
contentEl: 'backdrop5',
items: [{
scroll: 'vertical',
contentEl: 'c5'
}]
}]

The problem is there is a line of pixels that indicates somethign about the carousel is not filling the viewport, as seen in the attached image:
http://straathof.acadnet.ca/line_of_pixels.jpg

Can anyone suggest a way to avoid this? It looks worse if there is a lot of contrast between the colors of the two images. It also happens when the site has been saved to the home screen as a bookmark.

(all testing is on a 2nd generation ipod touch, ios4)