Jquery: Target part of a text node on a second line - javascript

I don't know if this is possible. I have an h2 tag with some text:
<div>
<h2>Here Goes a Big Sample Slider</h2>
</div>
It is a big font in a short width div.
h2{
font-size: 69px
}
div{
width: 600px;
}
So it breaks up into 2 lines. Here is a JSfiddle: http://jsfiddle.net/6Qypv/
I would like to always target the second line in the sentence, no matter what the sentence is(It will be user generated), so I can wrap it in a span and give it some properties. I cannot change the HTML directly, though.
Thank you

You could try using the :first-line pseudo-element to do something like:
h2:first-line { /* Normal style */
font-size: 69px
}
h2 { /* Second line */
font-size:13px;
}
Sample fiddle

Related

How to center <div> inside a <button>?

I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?
First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.
can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>
For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}
Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.

jQuery.insertBefore is not respecting the line break

I have a simple html with a div limited by width. Inside I have many span tags that are configured with nowrap. My css:
.content {
width: 50%;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.adder {
color: blue;
cursor: pointer;
}
.added {
position: relative;
white-space: nowrap;
}
And my html:
<div class="content">
<span class="added">A text just a little large 1.</span>
<span class="added">A text just a little large 2.</span>
<span class="added">A text just a little large 3.</span>
<span class="added">A text just a little large 4.</span>
<span class="added">A text just a little large 5.</span>
<span class="adder">Add</span>
</div>
As expected, the text is broken when there is no more space in the line to be placed. Then the entire span is rendered on the next line. Now I added some javascript code:
$(function() {
$(".adder").click(function() {
$(document.createElement("span"))
.addClass("added")
.html("A custom text to be add,")
.insertBefore(this);
});
});
So, now a new span is placed before the Add text for every time I click on Add.
But the problem is this, when I click a few more times in the Add, there comes a point where the end of the line size is reached, but rather to break the line as the other part of the text does, the new span is simply rendered in the same line overlapping the edge of the div.
Why this happen? How to avoid it?
I'm testing this page in Google Chrome 42.0.2311.135.
The whole html can be viewed in jsfinddle.
Your original list of "added" <span> elements have whitespace between them. The ones you add with the JavaScript code don't. Therefore, the browser can't insert line breaks between them — it will only do that at whitespace boundaries.
You can fix that in a few different ways; one simple way is to add this to your "click" handler:
$("<span/>", { text: " " }).insertBefore(this);
Another way to fix it is with pure CSS:
.added::after {
white-space: normal;
content: "\00200B";
}
No JavaScript changes would be necessary with that approach.
When you use insertBefore there is no space added between yoru elements. Simply add a space yourself and they will wrap as you expect:
$(function() {
$(".adder").click(function() {
$(document.createElement("span"))
.addClass("added")
.html("A custom text to be add,")
.insertBefore(this)
.after(" "); // add a single space
});
});
http://jsfiddle.net/gtoh8hzp/

Center textarea text vertically if only one row with text

I got a textarea that is 2 rows high. When there is just one row of text in the textarea it looks like this:
What I'm looking for is a way to make it look like this if only one row got text:
When there are 2 rows in the textarea with text, I want it to look normal like this:
Here is the code:
<textarea class='input_box_menu'>Test text</textarea>
.input_box_menu {
text-align: center;
width: 217px;
height: 35px;
resize: none;
float: left;
}
Help really appreciated!
Thanks,
Tompa
Here is a little jQuery snippet to do exactly what you wish to do:
$(function () {
fixVAlign($('.input_box_menu'));
$('.input_box_menu').on('keyup', function () {
fixVAlign($(this))
});
});
function fixVAlign(field) {
if (field.val().length < 27) {
field.css('line-height', '35px');
} else {
field.css('line-height', 'normal');
}
}
And here the jsfiddle
Ok so my first train of thought was to look up the css property vertical-align here.
Applies to: inline-level and table-cell elements
So looking at your example, inline-level objects seem to be out of the question -- so why not table cell?
Try this out:
.box {
display: table-cell;
height: 200px;
width: 400px;
background: #d4d4d4;
text-align: center;
vertical-align: middle;
}
<div class="box">
Text Text Text
</div>
Just a side note, there are ways to do this with a span within a div or a div withing a div, this is just how I chose to interpret the question.
EDIT
Ignore my answer because it doesn't do anything about textareas.
See this pen on CodePen for an example of a good fix.
Because you say you can use JavaScript, the simplest way to do this would be to set the initial line-height of the <textarea> equal to its initial height. Then onkeypress or a similar JavaScript event you can check textarea.value.length and if it's long enough to wrap, then you would set the line-height back to the font-size.

Wrap a text within two lines in div

I wish to wrap a text with in only two lines inside div of especial width. If text goes beyond the length of two lines then i wish to show elipses. is there any solution to do that using CSS?
I used css property text-overflow:ellipsis. its works only for one line. and also i used -webkit-line-clamp:2.which works well in chrome and safari browsers.
text wrap need to sopport in all the browsers(firefox and IE9).
Please suggest me the solution using css or javacsript?
Thanks in Advance.
One thing i observed..
if text fits in complete two lines its display like this.
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte ...
suppose if text fits half of the two lines like
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
testtesttesttesttest ...
I am expecting like below:
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
testtesttest...
I have tried with some modifications didn't succeeded.
You could play around with something like this
p.ellipsis {
position:relative;
line-height:1em;
max-height:2em; /* 2 times the line-height to show 2 lines */
overflow: hidden;
}
p.ellipsis::after {
content:"...";
font-weight:bold;
position:absolute;
top:1em;
right:0;
padding:0 20px 1px 10px;
background: white;
}
See fiddle: http://jsfiddle.net/T7B9c/
Or you could use clamp.js
Edit: To calculate if there is no overflow, you could do:
<p id="ellipsis">lots of text</p>
var $element = $('#ellipsis');
if( $element[0].offsetHeight < $element[0].scrollHeight || $element[0].offsetWidth < $element[0].scrollWidth){
// your element have overflow
$element.addClass('ellipsis');
}
else{
$element.removeClass('ellipsis');
}
Then it will only show the dots if the element has stuff not shown.

What is the equivalent in CSS: add content to an element is `content: "text to add";` as remove content from an element is `?????`

There is a custom namespace named Item: on the main wiki that I edit, and the complaint is that every page inside that namespace shows up as Item:This_item -- Item:That_item -- Item:Foo_item.
I went surfing through the web and the CSS for that skin, and came across:
span#ca-nstab-main:before,
span#ca-nstab-user:before,
span#ca-nstab-wp:before {
content: "[ ";
}
span#ca-talk:before {
content: "& ";
}
span#ca-talk:after {
content: " ]";
}
which takes the namespace name "I'll use main as the example" and the corresponding talk page name and makes them show up as [ main & talk ] instead of main talk.
I was wondering if there was something similar that would allow me to display Item:Foo as just Foo stripping the "Item:" off. I know that the items listed on the category page are in div#mw-pages a tags.
Perhaps even an in-line way to use JavaScript to strip the first five characters off? I say "in-line" because $wgAllowUserJs is set to false on this wiki.
Edit:
The wiki-core parses it out as:
<style type="text/css">
/*<![CDATA[*/
a[title^="Item:"] {
font-family: 'Lucida Grande', Geneva, Arial, Verdana, monospace;
font-size: 12px;
display: inline-block;
overflow: hidden;
text-indent: -2.1em;
}
/*]]>*/
</style>
How do I make the quotes not be parsed, is there a trick? Can I use single quotes instead of double like on the font-family line?
You could try something like this if you're only able to use CSS. (http://jsfiddle.net/zPJHU/)
li a {
/* monospace fonts may be more consistant cross browsers */
font-family: "Courier New", monospace;
font-size: 1em;
display:inline-block;
overflow:hidden;
text-indent: -2.9em; /* may have to play with this value */
}
li a:hover{
font-size: 1.8em; /* just for demonstration of font-size increase */
}
Demo markup:
<p>Hover over links to increase font-size</p>
<ul>
<li>Item:Wicket</li>
<li>Item:Chewbacca</li>
<li>Item:Obi Wan Kenobi</li>
</ul>
dunno if that works, but you could prepand and append a span open / close tag at the right position to have the following:
<span class="hideme">Foo:</span>Bar
as i've said i haven't tried it, but i don't know another way and there might be no possibility to cut content by just using css. javascript should do it.

Categories

Resources