I'm using titanium studio to package an app we are currently working on, and one of the pages is a webview to a mobile version of our site. This all works and looks great, but when the user navigates to a new url, going backwards is impossible. I've tried several methods to set up a back button/ navigation group to solve this problem, but nothing seems to work. What would be the best way to either to load the next page into the nav group, or trigger a back button to appear upon a new page being loaded?
So far I have tried:
Creating a navigation group and firing an event upon opening a new
window to add it as a child.
Creating a button and removing/adding it depending on canGoBack()
Having a constant button exist that only fires if goBack() is
defined
var btnBack = Titanium.UI.createButton({
title : '< ',
top : 0,
left : 0,
height : '10%',
});
var btnFwd = Titanium.UI.createButton({
title : ' >',
top : 0,
right : 0,
height : '10%',
});
var webView = Titanium.UI.createWebView({
url : 'http://gooogle.com',
canGoBack : true,
canGoForward : true,
top : '10%',
height : '90%',
});
btnBack.addEventListener('click', function() {
webView.goBack();
});
btnFwd.addEventListener('click', function() {
webView.goForward();
});
var win1 = Titanium.UI.createWindow({
backgroundColor:'#fff',
});
win1.add(btnBack);
win1.add(btnFwd);
win1.add(webView);
win1.open();
Does this solve your issue? if this doesn't, please clarify what do you need to do??
Related
I want to display a model box(fancy box) and when user clicks on close button or ESC key a new popup window should be displayed. I figured out onclosed trigger can be used but not able to implement it. (I'm beginner in coding)
$.fancybox.showLoading(); // show loading
setTimeout(function(){ // then show popup, deley in .5 second
$.fancybox({'onClosed' : function() { window.open("https://www.google.com"); }});
}, 500); // .5 second
}, seconds_pop);
}
According to the documentation on fancybox3, you should implement it with:
afterClose: function(){
window.open("https://www.google.com");
}
You can see reference here: fancybox options
look up this line afterClose: $.noop, // After instance has been closed
Here is my codePen example
.
Remember to allow popup window on the top right corner after you close the imagebox.
Seems like you are using v2, but you can freely upgrade to v3 and use something like this:
$('[data-fancybox="gallery"]').fancybox({
beforeClose: function(instance, current) {
current.opts.animationEffect = false;
$.fancybox.open({
type : 'html',
src : '<div>Hello!</div>',
animationEffect : false,
beforeClose : function(instance, current) {
current.opts.animationEffect = "fade";
}
});
}
});
https://codepen.io/anon/pen/NLVqPK?editors=1010
You can choose to use beforeClose or afterClose callback and to switch animation effects for seamless content change or not.
I found a pagination plugin for Materializescss UI, Github link, which is working great, additionally, I want to extend this plugin to set the currPage value, and it should be highlighted(active)
For example
Here I have 2 type of paginations, First page, last page everything is working fine. Just assume I am reloading the page and I am in currently 4th page, once page get reloaded I lost the current page, I know currently there is no option to set the current page, Just I want to achieve it with static variable
var CurrPage = 4;
$('#pagination-long').materializePagination({
align: 'center',
lastPage: 10,
firstPage: 1,
currentPage:CurrPage,
useUrlParameter: false,
onClickCallback: function(requestedPage) {
console.log('Requested page from #pagination-long: ' + requestedPage);
}
});
Codepen workout
Why don't you use the urlParameter provided by the plugin?
$('#pagination-long').materializePagination({
align: 'center',
lastPage: 10,
firstPage: 1,
urlParameter: 'page',
useUrlParameter: true,
onClickCallback: function(requestedPage) {
console.log('Requested page from #pagination-long: ' + requestedPage);
}
});
You can play with it here https://codepen.io/alojzije/pen/PEqQBx?page=4
However, to actually have the page parameter changing, you'll need to open the pen in DEBUG mode because only then the rendered code is not in an iframe DEBUG link
Hello i was just wondering how i would go about making the following header with navigation buttons in Titanium Studio(javascript).
The other method i have been using is a tab menu with the bottom tabs visibility set to false.
So turns out i cant post images, so i will link to an older thread that uses titanium ALLOY.
How to create a header bar with buttons in Titanium JS?
Thanks for any help
As long as your Window is inside a TabGroup or NavigationWindow, you can easily add buttons to its navigation bar. First create each button object, then assign the buttons to the Window (not NavigationWindow or TabGroup) leftNavButton and rightNavButton properties, like so:
var groupsButton = Ti.UI.createButton({
title: "Groups"
});
var addButton = Ti.UI.createButton({
systemButton: Ti.UI.iPhone.SystemButton.ADD
});
var win = Ti.UI.createWindow({
title: "Contacts",
backgroundColor: "#ffffff",
leftNavButton: groupsButton,
rightNavButton: addButton
});
var navWin = Ti.UI.iOS.createNavigationWindow({
window: win
});
navWin.open();
I'm experiencing an issue with Ext.net TabPanel. When the page with tab panel is opened first time after the app was rebuilt it throws Uncaught TypeError: Object [object Object] has no method 'getComponent'. The problem happens each time the application is rebuilt and then disappears after page refresh. Here's JS code I use to create a tab:
#X.XScript().ScriptBlock(#"
<script>
var addMainTab = function (tabPanel, id, url, title) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : title,
closable : true,
loader : {
url : url,
renderer : 'frame',
loadMask : {
showMask : true,
msg : 'Loading ' + url + '...'
}
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
");
It's called on menu item click:
menuItem.Listeners.Click.Handler = "addMainTab(#{MainTabPanel}, 'someId', 'someurl', 'Tab title')";
As I figured out some functions (getComponent, addTab and others) are not included into the definition of TabPanel at first load of the page after rebuild. Does anyone have any idea why it may happen and how it can be fixed? I'd appreciate any help.
Don't use #{control} name in Razor code. Use App.ControlNameHere to reference the object in question. #{control} is only used in webforms.
Does the ExtJS framework files get loaded before this code is executed?
take a look at this question ,which I mentioned how I add tab panel to the main page.
I'm having a hard time describing exactly what the problem is.. but the link in question is: http://www.evolutionarycollective.com/events/
You'll notice that when you load the "Calendar" tab, the calendar doesn't show up. If you resize the window, or manipulate the page in some other way, then the calendar appears. The calendar loads fine when it's not within a tab. It's being called in the header with:
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
events: themeforce.events
});
});
</script>
EDIT:
I believe this is the section of the script library that handles the tabs and panes.. (I'm using this with a wordpress theme that calls the tabs via a shortcode)
// jQuery tool's tab creator is not shortcode friendly, transfer the titles to the correct tabs area
jQuery('.bfi_pane').each(function(i) {
var title = jQuery(this).attr('title');
jQuery(jQuery(this).siblings('.bfi_tabs,.bfi_tabs_slide,.bfi_tabs_fade')[0]).append('<div>'+title+'</div>');
});
// Custom slide effect for tabs. slide up then down
jQuery.tools.tabs.addEffect('slide-slide',function(i, done) {
this.getPanes().slideUp(400).eq(i).delay(400).slideDown(400, done);
});
// Custom slide effect for tabs. slide up and down simultaneously
jQuery.tools.tabs.addEffect("slide", function(i, done) {
this.getPanes().slideUp(400).eq(i).slideDown(400, done);
});
// IMPORTANT: SLIDEDOWN JQUERY FIX. we need to assign the correct heights
// so that the slidedown effect doesn't JUMP
jQuery(".bfi_accordion_pane").each(function(i) {
var heightTo = jQuery(this).height();
var paddingTop = parseInt(jQuery(this).css("padding-top").replace('px', ''));
var paddingBottom = parseInt(jQuery(this).css("padding-bottom").replace('px', ''));
var marginTop = parseInt(jQuery(this).css("margin-top").replace('px', ''));
var marginBottom = parseInt(jQuery(this).css("margin-bottom").replace('px', ''));
jQuery(this).css("height", heightTo + paddingTop + paddingBottom + marginTop + marginBottom);
});
// start jQuery tool tabs. we have to do this the long way so we can make
// initialIndex work properly
jQuery(".bfi_tabs_slide").each(function(i) {
var openTab = jQuery(this).attr('rel');
jQuery(this).tabs('> div.bfi_pane', {effect: 'slide-slide', initialIndex: parseInt(openTab, 10)});
});
jQuery(".bfi_tabs_fade").each(function(i) {
var openTab = jQuery(this).attr('rel');
jQuery(this).tabs('> div.bfi_pane', {effect: 'fade', initialIndex: parseInt(openTab, 10)});
});
Is there some way I can somehow refresh the script when that tab lis loaded.. or fire off another document.ready?
Thank you!
The probable explanation is that the full calendar can't figure out its height because when initially created that tab is hidden, which will make it have zero width and height.
Just make the call to .fullCalendar() in a tab switch event handler.
Alternatively use the "off-left" method of hiding tabs, as described in the last few paragraphs of http://jqueryui.com/demos/tabs/