I have this webpage. Here is the raw HTML page.
<body>
<p>GBN: <div id="output"></div>KH/s</p>
</body>
My problem is that the words are on different lines. How would I make it so that the worlds 'GBN:', '0' and 'KH/s' appear all on the same line?
Instead of using a <div id="output"> you could use <span id="output"> which is inherently inline.
Alternatively you could style the <div> with #output { display: inline-block;}.
Use <span> instead of <div>
Use a span instead of a div
<body>
<p>GBN: <span id="output"></span>KH/s</p>
</body>
Related
I have a editor using HTML 5 tag contenteditable, there i'm using span inside contenteditable, when i remove all text then span also removed but i want span should not be removed, how to prevent it?
My Code:--
$('#editor').keyup(function(){
$('#spanText').text($(this).find('span').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
<br><br><hr>
<div id="spanText"></div>
I think there is no straightforward way to achieve that.
You can check the text length of the element to restore the element back.
Demo:
$('#editor').keyup(function(){
if(!$(this).text().length){
$(this).html('<span> </span>');
}
$('#spanText').text($(this).find('span').text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
</div>
<hr>
<div id="spanText"></div>
Move the contenteditable property to the span
<div>
<span contenteditable="true" id="editor">This is my text</span>
</div>
I'm trying to figure out how to target a section of characters from some generated HTML.
The output I have is:
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] This is some other copy.
</div>
The desired output is:
<div class="entry-content">
<span class="hide">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed]
</span> This is some other copy.
</div>
My goal is to wrap the [embed] tags in a <span class="hide"></span> that I can target via CSS. There are multiple instances of this HTML with different links inside the [embed][/embed] so I will most likely need to find a way to wrap the entire code into a span.
I was looking into .wrap(), but with no avail.you.
To achieve this you can use the html() method with a regular expression which pulls out the [embed]*[/embed] pattern and wraps it in a <span>. Try this:
$('.entry-content').html(function(i, html) {
return html.replace(/(\[embed\].+\[\/embed\])/gi, '<span class="hide">$1</span>');
});
.hide { background-color: yellow; } /* just for demo purposes */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] This is some other copy.
</div>
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=dK45JuOsy5H[/embed] This is some other copy.
</div>
I was using innerHTML property in javascript and suddenly I got a problem that the content inside <p><h3>....</h3></p> is not being fully replaced when applying .innerHTML on <p> tag in it. But when I make the same thing in a <div> as <div><h3>....</h3></div> it fully replaces the inner content. Can anyone tell me why is it happening?
See what's happening in this fiddle.
See full code below:
<html>
<head>
<title>innerHTML doubt</title>
<script type="text/javascript">
function changeContent(id){
document.getElementById(id).innerHTML="Content changed in id '"+id+"'.";
}
</script>
</head>
<body>
<p id="p1">
This content is in first <b>'p'</b> tag (can b fully replaced).
</p>
<button onclick="changeContent('p1')">Change upper content</button><hr/>
<p id="p2">
<h3>This content is in second 'p' tag with 'h3' tag inside (will not be replaced fully) </h3>
</p>
<button onclick="changeContent('p2')">Change upper content</button><hr/>
<div id="div1">
This content is in first 'div' (can b fully replaced).
</div>
<button onclick="changeContent('div1')">Change upper content</button><hr/>
<div id="div2">
<h3>This content is in second 'div' inside of 'h3'(will also b replaced fully)</h3>
</div>
<button onclick="changeContent('div2')">Change upper content</button>
</body>
</html>
Its happening because when you use <h3></h3> or any heading tag within p tag ,the closing tag gets out of scope.
Error when i validate code at W3C Markup Validator
See this Fiddle.In this fiddle you will see that in 2nd p only the text outside and before <h3></h3> will be replaced by innerHTML.That means <p> gets closed before <h3></h3> because using h3 within p is invalid.
Only solution
Use CSS style similar to h3 for styling text inside p tags.Demo Fiddle
I am writing $(this).closest('.comment').find('form').toggle('slow'); and the problem is each of the forms in the child is being toggled. I would like only the first form to be toggled. the html is something like the below and this is the a link
<div comment>
<a href>
<form>
</form>
<a href>
<div comment>
<form>
</form>
</div>
</div>
You can use either
$(this).closest('.comment').find('form').eq(0).toggle('slow');
or
$(this).closest('.comment').find('form:first').toggle('slow');
Use :first selector like below :
$(this).closest('.comment').find('form:first').toggle('slow');
using jquery simply use:
$( "form" ).first().toggle('slow');
I use
$([selector]).slice(0, 1)
because it's the most explicit way to select a slice of a query and because it can be easily modified to match not the first element but the next, etc.
The simplest way to get the first result of find is with good old [index] operator:
$('.comment').find('form')[0];
Works like a charm!
Use the below example for jquery find to get the first element
More filtring methods With Demo
$(document).ready(function(){
$(".first").first().css("background-color", "green");
});
.first{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery First Method Example By Tutsmake</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>This is first() method example</h1>
<div class="first">
<p>A paragraph in a div.</p>
<p>Another paragraph in a div.</p>
</div>
<br>
<div class="first">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
<br>
<div class="first">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
</body>
</html>
you can use like this
$(this).find('>.comment').find('>form').toggle('slow');
Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?
Create your own insertAfter function
you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );