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.
Related
This question already has answers here:
Center a popup window on screen?
(19 answers)
Closed 5 years ago.
I found the following JavaScript code many years ago (between 8 and 10 years ago, I think) though I can't remember where or when. I use it to make popup windows with answers for a Jeopardy review game for my French students. I dabble a little bit but I don't know very much beyond the absolute basics about coding (I do know how to change the background color in this code and the window size, for example). I would like to have the popup window be centered in the middle of the page rather than opening in the upper left of the window.
I've seen code bits in response to other questions (Center a popup window on screen? for example) that look like they should make that happen but when I've tried adding them in different places to my existing code it always makes the feedback window no longer open. I don't know enough about coding to know what of that code I need or where to put it. I have tried pulling the VAR lines and adding them to the existing code but as I have said, it disables the popup window completely.
Can someone help me tell me if it is possible to modify this code to center the popup window in the middle of the page or if I should try to find a different code to make that happen?
Thank you for your help.
Shannon
Here is the code that I have:
function feedback(message) {
var browser = navigator.appName;
var browserVersion = navigator.appVersion;
if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {
// This function opens a new window with the message text.
// The window will disappear when it loses focus.
msgWindow=window.open('','msgWindow','toolbar=no,location=no,directories=no, status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,width=210,height=180');
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");
msgWindow.document.write("</HEAD>");
msgWindow.document.write
("<BODY BGCOLOR='#FAE080' onblur='window.close()'>");
msgWindow.document.write
("<P><CENTER><FONT SIZE=+1><B>" + message + "</FONT></B></P></CENTER>");
msgWindow.document.write("</BODY>");
msgWindow.document.close();
} else { // Not Netscape or Internet Explorer
alert(message);
}
} // end of JavaScript Function feedback
It is not working here in code snippet but you can check this fiddle Check this
function myFunction() {
var pageURL="http://google.com";
var w = 500;
var h = 500;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
window.open("https://www.google.com",'','width=' + w +', height='+h +',top='+top+',left='+left);
}
<button onclick="myFunction()">Click Here</button>
Your modified Code Will be like this Check updated Fiddle
function feedback(message) {
var browser = navigator.appName;
var browserVersion = navigator.appVersion;
if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {
// This function opens a new window with the message text.
// The window will disappear when it loses focus.
var w = 210;
var h = 190;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var msgWindow=window.open("",'','width=' + w +', height='+h +',top='+top+',left='+left);
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");
msgWindow.document.write("</HEAD>");
msgWindow.document.write("<BODY BGCOLOR='#FAE080' onblur='window.close()'>");
msgWindow.document.write("<P><CENTER><FONT SIZE=+1><B>" + message + "</FONT></B></P></CENTER>");
msgWindow.document.write("</BODY>");
msgWindow.document.close();
} else { // Not Netscape or Internet Explorer
alert(message);
}
} // end of JavaScript Function feedback
This question already has answers here:
Javascript "addEventListener" Event Fires on Page Load [duplicate]
(2 answers)
Closed 5 years ago.
I am trying to attach an event lister to a file input.
I was thinking it would work like this. But i have read online and cant seem to get it to work.
<input type="file" id=image1 >
var image1 = document.getElementsByID("image1");
image1.addEventListener('change', alert(1));
Change this:
var image1 = document.getElementsByID("image1");
image1.addEventListener('change', alert(1));
to this:
var image1 = document.getElementById("image1");
image1.addEventListener('change', function(){ alert(image1); });
Because getElementsByID() is not a valid method call, but getElementById() is.
Also, so that you will be executing a function that invokes the alert(), rather than invoking the alert immediately and assigning the result of the alert as the click event handler, we need to wrap the alert() in a function.
Lastly, alert(1) doesn't show anything because 1 isn't a variable, nor is it a string. You should be writing alert(image1.someProperty). Since image1 is a file type, you could access the files associated with the element and then a specific file and then an aspect of that file.
Here's the whole thing:
var image1 = document.getElementById("image1");
image1.addEventListener('change', function(){
var files = image1.files;
alert(files[0].name);
});
<input type="file" id=image1 >
Try this:
var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
this.value = null;
};
input.onchange = function () {
alert(this.value);
};
<input type='file' value='C:\fakepath' />
<input type="file" id="image1" onchange="alert(1);" />
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
}
}
}
Q: How to close a mootools dialog from inside an iFrame?
I have the following code to open the dialog box on the parent:
window.addEvent("domready", function(e){
/* Modal */
$("mootools_dialog").addEvent("click", function(e){
e.stop();
var dlgx = document.getElementById("mootools_dialog").offsetLeft-window.getScroll().x-20;
var dlgy = document.getElementById("mootools_dialog").offsetTop+window.getScroll().y-400;
dlgx = (dlgx < 20) ? 20 : dlgx;
dlgy = (dlgy < 20) ? 20 : dlgy;
var SM = new SimpleModal({"hideHeader":true,"closeButton":false,"hideFooter":true,"offsetLeft":dlgx, "offsetTop":dlgy });
var form_check = null;
SM.show({
"model":"modal",
"title":"Title, or empty?",
"contents":"<iframe src='booking.iframe.php' id='booking_iframe' scrolling='no' /></iframe>"
});
})
});
It works to call functions from inside the iFrame, like href='javascript:{parent.book_click();}' But I cannot find a way to close the mootools window.What do I need inside the iFrame?
I tryed to call a function in the parent to close the window but could not make any code work.
Closeor parent.SimpleModal.close() - but no sucess.
I have mootools 1.3.2
It seems that you're using SimpleModal class for custom dialogs. The first thing you should notice is that it doesn't have close method. However it has hide method which does the job.
But hide method cannot be called on global SimpleModal class, it should be called on instance (that's your SM variable). So you can modify your code like following:
window.SM = new SimpleModal({"hideHeader":true,"closeButton":false,"hideFooter":true,"offsetLeft":dlgx, "offsetTop":dlgy });
var form_check = null;
SM.show({
"model":"modal",
"title":"Title, or empty?",
"contents":"<iframe src='booking.iframe.php' id='booking_iframe' scrolling='no' /></iframe>"
});
Now you have global variable SM with current dialog instance, and now you can call its methods from <iframe> without any problems like this:
<a onclick="parent.SM.hide()">Close</a>
This question already has answers here:
Multiple Windows using window.open()
(6 answers)
Closed 5 years ago.
I am trying to open two different windows with the click of a button, but when i click the button it opens the same window twice. This is my function:
function flush(form) {
var custid = form.custid.value;
var url1 = "https://www.blabla.com?type=customer&id="+custid;
flushWindow1 = window.open(url1);
var url2 = "https://web.blabla.com?type=customer&id="+custid;
flushWindow2 = window.open(url2);
}
Does anyone know how I can do this?
From : JSfiddle Two windows on a Click
$('document').ready(function(){
$('input').click(function(){
window.open("https://www.google.com.pk/search?q=123&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a")
window.open("https://www.google.com.pk/search?q=abc&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a")
});
});
try open in new window/tab by add parameter '_blank'
and then focus the window you want by place window.focus(); behind window you want to focus after open two new window
function flush(form) {
var custid = form.custid.value;
var url1 = "https://www.blabla.com?type=customer&id="+custid;
flushWindow1 = window.open(url1, '_blank');
var url2 = "https://web.blabla.com?type=customer&id="+custid;
flushWindow2 = window.open(url2, '_blank');
window.focus(); // focus on url2
}
Try providing second argument to window.open() method, which is the name of the window, if name is different then same url will open in different windows. e.g.
function flush(form) {
var custid = form.custid.value;
var url1 = "https://www.blabla.com?type=customer&id="+custid;
flushWindow1 = window.open(url1,"flushWindow1");
var url2 = "https://web.blabla.com?type=customer&id="+custid;
flushWindow2 = window.open(url2,"flushWindow2");
}
Demo