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 >
Related
code is using jquery and i am trying change text into image tag with comma separator so every word i need image tag. in that case when image is replaced 30 Degree Wash is gone.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
$('.pa_wash .attribute-value:contains("iron")').html('<img src="edit.png"/>');
});
</script>
</head>
<body>
<li class="pa_wash">
<span class="attribute-label">Wash : </span>
<span class="attribute-value">30 Degree Wash, iron</span>
</li>
</body>
</html>
$(document).ready(function () {
$('.pa_wash .attribute-value:contains("iron")').html(function () {
return this.innerHTML
.replace("iron", '<img src="edit_0.png"/>')
.replace("30 Degree Wash", '<img src="edit_1.png"/>');
});
});
You need to replace the word iron with your image and then set the html again.
Working fiddle
How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
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>
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
Please have a look on code written below. I am trying to have a multiple timer on one page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
function LoadText()
{
document.getElementById('dd').innerHTML = '<div id=\"defaultCountdown\" class=\"countdown\" rel=\"87401\">hjhg</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"60\">hjgj</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"1800\">hjhg</div><br/>';
}
</script>
</head>
<body>
<div id="dd">
</div>
<script type="text/javascript">
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.#defaultCountdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</body>
</html>
My code works fine when I create Divs Hardcoded. But when I load it through Ajax (For understanding of code, for the time being I am creating Divs using Function LoadText()), I am not able to get it displayed. Please help me out.
For one, you have this:
div.#defaultCountdown
which should be:
div#defaultCountdown
I don't see you calling your LoadText function anywhere
ID's are required to be unique within a document, and your LoadText function does not respect that rule
Unrelated, but you don't need to escape those double quotes inside of your single quoted string in LoadText
You should be using a class or unique IDs for the #defaultCountdown div.
Also this would confuse the selector engine since you are telling it to look for a class with a # sign in it:
$('div.#defaultCountdown').each(function()
Try changing it to a class and use:
$('div.defaultCountdown').each(function()
Update: Ok, the reason why your code isn't working is because the LoadText() function is never called. If you update your script to look like this, it will work (demo):
$(document).ready(function() {
// This is needed to simulate the ajax call
LoadText();
// set up countdown timers
var date = new Date();
$('div.countdown').each(function() {
$(this).countdown({
until: parseInt($(this).attr("rel"), 10),
format: "DHMS",
expiryText: "Expired"
});
});
});
sounds like a timing issue. your jQuery code runs when the data is rendered to the page not after your ajax query completes. Make that a function rather than something to run on ready and call it after the ajax finishes.
Your $('div.#defaultCountdown').each(function() loop runs once when the document is ready - if you subsequently add new divs using Ajax then you need to make sure you re-run your $('div.#defaultCountdown').each(function() code again now that new divs have been added.
The jQuery live() function is good for this.
The working Code if I am not using Ajax Response Text or JavaScript innerHTML. Any solution in this direction will be appriciated. Please find below the modified code that is working. In this code I have created the divs hardcoded. Both the codes can be tested by copying this codes and saving it to html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Count Down Timer</title>
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
**//function LoadText()
// {
// document.getElementById('divo').innerHTML='<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>';
// }**
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.countdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</head>
<body>
<div id="divo">
<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>
</div>
</body>
</html>