I am trying to make a TideSDK application that cannot be closed and minimizes to the system tray.
I have the system tray part figured out for the most part, but when I specify "closeable" in tiapp.xml it doesn't do anything. i.e. I still see the "close" button and it closes the app entirely.
<window>
<id>someApp</id>
<title>Alerts</title>
<url>app://index.html</url>
<width>800</width>
<max-width>800</max-width>
<min-width>800</min-width>
<height>600</height>
<max-height>600</max-height>
<min-height>600</min-height>
<fullscreen>false</fullscreen>
<resizable>false</resizable>
<chrome scrollbars="false">true</chrome>
<maximizable>false</maximizable>
<minimizable>true</minimizable>
<closeable>false</closeable>
</window>
How to make it not closeable?
Have a look at this solution - https://gist.github.com/4639473
I've learned that the most flexible way to manage an app that "minimizes/closes to systray" is to use a hidden main window that launches a secondary window.
Secondary windows appear to be more flexible, plus you have the ability to manage them from the main hidden window.
This is all I left in my main window's code:
<head>
<script src="app://js/jquery.min.js"></script>
<script>
$(function(){
Ti.UI.currentWindow.hide();
var alert_window = Ti.UI.createWindow({
id: "alertWindow",
url: "app://alert.html",
title: "My New Window",
baseURL: "app://alert.html",
x: 100,
y: 100,
width: 500,
minWidth: 500,
maxWidth: 500,
height: 500,
minHeight: 500,
maxHeight: 500,
maximizable: true,
minimizable: true,
center: true,
closeable: false,
resizable: false,
fullscreen: false,
maximized: false,
minimized: false,
usingChrome: false,
topMost: true,
visible: true,
transparentBackground: false,
transparency: false
});
alert_window.open();
alert_window.setTopMost( true );
});
</script>
</head>
<body>
</body>
Related
Just wondering if anyone can help please.
I'm using Slick Slider on one my WordPress sites, and the slider is currently sliding from right to left. I'd like the slider to slide from left to right when it changes slides.
Does anyone have any suggestions please?
<script type="text/javascript">
$(document).ready(function(){
$('.fadex').slick({
dots: false,
speed: 500,
autoplay: true,
autoplaySpeed: 3500,
infinite: true,
centerMode: false,
initialSlide: 0,
arrows: true,
});
});
</script>
To solve this problem requires you to change the style of the left value
Because it adds a negative to the single-product-image class
Inside the slick.js file at line 866
Add a new line and add this condition
if($("html").attr("dir") == 'rtl'){ var newE = t.slideWidth * o; }else{ var newE = t.slideWidth * o * -1; }
And change this condition
(e = t.slideWidth * o * -1)
to this
(e = newE)
Then the page orientation will be relied upon in the case of RTL or LTR.
rtl : [slick-slider rtl=”true”] (for rtl mode. By default value is “false”. Options are “true OR false”).
Simply use the options provided. By default value is “false”, change this to true, or vice versa to change the direction.
<script type="text/javascript">
$(document).ready(function(){
$('.fadex').slick({
dots: false,
speed: 500,
autoplay: true,
autoplaySpeed: 3500,
infinite: true,
centerMode: false,
initialSlide: 0,
arrows: true,
rtl: true,
});
});
</script>
I want to remove the header of a child window using TIDESDK. I don't know how to use xml settings for a child window. I was successful in creating tiapp.xml file for the parent. Now, I am trying to use the Ti.UI.UserWindow APIs to remove the borders but to no avail.
Here is my unsuccessful piece of code:
var window1 = Ti.UI.createWindow('app://src/filename.html');
window1.setUsingChrome(false);
window1.setSize(400,200);
window1.setTransparency(0.5);
Every other property is accurately getting applied but the 'setUsingChrome' property shows no effect. Can someone advice how to use this property or to create a tiapp.xml file for tidesdk so as to remove the header from the CHILD window
YESSss....found out finally, but realized after finding that it was kind of silly not to try this earlier.
var window1 = Ti.UI.createWindow({
url: 'app://src/client/notifications/notifications.html',
title: "Reminders",
width: 400,
height: 200,
maximizable: false,
minimizable: false,
closeable: false,
resizable: false,
fullscreen: false,
maximized: false,
minimized: false,
usingChrome: false,
topMost: true,
visible: true,
transparentBackground: false,
});
Setting either the transparentBackground property or usingChrome property removes the header and the borders(if present).
I have a DataTable with 3 controls; General Search, Pagination, and Info (i.e. 'Showing 1 to 10 of 88 Entries' ). I want to place these controls in the header/footer of a jQuery Dialog window.
DataTables provides an options called sDOM, which lets one specify where to put DataTable's controls. But, I want to put the controls in the header and footer of a modal, which can not be done with sDOM.
The General Search control can be created with fnFilter, which is easy enough.
I think Pagination, and Info will require writing a custom pagination plugin, which I would like to avoid.
This is my current progress on jsFiddle.
$('#modal').dialog({
modal: true,
"height": 570,
"width": 1170,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$(".myDialog").append('<div id="dialogFooter" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><div class="dataTables_info" id="DataTables_Table_X_info"></div></div>');
}
});
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers",
"sDom": 'it<\"F\"p>"',
});
$("#modal").dialog("open");
You are doing it backwards :)
Create the dataTable
Create the modal
Move the autogenerated controls from the dataTable to the footer (or whatever)
forked fiddle -> http://jsfiddle.net/xK3TK/
I Have in the example placed the footer on top and included jQuery UI css (and you have BTW forgotten to close the modal markup </div>)
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers"
//"sDom": 'it<\"F\"p>"',
});
$('#modal').dialog({
modal: true,
"height": 570,
"width": 770,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$("#dataTable_info").detach().appendTo('#dialogFooter');
$("#dataTable_paginate").detach().appendTo('#dialogFooter');
$("#dataTable_length").detach().appendTo('#dialogFooter');
$("#dataTable_filter").detach().appendTo('#dialogFooter');
}
});
$("#modal").dialog("open");
I've been trying to learn Sencha Touch and I'm stuck on something that is probably pretty obvious. I'm trying to update a tabPanel with a button event. I'd like for a tap on the first button to load 'maptestPanel' in the same panel. This is a map loaded from its own js file.
The map panel looks ok by itself:
maptestPanel = new Ext.Panel({
layout: 'fit',
fullscreen: true,
items: [map]
});
But I'm not seeing how to properly place it in the tabPanel
The code is:
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var navBar = new Ext.Toolbar({
dock : 'top',
title: 'Some App Name',
});
var topPanel = new Ext.Panel({
dockedItems: [navBar],
fullscreen : true,
//html: 'Test Panel'
});
var tapHandler = function(button, event) {
btnPanel.update(maptestPanel); //I'm sure part of the problem is here
}
var SomeDate1 = new Ext.Button({
text:"Some date",
minWidth:200,
height: 45,
cls:"listButtonTop",
handler:tapHandler
});
var SomeDate2 = new Ext.Button({
text:"Another Date",
minWidth:200,
height: 45,
cls:"listButton"
});
var SomeDate3 = new Ext.Button({
text:"And Another Date",
minWidth:200,
height: 45,
cls:"listButtonBottom"
});
var btnPanel = new Ext.Panel ({
id: 'date',
items: [SomeDate1,SomeDate2,SomeDate3],
});
var tabpanel = new Ext.TabPanel({
layout: 'card',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'Maps',
//html: '<h1>Place holder</h1>',
iconCls: 'maps',
cls: 'card1',
items: [btnPanel]
}, {
title: 'Favs',
html: '<h1>Place holder</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4',
layout: 'fit'
//items: [SomeList, SomeOtherList, AnotherList]
}, {
title: 'Info',
html: '<h1>Place holder</h1>',
cls: 'card4',
iconCls: 'info'
}]
});
}
});
Thanks for any advice or a steer in the right direction.
There's several things you need to do to fix up that code:
1) 'Maps' has no layout. Since it has a single child item, layout: 'fit' would be appropriate here.
2) Only use fullscreen on the outermost item, you don't want the other items to be fullscreen since they are child items of other containers.
3) To dynamically add items to a container, use the add() method on container. You'll also need to call doLayout() to trigger a layout for the container.
btnPanel.add(maptestpanel);
btnPanel.doLayout();
However, in this case I don't see why you're adding the map to a panel, it doesn't give you any extra functionality. Instead, I would add the map directly to the btnPanel.
4) The btnPanel has no layout either, so you'll need to choose an appropriate layout there as well, possibly the vbox layout.
I only know "classic" sencha, but this should work the same way : So you could just add the mapPanel (but hidden) to your tabPanel, and in the button handler show it while hiding the button panel.
Besides, speaking of layouts, I don't think you need to precise layout:'card' in tabPanel since it uses a card layout by definition
I've put an asp.net button on a modal dialog box that will appear once a certain option is clicked.
I want to call a .net subroutine once the button is clicked as normal but because I'm guessing it's in modal in won't foolw through to the subroutine or the click has no affect.
Is there a way around this?
Thanks,
var dlg = jQuery("#dialog2").dialog({
bgiframe: true,
autoOpen: false,
height: 410,
width: 800,
modal: true,
show: 'Transfer',
hide: 'Transfer',
draggable: true,
resizable: true
});
The button is a standard which doesn't click add go through the appropriate code behind the button.
<div style="width: 743px">
<asp:Button ID="btnNoteSave" runat="server" Text="Save" class="button_class" />
</div>
If it's a standard ASP.NET Button, it will still work, so long as your event handlers are setup correctly, however it may not behave as desired, i.e. Model popup will not persist.
May I suggest some AJAX and ASMX/WCF/JayRock?
I got this working by changing it all to:
$("#dialog2").dialog({
bgiframe: false,
autoOpen: false,
height: 410,
width: 800,
modal: true,
draggable: true,
resizable: true
});
$("#dialog2").parent().appendTo($("form:first"));
It does allow me to just use the method behind the