In HTML structure we have
<html lang="tr">
It is very useful when you need to transform text to upper/lowercase with different languages.
<div style="text-transform: uppercase;" id="asd">iğüşçıâ</div>
I'm working on a single page application, so I can't refresh the page.
But web application is multilingual so I need to change "lang" attribute of html tag without refreshing page.
I tried:
document.documentElement.lang = "en"
It doesn't affect text-transform: uppercase;.
If I manually change the html lang attribute in HTML file and reload the page, it works fine.
How can I done this? Is there a way?
Thanks advance.
update:
Some Stackoverflow users marked this is about ajax, php things. I'm sure sure this question never asked before. This question NOT about ajax and php.
You can use Angularjs to change the language without reloading the page.
For changing the language, you can use the angularjs $scope and change the language of HTML without reloading.
You can use setAttribute for changing or adding new attributes from elements;
document.documentElement.setAttribute("lang","tr")
function changeLangTr() {
document.documentElement.setAttribute("lang","tr")
getText()
}
function changeLangEn() {
document.documentElement.setAttribute("lang","en")
getText()
}
function getText() {
var node = document.getElementById('text')
}
p {
margin-top: 30px;
font-size: 20px;
text-transform: uppercase;
}
p.upper {
text-transform: uppercase;
}
p#info {
font-size: 12px;
color: red;
margin-top: 0;
}
<html name="html" lang="tr">
<body>
<div id="home">
<button onclick='changeLangTr()'>
Change Language TR
</button>
<button onclick='changeLangEn()'>
Change Language EN
</button>
<p id="text">
Türkçe Karakterlerin Kullanımı (iğüşçıâ)
</p>
<strong>Now:</strong>
<p id="info">
Turkish Lowercase
</p>
</div>
</body>
</html>
Related
I have seen many questions like this one, but my question is slightly different.
I wrote an HTML code that can execute another HTML code inside a <div>. The page looks like this:
The code of this page is this:
<html>
<meta name="viewport" content="width=device-width"/>
<style>
html, body{margin: 0; padding: 0;}
textarea {width:100%; height: 28%;}
div {display: block; width: 100%;}
</style>
<body onload="loadData()" onbeforeunload="storeData()" onunload="this.onbeforeunload()">
<div style="overflow: auto;">
<textarea id="code"></textarea>
</div>
<div>
<button onclick="run()" style="float: left;">Run</button>
<button onclick="setSize()" style="float: right;">Set size</button>
<input type="number" id="size" style="float: right; text-align: right;"/>
</div>
<div id="result" style="overflow: auto; height: 70%; border-top: 2px solid black;"></div>
</body>
<script>
const editor=document.getElementById('code');
function run()
{
var res=document.getElementById('result');
var input=editor.value;
res.innerHTML=input;
}
function setSize()
{
editor.style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
}
function storeData()
{
var data=document.getElementById("code").value;
var txtSize=document.getElementById("size").value;
localStorage.setItem("stored", data);
localStorage.setItem("size", txtSize);
}
function loadData()
{
var data=localStorage.getItem("stored");
var txtSize=localStorage.getItem("size");
document.getElementById("code").value=data;
document.getElementById("size").value=txtSize;
editor.style.fontSize=txtSize;
document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
}
</script>
</html>
It is working absolutely correct, except one thing. The problem is that, if a <button> is created and the onclick attribute has this code: document.write('Some text');, then the whole page gets cleared. See these screenshots:
So, can you tell any way by which I can ensure that no changes can be done to the original page?
Please help a class 10 student.
Instead of having 'result' as a regular div element, which is meant to represent a section of the actual page, what you want here is to embed a whole separate page/context, which is something that iframe is used for.
I managed to accomplish what you wanted by replacing the div with an iframe, and the first line in the 'run' method with this:
var res=document.getElementById('result').contentDocument.body;
See this fiddle for an example.
The problem is that, if a is created and the onclick attribute has this code: document.write('Some text');, then the whole page gets cleared.
That is exactly what is supposed to happen when document.write() is called. That function always replaces the entire page with whatever is in the quotes.
The solution is to simply never call that method. If there is some reason why you want to call document.write, you need to explain what that is in your question so we can suggest an appropriate alternative.
I'm honestly just confused on what I should code for this project.
This is for a project I'm working on. Countless attempts I've tried just made me land back to the ground floor.
<!DOCTYPE html>
<html>
<head>
<title>Equation Solver</title>
<style>
/* CSS styles goes here */
form {
margin: auto; /* Centers the Form */
position: center;
text-align: center;
border: 4px solid black;
background:rgb(153, 102, 255);
color: black;
width: 300px;
height: 100%;
padding: 20px 68px;
border-radius: 32px
}
</style>
<script>
//JavaScript code goes here
</script>
</head>
<body>
<h1 align="center"> Solve the Equation </h1>
<form align="center">
<b>Click Me For a Mathematic Equation.</b><br>
<button onclick="ClickMe();">Click Me</button>
</form>
<form align="center">
<b>Submit Your Answer</b><br>
<button onclick="Submit();">Submit</button>
</form>
<form align="center">
<b>Reset</b><br>
<button onclick="Reset();">Reset</button>
</form>
<br><br>
</body>
</html>
One Form should have a button that once clicking it, it will generate a random equation out of 3 saved equations (I'm going to try to write code for a quadratic equation
The Other Form should be where you submit your answer to the random equation that was generated from above. If your answer is correct to the random equation then the background turns green otherwise it turns red. (The second part, I can do on my own)
The Last Form basically reloads your website in the tab.
You just need to write your functions inside the script block (between <script> and </script>, replacing //JavaScript code goes herewith your code.
You have to define the three functions used in the onclick events of the buttons.
ClickMe(), Submit() and Reset()
Defining functions in Javascript
https://www.w3schools.com/js/js_functions.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
Clickme should get a random element from an array
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Getting a random value from a JavaScript array
Maybe you'll need also some dom manipulation function to add the content of the equation somewhere
https://www.w3schools.com/js/js_htmldom_methods.asp
How to add content to html body using JS?
Submit() needs to get some input and compare it to the expected result, so you'll need some input fields on your submit form
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms
https://www.w3schools.com/html/html_forms.asp
Or you should prompt the user to input the answer
https://www.w3schools.com/jsref/met_win_prompt.asp
https://www.webnots.com/create-alert-prompt-confirm-dialog-boxes-using-javascript/
As you are checking the answer to be valid. You'll need to check evaluating the equation exposed and maybe you need eval but remember
eval is evil
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
https://javascriptweblog.wordpress.com/2010/04/19/how-evil-is-eval/
Your Reset() function just needs to reload the page
- How to reload a page using JavaScript
Lets say I have a form field and I want to append a span tag to it. Is it possible to do this with jQuery?
I tried this code:
$("input").append("<span>My HTML to append</span>");
Or would I have to use something else to append HTML.
So it would be something like this:
<input><span>My HTML to append</span></input>
But that wouldn't work.
Something like when you add tags to the question on StackOverflow each tag is a block.
Edit: How did StackOverflow do it when adding tags to the question.
input elements cannot have any child elements, so you can't use append on them.
You can set their value by using jQuery's val method.
They won't render HTML in any case, if you set the value to <span>My HTML to append</span>, that's exactly what you'll see in the input.
Re your edit:
So it would be something like this:
<input><span>My HTML to append</span></input>
That's invalid HTML. Again input elements cannot have content, they're "void" elements. This is why you can't use append on them.
Re your comment below:
How did StackOverflow do it when adding tags to the question.
They don't. Instead, there's an input and when you complete a tag in the input, they remove it and put it in a span in front of the input, so you end up with:
<span>
<span class="post-tag">tag</span>
<span class="post-tag">another-tag</span>
</span>
<input type="text">
In any modern browser, right-click the tags input field and choose "Inspect element" to see this live.
Here's an very quick-and-dirty example of doing this (but there are lots of plugins out there for doing it — tagit, select2 [which one of my clients uses and loves], ...): Live Copy
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>Tags-Like Input</title>
<style>
.input-wrapper {
border: 1px solid #aaa;
}
.post-tag {
border: 1px solid #00a;
margin-right: 2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<input type="text" id="theInput">
</div>
<script>
(function() {
$("#theInput").on("keypress", function(e) {
if (e.which === 32) {
e.preventDefault();
addTag($.trim(this.value));
this.value = "";
}
});
function addTag(tag) {
$('<span class="post-tag"></span>')
.text(tag)
.insertBefore("#theInput");
}
})();
</script>
</body>
</html>
An input element cannot have any child nodes, so no, you can't.
You could set the value (using the .val() method) to a string of HTML if you like.
You could concatenate that string with the existing value.
var $in = $("input");
$in.val(
$in.val() + "<span>My HTML to append</span>"
);
As other's have pointed out input element cannot have a child element.
So in a tagging system the common approach is to use a input element to select a tag once you do that add it to a container element which is placed next to the input element and style it such a way that they look like a single control.
In a very crude way you can use .after()/.before() to do it like
$("input").after("<span>My HTML to append</span>");
But there are already many plugins available to do it, so I would recommend using one of them like select2
I am opening the ckeditor with below content as default.
<textarea id="editor1" name="editor1" rows="30" cols="120"><p>We can use <strong>prettify </strong>to auto-format the Computer programming code at web page.</p>
<p><strong>How to use?</strong></p>
<p>Just add below line;</p>
<p><code class="prettyprint"><span style="line-height: 1.6em;"><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script></span></code</p>
<p><span style="line-height: 1.6em;">Then, put the code line in below tab;</span></p>
<p><code class="prettyprint"><code class="prettyprint">...</code></code></p>
<p><span style="color: rgb(0, 0, 0); font-family: monospace; font-size: medium; line-height: normal;">or,</span></p>
<p>Download the complete code files from https://code.google.com/p/google-code-prettify/(even can learn more about prettify) to your server and change above script tag line like below;</p>
<p><code class="prettyprint"><script src="path/to/directory/run_prettify.js"></script></code><br /> </p>
</textarea>
<script>CKEDITOR.replace( "editor1");</script>
But, in output HTML tag codes are missing. Output is below(under lines);
We can use prettify to auto-format the Computer programming code at web page.
How to use?
Just add below line;
Then, put the code line in below tab;
...
or,
Download the complete code files from https://code.google.com/p/google-code-prettify/(even can learn more about prettify) to your server and change above script tag line like below;
Expecting output:
Please help, where I am missing.
This looks like another similar problem in this question: How to prevent CKEditor from stripping < and > (greater-than/less-than)
The workaround is to use setData to set the value. Below is a test I got working in 4.1 samples.
<textarea id="editor1">
<p>foo</p>
</textarea>
<script>
var txt = '<p>We can use <strong>prettify </strong>to auto-format the Computer programming code at web page.</p><p><strong>How to use?</strong></p><p>Just add below line;</p><p><code class="prettyprint"><span style="line-height: 1.6em;"><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script></span></code</p><p><span style="line-height: 1.6em;">Then, put the code line in below tab;</span></p><p><code class="prettyprint"><code class="prettyprint">...</code></code></p><p><span style="color: rgb(0, 0, 0); font-family: monospace; font-size: medium; line-height: normal;">or,</span></p><p>Download the complete code files from https://code.google.com/p/google-code-prettify/(even can learn more about prettify) to your server and change above script tag line like below;</p><p><code class="prettyprint"><script src="path/to/directory/run_prettify.js"></script></code><br /> </p>'
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.setData(txt);
});
CKEDITOR.replace( 'editor1', { allowedContent: 'p' } );
</script>
I want to embed this Javascript snippet (webform from AWeber) into my website:
<script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"></script>
My site uses the style p { line-height: 1.5em; }. Unfortunately this is also applied to the Javascript snippet and makes it look stupid.
How can I tell the Javascript snippet to use a line-height of 1em instead of 1.5em?
I tried this but it doesn't work:
<p style="line-height: 1em;">
<script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"
</script>
</p>
I also considered using Javascript (document.getElementById('p').style.lineHeight = '1 em';) to change the CSS, but as I understand Javascript modifies the whole website and not only one element...
Can you please help?
Thanks in advance!
div.af-form {
line-height: 1em;
}
In case you need more styling, I see that your generated block also uses these styles: af-header, af-body, af-footer, af-element and af-textWrap.
However, if you need a more universal solution, refer to #Pointy's answer.
Putting the form inside a <p> does not make sense, as <p> cannot contain block-level elements. Use a <div> instead:
<div style='line-height: 1em;'>
<script src = " ... "></script>
</div>
As #Max implicitly noted, it'd be "nicer" to add CSS to style the content.
You can use Firebug or the Chrome/Safari developer tools to examine the styles of "live" page elements. That can help you figure out the reasons that particular elements look a particular way, and it also lets you play around with alterations to the styles.
edit maybe something like:
div.af-form p { line-height: 1em; }