I have a main view, then on that view I have, as children, two labels and an image. I want the labels to flow one after another from the top of the screen and I want the image at the bottom. I get the labels to flow properly by setting layout:'vertical' in the main window. But once that is done, I can't seem to force the image to the bottom. Here is a snippet of my code:
var self = Ti.UI.createView({
backgroundColor:'#fff',
layout:'vertical'
});
var l1 = Titanium.UI.createLabel({
text:quote,
color:'#000',
shadowColor:'#ddd',
shadowOffset:{x:2,y:2},
font:{fontFamily:'Marker Felt',fontSize:24},
top:20,
left:15,
right:15,
height:'auto'
});
self.add(l1);
var l2 = Titanium.UI.createLabel({
text:author,
color:'#000',
shadowColor:'#ddd',
shadowOffset:{x:2,y:2},
font:{fontSize:16},
top:10,
left:15,
right:15,
height:'auto',
textAlign:'right'
});
self.add(l2);
var imgView = Titanium.UI.createImageView({
image:myimage,
setBottom:10,
height:100
});
self.add(imgView);
I have tried setting the image layout and that doesn't work. If I change the 'self' window layout to 'absolute' then I can't seem to get the labels to flow cleanly after one another. The first label is of variable height so I need them to follow each other.
I am using Titanium 1.82.
Thanks. In advance.
You might need to add another view. The 'base' view would have what you are calling 'self' added at top:0 and height: 'auto'
Then add imgView to 'base' with bottom: 10 (not setBottom like you have).
Just set the bottom:0; position: fixed; i think this will help u to set the image bottom of the screen.. If it still not working means try with Html,Css and Javascript for design it will be very easy.
Related
I want to have a window xtype that contains just an of its own size but when I show my window, it shows up as a tiny square in the middle of the screen (not the actual size of the image). I've tried using this block of code
listeners:{
afterrender: function(me){
me.el.on({
load: function (evt, ele, eOpts){
me.updateLayout();
},
error: function(evt,ele,eOpts){
}
});
}
}
to update the layout of the parent window from within the image xtype, but this makes the window not centered and centering the window during an afterrender event isn't working. Am I missing something simple? I also have the maxWidth and maxHeight configs of the image set to Ext.getBody().getViewSize().width and height respectively.
Sencha had a good reason not to use xtype: 'image' for their own icons etc.
xtype: 'image' only works with fixed width and height, so you can't even preserve aspect ratio, as far as I know.
What you want to do is to have a container and set the background-image of the container.
xtype: 'container',
style: 'background-image: url(\'image.jpg\'); background-repeat:no-repeat; background-position:50% 50%; background-size:contain'
or even just use the window: https://fiddle.sencha.com/#view/editor&fiddle/244n
I am using bootstrap template and Kendo Window and so far positioning of modal kendo windows wasn't too hard.
But now as I a use a different layout for a certain area, I find myself having problems with that matter.
following code is expected to create a centered (x-axis) modal kendo window:
#(Html.Kendo().Window()
.Name("Window1")
.Visible(false)
.Position(builder => builder.Top(100))
.Draggable()
.Content(#<div class="kendoWindowContent"><p>Please wait...</p><div class="k-loading-image"></div></div>)
.Width(1000)
.Title("Title1")
.Actions(actions => actions.Close())
.Modal(true)
.Resizable())
..and displaying via:
var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");
wnd.refresh({
url: '#Url.Action("Voucher_Create", "OwnerVoucher")'
});
wnd.open();
The window is not beeing displayed in the middle of the x axis.
Are there any constraints in order to have the kendo window beeing centered.
Window centering requires the usage of the center() method. Since the Window content is loaded via Ajax, you need to center the widget in its refresh event.
var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");
wnd.one("refresh", function(e) {
e.sender.center();
});
wnd.refresh({
url: '#Url.Action("Voucher_Create", "OwnerVoucher")'
});
wnd.open();
It is also possible to trigger centering in every refresh event, instead of just once.
Another option is to set explicit width and height. In this case you can center the Window at any time, because the widget dimensions will not change after changing (loading) the content.
ok I guess I was just lucky that all my kendo windows happened to be displayed centered although specifying an explicit offset to top like described.
I assumed, that the window would automatically center on y-axis when having only an x-axis position set.
As it seems this is not the case. I don't really know why this has been working in the past.
Anyway, I figured out a way to center the window depending on the browsers' viewport and window width:
just in case anybodes cares...
function displayWindowCenteredOnYAxis(kendoWindow) {
var windowOptions = kendoWindow.options;
var pos = kendoWindow.wrapper.position();
var viewPortWidth = $(window).width();
var wndWidth = windowOptions.width;
pos.left = viewPortWidth / 2 - wndWidth/2;
kendoWindow.wrapper.css({
left: pos.left
});
kendoWindow.open();
}
Usage:
var wnd = $("#id").data("kendoWindow");
wnd.refresh({
url: '#Url.Action("Action", "Controller")'
});
displayWindowCenteredOnYAxis(wnd);
jQuery(document).ready(function(){
if(screen.width < 767){
jQuery.fn.fullpage.setAutoScrolling(false);
}
else{
jQuery('#fullpage').fullpage({
scrollBar:true,
afterRender: function(){
jQuery('.hslider_misc_holder').each(function(){
var hslider_slider_id = jQuery(this).attr('id').slice(8);
activate_width_checker(1080, 1080, 'responsive', hslider_slider_id);
});
}
});
}
});
I'm trying to turn off fullpage.js below 767px the current function is to turn off auto scroll, no matter what solution I try I can't stop the effect!!!
Ideally I want it turned off entirely.
Help appreciated
Ant
Use the fullpage.js responsive options: responsiveWidth or responsiveHeight.
From the docs:
responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.
Example online (code available in github examples folder)
I am using Titanium Studio for mobile development.
The following two things used to display image. But may i know the difference between following,
1. Ti.UI.createImageView({ width:100, height:50, Image:'image path' });
2. Ti.UI.createView({ width:100, height:50, backgroundImage:'image path' });
Both displaying specified image.
what is the difference between these two.
craeteView also displaying image then , why we use createImageView.
can any one please..
View is an empty drawing surface or container, which is the base type for all UI widgets in Titanium where as image view is a view used to display a single image or series of animated images. All events of Titanium.UI.ImageView is Inherited from Titanium.UI.View. You can not make an animation using view and also an image view has some additional events like start, stop, pause, load etc.
The main difference is you can show URL image (or Remote image) in ImageView, while you can only show resource image in View
var view = Ti.UI.createView();
var imageView = Ti.UI.createImageView();
//Valid:
view.backgroundImage = 'image.png';
imageView.backgroundImage = 'image.png';
imageView.image = 'http://somesite.com/image.png';
//Invalid:
view.backgroundImage = 'http://somesite.com/image.png';
imageView.backgroundImage = 'http://somesite.com/image.png';
Also, as #Anand said, you can show series of images in ImageView
Does anyone know of a hack to allow for a left->right swipe on a tableviewrow. The default swipe action opens a delete button however I require additional buttons but want to maintain the same UX but the "swipe" event listener doesn't seem to fire on rows.
myTblRow.addEventListener('swipe', function(e){
Titanium.API.info("huzzah, a row was swiped");
});
The above == no dice.
It does require a bit of a hack.. remove the editable property on the tableView declaration.
The hack is to apply a view that covers the tableRow:
var row1 = Titanium.UI.createView({
width: Titanium.Platform.displayCaps.platformWidth,
height: 145,
zIndex: 100,
opacity: 0.1
});
row.add(row1);
Notice the zIndex, the opacity makes it exist but be totally transparent.
You now need to create a 'swipe' event listener:
tableView.addEventListener('swipe', function(e){
tableView.updateRow(e.index, createUpdateRow(e.source.myProperty), {
animationStyle: Titanium.UI.iPhone.RowAnimationStyle.LEFT
});
});
When the event fires, createUpdateRow() is called, which returns a tableRow. This tableRow you add all of your custom buttons to, you can change the height of the row, anything. The animation style property will mean if you swipe from the right > left, the new row will animate in from the left, which is an effect I like..
Hope this helps, anyone else.. The extra View (row1) is what got me for ages!