Here is the running code on fiddleYou will see that It is working perfectly fine here but when I run this code in eclipse using glassfish server 3.2.1 in a xhtml page then it gives this error
javax.servlet.ServletException: Error Parsing /MasterPage/MiDASMaster.xhtml: Error Traced[line: 135] Open quote is expected for attribute "{1}" associated with an element type "class".
Here is the code of xhtml page(exactly same like fiddle) I tried it on Jsbin as well
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.highlight {
background:yellow;
}
.removeHighlight {
background:green;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.8.3.js"/>
</head>
<body>
<script type="text/javascript">
function test(){
alert(document.getElementById("divId"));
var regex = new RegExp('this',"gi");
document.getElementById("divId").innerHTML
=document.getElementById("divId").innerHTML.replace(regex, function(matched)
{
return '<span class=\'highlight\'>' + matched + '</span>';
});
}
</script>
<div id="divId">
This is the text This is the text This is the text This is the text
This is the text This is the text This is the the text
</div>
..
Your XHTML is probably malformed.
Put your Javascript code into a CDATA section.
<script type="text/javascript">
<![CDATA[
alert("Your javascript here");
]]>
</script>
Related
How do I get the amount of scroll in a div tag using JavaScript? Please provide me with an example.
I don't want to use jQuery, only JavaScript.
Try this code snippet
<!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 runat="server">
<title></title>
<script type="text/javascript">
function scrollPos() {
var div = document.getElementById("myDiv").scrollTop;
document.getElementById("pos").innerHTML = div;
}
</script>
</head>
<body>
<form id="form1">
<div id="pos">
</div>
<div id="myDiv" style="overflow: auto; height: 200px; width: 200px;" onscroll="scrollPos();">
Place some large content here
</div>
</form>
</body>
</html>
you use the scrollTop attribute
var position = document.getElementById('id').scrollTop;
I'm using JSF 2.1, PrimeFaces 3.3.1.
Trying to put Yandex Maps on my page, to show events on map.
So, my xhtml:
<?xml version='1.0' encoding='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"
...
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition template="./Template.xhtml">
<ui:define name="content">
<script src="//api-maps.yandex.ru/2.0/?load=package.full;lang=ru-RU" type="text/javascript"></script>
<script src="/js/yMapsEditableCircle.js" type="text/javascript"></script>-->
<script type="text/javascript">
var myMapRes;
ymaps.ready(init);
function init() {
myMapRes = new ymaps.Map('resultMap', {
center:["#{calculatorGeo.cgm.selectedCity.latitude}", "#{calculatorGeo.cgm.selectedCity.longitude}"],
zoom:12
});
//taking coordinates from bean to js
var coords = ['#{calculatorGeo.cgm.coords}'];
//#{calculatorGeo.cgm.coords} - String variable containing smth like this: [54.9888,56.3434],[54.458,56.3456],...,[58.23458,55.2345]
var myCollection = [];
for (var i = 0; i<coords.length; i++) {
myCollection.push(new ymaps.Placemark(coords[i]));
}
var clusterer = new ymaps.Clusterer({preset: 'twirl#redClusterIcons',
gridSize: 100,
synchAdd: false,
minClusterSize: 2});
clusterer.add(myCollection);
myMapRes.geoObjects.add(clusterer);
}
</script>
<div id="resultMap" style="width:800px; height:600px; border: 1px solid"></div>
</ui:define>
</ui:composition>
</h:body>
Error in for statement in javascript, what am I doing wrong?
Error text: Fatal Error: Element type "coords.length" must be followed by either attribute specifications, ">" or "/>".
Tried to put js up to the tag, not worked too.
As you are writing XHTML you should define everything inside the script tag as CDATA:
<script type="text/javascript">
//<![CDATA[
// Your JS-Code
//]]>
<script>
The error is because of the < in the head of the for loop.
HTML code:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript" src="highlighter.js"></script>
<link rel="stylesheet" type="text/css" href="highlighter.css"
/>
<script>
$(document).ready(function () {
$("pre.htmlCode").snippet("html");
// Finds <pre> elements with the class "htmlCode"
// and snippet highlights the HTML code within.
$("pre.styles").snippet("css", {
style: "greenlcd"
});
// Finds <pre> elements with the class "styles"
// and snippet highlights the CSS code within
// using the "greenlcd" styling.
$("pre.js").snippet("javascript", {
style: "random",
transparent: true,
showNum: false
});
// Finds <pre> elements with the class "js"
// and snippet highlights the JAVASCRIPT code within
// using a random style from the selection of 39
// with a transparent background
// without showing line numbers.
$("pre#dynamic").snippet("php", {
style: "navy",
clipboard: "js/ZeroClipboard.swf",
showNum: false
});
// Highlights a snippet of PHP code with the "navy" style
// Hides line numbers
$("pre#dynamic").click(function () {
$(this).snippet({
style: "vampire",
transparent: true,
showNum: true
});
// Changes existing snippet's style to "vampire"
// Changes the background to transparent
// Shows line numbers
});
});
</script>
</head>
<body>
<pre class="htmlCode">
<h1>test</h1>
</pre>
</body>
</html>
Here I am trying jQuery Syntax Highlighter. For some reason pre tag with htmlCode class not syntax highlighted.
You have to xml-escape the HTML-tags that should be highlighted. Otherwise the browser will interpret the tags just like any HTML. Have a look at the example I've created.
Replace all < with < and > with >
I have made a Language Translator but that translates hard coded strings in a html page using java script. I would to make it flexible by allowing user enter a string into a textbox/textarea and my app can then translate it for the user.
Any help would be appreciable :)
Heres my code: (please note to enter your own API key)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var content = document.getElementById('content');
// Setting the text in the div.
content.innerHTML = '<div id="text">Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
// Grabbing the text to translate
var text = document.getElementById("text").innerHTML;
// Translate from Spanish to English, and have the callback of the request
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
</body>
</html>
You can use the google translate api
You can make calls to the api and get a translated version. Refer this
Put this in html
<button type="button" onclick="initialize()">Translate</button>
And this in your initialize function if content is a textbox
content.value = "your translated text"
This will change your text in the same box
When I try to run this script i get error in IE:
Unterminated string constant
<!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 runat="server">
<script language="javascript" type="text/javascript">
var designDocumen;
var designEditor;
Initialize();
function Initialize() {
designEditor = $get('myframe');
designDocument = this.designEditor.contentWindow.document;
var outerHTML =
"<!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>" +
"<title>Design Editor Frame</title>" +
"<style type='text/css'>" +
"body {background-color:Green;}"+
"</style>" +
"</head>" +
"<body></body>" +
"</html>";
designDocument.open("text/html", "replace");
designDocument.write(outerHTML);
designDocument.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="myframe" height="500px" width="500px">
</iframe>
</div>
</form>
</body>
</html>
How do I solve this? How to correct this string?
UPDATE:
The problem is with the line:
"<title>Design Editor Frame</title>"
if i remove it, it works!
There's a + missing after "body {background-color:Green;}".
You're missing a + after this line "body {background-color:Green;}".
Four things;
you declare designDocumen but use designDocument later
you need to define the function Initialize() before you call it
you need this script to be place at the bottom of your body element otherwise the iframe will not be available.
you have no definition for $get so you will need to include the correct script library to use this method.