How to open popups automatically after certain time (without blocking) - javascript

I am making a web page, in which I have to open a popup window from an buton after 8 seconds(8000 ms).
I want to put some delay(8 seconds) before a popup open automatically.
my problem is that mozilla firefox block my popup
Here is my code:
<html>
<head>
<script>
function call()
{
popup = window.open('http://www.google.co.in');
}
function caller()
{
setInterval(call, 8000);
}
</script>
</head>
<body>
<input type="button" onclick="caller();">
</body>
</html>

There is no way around a browser's popup blocking/displaying architecture. All you can do is call the JS method. What happens then is outside the HTML/JS purview.
Javascript popups are really kind of out of fashion on the web, because of the blockers. They're annoying, their behavior depending on device is unpredictable, and generally, users hate them. Consider another approach.

You should use the function setTimeout(functionName , delay) instead of setInterval. setInterval will popup a new window every 8 seconds while setTimeout will only do it once.
<html>
<head>
<script>
function call()
{
popup = window.open('http://www.google.co.in');
}
setTimeout(call, 8000);
</script>
</head>
<body>
<input type="button" onclick="caller();">
</body>
</html>
And I'm agree, look for an another way to do what you want. Popups are often a inconvenience for users, especially for partially-sighted person.
By default many web browser block automatic popup. They only alow popup for direct action like in an onClick envent.

Related

window.print() in Apps Script custom modal dialog box

I am creating a custom modal dialog pop up box in Google Sheets via an Apps Script that is running an onEdit trigger. The idea is, the user clicks on a checkbox in some cell in a column. The trigger detects this edit, and calls a function that utilizes Apps Script UI and HtmlService class. This creates a simple modal dialog box that is built using some html. In the html, I have a button that calls window.print(). However, by calling it, nothing happens. I think it's because of the Same Origin Policy issue. The Html Service is likely using another domain name to launch the dialog box that's different than docs.google.com. So, window calls are likely problematic. Is there another way around this? How does one create customized printing for Google Apps? I've seen some variations of creating a pdf on the fly and printing those, but this seems really inefficient for the end user.
When the checkbox is clicked, the following function is called:
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('html') ;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Print Receipt');
}
Here is the following html:
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" alt="Logo" width="100" height="100">
<h3>testing</h3>
<button onclick="print()">Print</button>
</body>
<script>
function print() {
window.print();
}
</script>
</html>');
You should consider renaming the print function to something else, say "printPage" else it may be invoking the native print API. Also, the extra parenthesis in the HTML maybe removed.
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" />
<h3>testing</h3>
<button onclick="printPage()">Print</button>
</body>
<script>
function printPage() {
window.print();
}
</script>
</html>

I want to do function at open Chrome with web site Javascript

I'm new at Javascript and I have a question.
I want to at start if I open Chrome and web site to do my function.
I want to every time do this function if I open Google Chrome!
I have adblock, and I want if every time I open this web site how2play.pl I want to delete this window scr.hu/0qbal/i9wa2 with code scr.hu/0qbal/gs9sy like in console paste document.getElementById('sdf09-8e9daf9e854f26f98cabf235ad8343cb').style.display = "none";
Please explain step by step.
<!doctype html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
alertme('this works');
};
function alertme(text)
{
alert(text);
}
</script>
<button onclick="alertme('you clicked me');">Click Me</button>
</body>
</html>
When the page is done loading or if you click on the button, the code will run a javascript function that will display an alert box.
How it works
In the javascript there is a window.onload = function() -- which allows you to run any function you want immediately when the page is done loading (in this example it will run the alertme('this works');)
When you look at the button you will see that the button contains alertme('you clicked me');
That is also a function that executes when the button is clicked.

javascript print() method is not working as expected

