PDA

View Full Version : Masking of page content occurs in carousel mode



mStraub
26 Apr 2011, 7:24 AM
I have page content that is longer than the iPhone screen. I've enabled scrolling.
While scrolling works, everything below the initial screen load has been cut off when I scroll down. This is true in both portrait and landscape.


Compare this carousel page between a desk top browser and an iPhone.

http://www.michaelpensatore.com/000/coach/collection/




function initLayout(){
//alert("JSON Data: " + pData.products[3].productName);

totalProducts = pData.products.length;

// loop through products
for (var i = 0; i < pData.products.length; i++){

// gather product details
var styleID = pData.products[i]['style'].toLowerCase();
var selectedColorCode = pData.products[i]['selectedColorCode'];
// ==================================================create image path==================================================

var imagePath = 'http://s7d2.scene7.com/is/image/Coach/' + styleID + '_' + selectedColorCode + '_a0?fmt=jpeg&wid=' + imageWidth + '&hei=' + imageHeight;
var newX = Number(imageWidth * i) + Number(productMargin * i);
var pName = pData.products[i]['productName'].toUpperCase();
var pDescription = pData.products[i]['longDescription'];
var pPrice = pData.products[i]['swatchGroup']['swatches'][0]['listPrice'];

// ==================================================create divs==================================================
var newDiv = '<div class="productDiv" id="product' + i + '">';
// ==================================================call image==================================================

newDiv = newDiv + '<div class="imageDiv" id="imageDiv' + i + '"><img src="" width="' + imageWidth + '" height="' + imageHeight + '" id="image' + i + '" alt="Product Image"></div>';
newDiv = newDiv + '<div class="productName">' + pName + ' ' + pPrice + ' </div>';
newDiv = newDiv + '<div class="swatchHolder" id="swatchHolder' + i + '"></div>';
newDiv = newDiv + '<div class="productDetail" id="productDetail' + i + '"><div class="productDetailText" id="productDetailText' + i + '"></div></div>';
newDiv = newDiv + '</div>';
$('body').append(newDiv);

var productDetailText = $('#productDetailText' + i);
productDetailText.html( cleanHTML(pDescription) );
// ==================================================create divs==================================================






function initSencha(){

Ext.EventManager.onWindowResize(setActivePanel);
function setActivePanel(){
panel.setOrientation(Ext.getOrientation(), (window.innerWidth-1), window.innerHeight);
};

// after jQuery creates the product divs, Sencha is given the div IDs and provides carousel functionality



new Ext.Application({
launch: function(){


vBox = new Ext.Carousel({
cls: 'carousel',
fullscreen: true,
scroll:{direction:'vertical',threshold:30},
height:1000, //panel's height

layout: {
type: 'hbox',
align: 'fit',

},
//dockedItems: [{xtype:'toolbar', dock: 'bottom', title: 'Kristin Collection'}],

defaults: {
flex: 1 ,

},
items: [
{contentEl: 'product0'},
{contentEl: 'product1'},
{contentEl: 'product2'},
{contentEl: 'product3'},
{contentEl: 'product4'},
{contentEl: 'product5'},
{contentEl: 'product6'},
{contentEl: 'product7'},
{contentEl: 'product8'},
{contentEl: 'product9'},
{contentEl: 'product10'},
{contentEl: 'product11'},
{contentEl: 'product12'},
{contentEl: 'product13'},
{contentEl: 'product14'},
{contentEl: 'product15'},
{contentEl: 'product16'},
{contentEl: 'product17'},
{contentEl: 'product18'},
{contentEl: 'product19'},
{contentEl: 'product20'},
{contentEl: 'product21'},
{contentEl: 'product22'},
{contentEl: 'product23'},
{contentEl: 'product24'},
{contentEl: 'product25'},
{contentEl: 'product26'},
{contentEl: 'product27'},
{contentEl: 'product28'},
{contentEl: 'product29'},
{contentEl: 'product30'},
{contentEl: 'product31'},
{contentEl: 'product32'},
{contentEl: 'product33'},
{contentEl: 'product34'},
{contentEl: 'product35'},
{contentEl: 'product36'}
]
});
}
});

mStraub
26 Apr 2011, 7:54 AM
i changed the overflow state from hidden to visible in the sencha css
it works as intended now

/* line 36, ../themes/stylesheets/sencha-touch/default/widgets/_carousel.scss */
.x-carousel-body {
overflow: visible;
position: relative;
}