So the webview should open when i click the "facebook button" which is a image but acts as a button.
Is there a better way to do this, becasue this is not working.
It seemed easy enough with the code though..
var fbbutton = Ti.UI.createImageView({
image:"fb.png",
top:"55%",
zIndex:"1",
height:"15%",
width:"20%",
left:"2%"
});
fbbutton.addEventListener("click" , function(e){
var webview = Titanium.UI.createWebView({url:'http://www.facebook.com'});
var window = Titanium.UI.createWindow();
window.add(webview);
window.open();
});
Try giving the window an explicit open:
fbbutton.addEventListener("click" , function(e){
var webview = Titanium.UI.createWebView({url:'http://www.facebook.com'});
var window = Titanium.UI.createWindow();
window.add(webview);
window.open({modal:true}); // Make modal
});
Related
I have a slider that fades images.
The transition works, the new image fades it, but the previous image doesn't fade out.
The previous image simply disappears after the next image has fully faded in.
For opaque images this of course is perfectly fine as we don't need to the previous image fade out. It's simply overlaid by the new image.
The problem is that my images have transparent regions, so it would be necessary that the previous image fades out.
How could I achieve this?
My current code is this:
jssor_1_slider_init = function() {
var jssor_1_SlideshowTransitions = [
{$Duration:800,$Opacity:2}
];
var jssor_1_options = {
$AutoPlay: 1,
$LazyLoading: 1,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 256;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
Given image with transparent area, to make jssor slider with slideshow, you can use twins transitions.
Open options window, choose one or more twins slideshow transitions.
Followed by documentation and examples on this page
I think you need this {$Duration:700,$Opacity:2,$Brother:{$Duration:700,$Opacity:2}}
Example : Fade Twins
I use this code to show my popup automatically and I want to know how to close it automatically after 5 seconds.
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
Modifying an example from Mozilla's developer page on WindowTimers.setTimeout(), call this function from within your existing document.ready function:
delayedAlertClose();
Add these functions outside your document.ready function:
function delayedAlertClose() {
timeoutID = window.setTimeout(popupClose, 5000);
}
function popupClose() {
$('#mask').hide();
$('.window').hide();
}
I am new to Titanium.
I have taken 3 view and want to hide show that view on button click for iPhone app.
Any idea how to achieve this?
You can hide / show a view very easily, heres a self contained example:
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({
width : 100,
height : 100,
backgroundColor : 'red'
});
var redView = Ti.UI.createView({
title : 'Hide / Show Red View',
bottom : 0,
width : 200,
height : 35
});
var visible = true;
button.addEventListener('click', function(e) {
if(visible) {
redView.hide();
} else {
redView.show();
}
visible = !visible;
});
win.add(redView);
win.add(button);
win.open();
While the other answer is certainly useful, two other (slightly) different methods for doing the same thing, just in case Titanium flips out when you use show() and hide().
//Method 1, using part of Josiah Hester's code snippet
var visible = true;
button.addEventListener('click', function(e) {
if(visible) {
redView.setVisible(false); //This is the exact same thing as hide() method
} else {
redView.setVisible(true); //This is the exact same thing as show() method
}
visible = !visible;
});
You can set opacity to 0 and even if the view's visible property is set to true, it will still be invisible, due to a completely nonexistent level of opacity. This is useful if you want something to be visible, but not clickable (by placing a view behind a view with an opacity of zero.
//Method 2, same code section
var opacity = 0;
button.addEventListener('click', function(e) {
if(opacity) {
redView.setOpacity(0); //This is the NOT the same thing as hide() method
} else {
redView.setOpacity(1); //This is the NOT thesame thing as show() method
}
opacity = Math.abs(opacity - 1);
});
I'm a newbie in appcelerator.titanium. I started development from today onwards.
My problem is,
I want to display a page curl transition effect when a button is tapped on one of my view.
I used the following code for doing this. But the application is crashed. I searched a lot in SO and titanium documentation. But couldn't find a solution.
//This function returns a window
function ApplicationWindow()
{
//load component dependencies
var FirstView = require('ui/common/FirstView');
//create component instance
var self = Ti.UI.createWindow({
backgroundColor:'#ffffff'
});
//construct UI
var firstView = new FirstView();
self.add(firstView);
//Adding button for displaying view 2
var button1 = Ti.UI.createButton({
height : '50',
width : '50%',
top : '70%',
title : 'Add Child'
});
//Adding event listner for button
button1.addEventListener('click',function(e){
var view = createView();
win.add(view);
});
self.add(button1);
//creating second view
function createView()
{
var view = Ti.UI.createView({
backgroundColor : '#aabbcc'
});
//creating button for view 2
var button2 = Ti.UI.createButton({
height : '50',
width : '50%',
top : '70%',
title : 'Show Curl'
});
//Adding event listner for button
button2.addEventListener('click',function(e)
{
//creating animation
var animation = Titanium.UI.createAnimation({
transition : Ti.UI.iPhone.AnimationStyle.CURL_UP
});
animation.backgroundColor = 'black';
animation.duration = 1000;
var animationHandler = function() {
animation.removeEventListener('complete',animationHandler);
animation.backgroundColor = 'orange';
view.animate(animation);
};
animation.delay = 5000
animation.addEventListener('complete',animationHandler);
view.animate(animation);
});
view.add(button2);
return view;
}
return self;
}
//creating window and opening
var win = ApplicationWindow();
win.open();
Thanks in advance
Use this module instead: http://support.appcelerator.com/kb/119/tickets
It's all done for you..
I have a concern that the image I attributed back button does not appear I added this statement but it does nothing
win1.setBackButtonTitleImage('back.png');
here is the code
var ButtonRetour = Ti.UI.createButtonBar({labels:['Retour'],
backgroundColor:'#ae4041',
backgroundImage:'back.png',
color:'#ffffff' });
ButtonRetour.addEventListener('click',
function(){ tabGroup.close(); });
win1.leftNavButton = ButtonRetour;
win1.setBackButtonTitleImage('back.png');
you have an idea about the problem
thank you
I found the solution
I actually changed the code for the creation of back button using the following
var backButton = Ti.UI.createButton({
title:'Accueil',
backgroundImage:'images/back.png',
font:{fontSize:13,fontWeight:'bold'},
textAlign:'center',
width:75,
height: 35
});
backButton.addEventListener('click', function(){
tabGroup.close();
});
win1.leftNavButton = backButton;
Try that. Note, that I am not sure whether you can use both backgroundColor and backgroundImage:
var ButtonRetour = Titanium.UI.createButton({
title:'Retour',
backgroundColor: '#ae4041', // i am not sure whether you can use both bgColor and bgImage
backgroundImage:'back.png',
width:100, //set proper width here
height:20 //set proper height here
});
ButtonRetour.addEventListener('click', function() {
tabGroup.close();
});
win1.leftNavButton = ButtonRetour;