I have a simple HTML code to print the page. Below is the code:
<!DOCTYPE html>
<html>
<head>
<script>
function printPage()
{
var w = window.open("http://www.sigmaaldrich.com/catalog/CofADocRequest.do?symbol=209104&LotNo=MKBP0842V&brandTest=SIGMA","_self");
window.focus();
window.print();
}
</script>
</head>
<body >
<input type="button" onclick="printPage()" value="print a div!" />
</body>
</html>
What the code does is, it displays a button, on clicking that button it calls a function. The function uses open() to open a new URL in the same page by using the “_self ” parameter.
As we can see in the code, the print() is being called after the call to open method. But in my browser IE11, the print pop is being shown befor loading the page.
Due to this I am not printing the correct page.
Can anybody help me on this.
The problem is that window refers to the current window, which is the original.
By opening a new window in self you replace the page, this is basically a redirect.
And if you open it via popup and print it as w.print() than you run into cross-origin security error.
You could use iframe to this with a proxy as shown here
How do print specific content inside the iframe
and
here
How do print specific content inside the iframe

Javascript cross window interaction

I have this very simple Javascript to write on a text area when the link is clicked:
<head>
<script language="javascript" type="text/javascript">
function addtext(text) {document.form.textarea.value = document.form.textarea.value+= text;}
</script>
</head>
<body>
<form action="" method="" name="form">
<textarea name="textarea" rows="" cols="" wrap="wrap"></textarea>
</form>
q
</body>
Now I want to up the ante.
What I want to do is have the form in another another window, and that when I click the link, I writes to a textarea in another window.
I'm not necessarily asking for the code because I realize this might be quite complicated.
The question would be where to start, because I haven´t got a clue!!
(when I Google cross window or cross domain interaction with Javascript I don't really get anything useful).
So any help I can get, libraries, plugins or whatever might guide me in the right direction is more than appreciated.
Ok, I wrote you a sample you can check at http://jsfiddle.net/zzdAL/
$(document).ready(function()
{
popup = window.open("http://fiddle.jshell.net");
$("#input1").click(function() {
try {
popup.document.window.alert(1);
}
catch (e) { alert(e.message); }
});
}
);
It only runs an alert on the popup, but you can do whatever you want with the popup, assuming you have the necessary rights (needs to be the same domain I believe).
The most simple is to write a function in your popup and call it from the opener.
Probably it's too late, but here is an example of interaction: window interaction
Take a look to greasemonkey, it's an addon for your browser.
You can choose on which page(s) the script will works.
http://wiki.greasespot.net/Main_Page

Modal dialog options

I am opening a window as a modal.
window.showModalDialog("http://www.google.com","","dialogWidth:500px;dialogHeight:500px")
as I set height, what are other options available?
Like option buttons, menus etc. where I can find tutorials?
EDIT
It works in Mozilla firefox, but people are saying it doesn't!
My code is
Please somebody Edit my sample code for display purpose
<html>
<head>
<script>
function abc() {
window.showModalDialog("3.htm", "", "dialogWidth:500px;dialogHeight:500px");
}
</script>
</head>
<body>
<input type="button" id="check" name="check" onclick="abc()" value="open"/>
</body>
</html>
Second EDIT
code for page 3.htm
<html>
<head>
<script>
function abc(){
close()
}
</script>
</head>
<body>
<input type="button" id="check" name="check" onclick="abc()" value="close"/>
</body>
</html>
Check out both code on fire fox! and tell me.
Third EDIT
Ok It's not working in corme and opera
Be aware that showModalDialog is IE specific and won't necessarily work with other browsers. If you want cross browser modal dialogs you need to use a div to hide the rest of the page and overlay your dialog on top. It is easier to use an existing javascript library that already takes care of this.
I suggest not to use popups in web apps. Use floating divs instead which looks like a modal dialog but are better than the popups.
JQuery UI has a decent popup/modal dialog API and I've worked with the Boxy plugin which is very easy to implement.
They're cross browser and simple to use.
To load a page using boxy use:
var boxyPopup;
Boxy.load("aPage.html",
{title: "Title",
modal: true,
fixed: false,
afterShow: function(){
boxyPopup = this;}});
I'm not sure what you mean by it not opening a new page on same boxy window but using the above you have the boxyPopup var as a reference to the open boxy object and can access/change contents using that.

Categories

Resources