How to put a picture into a pop up window in javascript? - javascript

I have this script, however, I cannot figure out how to get an image to show up in the pop up window. Right now, when the window pops up, I only get script. I have tried to enter a link using the href code and the
<html>
<head>
<SCRIPT language="JavaScript">
var w = 480, h = 340;
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popW = 300, popH = 200;
var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;
msgWindow = window.open('','popup','width=' + popW + ',height=' + popH +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>

Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<html>
<head>
<SCRIPT language="JavaScript">
var w = 480, h = 340;
function openWindow(){
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popW = 800, popH = 700;
var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;
msgWindow = window.open('','popup','width=' + popW + ',height=' + popH +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
'<img src="https://static5.cargurus.com/images/site/2009/10/24/14/42/2004_suzuki_vitara_4_dr_lx_4wd_suv-pic-8731393806365188898-640x480.jpeg">'+
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
}
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>
</body>
</html>

To just show an image, then replace this part as shown:
msgWindow.document.write ('<img src="//i.imgur.com/j2JTnI2.png" >');

I strongly recommend against using document.write();, use document.body.innerHTML instead.
precisely use:
msgWindow.document.body.innerHTML = '<img src="url/to/your/image.jpg"></img>';
instead of:
msgWindow.document.write('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
Here's a working example using an image.

Related

Options are ignored when using window.open()

I am using the below to open a new window, but it seems that the options are ignored.
var newWindow = window.open('index.php?ident=' + gender + '&nick=' + nickname + '', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
I have tested using Chrome, I still get an address bar etc.
Historically, browsers have been incredibly picky about the options string, and spaces are/were not allowed. You have spaces before some of the options:
var newWindow = window.open('index.php?ident=' + gender + '&nick=' + nickname + '', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Here --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^----------------^-----------------^----------------^
From MDN:
The string must not contain any whitespace
Removing them may solve the problem.
Separately, if the values in w, h, top, and left are anything but raw numbers, they'll cause trouble as well.
Working example: If I put this on a server and run it with Chrome (or Firefox or IE11), it opens Stack Overflow in a window with the options requested (except addressbar, which you can't suppress anymore):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Foo</title>
</head>
<body>
<input type="button" id="the-button" value="Click me">
<script>
var w = 400, h = 600; top = 1, left = 1;
document.getElementById("the-button").onclick = function() {
var newWindow = window.open('http://stackoverflow.com', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
};
</script>
</body>
</html>

Sharing a specific image on facebook using a share button

I currently have a share on facebook button with the following code:
<script>
function fbShare(url, title, descr, image, winWidth, winHeight) {
var winTop = (screen.height / 2) - (winHeight / 2)-100;
var winLeft = (screen.width / 2) - (winWidth / 2);
window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight+'' );
}
</script>
<img class="right2" src="fblogo2.png">
This works fine however the image facebook chooses to share from the site is randomly selected. I want to be able to specify one. Is there anyway of doing this?
Yes. You can add a facebook meta tag to the specific page:
<meta property="og:image" content="http://graphics.myfavnews.com/images/logo-100x100.jpg" />
This is what facebook will use when you share that page.

Popup window needs to be closed before going back

I have a link on a page on clicking which I open a new window like a popup.
Now I would like the user to close it before he can go back to the old page. He should not be able to navigate to other tab before closing it. How would I do this?
<script type="text/javascript">
function popup(url) {
var width = 300;
var height = 200;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
newwin = window.open(url, 'windowname5', params);
if (window.focus) {
newwin.focus()
}
return false;
}
</script>
Centered popup window
You should define your window as a modal window, window.showModalDialog.
Look at the following instructions showModalDialog
An alternate way is to use jQuery dialog. in this case the whole screen is blocked and user can not do anything until dialog is closed. see here
Create Close button in your popup.html page then close a window.
<input type="button" value="Close" onclick="window.close()">
thank u..

js function wont work

Got one easy question for you, but still hard for me...
All i'm trying to do, is maximize new, opened window with different button...But it doesn't work, cant figure out why .. can someone please tell me, what i do wrong?
<form>
<input type="button" value="Create New Window" onclick="createWindow()" />
<input type="button" value="Maximize New Window" onclick="maximizeWindow()" />
</form>
var maxWindow;
function createWindow(){
var winWidth = 300;
var winHeight = 100;
var winLeft = (screen.width - winWidth)/2;
var winTop = (screen.height - winHeight)/2;
var winOptions = ",width=" + winWidth + ",height=" + winHeight + ",left=" + winLeft + ",top=" + winTop;
maxWindow = window.open("http://www.google.com","newWindow",winOptions);
maxWindow.focus();
}
function maximizeWindow() {
maxWindow.moveTo(0,0);
maxWindow.resizeTo(screen.availWidth, screen.availHeight);
maxWindow.focus();
}
<script>
var maxWindow;
function createWindow(){
var winWidth = 300;
var winHeight = 100;
var winLeft = (screen.width - winWidth)/2;
var winTop = (screen.height - winHeight)/2;
var winOptions = ",width=" + winWidth + ",height=" + winHeight + ",left=" + winLeft + ",top=" + winTop+'fullscreen=yes';
maxWindow = window.open("http://www.google.com","newWindow",winOptions);
maxWindow.focus();
}
function maximizeWindow() {
maxWindow.moveTo(0,0);
maxWindow.resizeTo(screen.width, screen.height);
maxWindow.focus();
}
</script>
<form>
<input type="button" value="Create New Window" onclick="createWindow()" />
<input type="button" value="Maximize New Window" onclick="maximizeWindow()" />
</form>
i add this to first function 'fullscreen=yes' and in second function change second line with my code maxWindow.resizeTo(screen.width, screen.height);

How to move an image to the mouse position in html/javascript?

I'm getting slowly back to javascript and I'm a bit lost on basics.
I just want to move an image to follow the mouse position.
Here is a simple code I've been tweaking for some time without any success :
<html>
<head>
</head>
<body>
<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>
<script lang="javascript">
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
avatar.x = e.x;
avatar.y = e.y;
// alert( "e( " + e.x + ", " + e.y + " )" );
// alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;
</script>
</html>
It looks a lot like some tutorials to do this very thing.
What I don't understand is that using the alerts (I don't know how to print in the browser's javascript console) I see that avatar.x and y are never changed. Is it related to the way I've declared the image?
Can someone point me what I'm doing wrong?
I think that you don't want to set x and y, but rather style.left and style.top!
avatar.style.left = e.x;
avatar.style.top = e.y;
There is no x and y property for avatar - you should use 'top' and 'left' instead. Also, move the var avatar = document.getElementById("avatar"); declaration outside of the function, as you only need to do this once.
<html>
<head>
</head>
<body>
<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>
<script lang="javascript">
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
avatar.style.left = e.x + "px";
avatar.style.top = e.y + "px";
//alert( "e( " + e.x + ", " + e.y + " )" );
//alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;
</script>
</html>
avatar.style.top = e.clientY + 'px';
avatar.style.left = e.clientX + 'px';

Categories