I would like to add a close button to close a panel that appears in the browser. For that I have a javascript file that launches the prompt.html file that is my panel.
var panel = require('sdk/panel').Panel({
width : 400,
height : 400,
contentURL : self.data.url('prompt.html')
});
Then in my prompt.html I have the following :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MyPanel</title>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
<body class="din">
<h1>MyPanel</h1>
<div id="div1"></div>
<div id="div2"></div>
</body>
The script contains code to add nodes to the div and display a content. My question is : how can I add a button to close the panel ?
Add a button to your panel.
On click, self.port.emit some message telling your main.js code to hide the panel.
Upon receiving the message, call panel.hide().
Working example
main.js
var self = require("sdk/self");
var panel = require('sdk/panel').Panel({
width : 400,
height : 400,
contentURL : self.data.url('prompt.html'),
contentScriptFile: self.data.url('prompt.js')
});
// On "close" messages from the content script...
panel.port.on("close", function() {
console.log("asked to close");
// hide/close the panel.
panel.hide();
});
// Initially show the panel for testing purposes.
panel.show();
prompt.html
<!doctype html>
<html>
<head>
<title>MyPanel</title>
</head>
<body>
<div>
<a id="close_button">close</a>
</div>
<h1>MyPanel</h1>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
prompt.js
// Wire-up an on click event listener.
document.getElementById("close_button").addEventListener("click", function() {
// Emit a "close" message to main.
self.port.emit("close");
});
Related
I wrote javascript codes.
By clicking the button, the child window pops up and displays a text sent from the parent window using a postMessage function.
My code could sent a text to the child window, but there's no text displayed.
The text is displayed only when I keep clicking the button. I don't want the text to disappear.
I think my code is overridden by a blank script or something, though I don't write any other codes except for below.
Do you have any solution for this?
the parent window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
</head>
<body>
<input type="button" value="TEST_BUTTON" id="testButton">
<script>
var testButton = document.getElementById('testButton');
testButton.addEventListener('click', function(event) {
event.preventDefault();
var newWindow = window.open('./child_window.html', 'popupWindow', 'width=400,height=300');
newWindow.postMessage('this is a content from the parent window.', '*');
return false;
},false);
</script>
</body>
</html>
the child window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pop Up Window</title>
</head>
<body>
<h1 id="mainText"></h1>
<script type="text/javascript">
var mainText = document.getElementById('mainText');
window.addEventListener('message', function(event) {
console.log(event.data);
this.mainText.innerText = event.data;
}, false)
</script>
</body>
</html>
I ended this up using localStorage instead.
I am using below html code for tabs in mobile view
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('a.tab-menu').click(function(){
if ( $(window).width() < 768 )
$('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow');
});
});
</script>
</head>
<body>
<h2 class="responsive-tab">tab 1</h2>
<div id="tab-1"> content here </div>
<h2 class="responsive-tab">tab 1</h2>
<div id="tab-2"> content here </div>
<h2 class="responsive-tab">tab 1</h2>
<div id="tab-3"> link here </div>
</body>
</html>
My question how can I keep the selected tab if click on any link on selected tab and go to link and when I click on back button should back to selected tab
You can look at the location.hash when the page is ready then trigger a click on that tab when the page is loaded.
$(function () {
// Let's see if there's a hash in the url...
var hash = location.hash;
// If there is...
if (hash) {
// Find the link that has the same href value
// as the hash and fake a click on it...
$('a').filter(function () {
return this.href === hash;
}).trigger('click');
}
});
This is the example page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="outerDiv"><div id="innerDiv"><input type="checkbox"></div></div>
<button type="button">Delete</button>
<script>
var inner = document.getElementById('innerDiv');
console.log(inner);
document.querySelector('button').addEventListener('click', function() {
document.getElementById('outerDiv').innerHTML = 'hello world';
console.log(inner);
});
</script>
</body>
</html>
when click the Delete button, outerDiv will change innerHTML, then console the inner value
in chrome
<div id="innerDiv"><input type="checkbox"></div>
but in ie
<div id="innerDiv"></div>
so the variable inner value are different in chrome/ie
It seems that ie browser will remove innerDiv content but not in chrome
I have a parent html file and want the user to click something which should then open a new window (or tab) containing the (dynamically generated) contents of a div in the parent (which is hidden in the parent).
From my reading here and elsewhere something like this should work:
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Parent</title>
<script src="/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="from">
html from parent
</div>
<div id="launcher">
launch child
</div>
<script type="text/javascript">
$("#launcher").click(function() {
var child = window.open('child.html', '_blank', '', false);
if (child) {
var html = $("#from").html();
//window.setTimeout(child.addHTML(html), 5000);
child.addHTML(html);
}
else {
alert('Please allow popups for this site');
}
});
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="to"></div>
<script type="text/javascript">
function addHTML(html) {
$('#to').html(html);
}
</script>
</body>
</html>
However, regardless of using the commented-out setTimeout (incase the child hadn't loaded yet before calling the child's function), I get this error (in Safari, similar in Chrome) immediately:
'undefined' in not a function (evaluating 'child.addHTML(html)')
What am I doing wrong? Is there a better way to achieve my goals?
The first parameter of window.setTimeout should be the function to execute.
Try this:
if (child) {
var html = $("#from").html();
window.setTimeout(function(){child.addHTML(html);}, 5000);
}
I built a small example::
http://jsfiddle.net/rt19hv7v/
if the goal is only to add the content and not to call a function u can do it this way
if (child) {
child.addEventListener('load', function () {
var html = $("#from").html();
$('#to',child.document).html(html)
});
}else {
alert('Please allow popups for this site');
}
My onclick event is firing even without a click. I'm not sure why? Below is my code. The home panel should load first and when the user clicks the aboutButton they should be taken to the about panel.
JS Bin: http://jsbin.com/alebox/1/edit
<!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>
function myOnloadFunc() {
var homePanel = document.getElementById("homePanel");
var aboutPanel = document.getElementById("aboutPanel");
var settingsPanel = document.getElementById("settingsPanel");
var gamePanel = document.getElementById("gamePanel");
var resultsPanel = document.getElementById("resultsPanel");
// All panels in app
var panels = [homePanel, aboutPanel, settingsPanel, gamePanel, resultsPanel];
// Show selected panel and hide all other panels
function showPanel(panel) {
for (var i = 0; i < panels.length; i++) {
if (panels[i] === panel) {
// Show panel
// this referred to global object, i.e. window
panels[i].style.display = "block";
} else {
// Hide
panels[i].style.display = "none";
}
}
}
showPanel(homePanel);
// CODE THAT IS GIVING ME A PROBLEM /////////////////////////
var aboutButton = document.getElementById("aboutButton");
aboutButton.onclick = showPanel(aboutPanel);
// CODE THAT IS GIVING ME A PROBLEM /////////////////////////
}
window.onload = myOnloadFunc;
</script>
</head>
<body>
<!-- homePanel -->
<div class="panel" id="homePanel">
<div align="center">
<p><strong>Web App</strong></p>
<p><a id="playButton">Play</a> <a id="aboutButton">About</a></p>
</div>
</div>
<!-- aboutPanel -->
<div class="panel" id="aboutPanel">
About panel
</div>
<!-- settingsPanel -->
<div class="panel" id="settingsPanel">
Settings panel
</div>
<!-- gamePanel -->
<div class="panel" id="gamePanel">
Game panel
</div>
<!-- resultsPanel -->
<div class="panel" id="resultsPanel">
Results panel
</div>
</body>
</html>
It's firing because you're calling it right away!
So you want:
aboutButton.onclick = function(){showPanel(aboutPanel);};
To attach a function to the event only the reference to the function should be given. You're actually calling the function when using ().
The code to bind the event should be:
aboutButton.onclick = showPanel;