I am building a chrome/firefox web extension. When the user clicks the button in the extension's popup, the extension's UI changes.
Here's a visual example:
Before pressing one of three buttons:
After pressing one of three buttons:
As you can see from the screenshot, after pressing the button, a textarea is created.
Here is the code that does that (this function is called when one of the three original buttons is pressed):
function createSummaryBox(summary) {
console.log("Setting textarea content to: " + summary)
window.location.href = "../summary_page/summary_page.html";
document.getElementById('summary-field').value = summary;
}
However, even when this function is called, the content inside of the textarea does not change.
Instead, I get the following error:
TypeError: document.getElementById(...) is null
Here is the code for "summary_page.html":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../common/common_styles.css" />
<link rel="stylesheet" href="summary_page.css" />
</head>
<body>
<div class = container>
<textarea class="summary-field" type="text" disabled="disabled" id = "summary-field"></textarea>
<div class="btn-group">
<button class="btn">Back</button>
<button class="btn">Copy</button>
<button class="btn">Enlarge</button>
<script src="summary_page.js"></script>
</div>
</div>
</body>
</html>
Also, the sole content of "summary_page.js" is console.log("Summary Page Loaded);, which is printed out to the console.
How do I fix this?
Related
I tried to create an updates list for my web, so that when I click on the relevant update- a new additional small html window will open and I will see the full update content.
This is the code I wrote:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="updatesCtrl">
<span ng-repeat="x in updates">
● {{x.title}}
<br><br>
</span>
</p>
<script>updates();</script>
</body>
</html>
script.js:
function updates(){
angular.module('myApp', []).controller('updatesCtrl', function($scope) {
$scope.updates = [
{title:"update1",update:"update1 content"},
{title:"update2",update:"update2 content"}
];
});
}
function showUpdate(title, update){
var win=window.open('updateWindow.html','newwindow','width=600, height=350');
win.document.getElementById("title").innerHTML=title;
win.document.getElementById("update").innerHTML=update;
return false;
}
updateWindow.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 id="title"></h1>
<p id="update"></p>
</body>
</html>
I have few problems here:
1.When I clicked on the update link, the update window replaced the main page (index.html) window, and also was a full size page.
2. No change was made in the <h1> and the <p> of the updateWindow- although I wrote a script that was suppose to enter an html content to those places.
I don't understand why I didn't get what I expected with this code. Especially, I don't understand the first problem: if I only try to replace the onclick content inside index.html with this: "window.open('updateWindow.html','newwindow','width=600, height=350'); return false;" - I get a new additional window with a smaller size as expected (I won't get the update content inside this window, but at least that solves my first problem).
What is the problem with my code?
Try to use window.open('updateWindow.html','_blank','width=600, height=350'); instead
it looks to me that the window is not loading before you try to update html:
you can see that the html page has not even loaded yet and the dev tools says there is a Uncaught TypeError: Cannot set property 'innerHTML' of null try getting the new page to update it onloadin the update page.
I'm trying to show forms based on the button clicked. That is, on clicking the first button, two other buttons are displayed. However, the new buttons generated behave like dummy buttons (onClick event not working).
How can I resolve this error? Is there any alternative for this to implement the same functionality?
I have the following code:
<html>
<head>
<title>Frequently Asked Questions</title>
<link rel="stylesheet" type="text/css" href="CSSfiles/faqCSS.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script >
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
</script>
</head>
<body>
<p>Put banner and logo on top; Put footer later </p>
<div class="intro">
Looking for help? We provide you information about what can be done when in trouble. Hope you find it helpful!
</div>
<form name="myForm" class="select">
<input type="button" value="ND" class="select-button" onClick="addContent('myDiv', document.myForm1.ND.value);"><br>
<input type="button" value="E" class="select-button" onClick="addContent('myDiv', document.myForm1.E.value);">
</form>
<form name="myForm1" class="select">
<textarea name="ND">
<input type="button" value="Earthquakes" class="trial" onclick="addContent('yourDiv', document.myForm2.HW.value);"/><br>
</textarea>
<textarea name="E"><u>E</u></textarea>
</form>
<form name="myForm2" class="select">
<textarea name="HW">
<u>Hello world!</u>
</textarea>
</form>
<br><br>
<div id="myDiv"></div>
<div id="yourDiv"></div>
</body>
</html>
It is not clear to me how you add the buttons to your DOM (could you post that code?).
However, say that your button has an id of 'MyButton1',
<button id="MyButton1">Hello</button>
then if you do this with jQuery, your code needs to have it delegate the click, by hooking an object that is already existing and will contain your button; for example the body element:
// This is registered before MyButton1 is created.
$('body').on('click', '#MyButton1', function(event) {
alert("Hello, I'm button 1");
}
Using plain javascript, after you have created the new content (so that getElementById can find the button), you need to bind the onclick event:
document.getElementById('MyButton1').onclick = function() {
alert("Hello again");
}
or (not supported on older IEs)
document.getElementById('MyButton1').addEventListener("click",
function() {
alert("Still me");
});
Here you can find a Javascript fiddle with code re: the javascript method.
Initially keep all forms hidden. Put them in the desired division. Onclick of each button only show/hide intended form..
This can help you out.
I have two files, named main_page.html and dialog_box.html (see code below).
I want my handleCloseDialogButton() to "close the dialog box", in other words to reload main_page.html, with theFrame.style.display reset to "none".
How can I do this ? Should I use window.open("main_page.html") or window.location.href="main_page.html" or something else ?
Note: I do not want to use Javascript’s alert() function because its capabilities are not sufficient for what I need.
Contents of main_page.html :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleDialogButton()
{
var theFrame=document.getElementById("myDialogBox");
theFrame.style.display="block";
theFrame;
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. This is the main page.</h2></div>
<iframe id="myDialogBox" src="./dialog_box.html" style="display:none"> </iframe>
<input type="button" id="dbbutton" name="dbbutton" value="Open Dialog Box"
onClick="javascript:handleDialogButton();" />
</body>
</html>
Contents of dialog_box.html :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleCloseDialogButton()
{
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. I am the dialog box.</h2></div>
<input type="button" id="cbbutton" name="cbbutton" value="Close Dialog Box"
onClick="javascript:handleCloseDialogButton();" />
</body>
</html>
You can access parent elements from iframe by using window.parent.
See window.parent for details.
With window.parent you can either call parent js function or you can access parent element. Accessing parent element in your case should look like: window.parent.document.getElementById('myDialogBox');
Use this in your handleCloseDialogButton function and set its display to none:
function handleCloseDialogButton()
{
window.parent.document.getElementById('myDialogBox').style.display="none";
}
NOTE: This will not work in file mode in Chrome. You have to put your pages on web server, and than it will work in Chrome browser too.
I have followed the tutorial on MSDN. The default back button for html/javascript metro style apps does not appear anywhere.
I then created new projects (grid app, blank app, navigation app) and even though it is defined in code, it does not display. However, other apps that have been installed from the Windows Store all display the back button.
Anybody else having this issue with the back button?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Dude!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<p>Content goes here.</p>
</section>
</div>
</body>
</html>
Maybe you've already tried this, but the HTML by itself won't be enough. The button added by the templates requires JavaScript to enable the back button.
By default, the button is added with the disabled attribute set, but script removes that attribute if it determines there's something to navigate back to.
For example, here's the relevant part from the Grid app template (in /js/navigator.js):
// This function updates application controls once a navigation
// has completed.
navigated: function () {
// Do application specific on-navigated work here
var backButton = this.pageElement.querySelector("header[role=banner] .win-backbutton");
if (backButton) {
backButton.onclick = function () { nav.back(); };
if (nav.canGoBack) {
backButton.removeAttribute("disabled");
} else {
backButton.setAttribute("disabled", "disabled");
}
}
},
You can see it looks for the back button by class .win-backbutton and, if nav.canGoBack is true, enables the back button by, er, removing the disabling. :)
Seems my question is too difficult or I am unable to explain my issue properly!!
I am using barelyfitz tabifier.
My html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function loadDetails()
{
alert("here");
document.getElementById('myTab').tabber.tabShow(1);
alert("not here");
}
</script>
</head>
<body>
<h1>Tabber Example</h1>
<div class="tabber" id="myTab">
<div class="tabbertab">
<h2>Tab 1</h2>
<A href="#" onclick="loadDetails()";>Banana</A>
</div>
<div class="tabbertabhide">
<h2>Tab 4</h2>
<p>Tab 4 content.</p>
</div>
</div>
</body>
</html>
As clear, tab 4 is initially hidden as its class is tabbertabhide.
And tab 1 is having a text banana with onclick reference to loadDetails method.
What I want to do is, on clicking banana, I want tab 4 to become visible.
However, document.getElementById line in loadDetails method does not have any effect.
Can any one please help me with this specific technical issue!!
Below is the same issue I asked before in a generalized manner!!
Issue:
I have a webapplication with a search form on the index page which searches for fruits.
Based on the search criteria entered, the result will have a list of fruits. Each member of this will have a call back link to a javascript function. Something like:
<html>
<head>
<script type="text/javascript">
//Function to load further details on fruits
function loadDetails(){
//this will do a call back to server and will fetch details in a transfer object
}
</script>
</head>
<body>
<form method="post">
<A href="#" onclick="loadDetails('banana')";>Banana</A>
<A href="#" onclick="loadDetails('apple')";>Apple</A>
</form>
</body>
</html>
Now my issue is, I want to show the details on a tab which gets generated in a loadDetails function.
Something in the lines of www.barelyfitz.com/projects/tabber/
But dynamic tab generation on the onclick event in the content of first tab.
In other words, first tab will have the clickable list of fruits and on clicking a fruit, a new tab will get opened with more details on that fruit fetched from database.
Is it possible using simple javascript ??
Also, is it possible to do this in jquery without AJAX. I can not use ajax.
I am extremely extremely new to javascript. So I dont know how well am able to describe my question. But have tried my best.
Hope to get some help!!
Can you post this on a fiddle?
Also try the jQuery way of doing it which would be:
function loadDetails()
{
$('.tabbertabhide').show(); //make it appear without any animation OR
$('.tabbertabhide').fadeIn(); //make it to fade in.
}
The above code uses a class selector- in this case your selecting the items with class "tabbertabhide" and making them appear. Similarly you could also use an ID selector if you wanted.