Dynamic HTML page not using css - javascript

I'm trying to dynamically set the content of a popup.
Here is a first HTML page where everything is defined statically :
<html>
<head>
<meta charset='utf-8'>
<link href='css/font-awesome.css' rel='stylesheet'>
<link href='css/myStyle.css' rel='stylesheet'>
</head>
<body>
<div id="data">
<ul class='links-list'>
<li><a target='_blank' href='siteURL'><i class='myButton'>TEXT</i></a></li>
<li><a target='_blank' href='twitterURL'><i class='myButton'>TEXT</i></a></li>
</ul>
</div>
</body>
</html>
Now I need to dynamically set my buttons, so I've removed everything which will be dynamically created :
<html>
<head>
<meta charset='utf-8'>
<link href='css/font-awesome.css' rel='stylesheet'>
<link href='css/myStyle.css' rel='stylesheet'>
</head>
<body>
<div id="data">
</div>
<script type="text/javascript" src="script.js">
</script>
</body>
</html>
My content script "script.js" receive data (array of links) and have to create buttons in my HTML document :
self.port.on("liste", function(list)
{
var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.class = 'links-list';
for (var i = 0; i < list.links.length; ++i)
{
var site = list.links[i];
var li = document.createElement('li'); // Create <li>
var link = document.createElement('a'); // Create <a>
var button = document.createElement('i'); // Create <i>
button.class = "myButton";
link.text = site.text;
link.href = site.url;
link.target = '_blank';
link.appendChild(button);
li.appendChild(link);
ul.appendChild(li);
}
div.appendChild(ul);
});
Issue is links created dynamically aren't using "myStyle.css", here is a comparaison :
Static vs dynamic load :
Could anyone help me resolving this? Thank you.

The correct way to give an item a class using javascript is - unintuitively enough - className, or setAttribute. So either of these will add the correct class:
button.className = 'myButton'
button.setAttribute('class', 'myButton')
Using just .class does not work in Javascript:
document.getElementById('a1').class = 'aClass';
document.getElementById('a2').className = 'aClass';
document.getElementById('a3').setAttribute('class', 'aClass');
.aClass { color: red; }
<pre id="a1">.class</pre>
<pre id="a2">.className</pre>
<pre id="a3">.setAttribute</pre>

Looks to me like the comment from CBroe is the answer. In your javascript you're putting the text into the link instead of your button. That means that the button will essentially be invisible. That's why it looks different from your hard-coded example. Try this javascript instead.
var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.className = 'links-list';
for (var i = 0; i < 4; ++i){
var url = i;
var li = document.createElement('li'); // Create <li>
var link = document.createElement('a'); // Create <a>
var button = document.createElement('i'); // Create <i>
button.className = "myButton";
button.innerHTML = 'text'+i;
link.text = "ab ";
link.href = url;
link.target = '_blank';
link.appendChild(button);
li.appendChild(link);
ul.appendChild(li);
}
div.appendChild(ul);

Related

Can't figure out why it isn't working, anymore

