<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Goodies</title>
<link rel="stylesheet" href="core.css" type="text/css"/>
<meta name="generator" content="DocBook XSL Stylesheets V1.74.0"/>
<script type="text/javascript"> function changestyledisplayblock(id){ var ps = document.getElementsByTagName('p'); for (var i=0; i < ps.length; i++) { if (ps[i].id == id) { if ( ps[i].style.display == 'none' ) {ps[i].style.display = 'block';} else {ps[i].style.display = 'none';} } } } </script>
</head>
<body>
<div class="sect1" title="The Goodies">
<div class="sect2" title="Multimedia">
<div class="titlepage">
<div>
<div>
<h2 class="title">
<a id="multimedia">Multimedia</a>
</h2>
</div>
</div>
</div>
<p class="bubble speech" id="bubble-speech-0 " style="display:none;">*0 : My first one !</p>
<p class="bubble speech" id="bubble-speech-0 " style="display:none;">*0 : My second one !</p>
<p>text <a class="marker" href="javascript:changestyledisplayblock('bubble-speech-0 ')">*0 </a>next</p>
</div>
</div>
</body>
</html>
here my html, i have the error ReferenceError: Can't find variable changestyledisplayblock, i'm not seeing any error, please help ! if i change my html extension to xhtml i dont see the problem any more ??? any explanation ?
That '<' should be a less than sign. Or was that an error in pasting the code?
Also, I'd advise against calling javascript code in anchor tags.
Related
Looking to understand how to display this XML feed into HTML. Simply looking to pull in Soccer Team Names and the Score. Please help!!! If possible, I would love to display basic HTML that pulls in just the team names and scores that are associated with the XML snippet below. Please keep in mind that the file locally was stored as "soccer.xml".
XML Snippet
<?xml version="1.0" encoding="UTF-8"?>
<Soccer>
<Details VisitingTeam="Argentina" VisitorScore="2" HomeTeam="USA" HomeScore="4" />
</Soccer>
//Display it
function displayFEED(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
//Call XML Feed with Live URL
xmlhttp.open("GET", 'soccer.xml', true);
xmlhttp.send();
}
displayFEED(1);
// Call tag names from XML and match ID's
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("Soccer");
document.getElementById("HomeTeam").innerHTML = x[i].getElementsByTagName("Details")[0].childNodes[0].nodeValue;
document.getElementById("HomeScore").innerHTML = x[i].getElementsByTagName("Details")[1].childNodes[1].nodeValue;
document.getElementById("VisitingTeam").innerHTML = x[i].getElementsByTagName("Details")[2].childNodes[2].nodeValue;
document.getElementById("VisitorScore").innerHTML = x[i].getElementsByTagName("Details")[3].childNodes[3].nodeValue;
}
<!doctype html>
<html lang="en">
<head>
<title>Testing Soccer XML Score Feed</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-8">Testing Soccer XML Score Feed</h1>
<hr class="my-2">
<div class="row">
<div class="col-12">
<div id="HomeTeam"></div>
<div id="HomeScore"></div>
</div>
<div class="col-12">
<div id="VisitingTeam"></div>
<div id="VisitorScore"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I get "Cannot read property '0' of undefined" error. I couldn't find the issue. I think javascript file has a problem but I couldn't see. I wrote the script twice but still js file has a problem.
HTML File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>FreeCodeCamp - Local Weather</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="main" class="text-center container">
<h1>FreeCodeCamp - Weather App</h1>
<div class="row" id="fade">
<div style="margin-top: 200px;">
<span id="city"></span>
<span id="country"></span>
<div id="weather"><img id="w-icon"><span id="temp"></span></div>
<span id="description"></span>
</div>
</div>
<div id="author">
<span> Created by Kaan Karaca</span><br>
<span>#GitHub </span><br>
<span>#FreeCodeCamp </span>
</div>
</div>
</body>
</html>
JavaScript File
$(document).ready(function () {
var cityId;
var city;
var unitsFormat = "metric";
var getWeatherInfo = function () {
$.getJSON("http://api.sypexgeo.net/json")
.done(function (locationData) {
cityId = locationData.city.id;
cityName = locationData.country.iso;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?", {
id: cityId,
units: unitsFormat,
APPID: '610ae7b6406da76bb34ad4bb95cc3673'
})
.done(function (weatherDate) {
$("#w-icon").attr("src", "http://openweathermap.org/img/w/" + weatherDate.weather[0].icon + ".png");
$("#temp").text(Math.round(weatherDate.main.temp) + "°C");
$("#city").text(weatherDate.name + ",");
$("#country").text(cityName);
$("#description").text(weatherDate.weather[0].description);
});
});
}
getWeatherInfo();
});
Your code is too trusting that all these calls will work.
In my case, the json from http://api.sypexgeo.net/json correctly locates me, but http://api.openweathermap.org/data/2.5/weather?" has no clue about that city id. Therefore it passes back a json such as:
{
"cod": "404",
"message": "Error: Not found city"
}
This obviously lacks the array weather, so js throws an undefined.
The solution would be to get the specs from the weather api (and location, while you're at it) and check that the response code is good. (I guessed "200" is good. I never got the success case).
$(document).ready(function() {
var cityId;
var city;
var unitsFormat = "metric";
var getWeatherInfo = function() {
$.getJSON("http://api.sypexgeo.net/json")
.done(function(locationData) {
cityId = locationData.city.id;
cityName = locationData.country.iso;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?", {
id: cityId,
units: unitsFormat,
APPID: '610ae7b6406da76bb34ad4bb95cc3673'
})
.done(function(weatherDate) {
if (weatherDate.cod != "200") {
console.log(weatherDate);
console.log("Couldn't find the weather!!!");
return;
}
$("#w-icon").attr("src", "http://openweathermap.org/img/w/" + weatherDate.weather[0].icon + ".png");
$("#temp").text(Math.round(weatherDate.main.temp) + "°C");
$("#city").text(weatherDate.name + ",");
$("#country").text(cityName);
$("#description").text(weatherDate.weather[0].description);
});
});
}
getWeatherInfo();
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>FreeCodeCamp - Local Weather</title>
<script src="//code.jquery.com/jquery-3.0.0.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main" class="text-center container">
<h1>FreeCodeCamp - Weather App</h1>
<div class="row" id="fade">
<div style="margin-top: 200px;">
<span id="city"></span>
<span id="country"></span>
<div id="weather">
<img id="w-icon"><span id="temp"></span>
</div>
<span id="description"></span>
</div>
</div>
<div id="author">
<span> Created by Kaan Karaca</span>
<br>
<span>#GitHub </span>
<br>
<span>#FreeCodeCamp </span>
</div>
</div>
</body>
</html>
I am trying to change my html title depending on the partial that I load for the body.
Parent html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
{{title}}
</title>
</head>
<body>
{{>body}}
</body>
</html>
Partial body.hbs file:
<h1 id="brick-mason">Brick Mason</h1>
<h3 id="what-is-a-brick-mason-">What is a brick mason?</h3>
<p>Brick masons use various stones, concrete and bricks to build walls, walkways, fences, and other structures.</p>
What can I change so that my partial can determine what the title on my main html page displays?
you can do it easily with JavaScript,
just add in the body.hbs :
<script> document.title = 'the title here ' </script>
What I ended up doing was including a second partial in the handlebars file and then splitting them out in the grunt file config.
gruntfile.js
file_context: function(src) {
var fileName = path.basename(src).split(".")[0];
var obj = glob.route[fileName];
var fileString = fs.readFileSync("./" + src, "utf8").split("<split />");
return {
partials: {
header: fileString[0] || "",
body: fileString[1] || "",
},
src: 'src/base.hbs',
dest: path.join('static', obj, 'index.html')
};
}
base.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/index.min.css" />
{{>header}}
</head>
<body>
<div id="nav_background"></div>
<div id="main">
<div id="nav_bar">
<div class="nav left_nav">
BlueCollarJobs101
</div>
<div class="nav right_nav">
States
Jobs
Contact Us
</div>
</div>
<div class="markdown-body">
{{>body}}
</div>
</div>
</body>
</html>
In your Partial.hbs body add the script to manipulate the tags
<h1 id="brick-mason">Brick Mason</h1>
<h3 id="what-is-a-brick-mason-">What is a brick mason?</h3>
<p>Brick masons use various stones, concrete and bricks to build walls, walkways, fences, and other structures.</p>
<script>
const title = document.querySelector('title');
title.innerHTML = 'Partial';
</script>
Hey all i am trying to use javascript with my jsp file as under:
JSP File:
<?xml version="1.0" encoding="UTF-8" ?>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>title goes here</title>
<link rel="icon" href="scripts/assets/favicon.ico" type="image/x-icon"/>
<%--
Ajax code to refresh the main page's contents.
This ajax code is specific to the home page not
for all so it is kept outside the main script file.
--%>
<script type="text/javascript" src="scripts/AjaxRefresh.js"></script>
<script type="text/javascript" src="scripts/MainScript.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/MainStyle.css" />
</head>
<body>
<div class="mainContainer">
<div class="header">
header
</div>
<div class="leftNavigation">
Home
<br/>
Home
<br/>
Home
<br/>
Home
<br/>
Home
<br/>
Home
<br/>
Home
<br/>
Home
</div>
<div class="mainContentArea">
Main Content Area
</div>
<div class="rightTabBar">
Right Tab Bar
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
and the MainScript.js file is as under:
window.onload = initAll();
function initAll(){
var navigationButton = document.getElementsByTagName("a");
for ( var int = 0; int < navigationButton.length; int++) {
if(navigationButton[int].className == "navigationButton")
navigationButton[int].onclick = animateLink;
}
}
function animateLink(){
this.className = "navigationButtonActive";
return false;
}
but when i tried to execute this code i found that javascript code is not working properly and with firebug i found the variable navigationBUtton is an empty array.
Actually i am from PHP background so don't know precisely the concepts of jsp so what sort of problem here is??
PS: I am using eclipse 3.5 with apache tomcat6 as web server in ubuntu 10.10 platform.
thanks :)
You're assigning the outcome of the function to the window.onload instead of letting it point to a function name.
Replace
window.onload = initAll();
by
window.onload = initAll;
or just do
window.onload = function() {
var navigationButton = document.getElementsByTagName("a");
for ( var int = 0; int < navigationButton.length; int++) {
if(navigationButton[int].className == "navigationButton")
navigationButton[int].onclick = animateLink;
}
}
See also:
window.onload documentation in MDC
Note that this problem is unrelated to JSP.
This code attempts to dynamically switch the class of the StateContainer div from StateOne to StateTwo to alternate the visibility of the DIV.
When I run it, I always see the following both before and after clicking the button.
Visible first
Visible first
Visible first
Visible first
Would appreciate any suggestions for why this code does not work the way I'm expecting.
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('.x').click(
var s = document.GetElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
);
});
</script>
</head>
<body>
<button class="x">Change StateContainer</button>
<div class="StateOne" id="StateContainer">
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
</div>
</body>
</html>
It looks like you're not using the click event properly. You need to provide it with a function:
$('.x').click(function() {
var s = document.getElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});
Also, if you're already using jQuery, the following syntax is much shorter than document.getElementById (which doesn't have a capital G, by the way):
var s = $("#StateContainer")[0];
Steve