Pop up image without clicking anywhere - javascript

I'm trying to create a pop up.
I host my own website and I would like an image to be displayed as a pop up when the website is opened.
I've tried to write some code:
<head>
<script type="text/javascript">
function openWin(img){
var path = "images/"
window.open(path+img,"mywin","menubar=0,resizable=0,width=200,height=200")
}
</script>
</head>
<body>
open window
</body>
But here i dont want the <a href>. It shows that when I click on it the image opens but I don't want this.
I want the image to just be displayed without the need to click or hover anywhere, and I also want that when I click anywhere outside the image for it to close.
So how do I do this?

Just call the openWin() function in a script tag at the bottom of your html page. Don't associate it with a click or other event, just call the function. The script will run when the page loads, calling the function, which will open a new window on browsers that don't have that turned off.
Possibly, that will then annoy your users and they will go away.

Related

Javascript game popup window

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.

Open a javascript advertising code when click on a another url link?

My question is I want to open a advertisement but condition is .. when i click on data url
at that time data url opened also with another new window advertisement also open.
So how i write a code so open two page : one my content(data) page and another is
advertisement page..
Please give me a answer for my problem.
Run an onClick="function()" and a link.
<div onClick="openAd()"></div>
<script>
var function = openAd(){
window.open("ad");
}
</script>
Here I use window.open(), which does what it sounds like and opens a new window with the link.

loading for webpage until webpage has loaded

I wish to have a loading sing in the webpage until all elements are loaded. I tried having popup alert using JavaScript
<script type="text/javascript">
window.onload = function()
{
alert('loading');
}
</script>
but did not look good, can I add images to alert window.
Or How can i have a webpage on the top that is displayed for few seconds.
You should make a div, which should be on top of everything else on the page, with the loading text/images you´d like in it. Then you can hide it with JavaScript when the page loads completely.

How to open part of my page content into own broswer?

if I have a page:
<body>
<div id='part_one'>...</div>
<div id='part_two'>...</div>
<div id='part_three'>...</div>
//Create a link here to open the content of div `part_two` in own browser
</body>
I would like to create a link on the page, when user click on the link, the content of div part_two will be opened in own browser, how to do it?
Open #2 in new window
This is a horribly crude way to make such a link, though. If the data must be opened in a new window, you always need to provide a fallback page (put that in href) and use unobtrusive JavaScript, so bind the click listener in your script and not like my example.

How to give control back to iframe window after it opens a popup

I have a question on javascript window management.
My application opens an iframe which displays a link. Clicking on the link, opens a popup window, in which I enter my login credentials. My intention is to close the popup window after the login credentials are entered. And this I have been able to achieve using a JS call to self.close().
There after my server side script does some more processing and would like to display the results back in the iframe. This is where things break for me.
The overall flow is as follows:
Iframe Displays a Link --> Clicking on the Link Pops up a window --> Popup Window closes after credentials are entered --> I see my original iframe now (How do I display the contents back in the iframe). Here is the code snippet that closes the popup.
5
6 self.close();
7
The parent of the popup is the iframe. If I modify the above script to give the focus back to its parent, which in my case will be the iframe, will that suffice? Or am I issing something here?
you can access the iframe from your popup by using opener. for example this will reload your iframe:
<script type="text/javascript">
opener.location.href = "htp://mypage.com/myiframe.php";
</script>
you just have to add the right parameters to show what you want to. (of course you have to do this before your self.close();)

Categories