So been trying to learn more javascript, by doing small projects that are simple but are starting stuff. One of the projects is a to-do app which for some people is really simple, but for me as a starter it's quite complex.
Now here is the thing, I had it working for the most part, I can add stuff, and one thing only HALF works, I wrote a bit that adds a X button to a li element. Now it works when I put the li element in the HTML page itself, but when it's added through javascript, it doesn't.
There is no error, it was working before but for some reason it.. broke.
<!DOCTYPE html>
<head>
<title>To Do App!</title>
<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
</head>
<body>
<div id="h1Div">
<h1> To-do app! </h1>
<input type="text" id="inputForList">
<input type="button" id="btnInput" value="Add me!" onclick="btnFunction()">
</div>
<ul id="ulSection">
<li>Test 1</li>
<li>Test 2</li>
</ul>
<script src="Scripts/javascript.js"></script>
</body>
This is the HTML page, super simple.
//Adds li element with input from a textbox
function btnFunction(){
var cLi = document.createElement("li");
var inpList = document.getElementById("inputForList").value;
var txtNode = document.createTextNode(inpList);
cLi.appendChild(txtNode);
//Check to see if anything is filled in, otherwise send message. And 'appends' it to the list item
if(inpList === ''){
alert("Voeg wat toe!");
} else {
document.getElementById("ulSection").appendChild(cLi);
}
// Reset value of Textbox to ""
document.getElementById("inputForList").value = "";
}
//Sets a 'x' on every element.
var ulList = document.getElementsByTagName("li");
var i;
for(i = 0; i < ulList.length; i++){
var span = document.createElement("span");
var xBtn = document.createTextNode("\u00D7");
span.className = "Done";
span.appendChild(xBtn);
ulList[i].appendChild(span);
}
And this is the Javascript.
As stated, it worked before. But for some reason, now the bottom section, the X button (\u00D7) part, it sn't working on the 'new stuff' that I add through the text input..
Your code is good, you just need to do the same thing you did in
var ulList = document.getElementsByTagName("li");
var i;
for (i = 0; i < ulList.length; i++) {
var span = document.createElement("span");
var xBtn = document.createTextNode("\u00D7");
span.className = "Done";
span.appendChild(xBtn);
ulList[i].appendChild(span);
}
in btnFunction() (with the exception of the for loop, which isn't needed in the function, as only one element is added at a time). The reason for this is your code only runs when the page is loaded, or when it is specifically told to run (in your case, on a button click). if you just create an element the js doesn't know to update it with an x, you have to tell it to do so.
//Adds li element with input from a textbox
function btnFunction() {
var cLi = document.createElement("li");
var inpList = document.getElementById("inputForList").value;
var txtNode = document.createTextNode(inpList);
cLi.appendChild(txtNode);
//Check to see if anything is filled in, otherwise send message. And 'appends' it to the list item
if (inpList === '') {
alert("Voeg wat toe!");
} else {
document.getElementById("ulSection").appendChild(cLi);
var ulList = document.getElementsByTagName("li");
var span = document.createElement("span");
var xBtn = document.createTextNode("\u00D7");
span.className = "Done";
span.appendChild(xBtn);
ulList[ulList.length-1].appendChild(span);
}
// Reset value of Textbox to ""
document.getElementById("inputForList").value = "";
}
//Sets a 'x' on every element.
var ulList = document.getElementsByTagName("li");
var i;
for (i = 0; i < ulList.length; i++) {
var span = document.createElement("span");
var xBtn = document.createTextNode("\u00D7");
span.className = "Done";
span.appendChild(xBtn);
ulList[i].appendChild(span);
}
<!DOCTYPE html>
<head>
<title>To Do App!</title>
<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
</head>
<body>
<div id="h1Div">
<h1> To-do app! </h1>
<input type="text" id="inputForList">
<input type="button" id="btnInput" value="Add me!" onclick="btnFunction()">
</div>
<ul id="ulSection">
<li>Test 1</li>
<li>Test 2</li>
</ul>
<script src="Scripts/javascript.js"></script>
</body>

Using javascript to add an image to a list and then deleting that list item when the image is clicked

Firstly I know I can make things a lot easier by creating the ul in HTML. I'm not supposed to be doing that.
My HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="body">
<form id="form" >
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>
</html>
My Javascript so far:
// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML+=element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
document.getElementById('ulId').appendChild(newLi);
newLi.innerHTML=input;
}
var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseover', handlerFunction, false);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height","10");
img.setAttribute("width", "10");
document.getElementsByTagName('li').innerHTML += "img";
}
So what I'm supposed to be doing is first create a list using the listData array, and displaying it on the page. Then I take the user input and add it to the list. This part is working fine
The part I am stuck on is having to create/display an image next to each list item when it is mouseover'ed. Then having to delete that specific list item if the image is clicked. I've created the eventListener, but the img part doesn't seem to be working.
The problem is when you're appending the image to the li element.
Solution:
e.target.appendChild(img);
// Creating Array
var listData = ["Crab", "Lobster", "Scallops"];
// Creating initial List
function listFunction() {
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element) {
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML += element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
document.getElementById('ulId').appendChild(newLi);
newLi.innerHTML = input;
}
var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseover', handlerFunction);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src", "https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height", "10");
img.setAttribute("width", "10");
e.target.appendChild(img);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="body">
<form id="form">
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>
</html>
Hope this helps!
img is not string, it is a variable, so remove the surrounding double quotes from that. Since img is a node element, instead of using innerHTML you should use appendChild(). You also should use the e.target to refer the specific li element:
Change:
document.getElementsByTagName('li').innerHTML += "img";
To
e.target.appendChild(img);
I will suggest you to use mouseenter instead of mousemove. I think you need to attach the mouseleave event as well. You also have to attach the events to the newly created li elements.
Try the following way:
// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML+=element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
newLi.addEventListener('mouseenter', handlerFunction, false);
newLi.addEventListener('mouseleave', removeImage, false);
document.getElementById('ulId').appendChild(newLi);
newLi.insertAdjacentHTML('beforeend', input);
}
var liImg = document.getElementsByTagName('li');
for (let i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseenter', handlerFunction, false);
liImg[i].addEventListener('mouseleave', removeImage, false);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height","30");
img.setAttribute("width", "30");
img.addEventListener('click', function(){
this.closest('li').remove();
});
e.target.appendChild(img);
}
function removeImage(e){
e.target.querySelector('img').remove();
}
<body id="body">
<form id="form" >
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>

