I'm creating a Chrome packaged app that has two pages [for now]. And by pages a mean actual .html files. One is called login.html and the another is index.html.
Now everything related to the user is stored in chrome.storage.local.
Here is the code for launching the pages in chrome.js.
chrome.app.runtime.onLaunched.addListener(function () {
var dimensions = getDimensions(screen),
positions = getPositions(screen);
chrome.storage.local.get('login', function (result) {
if(result.login.status === "loggedOut") {
chrome.app.window.create('login.html', {
id: 'loginWindow',
'bounds': {
'width': 400,
'height': 600
},
minWidth: 400,
minHeight: 600,
maxWidth: 400,
maxHeight: 600,
frame: 'none'
});
} else {
chrome.app.window.create('index.html', {
id: 'mainWindow',
'bounds': {
'top': positions.top,
'left': positions.left,
'width': dimensions.width,
'height': dimensions.height
},
minWidth: dimensions.width,
minHeight: dimensions.height,
maxWidth: dimensions.width,
maxHeight: dimensions.height,
frame: 'none'
});
}
});
});
Now because chrome.storage.local.get login.status === loggedOut it pops the login page with the login form. So how do I proceed when the user puts the correct credentials. How do I close the login window and then open the main. The code above is just to open the index.html next time and not showing the login again.
I have done the code to check the credentials and that works, but I want to now close the login form window and open a new index.html with the same bounds, max-, minwidths and heights as you can see in the code above.
Here is what I'm looking for: [this is now in login.js which is called inside login.html]
if(login === success) {
// close login window and goto mainWindow
} else {
// Username or password is wrong
}
Thanks in advance!
What you have to do to accomplish this is to add this tho check if changes happen inside the chrome.storage.local.
chrome.storage.onChanged.addListener(function(changes, namespace) {
chrome.storage.local.get('login', function (result) {
if (result.login.status === "loggedIn") {
chrome.app.window.get('loginWindow').close();
chrome.app.window.create('index.html', {
id: 'mainWindow',
'bounds': {
'top': positions.top,
'left': positions.left,
'width': dimensions.width,
'height': dimensions.height
},
minWidth: dimensions.width,
minHeight: dimensions.height,
maxWidth: dimensions.width,
maxHeight: dimensions.height,
frame: 'none'
});
}
});
});
Of course you could use those changes and namespaces but I chose to leave them out.
MiroRauhala has answered your direct question, but maybe you should rethink how your app is structured.
Chrome apps don't have navigation like a normal site does. They have windows, and each window corresponds to a different html page. Instead of closing one window and opening a new one up with the exact same bounds, you could just have different divs within the one document which you hide and show as necessary.
I think changing your structure will lead to a simpler app in the long run.
If you do go with the separate window approach you will need to be careful. For example, if you add an id to a window and specify bounds, the bounds are only applied the first time it is shown. Afterwards it remembers the bounds. You can get around that by creating it hidden, then moving it, then showing it. You might run into other things like this as you're using the chrome apps platform in a way it wasn't designed for.
Related
I have built a kiosk app for Chrome with app builder, but even if the key of doing a kiosk app is that it will be displayed at full screen, I don´t manage to get rid of the top bar (I have removed the homepage button etc. but can´t display it at total full screen). I`d like to know if there´s any commando for this in html or javascript and in which file it should be added.
In the backgroung.js file I´ve added the line "state: 'fullscreen' but it does not work (I've also added the permission for fullscreen in the manifest file):
var runApp = function() {
if (chrome.power) {
chrome.power.requestKeepAwake('display');
}
console.log(config);
chrome.app.window.create(
config ?
'exported_app_view.html' :
'designer_view.html',
{
id: 'KioskDesignerWindow',
width: 1100,
height: 720,
minWidth: 800,
minHeight: 600,
state: 'fullscreen'
},
function(win) {
if (!this.X) { return; }
var window = win.contentWindow;
window.onload = function() {
this.$addWindow(window);
var Y = this.X.subWindow(window, 'Kiosk Designer Window');
this.DOM.init(Y);
}.bind(this);
win.onClosed.addListener(function() {
this.$removeWindow(window);
}.bind(this));
}.bind(this));
}.bind(this);
Yes, you can do it with JavaScript. In background.js, your 3rd parameter to chrome.app.window.create is that callback function that has the win argument - add this line:
win.fullscreen();
https://developer.chrome.com/apps/app_window#type-AppWindow
If you hit escape while your app is running you may get the title bar back, but next time it runs it will go fullscreen again.
I've got quite an issue with positioning of colorbox. The methods described on official website http://www.jacklmoore.com/colorbox/ are not quite enough for my purpose. The thing is that I have button opening the colorbox and I need to position it "over the button" (button is 50px height, colorbox is something about 700px height so I need to center it over the button (something like 300px top of the button).
I have tried basic repositioning with jquery in onOpen and onLoad function in colorbox like:
onOpen:function() {
$('#colorbox').removeAttr('top');
$('#colorbox').css('top','200px');
},
It works but colorbox settings automatically overwrite those settings right after onOpen or onLoad and colorbox is positioned in center of the viewport again.
So I am basically calling for help, colorbox positioning settings like top, left etc. are simply not enough for positioning on top of the button element.
Thanks in advance!
Edit: full code below
$(".reserve_").live('click',function() {
var loadUrl = $(this).attr("href");
$.colorbox({
innerWidth:660,
innerHeight:720,
returnFocus: true,
overlayClose: true,
fixed: false,
iframe: true,
href: loadUrl,
opacity: 0.6,
reposition: true,
onOpen:function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onLoad: function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onClosed:function() {
}
});
return false;
});
EDIT 2: link on jsfiddle: http://jsfiddle.net/zS8J8/8/ (sorry about the messy code in CSS and HTML)
The jsfiddle was helpful, I was able to use the same code as you and get it working.
This was tested in firefox 20, chrome 26, IE 9 on Win 7. The "Open Colorbox" link isn't visible in IE using your HTML, but if you move your mouse in that area, you'll see the cursor change and if you click, Colorbox will open in the correct location.
Here's the HTML, I changed class="rezervuj" to id="rezervuj" because we're keying on a single element rather than a bunch of images:
<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3>
<div class="unitKontejner">
<div style="float:right;">
<a id="rezervuj" href="http://www.imgur.com">
<div class="reserveIt">
<div class="reserveIt-content">
open colorbox »
</div>
</div>
</a>
</div>
</div>
Here's the script that you can put in the head:
<script>
$(document).ready(function(){
// I removed the options that were set to the default.
// The top and left can be left out or set to a default,
// I used them as a test to see the difference when the event hook is used.
$("#rezervuj").colorbox({
iframe:true,
innerWidth:660,
innerHeight:720,
opacity: 0.6,
top: 0,
left: 0
});
// Use the "cbox_complete" event hook.
// It allows the colorbox div to be positioned after it opens,
// but before the content is loaded.
$(document).bind('cbox_complete', function(){
// Grab the position of the button,
// colorbox can be positioned relative to it.
var pos = $(rezervuj).position();
//console.log(pos);
// Set the position of the colorbox div
// You can add to or subtract from the pos values
// Example: top: (pos.top + 20) + "px"
$("#colorbox").css({
position: "absolute",
top: pos.top + "px",
left: pos.left + "px"
}).show();
});
});
</script>
you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});
I have this code for a JQuery a dialog for a div containing a gridview that loads with a lists of tasks. The dialog fits to the contents OK, but if hundreds of tasks are loaded the dialog gets too big and can't be resized by hand, so I needed to code a way for it to open with a manageable size.
Before anyone suggests it, I tried setting the max-height property on my div to 500px and that worked fine except the div wouldn't fill the whole dialog if the dialog got higher than 500px, which we want it to. I also tried setting the maxHeight property on the dialog directly but that only takes effect when you resize the dialog by hand, not when the dialog opens. And when the dialog opens bigger than the screen that can't be done.
So instead I wrote this code which declares the dialog, then if more than 20 tasks are loaded the dialog is supposed to be resized to 500px high. That way the div inside fills the dialog completely at all times and the dialog size stays managable.
function ShowReferedTasks(title, s, taskCount) {
//On crée le dialog à partir de la même div
$('#litReferedTasks').dialog({
autoOpen: true,
modal: true,
resizable: true,
show: 'drop',
hide: 'drop',
width: 800,
minHeight: 0,
title: 'Tâche' + s + ' référée' + s + ' de ' + title
});
//if more than 20 refered tasks are found
if (taskCount > 20) {
$('#litReferedTasks').dialog('option', 'height', 500);
$('#litReferedTasks').dialog('option', 'position', 'center');
}
}
This code is called from a button in each line of a parent gridview, loading each line's tasks.
Here is what happens when I refresh my page and flush the cache (ctrl+F5), then open some task lists.
If I open one list of tasks containing more than 20 tasks (a dialog that will need to be refreshed), it works fine.
If I open any list of tasks, even one with less than 20 tasks that doesn't need resizing, then close it, and open one with more than 20 tasks, the dialog opens and the gridview is filled perfectly but the resizing doesn't work, the dialog is too big to fit on the screen, and can't be resized by hand.
Basically the resize part of my code only works on the first dialog I open after refreshing my page and flushing the cache. I think something must be kept in memory after the first time a dialog is opened, but I'm a newbie with JQuery and JS in general and I can't find the answer.
<div id="litReferedTasks" style="background-color: White; display: none; overflow:auto; height:95%;">
<asp:GridView ID="gvReferedTasks" runat="server" OnRowDataBound="gvReferedTasks_RowDataBound" Width="97.5%" Visible="false">
</asp:GridView>
<asp:Label ID="lblNoReferedTasks" runat="server" Visible="false" Width="100%"></asp:Label>
</div>
Any help?
Okay, so if you set the option after the dialog has been opened, height may not have an effect, but if you put height into the initial dialog creation code, it should have a set height just fine:
function ShowReferedTasks(title, s, taskCount) {
var dialogOptions = {
autoOpen: true,
modal: true,
resizable: true,
show: 'drop',
hide: 'drop',
width: 800,
minHeight: 0,
title: 'Tâche' + s + ' référée' + s + ' de ' + title
};
//if more than 20 refered tasks are found
if (taskCount > 20) {
dialogOptions.height = 500
}
//On crée le dialog à partir de la même div
$('#litReferedTasks').dialog(dialogOptions);
}
I think you are over-complicating the .dialog function. The easiest thing to do is create the dialog once with autoOpen set to false, rather than trying to re-initialize it every time. I think you'd have better luck with something like this:
// Do this once when the document is ready
$(function() {
$('#litReferedTasks').dialog({
autoOpen: false,
modal: true,
resizable: true,
show: 'drop',
hide: 'drop',
width: 800,
minHeight: 0
});
});
function ShowReferedTasks(title, s, taskCount) {
$('#litReferedTasks').dialog('option', 'title', 'Tâche' + s + ' référée' + s + ' de ' + title);
if (taskCount > 20) {
$('#litReferedTasks').dialog('option', {
height: 500,
position: 'center'
});
}
$('#litReferedTasks').dialog('open');
}
I am using a bookmarklet which can (obviously) be called by the user anywhere:
javascript:(function(){window.open('http://*****.com/***.html?url=
'+encodeURIComponent(window.location.href),'my_page_name',
'left=200,top=200,width=480,height=500,personalbar=0,
toolbar=0,scrollbars=1,resizable=1')})()
How can I make this like a modal window, meaning no ugly browser window borders - should I use jquery or something like in the bookmarklet URL and if so, how?
You could use the approach Firebug Lite uses.
Basically you insert an external JS file into your page when you click on the bookmark.
My bookmark
Just change BASE_URL, PATH_TO_JS and PATH_TO_ICON to what you need it to be.
Also, don't forget the "http://" in the BASE_URL, unless you want to use a relative path.
Your external JS file could contain a script which adds an element to the page which hovers over others. I recommend using the CSS in Twitter Bootstrap to figure out how to make a reliable modal window.
Edit --
To help you out I wrote a small demo. It consists of 2 files:
bookmark.html - adapted firebug code to create bookmark which adds script dynamically
bookmark.js - creates a modal with an iframe
bookmark.html
Bookmark
bookmark.js
(function() {
var script;
if(!window.jQuery) {
script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js";
document.body.appendChild(script);
}
(function check_if_loaded() {
if(!window.jQuery) {
setTimeout(check_if_loaded, 50);
} else {
(function($) {
var
$dark_bg = $('<div></div>').css({'z-index': '1000', 'background-color': '#000000', 'opacity': '0', 'position': 'absolute', 'width': '100%', 'height': '100%'}),
$iframe = $('<iframe></iframe>').css({'width': '100%', 'height': '100%', 'border': 1, 'overflow': 'hidden'}).prop({'src': 'http://bijtel.com/cv/', 'width': '100%', 'height': '100%', 'scrolling': 'no'}),
$close = $('<div></div>').css({'position': 'absolute', 'top': 0, 'right': 0, 'padding': '5px 10px', 'cursor': 'pointer', 'color': '#ffffff', 'font-size': '10pt', 'font-family': 'verdana'}).html('close ×');
$modal = $('<div></div>').css({'z-index': '1010', 'background-color': '#ffffff', 'opacity': '0', 'position': 'absolute', 'top': '10%', 'left': '10%', 'width': '80%', 'height': '80%', 'box-shadow': '7px 7px 5px #333'}).append($close, $iframe);
$('body').css({'padding': 0, 'margin': 0}).prepend($dark_bg, $modal);
$dark_bg.animate({'opacity':0.5}, 400);
$modal.animate({'opacity':1}, 400);
$close.on('click', function() {
$dark_bg.animate({'opacity': 0}, 400, function(){ $dark_bg.remove(); });
$modal.animate({'opacity': 0}, 400, function(){ $modal.remove(); });
});
}(window.jQuery));
}
}());
}());
Demo at: http://bijtel.com/stackoverflow/bookmark/
I don't know much about the subject, but looking at the delicious.com bookmarklet I noticed some parameters to limit which parts of the browser window will be shown:
(function() {
f = 'http://www.delicious.com/save?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title) + '&v=5&';
a = function() {
if (!window.open(f + 'noui=1&jump=doclose', 'deliciousuiv5', 'location=yes,links=no,scrollbars=no,toolbar=no,width=550,height=550')) location.href = f + 'jump=yes'
};
if (/Firefox/.test(navigator.userAgent)) {
setTimeout(a, 0)
} else {
a()
}
})()
The parameters I'm talking about are the location, links, scrollbars and toolbar. That does not make it modal, though, and I doubt there is a feature for that (I'm assuming browser windows are independent of each other). But they provide a "cleaner" window nonetheless...
Update: check out this link. Basically, what the bookmarklet does is to create a new script tag and append it to the body. I'm assuming you could do anything you want in that script, including create a jQuery dialog the way you wanted (in fact, this bookmarklet does use jQuery, but it's embedded in the script itself; see the source).
Here's the code. I wouldn't use this bookmarklet myself (since I'd have to provide my username/password in the clear), but it's a starting point for you to do yours:
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('src', 'http://t.rc.vc/delicious/js/delicious.js?username=***&password=***');
e.setAttribute('id', 'delicious_submitter');
document.body.appendChild(e);
void(0);
Obs.: in both examples, I stripped the javascript: part and formatted the code for readability.
I saw this technique at the bottom of a web page where the TAB stays in place at the bottom of the page and can be opened and closed to display more info. I assume it can be rotated to display a different special for different days. Can you point me to anything like it or explain the technique ? thanks. Here is a sample: http://www.tmdhosting.com/ look at the bottom of the page .
position: fixed is how you manage to keep something at the bottom or top of the page, regardless of scrolling.
This is easily discoverable using firebug's (http://getfirebug.com/) inspect element feature
You can check out my version of this at uxspoke.com
I wrote a jQuery plugin to do it, and calling it is straightforward:
$('#about').pulloutPanel({open:true}).
click(function() { $(this).trigger('toggle'); }) });
I basically instrument the panel to support "open", "close" events, and the implement the appropriate animations around them. The only "hard" part is getting the height right. It also supports "toggle" so you can add a generic click handler to it to open or close it. Finally, it uses opened/closed classes to keep track of its current state. That's it!
The code's pretty coupled to the technologies on the page (Csster) and the design it is in, so I'm not sure it will work for you. You can either use Csster, or just put the CSS rules into your stylesheet and remove them from the code. The important Css attributes are the positioning and bottom.
Here it is:
$.fn.pulloutPanel = function(options) {
var settings = $.extend({}, {
attachTo: 'bottom',
css: {
left: 0,
minHeight: 390,
border: '1px 1px 1px 0 solid #666',
has: [roundedCorners('tr', 10),boxShadow([0,0], 10, phaseToColor('requirements').saturate(-30).darken(50))],
cursor: 'pointer'
}, options);
return $(this).each(function() {
var $this = $(this);
$this.addClass('pullout_panel');
$this.bind('open', function(event) {
$this.animate({bottom: 0}, 'slow', 'easeOutBounce', function() {
$this.removeClass('closed').addClass('opened');
$this.trigger('opened');
});
});
$this.bind('close', function(event) {
var height = $this.innerHeight();
$this.animate({bottom: -height + 50}, 'slow', 'easeOutBounce', function() {
$this.addClass('closed').removeClass('opened');
$this.trigger('closed');
});
});
$this.bind('toggle', function(event) {
$this.trigger($this.hasClass('opened') ? 'close' : 'open');
});
once(function() {
Csster.style({
'.pullout_panel': {
position: 'fixed',
bottom: 0,
has: [settings.css]
}
});
});
$this.trigger(settings.open ? 'open' : 'close');
});
};