I am trying to implement an Activity Indicator for our App. The code I am running is as follows :
var indicatorWindow = Ti.UI.createWindow({
opacity : 1,
backgroundColor : 'transparent'
});
var activityIndicator = Ti.UI.createActivityIndicator({
message: 'Loading...'
});
indicatorWindow.add(activityIndicator);
indicatorWindow.addEventListener('indicatorShow', function(e) {
indicatorWindow.open();
activityIndicator.show();
});
indicatorWindow.addEventListener('indicatorHide', function(e) {
activityIndicator.hide();
indicatorWindow.close();
});
And then I am calling the following events from another page :
IndicatorWindow.fireEvent('indicatorShow');
Some task here...
IndicatorWindow.fireEvent('indicatorHide');
The Activity windows opens up with a Black background instead of a transparent one (see screenshot below). The same code works on Android, iOS and Web though. Any thoughts?
Related
I wrote in some Javascript to make the website "dark mode" the issue is that the site has multiple pages and I used a very basic logic to toggle "dark-theme" and when I execute the function "on-click" and then leave the current page it reverts back to the "light-theme" unless I click on the toggle again. Does anyone have a better solution for this so that "dark-theme" will remain active on all pages till otherwise specified by clicking on toggle? I posted my code below.
var icon= document.getElementById("icon");
icon.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "images/sun.png";
left1.src= "images/left-white.png";
left2.src= "images/left-white.png";
left3.src= "images/left-white.png";
right1.src= "images/right-white.png";
right2.src= "images/right-white.png";
right3.src= "images/right-white.png";
scroll_up.src= "images/scroll-dark.png";
}else{
icon.src = "images/moon.png";
left1.src= "images/left.png";
left2.src= "images/left.png";
left3.src= "images/left.png";
right1.src= "images/right.png";
right2.src= "images/right.png";
right3.src= "images/right.png";
scroll_up.src= "images/scroll-light.png";
}
};
const scrollBtn = document.getElementById("scroll_up")
scrollBtn.addEventListener("click", () => {
document.documentElement.scrollTop= 0;
});
I'm trying to use https://github.com/mapsplugin/cordova-plugin-googlemaps in framework7 project
but I'm facing a problem
as i navigate to the map page The image is loaded but wasn't displayed
I think the issue is z-index
I tried that solution
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2028
but doesn't work
this is the page before map page
the red div is the place where image should display
after functions run i see that instead of map
I use this code to navigate to the map page
success: function (response) {
var responseObj = JSON.parse(response)
console.log(responseObj);
this.$root.navigate("/theMapPage/")
}
I found the solution
as I posted in comment that the plugin make the map behind the application
so I hide all pages and show the current page only
map.one(plugin.google.maps.event.MAP_READY, function () {
$$('.page').hide()
$$('.page.page-current').show()
map.clear();
map.getMyLocation(onSuccess, onError);
});
at end just show all pages again
pageAfterOut: function () {
// page has left the view
$$('.page').show()
}
I am new to Firefox Addon SDK, high level API.
What I wanted to do it, if a user click the icon on the toolbar, a new tab is opened, and run the script defined in contentscriptfile.
I use the script below:
var self = require("sdk/self");
var tabs = require("sdk/tabs");
var buttons = require('sdk/ui/button/action');
var button = buttons.ActionButton({
id: "mm-link",
label: "Visit mm",
icon: {
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
tabs.open("about:blank");
tabs.on('ready', function (tab) {
tab.attach({
contentScriptFile: self.data.url("home.js"),
contentScriptOptions: {"aaa" : "1111", "bob" : "222"}
});
});
}
But it doesn't work as expected, and has the following problems:
The script runs repeatedly. (I wanted it run only once on each new tab)
Even if I click the "+" icon to create a new tab, the script will
run. (I wanted it only run when clicking the icon I created on the toolbar)
I have also tried to change 'ready' to 'activiate', the repeated running problem is gone, but every time I create the tab, the script will run.
Many thanks to any help.
The issue is that you're listening to the ready event of any and all tabs, rather than the one you just opened. One option is to do something like this:
function handleClick(state) {
tabs.open({
url: "about:blank",
onOpen: function onOpen(tab) {
tab.attach({
contentScriptFile: self.data.url("home.js"),
contentScriptOptions: {"aaa" : "1111", "bob" : "222"}
});
}
});
}
And attach the script using the onOpen handler. For more info the docs are here: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#open%28options%29
i have a chrome extension which automatically open a window using
window.open();
when user open some specific websites.
what i want is the new window which i open from the background script through window.open() should be displayed behind the current webiste opened by the user.
i have tried window.open properties like alwaysLowered=1, z-lock=1 etc. but not working.
Also tried.....
var w = window.open('url');
if(w){
w.blur();
window.focus();
}
all these have no effect on chrome. can anybody help?
If you don't need the handle to the opened window (returned by window.open), you can use the chrome.windows API's methods create and update:
In background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({ url: "http://www.google.com/" }, function(win) {
chrome.windows.update(win.id, { focused: false });
});
});
Theoretically, passing the focused: false property in the createInfo argument should achieve the same result in one step, but it is not working for me with Chrome version 31.0.1650.57 on Windows.
UPDATE:
The above code seems to not "blur" the window on Macs. To overcome this (while determining the position and size of the new window - as per OP's comment) use the following code:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({
url: "http://www.google.com/",
width: 430,
height: 150,
top: top_popup,
left: left_popup
}, function(win) {
chrome.windows.update(tab.windowId, { focused: true });
});
});
chrome.windows.getCurrent(function(winCurrent){
chrome.windows.create({url:url, function(win){
chrome.windows.update(winCurrent.id, {focused: true});
});
});
Try this, its fast so viewer doesn't feel much
Here is my code:
$(document).ready(function(){
$(function(){
$('#post_status').iButton({
duration: 200
, easing: "swing"
, labelOn: "Active"
, labelOff: "Hidden"
, resizeHandle: "auto"
, resizeContainer: "auto"
});
});
$('a.copy').each(function(){
var $this = $(this);
$this.zclip({
path : 'path/to/ZeroClipboard.swf',
copy : function(){
var copyText = $(this).prev().val();
return copyText;
}
});
});
});
zClip attach flash objects to elements correctly, but when I click, texts are not copied to clipboard.
If I comment iButton's section, zClip will work fine.
Anyone experienced this issue?
P.S. Works fine on Firefox, but not Chrome
P.S.2 Sorry, for my bad English.
Sample Code : http://jsfiddle.net/nHSbc/
Please find out why if you comment the if line, everything works fine. just in chrome and firefox it has a problem, not in IE. It seems copy function is empty when you click a button.
It might be a miss-configuration problem in using zclip plugin.
Line 63 - 67, File : jquery.zclip.js
//if(!$.isFunction(settings.copy)){
clip.setText(settings.copy);
//} else {
// clip.setText(o.triggerHandler('zClip_copy'));
//}
Cheers