Given an Input field
<input type="text" />
Type in somer Numbers 000000000000
Now the desired result is: 000 000 000 000
There is no way to do this right now in CSS is there?
No, not in css, but it's simple in JS or PHP Justinas
No, there isn't. You'll need some RegEx and JS. BenM
With pure CSS it is not possible. Rahul Tripathi
You cannot do it in CSS. Wiglaf
With pure CSS it is not possible. However if you are using PHP or Javascript then you can have it. Like for example in PHP you can try like this:
<?php
$str = "000000000000";
echo chunk_split($str, 3, ' ');
DEMO
On a side note:
You can also check about letter-spacing which is used to give space after every character in CSS.
Related
I have a define statement that uses inline styling. When I try to call it with a sprintf function, it fails with Too Few Arguments. The define looks like this
define('TEXT_HEADING', '
<div style="float:left; width:60%; height:44px">
<p>Title Goes here</p>
<p>Show results: %s</p>
');
The call like this:
echo sprintf(TEXT_HEADING, 14);
If i remove the style statement, it works as expected. The original code is quite large and has many inline styles. Moving those to classes may allow it to work but isn't an option. is there a way to get this to work as shown?
You need to escape your literal percent sign, try replacing
width:60%
with
width:60%%
Is it possible to transform a phrase to plural using just CSS, based on the number within the element?
I'm guessing this breaks a presentation/data separation boundary philosophy, but just wondering if it's possible. It's easy with JavaScript, but wondering if CSS can take care of it.
<span class="plural">0 book</span>
outputs: 0 books
<span class="plural">1 book</span>
outputs: 1 book
<span class="plural">2 book</span>
outputs: 2 books
No. CSS cannot read the content of the element to determine what number it is, and CSS doesn't have if conditions.
If you would only apply .plural to items that should be regularly pluralized, you could do:
.plural:after {content: "s"}
But then we run into the problem of how English is irregular, and not all plurals are guaranteed to end in "s".
Going to try answer this myself, as it seems a pure CSS solution is not possible. I've found a small workaround here that works for me. It's not ideal, but may work for others too..
I just render the number behind the plural class name and wrap this around the s. Then I use a class for plural1 that hides the s.
This works for me because I use templates to render my html and it's easy to slot the numbers in.
.plural1 {
display: none;
}
<div>-1 book<span class="plural-1">s</span>
</div>
<div>0 book<span class="plural0">s</span>
</div>
<div>1 book<span class="plural1">s</span>
</div>
<div>2 book<span class="plural2">s</span>
</div>
Pros: This can work for other endings and other languages too. Negative numbers are supported.
Cons: Adds unused classes to your elements (plural2, plural3, etc.) that the browser will need to read and ignore. Not really an issue for a small number of object though (eg. 100).
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?
Any ideas on good ways to apply styling to classes of articles (categories, or anything else?)
Currently, I create a first pass at the article manually, wrapping it in a span:
<span class="foo">
<p>bar</p>
<p>etc</p>
</span>
I then paste the article into JCK Editor, and have a new css file in the template directory to handle class foo.
This doesn't work very well, since JCK Editor moves the span class to the internal elements, producing something like
<p><span class="foo">bar</span></p>
<p><span class="foo">etc</span></p>
This is Ok until you start editing the article with JCK Editor, because the new content doesn't go in the span:
<p><span class="foo">bar</span></p>
<p><span class="foo">etc</span></p>
<p>New unstyled content inserted by JCK Editor</p>
I'm on Joomla3. What would be ideal would be if the name of the category appeared in the html, so I could hang a style on it, but it doesn't.
There are a number of ways to approach this. If you want to add a class to the body tag for this purpose, take a look at how I do it at https://github.com/construct-framework/construct5/blob/master/index.php#L65 and starting at https://github.com/construct-framework/construct5/blob/master/elements/logic.php#L235. This assumes that you are going to edit your template.
You could also whip up a simple plugin to add these classes to you body tag dynamically.
Otherwise, it could be possible to do this with something like http://extensions.joomla.org/extensions/style-a-design/templating/14053
If each category is sitting on own menu item, you may add 'Page Class' suffix for container div (Advanced Options > Page Display Options)
Other way would be adding template override:
copy components/com_content/views/category/tmpl/blog.php to templates/[your_template]/html/com_content/category/blog.php)
And inside of the file change
<div class="blog<?php echo $this->pageclass_sfx;?>">
to
<div class="blog<?php echo $this->pageclass_sfx . ' ' . $this->category->alias;?>">
You should probably not add p-elements inside span-elements, as span is an inline element and should not contain block-elements like p. This is why JCK is switching the elements. If you use a div-element instead, you probably won't have this problem with the text-editor.
Apart from this, I guess both the other respondents have good points.
I have some html stored in database.
I dont know that html stored in databse has extra closing div like </div> or not.
I want to find extra closing div in html string.
I have tried to find using HTML Agility pack but not find the way to achieve this.
Example:
<div class="readers">
A total of 218 users are reading this article.
</div>
</div>
</div>
How can i find these two extra closing div and extract fully valid html.
Use this pure javascript parser before rendering the html: http://ejohn.org/blog/pure-javascript-html-parser/
You can check out by pasting your code here,
http://ejohn.org/apps/htmlparser/
it removes the extra </div>s.
You just need to pass your html to the HTMLtoXML function as:
HTMLtoXML(your_html);
and it would remove the extra closing tags. Infact what it does is that it converts it into xml format, but since you are dealing with html strigs & all tags are expected to be valid in html, you can be safe to use this.
EDIT: You can easily call javascript functions from a C# file. See this question for more details.
Click here to find both unclosed (hanging) as well as extra div tags: tormus