MDL upgrade all dynamic list elements on each tab

I have 4 mdl tabs where I dynamically create a list of mdl cards in each one. Each card has a mdl-menu created like this:
// job settings dropdown :
settingsButton.setAttribute('id', 'jobSettings');
var jobUl = document.createElement('ul');
jobUl.className = 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect';
jobUl.setAttribute('for', 'jobSettings');
var jobLi = document.createElement('li');
var jobLi2 = document.createElement('li');
var jobLi3 = document.createElement('li');
jobLi.className = 'mdl-menu__item';
jobLi2.className = 'mdl-menu__item';
jobLi3.className = 'mdl-menu__item';
jobLi.textContent = 'Edit';
jobLi2.textContent = 'Delete';
jobLi3.textContent = 'Pay';
jobUl.appendChild(jobLi);
jobUl.appendChild(jobLi2);
jobUl.appendChild(jobLi3);
Which would show up in html something like this:
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Edit</li>
<li class="mdl-menu__item">Delete</li>
<li class="mdl-menu__item">Pay</li>
Then I do componentHandler.upgradeDom(); hoping to upgrade the mdl-menu items in each unordered list (ul).
This only seems to work for ONE list element (li) in the entire website. it doesn't work for any other element on any other tab.
How do I make my mdl-menu work on each dynamically created list element in each dynamically created ul?
The issue could be that you are duplicating the id value across multiple menu elements (MDL will get confused if there is more than one button with an id value that matches the for value on your menu element). You could add a numerical increment to your id and for values to ensure that each menu is uniquely identified. See the following example.
const fragment = document.createDocumentFragment();
const addCard = (n) => {
const card = document.createElement('div');
const menu = document.createElement('div');
const button = document.createElement('button');
const icon = document.createElement('i');
const ul = document.createElement('ul');
card.className = 'mdl-card mdl-shadow--2dp';
menu.className = 'mdl-card__menu';
button.id = `menu${n}`;
button.className = 'mdl-button mdl-js-button mdl-button--icon';
icon.className = 'material-icons';
icon.textContent = 'more_vert';
ul.className = 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect';
ul.setAttribute('for', `menu${n}`);
fragment.appendChild(card);
card.appendChild(menu);
menu.appendChild(button);
button.appendChild(icon);
menu.appendChild(ul);
for (const action of ['Action 1', 'Action 2', 'Action 3']) {
const li = document.createElement('li');
li.textContent = action;
li.className = 'mdl-menu__item';
ul.appendChild(li);
}
};
for (let i = 0; i < 2; i++) {
addCard(i);
}
document.querySelector('#container').appendChild(fragment);
componentHandler.upgradeDom();
.mdl-card {
margin: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite Cards / Menus</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div id="container"></div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>

Dynamically create html for jQuery tabs

I'm trying to write a page while creating almost all of the html via javascript. I want to use jQuery Tabs in my project. The content gets created, but the tabs are not showing. Is this a CSS issue?
function buildDocument() {
var tabsContainer = document.getElementById("tabs");
tabsContainer.innerHTML = "";
var uList = document.createElement("ul");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
li1.innerHTML = 'One';
li2.innerHTML = 'One';
uList.appendChild(li1);
uList.appendChild(li2);
var t1 = document.createElement("div");
var t2 = document.createElement("div");
t1.id = "tabs-1";
t2.id = "tabs-2";
t1.innerHTML = "Tab1";
t2.innerHTML = "Tab2";
tabsContainer.appendChild(uList);
tabsContainer.appendChild(t1);
tabsContainer.appendChild(t2);
$( "#tabs" ).tabs();
}
And the HTML:
<!doctype html>
<html>
<head>
<script src="main.js"></script>
<script type="text/javascript" src="external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body onload="buildDocument();">
<div id="tabs">
</div>
</body>
</html>
The jQuery files I've downloaded from their website here (everything as default):
http://jqueryui.com/download/
This is what I get
Your code works for me.
My include are:
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js">
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js">
function buildDocument() {
var tabsContainer = document.getElementById("tabs");
tabsContainer.innerHTML = "";
var uList = document.createElement("ul");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
li1.innerHTML = 'One';
li2.innerHTML = 'One';
uList.appendChild(li1);
uList.appendChild(li2);
var t1 = document.createElement("div");
var t2 = document.createElement("div");
t1.id = "tabs-1";
t2.id = "tabs-2";
t1.innerHTML = "Tab1";
t2.innerHTML = "Tab2";
tabsContainer.appendChild(uList);
tabsContainer.appendChild(t1);
tabsContainer.appendChild(t2);
$( "#tabs" ).tabs();
}
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<body onload="buildDocument();">
<div id="tabs">
</div>
</body>
DEMO
Your codes works good for me. The only thing i changed is:
<script type="text/javascript">
$(function(){
buildDocument();
})
</script>
instead of <body onload="buildDocument();"> but is not necessary.
You must load your jqueryui stuff from the right url.
Take a look at https://code.jquery.com/ui/ for all the version.
If you are including jQuery, why don't you consider to short the code
of your function.
An example:
function buildDocument() {
var tabsContainer = $('#tabs');
tabsContainer.empty();
var linkOne = '<li>One</li>';
var linkTwo = '<li>One</li>';
var t1 ='<div id="tabs-1">Tab1</div>';
var t2 ='<div id="tabs-2">Tab2</div>';
tabsContainer.append('<ul>'+linkOne+linkTwo+'</ul>')
tabsContainer.append('<div>'+t1+t2+'</div>');
tabsContainer.tabs();
}
You can also works with array stuff like:
var links=["tab-1","tab-2"];
var tabPg=["Tab1","Tab2"];
is jquery-ui.css loading properly?
Try Google hosted library
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
If jquery-ui.css is loading properly, you should see the default style. Also make sure your HTML is rendered in a right format as https://jqueryui.com/tabs/.

How to get the ParentElement of Object Tag?

I have a SVG graphic embedded via object tag.
<!DOCTYPE html>
<html>
<head>
<title>myTitle</title>
<script type="text/javascript" src="script.js"></script>
<link href="box.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id ="objectcontainer">
<div id="displaybox" style="display: none;"></div>
<object id = "mainSVG" type="image/svg+xml" data="map_complete.svg">
<img id="svgPic" src="map_complete.svg" alt="Browser fail"/>
</object>
</div>
</body>
</html>
In the SVG is a link:
<a id="emerBtn" xlink:href="emergency.html" onmouseover="return playVideo()" target="_parent">
The mouse over event should trigger the following:
function playVideo(){
//not working, all the time null
var doc = document.parentNode;
var elem = document.parentElement;
var otherElem = document.documentElement.parentElement;
//working if triggered from index.html
var thediv = document.getElementById('displaybox');
if(wasViewed == false) //show only one time
{
if(thediv.style.display == "none"){
wasViewed = true;
thediv.style.display = "";
thediv.innerHTML = "<div id='videocontainer'><video autoplay controls style='display:block; margin-left:auto;" +
"margin-right:auto; margin-top:150px; margin-bottom:auto; width:600px'>" +
"<source src='video.mp4' type='video/mp4'>HMTL5-Video not supported!</video>" +
"</div><a href='#' onclick='return palyVideo();'>CLOSE WINDOW</a>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
} //close anyhow
else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
My problem is, that i cannot access the "displaybox" from the svg.
I tried .parentNode, .parentElement, document.documentElement.parentElement etc.
But all the time the parent element/node is null.
Does anyone know how to access the "outer" HTML elements from the object/svg?
An SVG inside an object creates a nested browsing context.
To access elements outside this child document, you need to access the parent document:
function playVideo() {
// ...
var parentDoc = window.parent.document;
var displayBox = parentDoc.getElementById('displaybox');
// ...
}

Categories

Resources