Javascript game popup window - javascript

In my program, the user is interrupted after a certain time with a JavaScript game (snake game). The popup window (snake game) will close by itself when the user finishes. That code will be in the game.
I need the popup to be on top until the user finishes the game. Here, the user is able to avoid the popup (by clicking anywhere outside of the popup) and go back to the parent webpage. I need the user to keep playing the game until he/she finishes it. Is there a way I can do this?
Please only include suggestions with JavaScript.
<html>
<head>
<title>test</title>
<script>
function popup(){
var snakeGame
setInterval(function(){
snakeGame = window.open('snake.html', "_blank", "toolbar=0, titlebar=0, location=0, scrollbars=0, statusbar=0, status =yes, menubar=0, top=500, left=500, width=550, height=380").focus();
},5000);
}
</script>
</head>
<body>
<p>Web page content</p>
<body onload="popup()">
</body>
</html>

I would suggest creating a CSS popup that does not go away until the user finishes the game.
(Creating a non-closeable popup window is impossible.)
You can visit https://stackoverflow.com/a/19065024/2930268 to see an example of a CSS Lightbox. You would just have to make the box close by itself when the user finishes the game by doing document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'.
I hope this helps!

Look at using an iframe lightbox rather than opening a new window. That way both appear in the same browser window.
Most pre-written lightbox scripts should have options to not close until you call a function.
Demo of a lightbox : http://digitarald.de/project/squeezebox/1-1/showcase/iframed/ - this one runs with mootools, but there are plenty for other libraries (and presumably stand-alone javascript ones)
(Also, note that client-side code is always cheatable if someone knows what they are doing)
Also, with your current system, you could always run a script when the parent and child window are focussed on. If someone clicks on the parent one without winning the game, you could display a message that they must go back to the game.
This should give you the info needed to get such variables:
Is there a way to detect if a browser window is not currently active?

This will place the window on top of all other windows until the user closes it (or in your case finishes the game).
<body onblur="self.focus();">
But do keep in mind that a few tricks by the user (they have to be fairly knowledgeable) can disable this "always on top" functionality.
Edit: For what you're trying to do, a CSS Lightbox might be a better solution, but if you're sticking to windows, this should help.

Related

Keeping slideshow on top with page below visible

I have a pretty big Intranet site at work, there are detailed work descriptions. There are links in the procedure that bring up pics, and I'm using Highslide. The default behavior is to bring the gallery up and dim the background. When you click outside the gallery it closes. Some of my users would like to keep a gallery up, on top so they can follow the procedure. As of now they keep having to bring the gallery up. I also have a pop up on a section of another page that pops up a modal with html in it(I have calculators popping up). The behaviors of these is they stay on top of the page until you close them. I'd like the same behavior for my gallery, is it possible?
A Highslide gallery/image can stay open exactly like an Highslide HTML popup. All you need to do, is removing the hs.dimmingOpacity setting for your gallery. Since I haven't seen your page, I can't tell where to find this setting in your gallery setup.
Highslide lets you define a function to run before closing. If this function returns true, it will close, if false, it will stay open. Without seeing your code this is the best response I can offer.
<script type="text/javascript">
var allowClose=false;
hs.Expander.prototype.onBeforeClose = function (sender) {
return allowClose;
}
</script>
The somewhere else you can add a button to switch allowClose to true, which will restore the basic closing functionality. There is also a close() function in highslide, so you could have a large button somewhere to call close().
The full set of properties, functions, and events is here-> http://highslide.com/ref/

Switching between the same two tabs only in a browser using javascript and html

My idea of what am trying to do is
When I open a website on one tab of an internet explorer broweser and click on a link it should open a new tab in the same browser with a pdf page init ... the pdf page has a lot of links which if u try clicking on any of them they should take you back to the old tab where u managed to lunch open the pdf from and keep switching between those two tabs only
I hope the idea is clear .. am trying to do this using html and javascript ... this what I wrote but am still missing a lot here. Thanks in advance for any help provided
this piece here lunches another instant in another window
<html>
<head>
<script>
function son()
{
myWindow=window.open('','','width=500,height=500');
myWindow.document.write(" SON !");
myWindow.focus();
myWindow.opener.document.write("<p> DAD !</p>");
}
</script>
</head>
<body>
<input type="button" value="Open " onclick="son()" />
</body>
</html>
This file is where I have the pdf file built in.
<object data="Test.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
you can <a href="Test.pdf">click here to
download the PDF file.</a></p>
</object>
thanks again
In the old days, you could use a window's focus method to bring a window/tab into the foreground. However, abuse (mostly in the form of advertisers' popup windows) has resulted in browsers restricting or disabling that functionality.
If we ignore the PDF part, conceptually, this is a very simple request. First, open a window and hold on to its reference:
var pop = window.open('page.html'); // opens in new tab on most browsers
In the secondary page, switching back to the original was simple:
window.opener.focus(); // no longer works in most modern browsers
And from the first page, to switch back:
pop.focus(); // might work
In my test, I couldn't get IE 9 or Chrome 21 to switch back to the opener tab. In Chrome, I could open the second page, manually switch back to the original tab, and calling pop.focus() did bring the second tab back in focus. (IE did nothing.) I was able to force Chrome back to the opening page by calling window.opener.alert('...'); from the secondary page, but that's an ugly hack.
So it looks like you won't be able to pull this off, at least not reliably.
I'm not sure exactly what you're trying to accomplish (a TOC?), but have you thought about opening two windows? Open one with your links that covers the left-hand side of the screen, and another on the other half with the PDF.
JavaScript does not have APIs for controlling tabs. Therefore, you can't do it.
You can open windows, but you can't control if it will be a tab or window.
One alternative possibility involves NOT opening a second window or tab.
If you open another/replacing page in the current window or tab,
you can use the History object to switch between the two pages.
history.go(-1); //takes you back to previous page
history.go(1); //takes you forward to the page from which you went back.

