Checking Visited Websites with javascripts - javascript

Hello I am walking through the code which check if a user has visited websites before. and the code is as follows
<html>
<body>
<H1> Visited </H1>
<ul id = "visited"></ul>
<H1> Not visited</H1>
<ul id ="notvisited"></ul>
<script>
var websites =[
"http://www.facebook.com",
"http://www.instagram.com",
"http://google.com",
"http://twitter.com"
];
for( var i = 0; i < websites.length; i++)
{
var link = document.createElement("a");
var linebreak = document.createElement("br")
link.href = websites[i]
link.id = "id" + i
link.innerHTML = websites[i] + " "
document.write("<style>")
document.write("#id" + i + ":visited{ color: #FF0000; }");
document.write("</style>")
document.body.appendChild(link)
document.body.appendChild(linebreak)
var color = document.defaultView.getComputedStyle(link,null).getPropertyValue("color");
document.write(color)
document.body.appendChild(linebreak)
if (color == "rgb(255, 0, 0)"){
var item = document.createElement('li');
item.appendChild(link);
document.getElementById('visited').appendChild(item);
}
else {
var item = document.createElement('li');
item.appendChild(link);
document.getElementbyId('notvisited').appendChild(item);
}
}
</script>
</body>
</html>
When I check the colors of at the browser. it has changed visually but it has not change at document.write(color) showing rgb(0,0,238) still.
So, the problem I am facing and question would like to ask are is as follow :
Why does color does not change in value showing rgb(0,0,238) at document.write() although it changed visually?
'else' is not seemed to working here unless I replaced it with if (color == rgb(0,0,238) so why it happened there?
so please kindly help me the above problem. Many thanks in advance

Checking the color of :visited in JavaScript has been a security/privacy vulnerability that was closed long ago. That is why the underlying values have not changed.

Related

Losing CSS styling upon printing

I am using a style sheet to properly print out a webpage. The webpage has fields sat next to each other but upon printing these fields no longer sit next to each other but instead cascade down the sheet. I have created a style sheet but I'm not sure exactly how that is supposed to stop this from happening unless I hard code into the style sheet what I want to happen. Unfortunately I can't do that because I need to print out several different pages that have different layouts.
Is there any way to fix this?
function removeLinks(printDiv) {
var all_links = document.getElementById(printDiv).getElementsByTagName("a");
for (var i = 0; i < all_links.length; i++) {
all_links[i].removeAttribute("href");
}
}
function printdiv(printDiv) {
var divCaseNote = document.getElementById(printDiv);
var oldstr = document.body.innerHTML;
var oldTitle = document.title;
if (divCaseNote != null) {
divCaseNote.style = "padding: 20px;";
innerHTML = divCaseNote.innerHTML;
}
removeLinks(printDiv);
var headstr = "<html><head rel=\"stylesheet\" media=\"all\" link href=\"/CSS/style.css\"/><title> </title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printDiv).innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
document.title = oldTitle.replace(" - View Case Note", "");
window.print()
document.body.innerHTML = oldstr;
document.title = oldTitle;
EDIT: A snippet of the html output of this function. It holds all the correct divs for the columns but instead of printing the columns side by side they print cascading down the page.
<div class=\"view-value\" style=\"border-left: none;\">
Jerry</div></div></div>
<div class=\"col-md-3\"><div class=\"media-body\">
<div class=\"view-label\">Participant's Last Name</div>
<div class=\"view-value\" style=\"border-left: none;\">Field</div>
What it should look like
[
What it actually looks like after printing
The problem is that the inline styles are getting obliterated by this statement:
divCaseNote.style = "padding: 20px;";
which removes all the style attribute and replaces it with just the padding.
To add/alter the padding but nothing else you want to change just that property so try:
divCaseNote.style.padding = "20px";

Textbox on a webpage which outputs H1 to H6 and repeating

I dont want anyone to make my homework, i just want to ask if someone can advise me to the right way, before more people put these kind of comments.
I have an assignment where i have to make a webpage with a textbox and a button. The user must put text in the textbox and when pressing the button, it should display in H1. When pressing again it should display in H2, this till H6 and then repeating itself to H1.
The previous assignment asked me to make a Textbox and a Button which only displays the users text in normal letters.
This is the code:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Paragraaf op tekstvlak.</title>
<script>
var index = 1;
window.onload = function() {
document.getElementById('btnKnop1').onclick = function() {
var newElement = document.createElement('div');
newElementid = 'div' + index++;
var node = document.getElementById('txtElement').value;
var newNode = document.createTextNode(node);
newElement.appendChild(newNode);
console.log(newElement);
document.getElementById('div-Result').appendChild(newElement);
}
}
</script>
</head>
<body>
<p>Type hier een boodschap die u in de webpagina wilt zetten</p>
<input type="text" id="txtElement"><br>
<button id="btnKnop1">klik hier voor Heads.</button><br>
<div id="div-Result"></div>
</body>
</html>
If someone could give me advise to solve this puzzle and change this code into what the assignment askes me, i would be thankful. I think i need to use a loop, but im not certain how to. The script cannot contain jQuery.
Instead of div you can create h tag, & update the index.So while index is less than 7 you can create the h+index tag. ALso there is no need of window.load if you put the script near the closing end of the body tag
var index = 1;
document.getElementById('btnKnop1').onclick = function() {
if (index < 7) {
var newElement = document.createElement('h' + index);
var node = document.getElementById('txtElement').value;
var newNode = document.createTextNode(node);
newElement.appendChild(newNode);
document.getElementById('div-Result').appendChild(newElement);
index++;
}
}
<p>Type hier een boodschap die u in de webpagina wilt zetten</p>
<input type="text" id="txtElement"><br>
<button id="btnKnop1">klik hier voor Heads.</button><br>
<div id="div-Result"></div>
Instead of div you can use h tag. The corrected code is given below,
Instead of div you can create h tag
var index = 1;
document.getElementById('btnKnop1').onclick = function() {
var newElement = document.createElement('h' + index);
var node = document.getElementById('txtElement').value;
var newNode = document.createTextNode(node);
newElement.appendChild(newNode);
document.getElementById('div-Result').appendChild(newElement);
index = ++index % 7;
}
<p> Welcome to web designing.</p>
<input type="text" id="txtElement"><br>
<button id="btnKnop1">Change Heading Style</button><br>
<div id="div-Result"></div>

Add space/new line between elements with javascript

So I am attempting to display all the questions and responses from my Firebase database. It is showing up fine, but it looks ugly, because there is no space between the question and responses. I've tried using the createElement feature as well as .innerHTML to add a nonbreaking space. Nothing is working. Here is the code I have thus far: Thanks for your help!
<button id="all" onclick="button()"> View All </button>
<h4> All Users: </h4>
<script>
function button(){
var userRef = new Firebase("https://speedpoll-1fd08.firebaseio.com");
userRef.on("value", function(snapshot) {
// The callback function will get called twice, once for "fred" and once for "barney"
snapshot.forEach(function(childSnapshot) {
// key will be "fred" the first time and "barney" the second time
var key = console.log(childSnapshot.key());
// childData will be the actual contents of the child
// var userInfo = console.log(childSnapshot.val());
var element = document.getElementById("viewAll");
var para = document.createElement("h5");
var node = document.createTextNode("Question: " + childSnapshot.key());
console.log(childSnapshot.child("Option1").child('Response1').val());
var node1= document.createTextNode("Response 1: " + childSnapshot.child("Option1").child('Response1').val());
//var space = document.createElement(" ");
element.innerHTML += " ";
var node2= document.createTextNode("Response 2: " + childSnapshot.child('Option2').child('Response2').val());
var node3= document.createTextNode("Response 3: " + childSnapshot.child('Option3').child('Response3').val());
para.appendChild(node);
//para.appendChild(space);
para.appendChild(node1);
para.appendChild(node2);
para.appendChild(node3);
element.appendChild(para);
});
});
}
</script>
<div id="viewAll">
</div>
You can add a line by adding an <hr> element, as explained here: http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479441
Like this one:
You can also add <div> sections for each element, and style the margins, paddings and borders with CSS. The same for <p> sections.
You can play around with this JSFiddle:
http://jsfiddle.net/jmgomez/n0e1ev8e/
Check this out also on how to style borders with CSS: http://www.w3schools.com/css/css_border.asp

Taking tab example from fiddle ans use in my project

http://jsfiddle.net/738wtmhs/1/
using above example in fiddle in my own project: for the purpose of this exercise I am using DOM methods to create and append the elements.
function GetFeatureProperties(feature) {
//add header to 1st FirstTabContent
var featureHeader = "<center><b> <FONT COLOR='FF6600'> Feature Properties </FONT> </b> </center> </br>";
var FirstTabContent = document.createElement('div');
FirstTabContent.id = "tabs-1";
FirstTabContent.innerHTML = featureHeader;
//Second Tab
var SecondTabContent = document.createElement('div');
SecondTabContent.id = "tabs-2";
var newImage = document.createElement("img");
newImage.src = "http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg";
newImage.width = "100";
newImage.height = "100";
SecondTabContent.appendChild(newImage);
//add li and ul
var DivHolding2Tabs = document.createElement('div');
DivHolding2Tabs.class = "shoptab";
var header2 = document.createElement('h2');
header2.innerHTML = "Feature";
DivHolding2Tabs.appendChild(header2);
var _ul = document.createElement('ul');
var _anchor1 = document.createElement("a");
_anchor1.href = "#tabs-1";
_anchor1.innerHTML = "Info";
var _li1 = document.createElement('li');
_li1.appendChild(_anchor1);
var _anchor2 = document.createElement("a");
_anchor2.href = "#tabs-2";
_anchor2.innerHTML = "Images";
var _li2 = document.createElement('li');
_li2.appendChild(_anchor2);
_ul.appendChild(_li1);
_ul.appendChild(_li2);
DivHolding2Tabs.appendChild(_ul);
DivHolding2Tabs.appendChild(FirstTabContent);
DivHolding2Tabs.appendChild(SecondTabContent);
var jelm = $(DivHolding2Tabs); //convert to jQuery Element
var htmlElm = jelm[0]; //convert to HTML Element
var OuterDiv = document.createElement('div');
OuterDiv.id = "loc-list";
OuterDiv.appendChild(htmlElm);
return OuterDiv.innerHTML;
}
and this looks like the image seen below....if I click on the link 'image' the page jumps a bit but nothing happens and nothing happens when I press 'info' also I have included the CSS in my project so why arnt the tabs showing and yes I am using jquery ui 1.10.3.custom.js
---------------------------------------------------------------------------------------------
UPDATE
<ul id="list"><li><div><h2>Feature</h2><ul><li>Info</li><li>Images</li></ul><div id="tabs-1"><center><b> <font color="FF6600"> Feature Properties </font> </b> </center> <br></div><div id="tabs-2"><img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="100" height="100"></div></div></li></ul>
Also changed from jquery 1.10.3 custom to jquery 1.11.2.custom with all the downloaded tabs selected
If you look at this fiddle, I managed to make it work.
Here's the possible problems
1) I changed return OuterDiv.innerHTML because I needed the <div id="loc-list"> to be part of the code to initialize it. You gave it an id so my guess is you wanted it to be included but by doing innerHTML, you didn't get it.
2) Once your function returns, you need to initialize the tabs with $('#loc-list').tabs();

Understanding nodes and how to append

I've been working on a project that some other developers had started and I'm trying to understand the code while also completing the project. Currently what I have is some json with links and a url text (pretty much a quick description), what I need to do is on a button click I want to display each of the links with their correct text and make it a clickable link. The way this needs to be done is using nodes which I'm not 100% knowledgeable on. If I need to explain this more please let me know also I have provided an example of what I'm currently working with. Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JavaScript And JSON</title>
</head>
<body bgcolor='#CED3F3'>
<button onclick="appendUrl()">Append</button><br>
<br><script id = "i">
function category()
//adding function with button click removes html page styling?
{
var category = {
"content": [
{
"links": "basic information",
"urlText": "Basis Information System",
"urlDesc": "portal for technology development, people search, a keyword search ."
},
{
"links": "http://site.com",
"urlText": "Net",
"urlDesc": "the entry page example"
},
{
"links": "http://newsgroups.com",
"urlText": "Newsgroups",
"urlDesc": "information internal newsgroups, usage, tools, statistics, netiquette"
},
{
"links": "http://site2.com",
"urlText": "Another site",
"urlDesc": "community for transfer of knowledge and technical information"
},
{
"links": "http://news.com",
"urlText": " some news",
"urlDesc": "place with news"
}
]
}
</script>
<script>
function appendUrl()
{
//there needs to be a loop here?
var link = "needs to loop through links?"
var node=document.createElement("LI");
var nodeA=document.createElement("A");
var textnode=document.createTextNode();
node.appendChild(nodeA);
nodeA.appendChild(textnode);
nodeA.href=(link);
nodeA.target="_blank";
document.getElementById("i").appendChild(node);
}
</script>
</body>
</html>
First you are going to need your category function to actually return the json data, otherwise it is of no use to anyone.
function category()
{
var category = {
"content": [
...
]
}
return category;
}
Then you can simply loop over the content array in the category object like this:
var content = category().content;
for (var i = 0; i < content.length; i++) {
var item = content[i];
var link = item.links;
var node=document.createElement("LI");
var nodeA=document.createElement("A");
var textnode=document.createTextNode(item.urlText);
node.appendChild(nodeA);
nodeA.appendChild(textnode);
nodeA.href=(link);
nodeA.target="_blank";
document.getElementById("i").appendChild(node);
}
However, if you're going to be creating list items in the markup, you are going to want to add them to a ul element, so you should have a ul somewhere in your markup like this:
<ul id="i"></ul>
And remove the id="i" from the script tag. You don't want to add the list items to the script.
This is the type of stuff jquery makes very easy to accomplish - if you can use it in your project.
var ul = $("<ul></ul">);
for(var i in category.content){
var li = $("<li></li>");
var a = $("<a href='" + category.content[i].links + "'>" + category.content[i].urlText + "</a>");
li.append(a);
ul.append(li);
}
containerDiv.append(ul);
In your example you also make list items children of a script tag. Not sure what your goal was there but I would have a plain div.
If you really have to do it in plain javascript:
var containerDiv = document.getElementById("parent");
var ul = document.createElement("ul");
for(var i in category.content){
var li = document.createElement("li");
var a = document.createElement("a");
a.href = category.content[i].links;
a.innerHTML = category.content[i].urlText;
li.appendChild(a);
ul.appendChild(li);
}
containerDiv.appendChild(ul);
A fiddle here

Categories

Resources