Let's say I typed in a <textarea>:
I
Love
You
Then I save it to phpMyAdmin database. Then I use MySQL to retrieve it from database and display it onto a <div>. Now the output that show in the <div> is :
I Love You
How do I make the <div> show exactly like the database field and textarea which has multiple rows?
If the text is stored exactly as it was entered into the <textarea> (i.e. it still contains the newline; check this by viewing the source of your page), you can use the CSS property white-space: pre on your <div>.
See this jsFiddle example; note how the content of both <div> tags are the same, but produce different output, due to the use of the white-space property in the second <div>.
Replace line returns with <br> tags.
If the textarea supports use of HTML tags (similar to the Stack Overflow answer box that I'm typing in now), then you could type:
I <br>
love <br>
you
and it would render in the way you want it to.
Related
I am trying to transfer a text from a printed book into HTML5, but meanwhile I am trying to keep its thematic and page/paragraph/lines layout structure exactly as it is. For example, every page of the printed book is divided as a <div> section eg. <div class=page id=55> so that it emulates/represents exactly the page unit of the printed book, and also facilitate referencing. I don't care much how the text will be rendered on the browser, this is something that I can think about later. I just want the HTML and the browser to "know" the original pagination and layout of the printed book.
The problem is that in the printed book, some paragraphs or even boxes, tables etc span over to the next page. If I translate it to HTML, I do it like this:
<div class=page id=1>
<p>Once upon a time...</p>
...
<p>...and so the bold knight
</div>
<div class=page id=2>
slew the evil dragon.</p>
<p>Text...</p>
...
This is illegal in HTML, as we have a <p> tag being interrupted by a </div> tag, and then a new div element beginning with a plain text, which is closed by a </p> tag.
HTML would expect me to close the first part of the broken paragraph with a </p>, and continue with a new <p> tag after the div, but I am not doing this because it doesn't correspond to the pagnation of the original book, and would result in half-paragraphs being understood are 2 proper paragraphs.
So, how to use legal HTML while maintaining the theoretical page/paragraph/broken paragraph/page break structure and information, or at least making the brower "know" the original pagination? Is there a more appropriate tag or method to emulate the page break while keeping the page number id?
Perhaps something like
<p>...and so the brave knight<some tag(s) that show page 2 begins here>killed the dragon</p>
How about instead of encapsulating each page within a div you include a tag at the start of each page designating the page number. An aside tag seems appropriate for this.
<aside class="page-number" data-page="1">Page 1</aside>
<p>Once upon a time...</p>
<p>...and so the bold knight</p>
<aside class="page-number" data-page="2">Page 2</aside>
<p class="continued">slew the evil dragon.</p>
<p>Text...</p>
If you need to continue a paragraph then you'll have to break into multiple elements, but perhaps you can specify when a paragraph is a continuation of a previous one. For instance using the continued class as shown above.
If you really don't want to break the p tag then you could put a span within it that is only used for semantic reasons. Something like this;
<p>...and so the bold knight
<span class="page-marker" aria-hidden="true" data-page="1"></span>
slew the evil dragon.</p>
But this kind of makes less semantic sense than the previous solution.
Try adding display: inline; to either the CSS style of the class page or the style attribute of each page div.
I have a large table in my sqlite database with a thousands of entries in a field that hold blocks of text.
In the many paragraphs contained in those entries, there is an html tag that recurs regularly that is formatted like this:
<span class="emphasis bold">EXAMPLE TEXT</span>
I would like to replace these tags with simple <b></b> tags.
Therefore, the above example would be reformatted to look like this:
<b>EXAMPLE TEXT</b>
When I say there are many paragraphs in these entries, that means that several of these tags can appear in a single entry. And, it is not the only html that appears. There are even other <span> tags with different attributes, which makes this a bit tricky.
So, whatever sqlite command I come up with, it needs to be able to replace each occurrence of only the <span> tags with the classes emphasis and bold.
If the paragraph looked this:
This is a <span class="emphasis bold">PERFECT</span> example of
what <span class="keep-this-tag">I AM TRYING TO</span> accomplish.
After the sqlite command is run, it should look like this:
This is a <b>PERFECT</b> example of
what <span class="keep-this-tag">I AM TRYING TO</span> accomplish.
As you can see, only the first tag was changed and not the second one, even though they are both <span> tags, because I only want to change the <span> tags with the attributes emphasis and bold.
How do you think I can tackle this problem?
I will have users input text in a textbox to set as their identifier, however, they can only enter 1 line of text. I have no way of changing that.
I would like to add CSS that takes the string of text and edits a | character and changes it to a <br>
The string of text they will type will be something like this: 1234-5678-1234 | Jim
I want it to show up like this:
1234-5678-1234
Jim
I'm guessing the code might look like this:
p:contains('|') {code for an enter and float right}
I would be posting this as comment but I need 50 rep :)
Just this: What you are trying to do needs JS. You should give RegExp a try. There's not a way to do that using pure css.
It is not possible to select an element on the basis of its textual content, except for the special case of empty content. There was once (in 2001) a draft suggesting a :contains(...) selector, but this feature was removed as the draft progressed (to eventually become Selectors Level 3 recommendation).
Still less is there a way to select something inside an element based on its content.
Besides, adding <br> would not be possible. You cannot add tags or elements with CSS, only textual content via pseudo-elements.
Moreover, if the input is read in an input element, you cannot make its content displayed in two lines. If the user input is actually echoed an in different element, like p element, then it is programmatically copied there, so the question is why the change is made there. You can modify the content with JavaScript, and it would be rather simple to replace any | by <br> in the content of a p element.
You should give a try using <div contenteditable="true"></div>. You would be able to solve your issue, using JS by wrapping and adding tags as necessary. Also, textbox wont support multiline & formatting.
A good read for contenteditable attribute on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
I did some testing and created the following RegExp: Example Here
<input type="text" id="demo" value="123-456-7890 | John Doe" size="35">
<button onclick="myFunction()">Try it</button>
<p style="text-align:left;" id="number"></p>
<p style="text-align:right;" id="name"></p>
<script>
function myFunction() {
var str = document.getElementById("demo").value;
strnum = str.indexOf('|');
var name = str.slice(strnum+1);
var number = str.slice(0,strnum);
document.getElementById("number").innerHTML = number;
document.getElementById("name").innerHTML = name;
}
</script>
Is this what you want?
I am trying to extract content from a XHTML document-- in this document, within a div, there are a number of 'b' elements, each followed by a link.
For eg--
<div id="main">
<b> Bold text 1</b>
some link 1
<b> Bold text 2</b>
some link 2
<b> ABRACADABRA</b>
abracadbralink
</div>
Now, I want to extract the link 'abracadabralink'-- the problems are that, I dont know how many and elements are there before this specific link-- in different documents there are a different number of such elements- sometimes there are many links immediately after a single element-- all I do know is that the text for the element that occurs just before the link that I want, is always fixed.
So the only fixed information is that I want the link immediately after the element with known text-- how do I get this link using XQuery?
If I get it right, you are interested in the value of the #href attribute? This can be done with standard XPath syntax:
doc('yourdoc.xml')//*[. = ' abracadbralink']/#href/string()
For more information on XPath, I’d advise you to check out some online tutorials, such as http://www.w3schools.com/xpath/default.asp
I guess the following should work for you:
$yournode/b[. = ' ABRACADABRA']/following-sibling::a/#href/string()
<input class="ui-autocomplete-input"/> represents the text field to be autocompleted.
<ul>...</ul> contains the list of matching items from the text field input. It is added to the document by remote call as you type.
<ul>...</ul> is added just inside the closing </body> tag. I was expecting the <ul>...</ul> to be placed just after the <input class="ui-autocomplete-input"/>. Because this does not happen, the <ul>...</ul> falls outside of the containing div and the resulting style is broken.
Suggestions? Can I specify where the <ul>...</ul> gets placed in the document? Thanks in advance for your time.
Post your source (so we can see exactly what we're working with here) but basically you need just need to find the parent and then appendTo
$("ul").appendTo($("input.ui-autocomplete-input").parent());