Pop up and pop in like gmail chat - javascript

I want to do popup like gmail chat popup window as well as I want to do pop-in like the way gmail does.
once the pop-out is done particular div should be open in new window and once the pop-in done the particular div should be placed in the position where it was been already, so far I am able to do the pop up the window in new window with the following code, but I don't have the idea how to do pop-in
Please note: once the pop-out done particular div should be open in another window and the variables in the main window also should be accessible in the pop-out window.
work out in Jsfiddle
Pop out demo
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
//<![CDATA[
$(function(){
$('.popup').click(function (event) {
event.preventDefault();
window.open($(this).attr("href"), "popupWindow",
"width=600,height=600,scrollbars=yes");
});
});//]]>
</script>
</head>
<body>
google
</body>
</html>
UPDATE
I have found the option how to open the div in new window the code as follows, now I am able to pop out the window with contents in the div, now I need to know how can I access the variable value in the pop out window and how to attach back the pop out window into that original place
Jsfiddle demo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Popup demo
</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
</script>
</head>
<body>
<a href="#" class="popup">
google
</a>
<div id="toNewWindow">
Testing
<input type="button" onclick="test()" value="click">
</div>
<script type="text/javascript">
//<![CDATA[
$('.popup').click(function (event) {
event.preventDefault();
var w = window.open("","myWin","height=400px,width=600px");
w.document.write( $("#toNewWindow").html() );
$('#toNewWindow').detach();
});
var a=3;
function test()
{
alert(a);
}
//]]>
</script>
</body>
</html>
Second edit
Now I have found the way to access the variables in between opener and child, code as follows
Now my problem is
if I have typed in the text box in child.html which is inside the iframe is not showing when on the popout.
Opener
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
var s=document.getElementById('page').innerHTML;
console.log(s);
//var s=document.getElementById('page');
winObj.document.write(s);
//win.parent.detach(win);
}
function changeValue()
{
console.log(winObj.document.getElementById('changer').value);
winObj.document.getElementById('changer').value='changer';
}
</script>
</head>
<body>
<div id="page">
<iframe src="child.html" width="100" height="100"></iframe>
</div>
<div id="page1">
<input type="text" id="text1"/>
<input type="button" value="popup" onclick="openwindow()"/>
<input type="button" value="changevalue" onclick="changeValue()"/>
</div>
</body>
</html>
Child
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
</head>
<body>
<input type="text" value="" id="changer" />
<input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>

