We Keep Coding

node-webkit - moving second window to a second or specific screen

This post provided answer to move a main window to second screen. If an app has two windows. How do I move second window to second screen or a specific screen? Any help will be greatly appreciated. Thanks.

Found solution here https://github.com/RSATom/WebChimera/issues/105. Code for second window
var gui = require('nw.gui');
gui.Screen.Init();
win = gui.Window.get();
if (win.x < gui.Screen.screens[gui.Screen.screens.length -1].work_area.x) win.x = gui.Screen.screens[gui.Screen.screens.length -1].work_area.x + win.x;
var screenCB = {
onDisplayAdded : function(screen) {
win = gui.Window.get();
if (win.x < screen.work_area.x) win.x = screen.work_area.x + win.x;
}
};
gui.Screen.on('displayAdded', screenCB.onDisplayAdded);

How to access content of a tab from firefox addon

In my addon I find the tab I want to operate and then try to access the elements of it.
Currently I am finding the tab I need by
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
if ((w.title && w.title.indexOf(parameters['title_identifier']) != -1) ||
(w.document && w.document.title.indexOf(parameters['title_identifier']) != -1))
{
var doc = w.document;
var temp2 = doc.getElementById("myframe");
foundW = temp2.contentWindow;
}
}
temp2 is null though the tab does have an iframe with id myframe.
I get the object doc as an XUL object but doc.getElementById("myframe") is null. Currently I have an html file opened in the desired tab with the desired iframe residing inside the html page loaded in the main tab. I am able to identify the tab properly but couldn't return the iframe window. How do I do it?
I tried looking at the documentation for browsing between the tabs but couldn't find right answer in https://developer.mozilla.org/en/docs/Working_with_windows_in_chrome_code
Node I am working on https://github.com/sebuilder/se-builder/blob/master/seleniumbuilder/components/command_processor.js#L10103 and want to replace
foundW = w;
with
foundW = w.document.getElementById("myframe").contentWindow
as unlike the open source project where he wants to return the tab window I want to return the iframe window present inside the tab he returns.

You aren't actually going through all tabs, you are just going through the FIREFOX windows (called CHROME windows) (not the browser and its window inside each tab).
In your code. var doc = w.document is the CHROME document of the FIREFOX window (not the browser inside the tab). So w.title of the FIREFOX window will be the title of the currently selected tab (probably followed by ' - Mozilla Fireox' can you verify this for me? im guessing here)
temp2 is null because your frame is in the BROWSER IN TAB window which is the HTML document. So if your tab is currently selected you would get it like this w.gBrowser.selectedTab.linkedBrowser.contentwindow this will be the html window. w.selectedTab is the actual tab element that you click at top, it has a property called linkedBrowser which holds the "HTML" browser which is inside this tab. (i put html
so to fix your code below:
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
if ((w.title && w.title.indexOf(parameters['title_identifier']) != -1) ||
(w.document && w.document.title.indexOf(parameters['title_identifier']) != -1))
{
var doc = w.gBrowser.selectedTab.linkedBrowser.contentDocument;
var temp2 = doc.getElementById("myframe");
foundW = doc.defaultView; //im not sure what you want foundW to be, the chrome window? or the tab html window? if you want html window or you can do doc.defaultView OR w.gBrowser.selectedTab.linkedBrowser.contentWindow BUT if you want the chrome window it would be w
}
}
HOWEVER your code has a problem, its not going through all tabs in each window, its only going through the currently selected tab.
This is how you would do it for each tab in each window, read the comments carefully, also i took out your ugly if statement lol it was making things sloppy. Just put it back i replaced with /*your if statement*/ for easyiness for me to make example below
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
//we know for sure that all your windows have gBrowser element because you are getting enumerator for 'navigator:browser', but its not necessary for it to have tabContainer, for example a pop up window with no tabs in it
if (w.gBrowser.tabContainer) {
for (var i = 0; i < w.gBrowser.tabContainer.childNodes.length; i++) { //this itereates through each tab element in the tab bar (so the thingies you click)
var tab = w.gBrowser.tabContainer.childNodes[i];
var tabBrowser = tab.linkedBrowser;
var tabDoc = tabBrowser.contentDocument;
var tabWin = tabDoc.defaultView; //OR you can do tabBrowser.contentWindow
if ( /*if statement here*/ ) {
var temp2 = tabDoc.getElementById("myframe");
foundW = tabWin; //im not sure what you want here so i set it to the html window
w.focus(); //if you want to focus this FIREFOX window which is chrome window do this:
w.gBrowser.selectedTab = tab[i]; //if you want to select this tab then do this
}
}
} else {
//it has no tabContainer so its like a popup window with no tabs so our browser elment is just gBrowser, ill use same var names as above to keep things straight for you
var tabBrowser = w.gBrowser;
var tabDoc = tabBrowser.contentDocument;
var tabWin = tabDoc.defaultView; //OR you can do tabBrowser.contentWindow
if ( /*if statement here*/ ) {
var temp2 = tabDoc.getElementById("myframe");
foundW = tabWin; //im not sure what you want here so i set it to the html window
w.focus(); //if you want to focus this FIREFOX window which is chrome window do this:
//w.gBrowser.selectedTab = tab[i]; //no tabs in this window so if you do w.focus() on line above it will focus this properly
}
}
}

