So i have an html document with a running some sample pic.
However I want this data to come from a javascript file? Is this possible?
This is what i have so far:
HTML
<link rel="stylesheet" type="text/css" href="FrontEnd.css"/>
<title> Test script for ticker </title>
</head>
<div class="container">
<body>
<div id="allTop">
<h1>
</h1>
<div class="clearfix">
<div class="forecast">
<div id="pic"></div>
<div id="forecast"></div>
<div id="temp"></div>
</div>
</div>
<div id="ticker">
<marquee>
<img
src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg"
Width=80 Height=80 alt="Milford Sound in New Zealand" />NewZealand
</marquee>
</div>
</div>
<div class="captured">
<div class="graph"></div>
</div>
</body>
</div>
</html>
js function
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i] + 'there should be an img coming in from an array here';
listitems.innerHTML = newListItem;
}
}
So I am confused on how can i append data into marquee tags from this function?
Simple append Data not over write
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i]; //'<img something /. etc etc
listitems[0].innerHTML += newListItem;
}
}
Related
I created a code to display data from XML. I need to filter some data from XML and show in the page. Actually I need to show only three nodes in the page. When click the view all button, need to display other nodes. Please help me to implement the code.
Here is the code.
function showCD(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div>`;
$("#xmldata").append(html);
});
}
<div class="row" id="xmldata"></div>
<section>
<div class="container">
<input type="button" value="View All" id="myButton" class="reveal" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hidden'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>
test.xml
<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD category="new">
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD category="hide">
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CATALOG>
It is just like below image.
http://next.plnkr.co/edit/KgmzSWEaIOBRf54M?open=lib%2Fscript.js&preview
I have updated your code as per your requirement Demo
instead of 2 separate xmldata & xmldataall divs you can use only one div & hide all the children > 2 index.
$(document).ready(function(){
$.ajax({
type:"GET",
url:"test.xml",
dataType:"xml",
success:showCD
});
});
function showCD(xml){
xml = $(xml).children();
let i = 0;
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div>`;
i++;
if(i <= 3) {
$("#xmldata").append(html);
$("#xmldataall").append(html);
}
else{
$("#xmldataall").append(html);
}
});
}
$('#myButton1').click(function () {
var self = this;
change(self);
});
function change(el) {
if (el.value === "View All")
el.value = "Hide All";
else
el.value = "View All";
}
function toggler(divId) {
$("#" + divId).toggleClass("hide");
$("#xmldata").toggle();
}
function directLinkModal(hash) {
$(hash).modal('show');
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row" id="xmldata"></div>
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldataall"></div>
</div>
</div>
</div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
I am using form to pass the data from one page to other page.If i click the apply button will go to other page, i want to display the corresponding title of the career(i.e Java Developer) in the next page.I tried to achieve this with the help of javascript.
career.html:
<form action="job portal.html" method="get" target="_blank">
<div class="section-header text-center wow zoomIn">
<h2>Current Oppournities</h2>
</div><br /><br />
<div class="row">
<div class="col-lg-6">
<div class="box wow fadeInLeft">
<h4 class="title" id="career-title" name="career-title"><i class="fa fa-java"></i> <b>Java Developer</b></h4>
<hr />
<div class="carrer-opt">
<h5 name="test">Software Developer</h5>
<p>
Should have join immediate joiner .
</p>
</div>
<div class="col-lg-3 cta-btn-container">
<input type="submit" id="apply" value="Apply Now" onClick="testJS()" />
</div>
</div>
</div>
</form>
js:
<script src="js/main.js"></script>
<script>
function testJS() {
var b = document.getElementById('career-title').value,
url = 'job portal.html?career-title=' + encodeURIComponent(b);
document.location.href = url;
}
</script>
job portal.html:
<h1 id="here" style="color:black"></h1>
js:
<script>
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('here').innerHTML = data.career-title;
}
</script>
How to acheive this.Anyone please help.
You need to use HTML5 local storage for these kind of problems.
here is solution for your problem.
<script>
function testJS() {
var b = document.getElementById('career-title').value;
var titleText = localStorage.setItem('title', b);
var url = 'job portal.html';
document.location.href = url;
}
</script>
after setting title value get value by referencing id 'title' in your prtal.html script and set value for the element.
<script>
window.onload = function () {
var valueText = localStorage.getItem('title');
document.getElementById('here').innerHTML = valueText;
}
</script>
I want to loop through a JavaScript object and repeat an html script as many times as the object length.
Here, I have the following in a script tag
<script>
var obj;
ipcRenderer.on('requests-results', (event, hosSchema) => {
obj = hosSchema
})
</script>
obj is an array retrieved from Mongo database as the picture below shows:
and I have the following inside <body> tag:
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="card">
<div class="card-content">
<span class="card-title">.1.</span>
<p>.2.</p>
</div>
<div class="card-action">
.3.
.4.
</div>
</div>
</div>
</div>
How can I loop through obj to repeat the code between <div> tag as many times as obj.length?
I would suggest you to use Handlebars as #Amit mentioned.
first move out the code inside <div id="page-inner"> as below:
<div id="page-inner">
</div>
<script id= "requests-template" type="text/x-handlebars-template">
<div class="row">
{{#each requests}}
<div class="col-md-4 col-sm-4">
<div class="card">
<div class="card-content">
<span class="card-title">{{this.fieldName}}</span>
<p>{{this.fieldName}}</p>
</div>
<div class="card-action">
{{this.fieldName}}
{{this.fieldName}}
</div>
</div>
</div>
{{/each}}
</div>
</script>
Then inside another script page of type text/javascript you create the requests and assigned obj/hosSchema to it as below:
<script type="text/javascript">
var requestInfo = document.getElementById('requests-template').innerHTML;
var template = Handlebars.compile(requestInfo);
var requestData = template({
requests: obj
})
$('#page-inner').html(requestData);
</script>
NOTE: you need handlebars package installed (npm install handlebars --save)
Use templating script like Handlebars.js, Mustache.js or underscore.js.
Check below link for more description.
http://www.creativebloq.com/web-design/templating-engines-9134396
Try this:
var divlist = document.getElementsByTagName['div'];
var duplicate = null;
var rowIndex = -1;
var found = false;
for(var i = 0;i<obj.length;i++)
{
if(!found)
for(var p = 0;p<divlist.length;p++)
{
if(rowIndex != -1 && duplicate != null)
{
//set a Boolean to true and break
found = true;
break;
}
if(divlist[p].className == "col-md-4 col-sm-4")
{
//copy the element
duplicate = divlist[p];
}
else if(divlist[p].className == "row")
{
//identify the row's index
rowIndex = p;
}
}
//append the duplicate
divlist[rowIndex].appendChild(duplicate);
}
I am trying to create an onclick event which will show/hide elements of an array however I am struggling with the showSubTabGroup() function below.
Sidenote: Eventually I would like to make this onmouseenter and onmouseleave, rather than 'click' as you see below.
I would like to be able to click on a div and show subsequent div's below as you might expect from a navigation feature.
The console is not returning any errors, however the 'click' function seems alert("CLICKED") properly.
Any help would be greatly appreciated.
Problem:
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', function () {
alert("CLICKED");//Testing 'click' call
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
});
}
function Tab (subTabGroup) {
this.tab = document.getElementsByClassName("tab");
this.subTab = document.getElementsByClassName("sub-tab");
this.subTabGroup = subTabGroup;
}
Tab.prototype.hideSubTabs = function () {
for (var i = 0; i < this.subTab.length; i++) {
this.subTab[i].style.display = "none";
}
}
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', function () {
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
});
}
var tab = new Tab(3);
tab.hideSubTabs();
tab.showSubTabGroup(0,0);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Nav</title>
</head>
<body>
<!-- JQuery CDN -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
</div>
<script type="text/javascript" src="tab.js"></script>
<script type="text/javascript" src="tabEvents.js"></script>
</body>
</html>
The problem of what is this inside the click. It is not your tab code, it is the reference to the element that you clicked on. You need to change that by using bind
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', (function () {
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
}).bind(this));
}
As I read your post, I assume hideSubTabs() is working properly. In that case I will suggest to use in showSubTabGroup():
this.subTab[i].style.display = "initial";
instead of
this.subTab[i].style.display = "";
"initial" will set to its default e.g. as "block" for div and "inline" for span
I see that you also have included jQuery. If I may ask why don't jQuery functions which will do the same with less code:
$('.tab').on('click',function() {
$(this).closest('.container').find('.sub-tab').toggle()
})
$('.tab').click();
$('.tab')[0].click();
I have the following html:
<div id="prog" class="downloads clearfix">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label id="pr1"></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a id="pdfdocument" class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
I want build HTML which is inside the <div id="prog"> with Javascript:
<div id="prog" class="downloads clearfix"></div>
I'm trying to use this Javascript, but without success:
var tmpDocument, tmpAnchorTagPdf, tmpAnchorTagXls, parentContainer, i;
parentContainer = document.getElementById('prog');
for (i = 0; i < documents.length; i++) {
tmpDocument = documents[i];
tmpAnchorTagPdf = document.createElement('a id="pdfdocument" ');
tmpAnchorTagPdf.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagPdf.innerHTML = 'start Download';
tmpAnchorTagXls = document.createElement('a');
tmpAnchorTagXls.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagXls.innerHTML = 'start Download';
parentContainer.appendChild(tmpAnchorTagPdf);
parentContainer.appendChild(tmpAnchorTagXls);
}
If this is a section of code that you will be using more than once, you could take the following approach.
Here is the original div without the code you want to create:
<div id="prog" class="downloads clearfix">
</div>
Create a template in a hidden div like:
<div id="itemtemplate" style="display: none;">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
Then duplicate it with jquery (OP originally had a jquery tag; see below for JS), update some HTML in the duplicated div, then add it to the document
function addItem() {
var item = $("#itemtemplate div.item").clone();
//then you can search inside the item
//let's set the id of the "a" back to what it was in your example
item.find("div.link a").attr("id", "pdfdocument");
//...the id of the label
item.find("div.title label").attr("id", "pr1");
//then add the objects to the #prog div
$("#prog").append(item);
}
update
Here is the same addItem() function for this example using pure Javascript:
function JSaddItem() {
//get the template
var template = document.getElementById("itemtemplate");
//get the starting item
var tempitem = template.firstChild;
while(tempitem != null && tempitem.nodeName != "DIV") {
tempitem = tempitem.nextSibling;
}
if (tempitem == null) return;
//clone the item
var item = tempitem.cloneNode(true);
//update the id of the link
var a = item.querySelector(".link > a");
a.id = "pdfdocument";
//update the id of the label
var l = item.querySelector(".title > label");
l.id = "pr1";
//get the prog div
var prog = document.getElementById("prog");
//append the new div
prog.appendChild(item);
}
I put together a JSFiddle with both approaches here.