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.
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.
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>
<!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">
//function del () {
var x= new Date ();
var date= x.getDate ();
var hours= x.getHours();
var minutes=x.getMinutes();
var sec= x.getSeconds();
document.write(minutes +":"+ sec )
if (minutes=="33"){
//alert ("time is over")
document.getElementById('airtel').removeChild(airtel);
}
//}
</script>
</head>
<body>
<div id="airtel">
<div id="vodafone">vodaphone</div>
<div id="idea">idea</div>
</div>
</body>
</html>
Using jQuery Library removes the pain from using Javascript for handling the DOM, i sugest you give it a try.
But if you just want that working in native Javascript, what you need to do is traverse to the parentNode and then remove the child you want.
var element = document.getElementById('airtel');
element.parentNode.removeChild(element);
Maybe you are better off using jQuery with it's remove method for this.
You should get the element of 'airtel' then remove it from it's parent, which is the Body tag.
var airtel= document.getElementById('airtel');
document.getElementsByTagName('body')[0].removeChild(airtel);
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