javascript alert box contain button with a class [duplicate]

This question already has answers here:
How can change a styling of javascript alert button?
(3 answers)
Closed 9 years ago.
how to do a javascript alert box that contain a button with a class like this submit button:
<input type="submit" class="lightbox">
or there is any way to make a javascript form that pop up and contain this submit button?

I would use this code:
var doc = document, htm = doc.documentElement, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
function winOpen(clickId, url, name, height, width){
var ht = innerHeight || htm.clientHeight || bod.clientHeight;
var wd = innerWidth || htm.clientWidth || bod.clientWidth;
ht = (height-ht)/2; wd = (width-wd)/2;
E(clickId).onclick = function(){
open(url, name, 'height='+height+',width='+width+',top='+ht+',left='+wd);
}
}
// You would use this like
winOpen('newWindow', 'wherever.html', 'windowName', 500, 500);
whatever.html should be the page with your lightbox class.

Standard browser alerts are not stylable - it will have to be done in code. If you don't want to window.open a new page and willing to use a 3rd party library - jQueryUI is a good choice. The Dialog is fully stylable- yes, including button.

jQuery document ready buggyness with social sharing services

I have a strange issue that might have to do with jQuery document ready. Below is an html and script block that contains the usual social networking scripts. The Javascript block below displays the dd_outer div on the left edge of the body div, and when the browser window is shrunk, the div is faded out and the dd_footer div is faded in. The fadein and fadeout between the two divs works OK.
The problem is two fold: one issue is when the browser window is full width (1200px+), the Facebook script will not load and display consistently; it sometimes appears and sometimes doesn't, sometimes after a page reload and sometimes doesn't. (No browser or .htaccess caching is involved). Only the Facebook share fails to show consistently; all other services show OK.
The second problem that when the browser window is narrow - 650 px or so, when the dd_outer div is not displayed and the dd_footer div is - the footer div will not show on a page reload until the browser window is moved the smallest amount. Then the the div will display, Facebook share and all. For a mobile device, this is a problem because the browser window will be narrow to begin with and shouldn't need to be "nudged" to make the dd_footer div display.
This problem may have come into play because I have adapted this code from a WordPress plugin that used options to set the position of the dd_outer div and scroll height. That's the reason for the variables above the document ready call.
Is this the issue with what seems to be a document ready issue?
How can the variables be integrated into the script itself? It doesn't matter if they are hardcoded; I can change them when needed.
I'd throw this in a jsfiddle to demo but the divs won't realistically float with the window resizing.
I haven't included the CSS for clarity.
This is the html and social script block:
<div class='dd_outer'><div class='dd_inner'><div id='dd_ajax_float'>
<div class="sbutton"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class="sbutton">
Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sbutton"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class="sbutton"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></div>
</div></div></div>
In the footer is <div id="dd_footer">that contains the same social scripts as above</div> and are faded in and out by the script below:
This is the jQuery that positions the dd_outer social services to the left and fades it out and fades in the dd_footer div.
<script type="text/javascript">
var dd_top = 0;
var dd_left = 0;
var dd_offset_from_content = 70; var dd_top_offset_from_content = 10;
jQuery(document).ready(function(){
var $floating_bar = jQuery('#dd_ajax_float');
var $dd_start = jQuery('#dd_start');
var $dd_end = jQuery('#dd_end');
var $dd_outer = jQuery('.dd_outer');
// first, move the floating bar out of the content to avoid position: relative issues
$dd_outer.appendTo('body');
dd_top = parseInt($dd_start.offset().top) + dd_top_offset_from_content;
if($dd_end.length){
dd_end = parseInt($dd_end.offset().top);
}
dd_left = -(dd_offset_from_content + 55);
dd_adjust_inner_width();
dd_position_floating_bar(dd_top, dd_left);
$floating_bar.fadeIn('slow');
if($floating_bar.length > 0){
var pullX = $floating_bar.css('margin-left');
jQuery(window).scroll(function () {
var scroll_from_top = jQuery(window).scrollTop() + 30;
var is_fixed = $dd_outer.css('position') == 'fixed';
if($dd_end.length){
var dd_ajax_float_bottom = dd_end - ($floating_bar.height() + 30);
}
if($floating_bar.length > 0)
{
if(scroll_from_top > dd_ajax_float_bottom && $dd_end.length){
dd_position_floating_bar(dd_ajax_float_bottom, dd_left);
$dd_outer.css('position', 'absolute');
}
else if ( scroll_from_top > dd_top && !is_fixed )
{
dd_position_floating_bar(30, dd_left);
$dd_outer.css('position', 'fixed');
}
else if ( scroll_from_top < dd_top && is_fixed )
{
dd_position_floating_bar(dd_top, dd_left);
$dd_outer.css('position', 'absolute');
}
}
});
}
});
jQuery(window).resize(function() {
dd_adjust_inner_width();
});
var dd_is_hidden = false;
var dd_resize_timer;
function dd_adjust_inner_width() {
var $dd_inner = jQuery('.dd_inner');
var $dd_floating_bar = jQuery('#dd_ajax_float')
var width = parseInt(jQuery(window).width() - (jQuery('#dd_start').offset().left * 2));
$dd_inner.width(width);
var dd_should_be_hidden = (((jQuery(window).width() - width)/2) < -dd_left);
var dd_is_hidden = $dd_floating_bar.is(':hidden');
if(dd_should_be_hidden && !dd_is_hidden)
{
clearTimeout(dd_resize_timer);
dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeOut(); }, -dd_left);
jQuery('#dd_footer').fadeIn();
}
else if(!dd_should_be_hidden && dd_is_hidden)
{
clearTimeout(dd_resize_timer);
dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeIn(); }, -dd_left);
jQuery('#dd_footer').fadeOut();
}
}
function dd_position_floating_bar(top, left, position) {
var $floating_bar = jQuery('#dd_ajax_float');
if(top == undefined) top = 0 + dd_top_offset_from_content;;
if(left == undefined) left = 0;
if(position == undefined) position = 'absolute';
$floating_bar.css({
position: position,
top: top + 'px',
left: left + 'px'
});
}
</script>