Legally avoiding popup blocking

What is causing some browsers to see my code as unsolicited?
I have a web site devoted to helping people with interactive sessions. It starts with the user clicking [Begin] so this is a consented action. This should (1) open a popup while (2) redirecting the first page to a end page as below :
<head>
<SCRIPT language="JavaScript">
function openwindow(){window.open("{INTERACTION}","interaction","resizable=0,width=800,height=600,status=0");}</SCRIPT>
</head>
<body>
<FORM action="end.php" method="{METHOD}" >
<input type="submit" class="button"
onClick="javascript: openwindow()"
value="Begin" />
</FORM>
</body>
As said, this is not trying to open an unrequested popup but some strains of IE and Chrome appear to be treating it as such. I have been trying to get a fix, most recently digesting this post.
In it Bobince comments
these days, you don't really need to ask the question “was my unsolicited popup blocked?”, because the answer is invariably “yes” — all the major browsers have the popup blocker turned on by default. Best approach is only ever to window.open() in response to a direct click, which is almost always allowed.I'm quite happy to buy into this principle because I simply want my popup to open.
What is causing some browsers to see my code as unsolicited?
I'd appreciate any help you could give me. (as you might have guessed, client side is not my bag and this topic has been bugging me for ages).
Many thanks in advance (and fingers crossed)
Giles
No much you can do. You could ask your users to disable pop-up blockers or inform them that a pop-up blocker is enabled by checking the window object ref returned by window.open()
e.g.
var w = window.open('http://domain.com');
if(!w) {
//an alert in this example
alert('oops..seems like a pop-up blocker is enabled. Please disable');
}
you could find another way and try what Brad suggests.
There isn't anything you can do about this. Some popup blockers still block everything, even in response to a user clicking. The best you can do is suggest your users turn off popup blockers, or find a different way to do what you want to do. A popular method is the div that appears on top of all others on your page, like Lightbox.
There are many jQuery plugins which make this easy.
You have (at least?) 2 options to deal with this:
if you want to keep using popups, display a very visible warning for your users, pointing them to instructions on how to configure their browser to whitelist your domain (like the banners that appear on top of StackOverlow.com when you gain new privileges, or even like the banners Chrome is showing for actions - they are web-based as well);
use an iFrame and load its content based on your user's click.

Pop-up is showing in tab on IE8 but I need it in its own window

I know someone else asked this recently, but I haven't seen an answer up there yet. I have a popup music player working with a WordPress website. Getting it to work was tricky and now I'm told the client sees it loading as a tab instead of a new window, which he absolutely won't accept. I wonder if there is absolutely no way to make this work?
function popUp() {
var popup=window.open('http://websitehere.com?id=somevar&more=anothervar','','width=495,height=250,scrollbars=0');
}
And here's the call, in a link:
<img src="theimage.png">
Am I doing something wrong? Is there better popup code out there? Thanks!
No. Whether window.open() opens the url in a new window or a new tab is controlled by the user's browser's preferences, and cannot be overridden.
You can put it in an object element, or an iframe, in a div tricked out to look and act like a draggable, closable 'window'. Wait'll the client finds out some setups prevent any new windows being opened via script.

Javascript for removing menu and scroll bars

I have this script on my html page:
<script language='javascript'>parent.resizeTo(550,510);</script>
I'd like to add to it so it positions the window in the middle of the screen. Also, I want to remove the address and tool bars (I've managed to hide the scrollbars by using body{overflow:hidden;}).
I know how to do this using JS upon opening a new window from the browser but this needs to work from clicking a link on a PDF.
Does anyone have any suggestions? Thank you!
You can't remove address bars, etc. from the user's browser window (even if the user is only you) unless you create a new window object. And the trend is toward removing more and more of your ability to "customize" such popup windows, for security reasons.
This is actually a feature, not a bug. Think about it.
If you're opening a browser window from a separate application, the page starts off its life with a completely-decorated browser window. There's no way to make those decorations go away after the page is loaded.
While I seriously doubt the justification of your desires the way to do it is to somehow open a window. That means that your pdf links to a page that as its action will open a window with an url that has the actual content. The pdf links to a page that is basically a redirector. You give the final URL as a parameter and launch it. Of course you need to disable the popup blocker for this to work, but you should not even consider doing this on a public (no browser control) website anyway. You also might want to add to the redirector page a button that the user can click to open the page if it was blocked by the popup blocker.

Categories