I am trying to change my right nav button:
function load_Profile() {
if (editProfileFlag == 0) {
$.win.rightNavButton = Ti.UI.createView({
width : 'auto',
height : 'auto'
});
var confirm = Titanium.UI.createAlertDialog({
title : 'Block',
message : 'Are you sure? This cannot be undone. ',
buttonNames : ['Yes', 'No'],
cancel : 1
});
//add blocked button
var blockButton = Titanium.UI.createButton({
title : 'Block',
top : 0,
zIndex: 10
});
//view mode
if (args.view == 1) {
} else {
$.win.rightNavButton.add(blockButton);
}
[...]
I use the same controller, for something else, so I need to override the existing rightnavbutton and replace it with a new one. Here is the xml:
<Alloy>
<Window id="win" >
<RightNavButton>
<Button id="btnRight" onClick="rightButtonClicked" />
</RightNavButton>
[...]
But the new button does not appear.
Any idea how to swap the right nav bar buttons?
Thanks.
Related
I'm trying to create an popup that contains help information. The below code works perfect on iOS, but on Android the labels aren't displayed (the close button is).
I'm hoping there is an easy fix ;-)
Thanks in advance!
function helpPopup() {
var myModal = Ti.UI.createWindow({
backgroundColor : 'transparent',
navBarHidden:true
});
var wrapperView = Ti.UI.createView(); // Full screen
var backgroundView = Ti.UI.createView({ // Also full screen
backgroundColor : '#000',
opacity : 0.5
});
backgroundView.addEventListener('click', function () {
myModal.close();
});
var containerView = Ti.UI.createView({ // Set height appropriately
height : 300,
backgroundColor : '#FFF'
});
var someLabel = Ti.UI.createLabel({
text : 'Here is your modal',
top : 40
});
var contactName = Ti.UI.createLabel({
text :'Name',
top :60
});
var closeButton = Ti.UI.createButton({
title : 'Close',
bottom : 40
});
closeButton.addEventListener('click', function () {
myModal.close();
});
containerView.add(someLabel);
containerView.add(contactName);
containerView.add(closeButton);
wrapperView.add(backgroundView);
wrapperView.add(containerView);
myModal.add(wrapperView);
myModal.open({
animate : true
});
}
It turns out that Android uses white as a default label color.... iOS uses black.
So after I changed the font color it worked on both Android on iOS:
var someLabel = Ti.UI.createLabel({
text : 'Here is your modal',
top : 40,
color : '#000'
});
I use of fancybox for show image in lightbox with thumbnail image,i want after clicked on each open_fancybox.img, first show in lightbox, the picture was clicked. And all the pictures from the first is not displayed.
For example: if i clicked on 2_b.jpg in lightbox and thumbnail image show(select) 2_s.jpg.
Or
For example: if i clicked on 3_b.jpg in lightbox and thumbnail image show(select) 3_s.jpg.
Or
For example: if i clicked on 1_b.jpg in lightbox and thumbnail image show(select) 1_s.jpg.
how can change just my code, without use fancybox based?
SEE DEMO: http://jsfiddle.net/fsfucmhd/
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/1_b.jpg" data-title="manual 1st title">1</div>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/2_b.jpg" data-title="2nd title"></div>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/3_b.jpg" data-title="3rd title"></div>
var arr = $('div.Img').map(function (elem) {
return {
href: $(this).data('type'),
title: $(this).data('title')
}
}).get();
$(".open_fancybox").click(function() {
$.fancybox.open(arr, {
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
helpers : {
title : {
type: 'over'
},
thumbs : {
width : 75,
height : 50,
source : function( item ) {
return item.href.replace('_b.jpg', '_s.jpg');
}
}
}
});
return false;
});
You should use fancybox based on their documentation.
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
jsfiddle example
I am trying to swipe a container and it's children elements off the screen. However when I run the following code, the child element I swipe goes off the screen as opposed to both elements.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title : 'Tab 1',
backgroundColor : '#fff'
});
var viewContainer = Titanium.UI.createImageView({
backgroundColor : 'white',
width : '100%',
height : '100%',
top : 0
});
var view = Titanium.UI.createImageView({
backgroundColor : 'green',
width : '100%',
height : '100%',
top : 0
});
var view1 = Titanium.UI.createView({
backgroundColor : 'red',
width : '100%',
height : 100,
bottom : 0
});
viewContainer.addEventListener('swipe', function(e) {
if (e.direction == "right") {
//TODO: add functionality here
} else if (e.direction == "left") {
var anim = Ti.UI.createAnimation({
left : -300,
duration : 200,
curve : Ti.UI.ANIMATION_CURVE_EASE_OUT
});
anim.addEventListener('start', function(_startanicallback) {
});
anim.addEventListener('complete', function(_anicallback) {
});
e.source.animate(anim);
}
});
viewContainer.add(view);
viewContainer.add(view1);
win1.add(viewContainer);
win1.open();
I have a :
ViewContainer - where the event listener is attached too.
Inside that , view and view1 both child elements.
Not sure why this is happening.
Cheers.
The reason for only one of the elements being swiped is this line :
e.source.animate(anim);
If you will replace it with viewContainer.animate(anim); the swipe will work as you want.
Hope it helps.
I am standing on MainMenuScreen, from there I added a module name MenuIcons But I don't know why the click events in MenuIcons is not working at all. However, all views, images and other content is showing perfectly without any warning or error.
Here is the scenario of code:
MainMenuScreen.js
function MainMenuScreen(userinfojson) {
var main_window = Titanium.UI.createWindow({
backgroundImage : '/assets/inventoryBackground.png'
});
var MainScreen = [];
var MenuIcons = require('ui/common/menus/MenuIcons');
MainScreen.menuIcons = new MenuIcons(active_screen);
main_window.add(MainScreen.menuIcons);
var StatusScreen = require('ui/common/MenuScreen/StatusScreen');
MainScreen.statusScreen = StatusScreen(userinfojson);
main_window.add(MainScreen.statusScreen);
return main_window;
}
module.exports = MainMenuScreen;
MenuIcons.js
function MenuIcons(active_menu) {
var view = Titanium.UI.createView({
top : "12%",
height : "10%"
});
var iconstatus_imageview = Titanium.UI.createImageView({
left : '0%',
top : '0%',
image : '/assets/iconStatus.png',
height : '100%',
width : '13.8%'
});
iconstatus_imageview.addEventListener('click', function(e) {
alert("Clicked");
});
view.add(iconstatus_imageview);
return view;
}
module.exports = MenuIcons;
So, click event of this "iconstatus_imageview" imageview is not working
Please help...:(
To troubleshoot this I would add colors to the views/windows involved and see if one is drawn over the other. My initial guess without seeing the StatusScreen code is that it is over the top of the MenuIcons, but it is transparent and you can't see it.
I would probably comment out this line and see if the menu event fires:
main_window.add(MainScreen.statusScreen);
This code works, so the problem isn't visible in the code you pasted. So whatever code you edited out should be looked at.
app.js
var main_window = Titanium.UI.createWindow({
//backgroundImage : '/assets/inventoryBackground.png'
backgroundColor: 'white'
});
var MainScreen = [];
var MenuIcons = require('MenuIcons');
//MainScreen.menuIcons = new MenuIcons(active_screen);
MainScreen.menuIcons = new MenuIcons();
main_window.add(MainScreen.menuIcons);
// var StatusScreen = require('ui/common/MenuScreen/StatusScreen');
// MainScreen.statusScreen = StatusScreen(userinfojson);
// main_window.add(MainScreen.statusScreen);
//return main_window;
main_window.open();
MenuIcons.js
function MenuIcons(active_menu) {
var view = Titanium.UI.createView({
top : "12%",
height : "10%"
});
var iconstatus_imageview = Titanium.UI.createImageView({
left : '0%',
top : '0%',
image : 'medical.png',
height : '100%',
width : '13.8%'
});
iconstatus_imageview.addEventListener('click', function(e){
alert('clicked');
});
view.add(iconstatus_imageview);
return view;
}
module.exports = MenuIcons;
_createInput: function(){
var self = this;
var input = document.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('name', this._settings.name);
if(this._settings.multiple) input.setAttribute('multiple', 'multiple');
addStyles(input, {
'position' : 'absolute',
// in Opera only 'browse' button
// is clickable and it is located at
// the right side of the input
'right' : 0,
'margin' : 0,
'padding' : 0,
'fontSize' : '480px',
// in Firefox if font-family is set to
// 'inherit' the input doesn't work
'fontFamily' : 'sans-serif',
'cursor' : 'pointer'
});
var div = document.createElement("div")
div.className = 'tooltip';
div.id = 'ajaxupload-div';
div.title = 'Attach a picture';
addStyles(div, {
'display' : 'block',
'position' : 'absolute',
'overflow' : 'hidden',
'margin' : 0,
'padding' : 0,
'opacity' : 0,
// Make sure browse button is in the right side
// in Internet Explorer
'direction' : 'ltr',
//Max zIndex supported by Opera 9.0-9.2
'zIndex': 2147483583
});
// Make sure that element opacity exists.
// Otherwise use IE filter
if ( div.style.opacity !== "0") {
if (typeof(div.filters) == 'undefined'){
throw new Error('Opacity not supported by the browser');
}
div.style.filter = "alpha(opacity=0)";
}
addEvent(input, 'change', function(){
if ( ! input || input.value === ''){
return;
}
// Get filename from input, required
// as some browsers have path instead of it
var file = fileFromPath(input.value);
if (false === self._settings.onChange.call(self, file, getExt(file))){
self._clearInput();
return;
}
// Submit form when value is changed
if (self._settings.autoSubmit) {
self.submit();
}
});
addEvent(input, 'mouseover', function(){
addClass(self._button, self._settings.hoverClass);
});
addEvent(input, 'mouseout', function(){
removeClass(self._button, self._settings.hoverClass);
removeClass(self._button, self._settings.focusClass);
if (input.parentNode) {
// We use visibility instead of display to fix problem with Safari 4
// The problem is that the value of input doesn't change if it
// has display none when user selects a file
input.parentNode.style.visibility = 'hidden';
}
});
addEvent(input, 'focus', function(){
addClass(self._button, self._settings.focusClass);
});
addEvent(input, 'blur', function(){
removeClass(self._button, self._settings.focusClass);
});
div.appendChild(input);
document.body.appendChild(div);
this._input = input;
},
This JS starting at var div = document.createElement("div") produces this div tag:
<div style="display: block; position: absolute; overflow: hidden; margin: 0pt; padding: 0pt; opacity: 0; direction: ltr; z-index: 2147483583; left: 102px; top: 323.5px; width: 102px; height: 28px; visibility: hidden;">
I see where all the other attributes get changed, but how the heck can I change 'visibility: hidden;" ???
It's making me crazy please help.
Find the below section in your code i have star commented where you can modify:
addStyles(div, {
'display' : 'block', /*You cane set display none here to hide the div.*/
'position' : 'absolute',
'overflow' : 'hidden',
'margin' : 0,
'padding' : 0,
'opacity' : 0,
// Make sure browse button is in the right side
// in Internet Explorer
'direction' : 'ltr',
//Max zIndex supported by Opera 9.0-9.2
'zIndex': 2147483583,
'visibility':'hidden' /* If you don't set display none , you can set your style attribute you want to change like visibility here also */
});
Ok, to make it visible find the below code and try setting visibility there:
if (input.parentNode) {
// We use visibility instead of display to fix problem with Safari 4
// The problem is that the value of input doesn't change if it
// has display none when user selects a file
input.parentNode.style.visibility = 'hidden'; /* try setting visibility='visible' here */
}
If that doesn't work then check if any css is overriding the style property of the div by inspecting the div in your browser.
if jQuery is an option, I know there's the command $('#div').css('attribute','value');
visibility hidden is set when you "mouseout" off that input
addEvent(input, 'mouseout', function(){
removeClass(self._button, self._settings.hoverClass);
removeClass(self._button, self._settings.focusClass);
if (input.parentNode) {
// We use visibility instead of display to fix problem with Safari 4
// The problem is that the value of input doesn't change if it
// has display none when user selects a file
input.parentNode.style.visibility = 'hidden';
}
});
you can either remove that event binding or change the statement to input.parentNode.style.visibility = 'visible';