Let's say I have the div element, inside which there is some text. Is it possible to figure out the length of the text itself? Quite often the length of the div is a lot bigger than the length of the text inside? Here is the image of such div.
The pure javascript solution to that would be great!
Welp, your div is a block element, so if you use Javascript to get the width, it will be of the entire div. I would recommend wrapping your inner text with <span> (inline elements) then look at the width of the span.
<div><span id="foo">Lorem ipsum</span></div>
<script>var width = document.getElementById('foo').offsetWidth;</script>
BTW, I just copied the code from How do I retrieve an HTML element's actual width and height?.
Try this to get the length of text inside div
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(document).ready(function (){
if ($('#test').text().length > 0)
alert($('#test').text().length);
});
</script>
</head>
<body>
<div id='test'>28</div>
</body>
</html>
Related
In my web page, I have two boxes that take up roughly half the width of the screen. The left box is a textarea for writing HTML, the right is a div where the HTML is rendered into as if it were a separate web page. The issue I'm having is that, if someone writes HTML in the textarea and they write CSS for the body element (like background-color), rendering it into the div affects the background of the entire website and not the div, which I would like. I've looked around and have gained an understanding of why the browser behaves this way, but I'm wondering if there's a way to work around it.
Can I, before rendering the textarea's HMTL into the div, search through the textarea and replace any instance of <body> with <div> and </body> with </div>? This way it would only affect the div and not the entire website.
My function that renders HTML is this:
// click 'showmeImg' to render the contents of 'editor' into the 'outputContainer'
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(editor.getValue()));
});
});
For instance, if someone types this into the textarea:
<html>
<head>
</head>
<body style="background-color: blue;">
--Other HTML code--
</body>
</html>
Clicking showmeImg changes the background of the entire web page, and not 'outputContainer'. So ideally, I'd like to have a function that changes the above code to:
<html>
<head>
</head>
<div style="background-color: blue;">
--Other HTML code--
</div>
</html>
before my function renders it into the div.
When I insert this code into my file it seems to block my CSS from showing. I made a script to try and print text once the page has loaded which I am then going to use later to make a loaded bar. This is my code. All that happens is I get the text "Test" printed on my page.
<html>
<head>
<link rel="stylesheet" type="text/css" href="custom.css">
<script>
function myFunction() {
document.getElementById('index').innerHTML = "test";
}
</script>
</head>
<!-- Page Body -->
<body id="index" onload="myFunction()">
<div class="header">
<div id="headerbar"></div>
<ul id="">
</div>
</body>
</html>
When you set the innerHTML of the index element, it completely replaces everything in the body. So you no longer have the DIV with the header class, and you no longer have the DIV with the headerbar ID. There's nothing for your CSS to refer to. It's as if you had written:
<body id="index">test</body>
Well for one we have no way of knowing what your CSS does, but an issue I see is that when you are using innerHTML it overwrites existing HTML. As in everything inside the body tag is overwritten to just test text.
Caveat: My presumption is that you don't have styles on the body either.
What exactly is your CSS supposed to style when you set the innerHTML of your body element to "test" ? You're removing all other contained elements by doing this.
I guess what you wanted to do is add a text node like this:
document.body.appendChild(document.createTextNode("test"));
I want to select all DIVs in my page, including its child iframe.
I have two DIVs here but whenever i try and select them it only grabs the outer one.
<html>
<head></head>
<body>
<div class='xx'>blah</div>
<iframe id='x'>
<html>
<head></head>
<body>
<div class='xx'>blah2</div>
</body>
</html>
</iframe>
</body>
</html>
Is there any way for me to get both DIVs back?
var a = $('.xx');
alert(a.length); //only gives me 1 :(
My fiddle is here :
http://jsfiddle.net/7kvFw/
With only one call this is not possible at all. The iframe is another document so it is not accessable directly. You need to search in all frames seperatly.
By the way your example is not valid. A iframe is just a referece to another document you cannot put the content in the same html document. If you just care about a "box" with the option to scroll inside, just add the another div with the ablity to scroll. This would also allow you to get all .xx elements at once.
See also this fiddle.
Ok, so lets say i have this here:
<head>
<script type="text/javascript" src="mySecondScript.js">
</head>
<body>
<div class="mainScriptContainer">
<script type="text/javascript">
jwplayer('jwplayer-0').setup({
"image": "http://i1.ytimg.com/vi/hHbAEl1Wbms/0.jpg",
"file": "https://www.youtube.com/watch?v=hHbAEl1Wbms"
});
</script>
</div>
</body>
And all I want to do (within "mySecondScript.js" placed in the header) is to select as plain text the entire content of the <script type="text/javascript">...</script> and contain it inside a variable.
I'll try to explain even further with an example of what I could do with it and what effect it should have
function(){
var plainText = ;//here goes the function that select the whole script content witch is itself contained within the
alert(plainText);
};
And this would create an alert saying:
jwplayer('jwplayer-0').setup({"image": "http://i1.ytimg.com/vi/hHbAEl1Wbms/0.jpg", "file": "https://www.youtube.com/watch?v=hHbAEl1Wbms"});
The function can be in Javascript or jQuery, it doesn't matter
You can get that script tag's text by using the .text() function. Please read here to know more about .text()
Try,
$(function(){
var plainText = $('.mainScriptContainer script').text();
alert(plainText);
});
DEMO
<script> elements are element nodes in the DOM, so you can get them like this:
document
.getElementsByClassName('mainScriptContainer')[0]
.getElementsByTagName('script')[0];
And then, to get its inner text, you can use
.innerHTML
.firstChild.nodeValue
.textContent
How to move div to before tag end body </body>. I'm using openx, I cannot change div content, because the content owned by others. I just put code javascript from openx in order to get banner I put the code after tag <body> before anyting tag in content.
And my problem is, when I put javascript from openx to generate banner I get two div parallel, which the banner in <div id="div1"> and <div id="div2"> there are in below tag <body>, I want to <div id="div1"> after tag start body <body> above anyting tag in content. And <div id="div2"> in before tag end body </body> after anyting tag.
This is I get html from openx, as below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div1"><img src="blablabla" /></div>
<div id="div2"><img src="blablabla" /></div>
Here is content other div id or div class,
I not define example insert after div id footer
Because this is content owned by others.
This is justexample content.
</body>
</html>
and I want to transform to as below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div1"><img src="blablabla" /></div>
Here is content other div id or div class,
I not define, example insert after div id footer
Because this is content owned by others.
This is justexample content.
<div id="div2"><img src="blablabla" /></div>
</body>
</html>
Because I want to put banner one above content and banner two to below content. I don't want to use CSS position: fixed.
So, possible to move tag div to before tag end body?
If possible, please help me code javascript to do it.
Thanks.
Plain simple javascript:
document.body.appendChild(document.getElementById('div2'));
To move the node you just use appendChild method.
And the demo http://jsfiddle.net/6GsbB/
Yes. You can do this way, but you need jQuery.
a = $("#div2").clone();
$("#div2").remove();
$("body").append(a);
Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/
Plain JavaScript method.
var a = document.getElementById("div2");
document.body.appendChild(a);
Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/1/
From the comments, this can be made in a better efficient way, given by dfsq:
document.body.appendChild(document.getElementById('div2'));