I would create a Named Window on the page your window expands from called eg. "HomeWindow".
Then expand window using similar to what you have, except rather using _blank give it a specific name like "ExpandedWindow"
eg.
window.open("http://YourLink.TLD","ExpandedWindow","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
then in the pop up to Retract window use these in a click function.
window.open(document.URL,"HomeWindow");
ExpandedWindow.close();

If I understand the question correctly, you want state preserved when you popout the window. It looks like you are populating the popout HTML from the #page node, which contains an iFrame.
First of all, know that when using an iFrame, any reparenting of the iframe node will cause a reload, losing all state. It's unfortunate ;(
If I were you, I would make it so that all event handling and state management is done in the main window. You're somewhat on the right track. When you open up the popout, if the main window is holding the state you can write that state to the opened window's iframe. Likewise when you close the popout and the iframe mounts back in the main window, you can initialize it with the correct values because the main window is keeping track of the state.
The details of how to do so...I'll leave as an exercise to the reader.

Related

JavaScript Popup Window via OnClick and Inline Styling

all.
I have been dabbling around with JavaScript but I stumbled upon a problem that I am not sure how to get around. What I want to do is create a list of links that have a small fixed pop up window with a message on it.
I made a list like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<li>google.com</li>
<li>espn.com</li>
<li>stackoverflow.com</li>
<li>wikipedia.org</li>
</body>
</html>
But I am not exactly sure what to do to make a pop up screen with fixed dimensions, like 100x100 and it saying something like "Hello." Is there a way to do this with inline styling and implementing the onclick function? I have tried doing this with div tags, a separate styling sheet and so on before, but I am trying to see if there are other methods of doing this.
Thank you.
I have used boot box to create the alert:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script>
$(document).ready(function() {
$( ".openDialog" ).on( "click", function() {
bootbox.alert('Hello');
});
} );
</script>
<body>
<li>google.com</li>
<li>espn.com</li>
<li>stackoverflow.com</li>
<li>wikipedia.org</li>
</body>
</html>
I think you are looking for the window.open() function. You can call it directly with an onClick() as you requested. You can also have full control over the dimensions.
For example, this is how you would make a window pop up that is 100 x 100 with some content inside.
First we open the window with a title MsgWindow window.open("", "MsgWindow", "width=100,height=100");
Then we put content into the window.
myWindow.document.write("<p>This is 'MsgWindow'. I am 100px wide and 100px tall!</p>");
Here is the documentation
https://www.w3schools.com/jsref/met_win_open.asp
Hope that helps

Can I replace the screen with JS or HTML?

Is it possible to use Javascript or HTML to change the the HTML contents?
For example, I have
<HTML>
<head>
<title>Hello!</title>
</head>
<body>
Click the button below to go to page two.
<button type="button" onclick="gotopage2">Click Me!</button>
</body>
</html>
and I am trying to make it to where when the button is clicked, the page changes to:
<HTML>
<head>
<title>Hello!</title>
</head>
<body>
Welcome to page 2!
</body>
</html>
That way, a user can simply click the button and have the page seemingly change without having to load a new page. Like going into a house on a video game.
This is for a mini webapp I'm making, so that when a user clicks an icon, it takes them to a new screen depicting an image and a body of text.
we can use the innerHTML property to change the html element value,
make use the following code sample.
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Welcome to page 2!";
}
</script>
<HTML>
<head>
<title>Hello!</title>
</head>
<body id="demo">
Click the button below to go to page two.
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
Try this
function load_html() {
$("html").html("<head><title>Hello!</title></head><body>Welcome to page 2!</body></html>");
//or another file then use
//$( "html" ).load( "/resources/load.html html" );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<HTML>
<head>
<title>Hello!</title>
</head>
<body>
Click the button below to go to page two.
<button type="button" onclick="load_html()">Click Me!</button>
</body>
</html>
if you'e going to be swapping out a lot of content or multiple pages worth you could use Jquery's .load() to replace the content with a different file:
HTML
<div class="content">
Click the button below to go to page two.
<button type="button" class="replace">Click Me!</button>
</div>
CSS
$(".replace").click(function(){
$(".content").load( "file.html" );
});
otherwise you can just have the text in a variable and swap it like so:
$(".replace").click(function(){
var text = "Welcome to page 2!"
$(".content").html(text);
});
FIDDLE
Or you could just use innerHTML like Manu K M suggested if you want a pure Javascript solution.
Just try this,you just need to Id for your body and in your onclick function should be onclick="gotopage2()" instead of onclick="gotopage2"
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body id = 'newPage'>
Click the button below to go to page two.
<button type="button" onclick="gotopage2()">Click Me!</button>
<script>
function gotopage2()
{
var text = "Welcome to page 2!"
$("#newPage").html(text);
}
</script>
</body>
</html>

How to remove a javascript function in the previous page on jQuery Mobile?

I have a site made up of various html pages in jQuery mobile. On one page I have a javascript function in the content. Upon going to another page, this function still exists. How can I remove it before displaying the next page?
I am using the following, which removes the dom elements on the previous page, but the javascript functions from the previous page are still available.
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
Here's the full code of two pages. Upon clicking from page 1 to page 2, the function testContent which is only on page 1 still works.
Page 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 1z</h1>
Page 2
<div id="test"></div><!-- this div should be removed upon going to the next page -->
<script>
function testContent() {
// this function still exists on the next page, how can it be removed?
alert("testContent");
}
function doPageShow() {
alert("Page 1");
alert($("#test").length); // shows 1 which is correct
testContent(); // function is on this page, so it works
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Page 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 2</h1>
Page 1
<script>
function doPageShow() {
alert("Page 2");
alert($("#test").length); // shows 0 which is correct
testContent(); // why does this still work???
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Javascript objects live until the page refreshes. This is one of the advantages of jquery mobile, as parsing JS can take a long time on mobile devices, it is considered better to do it once.
If you really need to you could set the function to null.
I think I figured this out. Basically in JavaScript a function is just another object like:
doPageShow = function(){...}
Everything set in javascript persists on subsequent ajax loaded pages, so if I set a variable in one page, it will still have that value in another ajax loaded page, including functions.

pop up display near to its parents with javascript

I have some images in my web page, and I want to display a pop up when the user hover the mouse near each image, and when the user move the mouse elsewhere, the pop up disappears
I see this functionality in a lot of site but I don't know how I can do it
I saw jquery UI but the dialog doesn't match to my goal
do you have any idea
I just tested that but no result :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#hover1").mouseenter(function() {
$("#content").fadeIn('fast');
});
$("#hover1").mouseleave(function() {
$("#content").fadeOut('slow');
});
</script>
</head>
<body>
<p id="hover1">
Hover here!
</p>
<div id="content" style="display:none">
Content here!
</div>
</body>
</html>
thank you
wrap image with relative container and put inside absolute container (popup), show him (display:block; from display:none;) onbly then wrap container is hovered. do not forget to set z-index for popup.
You need to use jQuery mouseenter and mouseleave functions:
<p id="hover1">
Hover here!
</p>
<div id="content" style="display:none">
Content here!
</div>
$("#hover1").mouseenter(function() {
$("#content").fadeIn('fast');
});
$("#hover1").mouseleave(function() {
$("#content").fadeOut('slow');
});
http://jsfiddle.net/SzgqR/
Documentation
http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/
Edit
Remember to include jQuery into your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

javascript open page in new tab with IE8

I am trying to open a simple link in a new tab. I have tried searching on google, and stackoverflow but the result says, we need to change settings in browser. Is there a way to do the same using javascript?
Here is the sample script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function gotoNewtab(){
document.forms[0].target="_blank";
document.forms[0].method = "post";
document.forms[0].action = "http://www.google.com";
document.forms[0].submit();
}
</script>
</head>
<body>
<form name="frm">
<p> click the below link to open the page in new tab </p>
<p> <a href="##"
onclick="javaScript:return gotoNewtab();">
click here </a>
</p>
</form>
</body>
</html>
You don't need Javascript.
Just write
...
Write the following JavaScript code to open a new tab
window.open("http://www.targetdomain.com", '_blank');
If you want to use HTML to do it, write the following code:
Click here to open a new tab
The noopener noreferrer attribute is to make sure the new tab doesn't mess around maliciously with the tab that opened it.
This behaviour is up the the specific browser settings. If the IE settings are set to tab-usage, they may be used, unless you specify that the links should open in a new window.

Categories