<div></p> causes layout problems - javascript

I am trying to translate <p></p> content with this method I found online:
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="translate">
<div>Тестирование</p>
<div class="translate_control" lang="en"></div>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body>
</html>
Fiddle
As you can see for this to work the translatable text is enclsoed in <div></p> which I have never encountered before and it messes up the layout which doesn't happen with just <p></p> or <div></div>
Can somebody explain what is going on and is there a fix to this?

Try this way, <div></p> is simply wrong:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="translate">
<p>Тестирование</p>
<div class="translate_control" lang="en"></div>
</body>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</html>

Related

Tensorflow coco-ssd could not load

I'm having a problem saying that my cocossd cant load. Do you know whats the issue?
This is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/coco-ssd"></script>
<img id="img" src="https://www.cdc.gov/importation/images/cat.jpg?_=18560"/>
<script>
const img = document.getElementById('img');
cocoSsd.load().then(model => {
model.detect(img).then(predictions => {
console.log('Predictions: ', predictions);
});
});
</script>
</body>
</html>

HTML does not display as expected

I have 2 files,
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./test/jquery.min.js"></script>
</head>
<body>
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p id="11" ></p>
<script> $( "#11" ).load( "end.html") </script>
</body>
</html>
end.html
info:No
Creation time:2020.05.01-17.03
Change the time: <script>document.write(document.lastModified);</script>
There are two display effects:
Number One and Number Two
Reproducing this effect:
test1
test2
test3
test4
info:No
Creation time:2020.05.01-17.03
Change the time:05/24/2020 09:19:23
Are you sure your JQuery URL is being picked up, maybe add a direct link in header of your test.html
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
Also, don't forget to close your statements off with a semi-colon
<p>test4</p>
<p id="11" ></p> <script>$("#11").load("end.html");</script>
Also, I don't know if that script is running there, maybe do the following at the bottom of your page instead of putting the script tag there. This will execute the line when the HTML Dom is loaded
<script>
$(document).ready(function(){
$('#11').load("end.html");
});
</script>
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./test/jquery.min.js"></script>
</head>
<body>
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<script src="end.js"></script>
</body>
</html>
end.js
document.writeln("<p>info:No");
document.writeln("Creation time:2020.05.01-17.03</p>");
document.writeln("Change the time:<script>document.write(document.lastModified);</script>");
ok

JQuery '$' getting "ReferenceError: $ is not defined" when in my .JS file

My code works when I write the JS in HTML like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
<script>
$("#submitButton").on("click", function() {
console.log("result!");
});
</script>
</body>
but when I split it out into it's own .js file, the JS file doesn't recognise the JQuery '$' sign. This is how it currently looks in both HTML and JS (I added the .JS source to the HTML file):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
**<script type="text/javascript" src="addressBook.js"></script>**
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
</body>
and in the addressBook.js file:
$("#submitButton").on("click", function() {
console.log("omg, you clicked me!");
I get the following error logged to the console when i click the button:
$("#submitButton").on("click", function() {
^
ReferenceError: $ is not defined
Any help would be appreciated!
Thanks
Wat selfagency said + put the script tag before the end of the body.
html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
<script type="text/javascript" src="addressBook.js"></script>
</body>
</html>
addressbook.js
$('#submitButton').on('click', function() {
console.log('result!');
});
The reason why the script tag in the head in this case doesn't work is because the button did not yet exist in the DOM when the addressBook script was run. Described in more detail here.
I don't think that you need to add the script before the end of the body.
It works after I created addressBook.js and change the jquery
$('#submitButton').on('click', function() {
console.log("omg, you clicked me!");
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="addressBook.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
</body>
</html>
<script>
$("#submitButton").on("click", function() {
console.log("result!");
</script>
That is not proper syntax. It should be:
<script>
$(document).ready(function () {
$("#submitButton").on("click", function() {
console.log("result!");
});
});
</script>

tinyMCE - Add style to <head> on getContent() method

I'm using timyMCE version 3 { majorVersion : '3', minorVersion : '5.4.1' }. When I put Content in textarea, I got below data.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p> Content </p>
</body>
</html>
What should I do to change it to below output as I call getContent() method?
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="UTF-8">
<style>
/** Specify a font named "MyFont",
and specify the URL where it can be found: */
#font-face {
font-family: "MyFont";
src: url('file:///android_asset/fonts/RSU_Regular.ttf');
}
body { font-family:"MyFont"}
</style>
</head>
<body>
<p> Content </p>
</body>
</html>
Can you help me please?

running embedded javascript - a small test file

I've updated the code to reflect input.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <script type="text/javascript" src="../archelib.js"></script> -->
<title>Test - Bookmark List</title>
<style>
</style>
</head>
<body>
<span id="f0e"></span>
<script type="text/javascript">
var arr1=['','a','b','c']
document.write(check_empty(arr1,'f0e','fail'));
function check_empty(text,id,res)
{
for(var d=0;d<text.length;d++)
{
if(text[d].value=='')
{
o2(id,res);
return 0;
}
}
return 1;
}
function o2(a,b)
{
return document.getElementById(a).innerHTML=b;
}
</script>
</body>
</html>
Use type array for the input argument.
change
if(text[d].value=='')
to
if(text[d].value!='')

Categories