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
Related
I want to access variable from iframe without editing iframeContent.html page. I don't know why alert window still shows 'undefined'
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var iframe0=0;
var iframe0document=0;
var inputIframe=0;
function getIframeText() {
var iframe0 = document.getElementById("iframe123");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("wynik2");
alert(inputIframe.value);
};
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe123" src="iframeContent.html" >
</div>
</body>
</html>
iframeContent.html:
<html>
<head>
<title>IFrame Child Example</title>
<script type="text/javascript">
var asd="12";
</script>
</head>
<body>
<div id="wynik2"></div>
<script type="text/javascript">
document.getElementById("wynik2").innerHTML=asd;
</script>
</body>
</html>
Frame on parent page looks good (shows number 12). I'm testing my page on Chrome but through command window typing 'allow file access from files'. So this isn't problem. Global variables are also set (am I doing it right?) so I don't know why is still udefined.
use inputIframe.innerText instead of inputIframe.value . "wynik2" is a div, right? cheers! :)
I'm really new at this and I would like to create collapsible menus using jQuery Mobile. I went over to their site and found this resource:
http://demos.jquerymobile.com/1.4.0/collapsible/
So, I made a test page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="scripts/jquery-1.11.3.js"></script>
<script src="scripts/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div id="div2014" data-role="collapsible">
<h3>2014</h3>
<p>
Q1<br/>
Q2<br/>
Q3<br/>
Q4
</p>
</div>
</body>
</html>
but I can't seem to get it to work. All that gets displayed is this:
Please help! I'm really new at this, so I'm not sure if I'm doing things right :(
You need to include the jquery.mobile CSS file as well.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
make use of jQuery's slideToggle() function on click.
See this pen and click 2014, the menu will be displayed and collapsed on clicking it again
I have this piece of code:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
And something is completely wrong with tooltip - it should appear with styles from jQuery UI but it doesn't, and is wrong placed - it appears, even for button with bigger margin, on the left side of screen (and as I said without any styling, it looks like plain text), even with ,,track" property set to ,,true" it doesn't follow cursor exactly, but still appears on the left side of page and move a little when I move cursor.
I think this is pretty simple example (that code is simplified problem that occurred at my work) and I can't see what am I doing wrong. I will be happy if anybody helps me - thank you in advance.
P.S. Snippet, this is exactly the same behavior as I got in my browser:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
You aren't linking to the css file correctly.
Replace:
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
With:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
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.
Im a jquery starter so if its a wrong one forgive me :)
I just want to know why placing the content at different positions made this script working, although to my best i think script to kept in head section of the document. Please explain the concept.
Working Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
</p>
<script type="text/javascript">
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
</script>
</body>
</html>
Not Working
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
</script>
</head>
<body>
<p>
</p>
</body>
</html>
In the second instance the code is executed before the <p> has been parsed into the DOM tree, so while it still works there's nowhere to put the output text into. In other words, jQuery("p") matches no element so .html() "does nothing".
You can fix this by either waiting for the DOM to be fully parsed:
jQuery(function() {
jQuery("p").html(...);
});
or by using an output mechanism that does not depend on the <p> existing, such as alert() or console.log().
Well, it seems that your browser firstly load <head> section thus in second example there is no p element then.
In both cases you should wrap your code in $(function(){ ... }).
If you place your script before the <body> element, it is executed before the DOM tree is loaded/parsed. The <p> element does therefore not exist and cannot be found. You can:
Place the script after the <body> tag (like in your first example)
or you can call your function after the ready event has been fired:
$(document).ready(function() {
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
});