I realise this is a bit of an odd question as it's slightly contradictory but I'd like to be able to hide text that doesn't fit into a div. That much is easy but then I need to take the text that is hidden and store it in a js variable so that i can make it visible on a button click so for example:
<html>
<body>
<div style = "height:10px;width:50px;word-wrap:break-word;overflow:hidden">
<p id = "text">Text that is too big for div</p>
</div>
</body>
</html>
JS
var overflow = /*equates to overflow of div*/
$(document).click(function(){
document.getElementById('text').innerHTML = overflow
})
Something like that.
Why not just get rid of the overflow: hidden property on click?
var content = document.getElementById('content'),
button = document.getElementById('unhide');
button.addEventListener('click', function(){
content.style.overflow = 'visible';
});
<button id="unhide" type="button">Unhide</button>
<div id="content" style="height:35px;width:100px;word-wrap:break-word;overflow:hidden">
<p>Text that is too big for div. Text that is too big for div.
Text that is too big for div. Text that is too big for div. </p>
</div>
Related
I am building a javascript file which find the tag on the page and overwrite what HTML has in e.g. when the page load the HTML is seen <h1>This is innerHTML </h1> and after the js file has loaded, it is <h1>This para has been reloaded</h1>.
If the net is fast it won't be visible but as I am creating it for end user/testing, I want to assume the internet is slow so only the JS code is loaded in the selector.
Is it possible?
<div>
<p id="one">This is the inner Text</p>
</div>
let p = document.getElementById("one");
p.innerHTML = "This is now rewritten"
You can make the div visible after your desired event completion like this:
let p = document.getElementById("one");
p.innerHTML = "This is now rewritten";
document.getElementById('myContent').style.display="block";
#myContent{
display:none;
}
<div id="myContent">
<p id="one">This is the inner Text</p>
</div>
How to get all the HTML nodes having text in an optimal way without having to loop through every node?
In other words, grab all HTML nodes having visible text.
For example, if I have a dom as below
<div>
<span>Hello This is a Text Span</span>
<div>
<p> This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div> This is also a visible text</div>
</div>
I should select
span having text Hello This is a Text Span
p having text This is a text Paragraph
button having text This is Button Label
div having text This is also a visible text
The outermost div in the above example doesn't have text of its own so should not be part of the result.
Edit: What problem am I trying to solve?
The framework I use escapes HTML characters in labels of fields, buttons, headings etc.
For example: < is converted to & lt;'
So I am trying to write a client side code which triggers after the page is completely rendered which will unescape all the HTML texts to a readable format.
Any help will be appreciated.
Thanks in advance
The DOM property holds a numeric code indicating the node's type; text nodes use the code 3, So you can find those text nodes by filtering them having nodeType 3.
Wrap your all nodes in a div by giving a class.
Select your content by it's class like this: $(".getTextNodes").contents();.
Filter contents having nodeType 3.
selectedElement = $(".getTextNodes").contents();
textNodes = selectedElement.filter(function() {
return this.nodeType === 3;
});
console.log(textNodes);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="getTextNodes">
<span>Hello This is a Text Span</span>
<div>
<p> This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div> This is also a visible text</div>
</div>
Check this link out to read more.
I'm using just only vanilla js
My algorithm is just select all element that has no element inside it
It means select all element that has directly Text Node
let el = document.querySelectorAll('div,span,p,button');
var arr = [];
el.forEach(function(m){
if (m.querySelectorAll('div,span,p,button').length == 0){
arr.push(m)
console.log(m)
}
})
// console.log(arr)
<div>
<span>Hello This is a Text Span</span>
<div>
<p>This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div>This is also a visible text</div>
</div>
Jsfidle link click here
There's no css selector to get your needs and looping is only the solution.
I'd like to know how to create buttons which can change the content inside a div and if the last clicked button (actual content) is clicked again instead of change it should clear the div.
So far I got the code to create and change the content like this:
HTML
<button onclick="changeNavigation('bl1')">Techniker</button>
<button onclick="changeNavigation('bl2')">Übersetzer</button>
<button onclick="changeNavigation('bl3')">Qualitychecker</button>
<div id="text_content"></div>
<div id="bl1">
<p>This is text 1</p>
</div>
<div id="bl2">
<p>This is text 2</p>
</div>
<div id="bl3">
<p>This is text 3</p>
</div>
JS
function changeNavigation(id) {
document.getElementbyId('text_content').innerHTML= document.getElementbyId(id).innerHTML;
}
With this code so far I can make the content inside the div change by clicking the bottons. But once the box has been filex I can only change the inside content. If I click the button from the actual content again nothing happens but I'd like to clear the content.
Can maybe anyone explain me or link me the name of such a funtion?
Thanks in advance!
Im not really sure what you're trying to get here? If you click a nav item twice to clear the div?
If so try something like this
function changeNavigation(id) {
var textContent = document.getElementbyId('text_content'),
containerDiv = document.getElementbyId(id);
if(textContent.innerHTML === containerDiv.innerHTML){
textContent.innerHTML = '';
} else {
textContent.innerHTML = containerDiv.innerHTML
}
}
What we're doing here is checking if the text_content is the same value as the div you're getting the content from. if so then empty it.
I'm trying to display the content of div with id "hello" in maindiv when clicked on href "Click Here": but that's not working.
Below is my code:
$(document).ready(function() {
var newhtml = ' Click Here';
$('maindiv').append('newhtml');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="maindiv">//empty</div>
<div id="hello">
<h1> Hello World </h1>
</div>
change $('maindiv').append('newhtml'); to $('#maindiv').append(newhtml);
<div id="maindiv">
<div id="hello">
<h1> Hello World </h1>
$(function(){
var newhtml=' Click Here';
$('#maindiv').append(newhtml);
});
JSFiddle Link
The problem lies in the fact that you have quotes around newhtml. Variables do not need to have quotes around them.
$('#maindiv').append(newhtml);
Also, changed the 'maindiv' to have a # in front because you must do that when referring to HTML id's in JQuery. And yeah... This is JQuery.
If I read your question correctly; you want to load the document. Populate #maindiv with a link. When a user clicks on the link it should move the content of #hello to the maindiv.
To get you started:
$(document).ready(function() {
var newhtml=' Click Here';
$('#maindiv').append(newhtml);
}
The code above will add the html to the maindiv correctly. It corrects your coding. But I think that isn't what you were looking for. You want the newly inserted link to also put the content of hello into the main div. The code below should do that.
$(document).ready(function() {
var newhtml=' Click Here';
$('#maindiv').append(newhtml);
$('#maindiv a').click(function(){
$('#maindiv').append($("#hello h1"));
});
});
http://jsfiddle.net/8z3dz109/1/
I am pretty new to JavaScript and hope someone can help me to find a solution for the following:
I have a div with some text in it and an onclick event.
How can I manage that when you click on the div it shows the text inside the div within a textarea and a button above it - similar to how you can edit your own comments on this page here ?
How it looks on default:
<div class="clickable" onclick="TheFunctionIamLookingFor()">Some awesome text.</div>
How it should look on click:
<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">Some awesome text.</textarea>
Many thanks for any help with this, Tim
Try this
function youAreLookingFor() {
var awesomeText = $(this).html();
var $form = $(this).parent();
$(this).remove();
var textArea = '<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">'+ awesomeText +'</textarea>'
$form.append(textArea);
}
If you mean to give a different myBtn and myArea name for each clickable link, then you should give the clickable div an id too and start from there to create the id for the textarea and the button.
There is another way out to make what you want i.e. to make editable div using an HTML property contententeditable=true. You may use the following syntax:
<div contenteditable=true>
contents here
</div>
This facilitates copy+paste image in the div as well as textual edits i.e applying fonts on the texts using keyboard shortcut etc.
Check this fiddle
If you want to use only javascript DOM elements , then
<html>
<head>
<style>
.dip
{
display:none;
}
.dip1
{
display:;
}
</style>
<script>
function TheFunctionIamLookingFor()
{
document.getElementById("myArea").className="dip1";
document.getElementById("myBtn").className="dip1";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<div class="clickable" onclick="TheFunctionIamLookingFor()" >Some awesome text.
<button class="dip" id="b1" type="button" id="myBtn">BtnName</button>
<textarea class="dip" id="myArea">Some awesome text.</textarea>
</body>
</html>