I'm use carouFredSel plugin for responsive carousel.
When scroll bottom (on mobile), browser address bar pannel will hide, slider update height and jump to top. And when scroll to top, browser address bar pannel will show and slider update sizes and jump to top too. How fix it?
I call callback 'updateSizes' some times and carousel calculate mobile browser url bar height) only when scroll top, and only when scroll bottom after this bar hide
$('.container').carouFredSel({
auto: false,
circular: false,
infinite: false,
responsive: true,
width: '100%',
height: 'variable',
items: {
visible: 1,
start: 1,
height: 'variable',
},
});
Here is a solution:
$(window).scroll(function () {
$("body").attr("height",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("height"))
});
Related
I'm using Smartclient, v 8.2 (LGPL).
I have a MenuButton that opens a Menu. The button is aligned right. the problem is that when the menu is displayed; the left side of the menu is aligned with the left side of the button, and there's no space for rendering the menu. As a result, when I click the menu button, the page becomes wider (horizontal scrollbar appears) in order to make space for rendering the menu. when the menu is hidden, the page returns to normal size.
is there any way to avoid this? What I would like is that the right side of the menu is aligned with the right side of the button.
I tried using the align property of the menu, but no matter what value I used, I always see the same behavior. Also I set overflow= "hidden", but still same problem.
this is small test case:
isc.Menu.create({
ID: "menu",
autoDraw: false,
showShadow: true,
shadowDepth: 10,
overflow: "hidden",
align: "right",
data: [
{title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
{title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
{isSeparator: true},
{title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
{title: "Save As", icon: "icons/16/save_as.png"}
]
});
isc.MenuButton.create({
ID: "menuButton",
autoDraw: false,
title: "File",
width: 100,
menu: menu
});
isc.HLayout.create({
width: "100%",
members: [
isc.Canvas.create({
width: "*",
height: 24,
backgroundColor: "lightgray"
}),
menuButton
]
})
I found the problem: if showShadow is set to true, then I see the issue described in the question. removing that attribute (default is false) solved the problem: menu is aligned to the right, and no scrollbars appear.
//Here i am creating overlay on button tap event and loading another view using ContentEl:''. Overlay working fine with animation but i need to hide this overlay with animation when user select a particular item in that overlay.
if (!this.overlay)
{
this.overlay = Ext.Viewport.add({
xtype: 'panel',
id:'menuOverlayView',
modal: true,
hideOnMaskTap: true,
centered: true,
scroll: 'vertical',
autoDestroy:false,
floating: true,
showAnimation: {
type: 'slide',
duration: 4000,
direction:'down'
},
hideAnimation: {
type: 'slide',
duration: 4000,
direction:'up'
},
contentEl:'menuViewid',
top: Ext.os.deviceType == 'Phone' ? '20%' : '20%',
width: Ext.os.deviceType == 'Phone' ? 260 : 700,
height: Ext.os.deviceType == 'Phone' ? 220 : 600
});
}
this.overlay.show();
// And my code to hide this overlay in controller is below .I am accessing panel id and hiding the panel but panel should hide with animation like as i mentioned above hideAnimation
var overlayView=Ext.getCmp('menuOverlayView');
overlayView.setHidden(true);
//so what i should do to hide panel with with smooth scrolling up.. i am writingng below sentence but not working giving error
overlayView.hideAnimation({type: 'slide', direction: 'up', duration:1000});
To hide an overlay panel, you need to call panel's hide() method.
Ext.getCmp('menuOverlayView').hide();
and then try your hideAnimation code.
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.
I am new to sencha touch. I have a button with a compose icon. The icon appears in the right bottom corner of my button as per the given size of the button. Can anyone help me in aligning it? iconAlign attribute is not working for me.
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
action:'landedInfo'
}
You have to set the padding property to 0 because the width and height you provide are too small and therefore are messing with the 'center' value you provide for 'iconAlign':
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
padding:0,
action:'landedInfo'
}
One way to see it is to increase to width and height to, say 100x50, then you will get a centered icon without touching the padding property...
I admit this might be tricky to spot at first.
Hope this helps
Setting the margin in css helped me put the icon in the center:
.x-tab .x-button-icon.compose,.x-button .x-button-icon.x-icon-mask.compose
{
margin-left:-5px;
margin-top:-5px;
margin-right:-7px;
margin-bottom:-5px;
}
I tries this and works for me:
{
xtype: 'button',
ui: 'normal',
text:'LOGOUT',
iconMask: true,
iconCls: 'user',
iconAlign:'center',
padding:0,
cls: 'x-iconalign-top',
}
if you use icon-font, you can do it with css.
.x-button-icon {
/*Icon centering*/
position:absolute;
width:1em;//set width of icon relative(icon is font)
top:50%;
margin-top:-0.5em;//half of icon height shift back
left:50%;
margin-left:-0.5em;//half of icon width shift back
}
You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like the position: absolute CSS code.
I am trying to build a website for an iphone using sencha touch. I am newbie in sencha and ext.
I would like to have an layout with a header, footer and inner content. It can be understand as masterpage with header & footer which will be used on each page.
Header and footer should be scrollable (not docked!) and I would like to have an animation between pages.
Generally the website will have a home with header, menu and footer. If user clicks some button from menu (i.e. 'ABOUT') the page should slide to the right to 'ABOUT' page. This page will have a header, some content, back button and footer. Header & footer will look the same as on home page.
I've seen many solutions with docked header and footer but I haven't found any which works in the way I want (the problem is that I want header and footer to be scrollable).
I have tried to use a card layout panel nested in vbox panel, I have tried also card layout panel nested in fit layout panel nested in vbox panel (please find below the sample code).
//home, video and contact panels are quite similar to about panel
about = new Ext.Panel({
layout: {
type: 'vbox',
pack: 'start'
},
items: [
{
html: ['<div class="pageWrapper"><h1><span>About</span></h1></div>']
}
] // end items
});
cardPanel = new Ext.Panel({
layout: 'card',
items: [home, about, video, contact]
});
cardWrapper = new Ext.Panel({
layout: 'fit',
items: [cardPanel]
});
var mainPanel = new Ext.Panel({
layout: 'vbox',
scroll: 'vertical',
fullscreen: true,
items: [header, cardWrapper, btnBack, footer]
});
When I use above code the cardWrapper has height=0 and width=0. I can only see the home page when I set height & width of cardWrapper to some value. I have also tried to set:
autoHeight: true
For home panel, cardPanel and cardWrapper and had no luck :/
Do you have any other ideas how can I achieve this layout of the website?
First, you can have an internally scrollable header and footer when docked. I've done it before where a toolbar that is docked to the main view, but can still be scrolled horizontally. All you have to do is set the scroll property of the toolbar.
Second, setting the 'flex' property of the cardPanel to 1, and giving a fixed height (or a flex as well) to header & footer may resolve the issue you are seeing.
So:
var cardPanel = new Ext.Panel({
flex: 1,
layout: 'card',
items: [home, about, video, contact]
});
var header = new Ext.Panel({
height: 100,
html: "<h1>Header</h1>"
});
var footer = new Ext.Panel({
height: 100,
html: "<h1>Footer</h1>"
});
var mainPanel = new Ext.Panel({
layout: 'vbox',
scroll: 'vertical',
fullscreen: true,
items: [header, cardPanel, btnBack, footer]
});
Finally, what you could try is turn the cardPanel into a Carousel. You can turn off the indicator on the object with the property 'indicator'. To switch between the cards you would use the same setActiveItem call.