jQuery .ready() does not wait for iframes and other external media to load. These social buttons tend to work by inserting an iframe. The load event does wait for iframes etc, so you could try using that event instead, i.e.
jQuery(window).load(function () {
/* put the code you had inside .ready() here */
});

The problem comes with your idea: $(document).ready() fires when the DOM is ready, not when all scripts are ready!
an idea would be to search for trigger of that social-APIs you are using or just delay your calculations (e.g. via setTimeout).
Keep in mind that they are asyncron, even if you specify "async" on the script-tag to be false, you still dont know when they will activate or are finished.

I suggest to use the standard DOM event window.onload if you want to make sure that all the external assets, scripts, images, etc. are loaded first before you do something:
window.onload = function () {
// your script that needs to run after all the external assets are loaded
}
Reference: https://developer.mozilla.org/en-US/docs/DOM/window.onload

I just ran into similar problems with the facebook script... I just used the integration in the HEAD-section with javascript and added an "asynchronous"-attribute to the javascript-embedding script which then fires an asynchronous "heeey, facebook is ready now, too"-event to my jQuery-eventqueue...
I can't help you in detail, because I don't totally understand what you WANT to do and would reorganize the whole code A LOT... so - contact me private (email/skype) or try figuring out... I used that lines of code: pastie.org/private/9m4b9eet1dzzkl6duqpkrg

recognize mouse click over a flash element

This is a really though one.
I have wrtitten this javascript to connect actions in javascripts and actions in a flash application in my site.
The flash app is a bar that displays reltime indices.
But it has 4 rows . The user can choose which row to display by pressing
the up or down arrow.
I am trying to recognize if the user click one of those buttons by recognizing the x and y with
e.pageX and e.pageY
This should works (and it does!) becuase the flash is always on the bottom (fixed position)
The thing is that it works in FF but not in chrome or IE.
The code is
$('body').click(function(e){
var arrowWidth = 15;
var arrowHeight = 12;
x_left = $("body").width() * 0.88 - 30;
x_right = $("body").width() * 0.88;
y_down_bottom = $(window).height() -2//screen.height; //$
y_down_top = y_down_bottom - arrowHeight;
y_up_bottom = y_down_bottom - arrowHeight-2;
y_up_top = y_up_bottom - arrowHeight-4;
if (e.pageX > x_left && e.pageX < x_right ){
if (e.pageY>=y_down_top && e.pageY<=y_down_bottom ){
//pressed down
.............
}
}
EDIT:

Thanks to carnio I changed my approach by sending it through flash external interface.
I used
import flash.external.*; // for sending up and down arrows events to javascript
and this on the press up and down events
//update javascript
// The name of a JavaScript function to call
var callJasFunction:String = "GetBtnTicker";
//parameter
var msg:int = page;
// The return value after calling JavaScript
ExternalInterface.call(callJasFunction, msg);
and it works.