Make text in paraghapghs in div overflow instead of new lines - javascript

Say I have several pretty longs lines in a paragraph:
<div style="overflow: auto">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
</p>
</div>
and window width less that width of the pahagraph (a's + b's + c's). Currently scroll will appear only if width of any of components (a, b, or c) is more that width of the window and over components are carried to the new lines. I want contents of each paragraph appear on the same line with a scroll. How can I treat each paraghaph as a string, so contents of the paragraph is treated like a single line?

With CSS you can do:
p {
white-space: nowrap;
overflow: auto
}
This make the spaces non-breaking, so the paragraph will all be on one line.

You can set white-space:nowrap and overflow:auto property of css. You can assign a class to paragraph tag for which you want text on single line.
CSS
.className {
white-space: nowrap;
overflow: auto;
}
Html
<div style="overflow: auto">
<p class="className">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
</p>
<p class="className">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
</p>
</div>

Either add styles as below
p{
overflow:auto;
white-space: nowrap;
}
or use jQuery as below
$('p').css('overflow','auto');
$('p').css('white-space','nowrap');
Here is a live fiddle example http://jsfiddle.net/mayooresan/qmCwL/

Related

What is the difference between a space and a comma in a jQuery selector? [duplicate]

Here is an example that I do not understand:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?
I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:
<div class="container_12">
<div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
<div class="grid_8">460px Wide</div>
</div>
As for the commas, it's applying one rule to multiple classes, like this.
.blueCheese, .blueBike {
color:blue;
}
It's functionally equivalent to:
.blueCheese { color:blue }
.blueBike { color:blue }
But cuts down on verbosity.
.container_12 .grid_6 { ... }
This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.
.container_12 > .grid_6 { ... }
Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.
.container_12, .grid_6 { ... }
A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.
Not exactly what was asked, but maybe this will help.
To apply a style to an element only if it has both classes your selector should use no space between the class names.
For Example:
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.
Therefore
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.
The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.
The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.
Hope I have helped.
You have four classes and two selectors in your example:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.
For example:
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.&lt/p>
</div>
The above means that you are applying styles to two classes, indicated by the comma.
When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.
in the example:
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>
The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.
A statement like
#admin .description p { font-weight:bold; }
Would only apply the bold to tags within areas that have class "description" that are inside of an area with id "admin", such as:
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>
Selectors combinations get different meanings - attached image explains easily
a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements.
div,.elmnt-color {
border: 1px solid red;
}
Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.
<!-- comma example -->
<div>
Red border applied
</div>
<p class="elmnt-color">
Red border applied
</p>
b) Multiple selectors separated by space – Those are called descendant selectors.
div .elmnt-color {
background-color: red;
}
Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.
<!-- space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border applied
</p>
</div>
c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.
div.elmnt-color {
border: 1px solid red;
}
Here border style is applied only to DIV elements with a CSS class of .elmnt-color.
<!-- no space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border NOT applied
</p>
</div>
<div class="elmnt-color">
Red border applied
</div>
Details are attached at https://www.csssolid.com/css-tips.html
Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
width:460px will be only applied to .grid_6 and .grid_8
Edit: Here is a very good article for you
http://css-tricks.com/multiple-class-id-selectors/

Find a DIV if its coming in next line and hide the rest of the DIVs

My DIV is 300px width. Under that I have another 5 DIV with some text(Some Text in every DIVs). I need to hide the rest of the DIV if it touches the end of the first row.
To be more clear, if 3rd div's reach the end of 300px, then hide the 4th and 5th DIV instead of pushing it to next line and also i need to add CSS ELLIPSES to the end of the row.
<div width="300px">
<div> First Div</div>
<div> Second Div</div>
<div> Third Div</div>
<div> Fourth Div</div>
<div> Fifth Div</div>
</div>
i need output like this.
First Div | Second Div | Third Div| ...
or
First div content | Second content | ...
or
First div with contents goes here | ...
have look at these example: Wrapping_Text
perhaps in combo with display: inline;
You can also change to a span.
<div class="wrapper">
<span>First Div</span>
<span>Second Div</span>
<span>Third Div</span>
<span>Fourth Div</span>
<span>Fifth Div</span>
</div>
.wrapper {
width: 200px;
border: 1px solid red;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* This selector is just if you wanna add "|" delimiter with pseudo selector */
.wrapper span:not(:last-child):after {
content: ' | ';
}

Message box size should depend from message size in jQuery

I want to make the div element changed its size depending on texts size from <span id="dykSelectedReadMore">.
<div class="flipper-back">
<div class="pad-box">
<h3 class="colored">Did you know</h3>
<div class="pad-30-0-0">
<b><span id="dykSelectedIssue">som text</span></b>
<br><br>
<span id="dykSelectedReadMore">...e-identities by 2025. Estonia introduced e-residency in 2014. Non-residents can get ID certificates with the functionality of Estonian ID card. This allows them to start using Estonian digital services from anywhere on Earth. E-residency is attracting entrepreneurs needing an investment account in the European Union, and is bringing more customers to Estonian companies and more capital into the country's economy.</span>
</div>
</div>
I think you shouldn't use Javascript, use CSS instead. This kind of problem occurs when div contains floating elements can't calculate its right height (because doesn't consider height of those elements).
Following the easiest and fastest way to solve.
Start adding this CSS code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
(source CSS-Tricks)
Than apply that class to the flipper-back div or pad-box.
Depends on witch <div> contains floating elements.
eg. <div class="flipper-back clearfix">

Last created DIV to be above other DIVs

I'm creating DIVs dynamically and appending them to a particular DIV.
My question is how do I always make the last created DIV to be above other DIVs within the appended (its parent) DIV?
So basically I want the last created DIV to be on the top level of the other.
DIV 4 - [created at 4:32pm]
DIV 3 - [created at 4:29pm]
DIV 2 - [created at 4:27pm]
DIV 1 - [created at 4:26pm]
the dynamic DIV css:
.dynamicDIV{
width:100%;
position: relative;
}
the append DIV css:
.parentDiv{
width: 100%;
margin-top: 5px;
}
I'm not referring to the z-index. I want to position it above the others.
var parentElement;
var newFirstElement;
parentElement.insertBefore(newFirstElement, parentElement.firstChild);
As I pointed out in my comment, .prepend() can be used here:
$('.parentDiv').prepend('<div class="dynamicDIV">New Div</div>');
but there is a second possibilty:
$('<div />').addClass('dynamicDIV').text('New Div').prependTo('.parentDiv');
This solution is a bit more maintainable.
Demo
Reference
.prepend()
.prependTo()
Use .prepend() on whatever element you want to be preceeded with the new one:
http://api.jquery.com/prepend/
When a DIV is at position: absolute, the last sibling in the DOM is over the others. This doesn't depend on the time you inserted it.
But you can override this behavior by using z-index: 1.
Look at this HTML code:
<style>
div.container > div {position: absolute; z-index: 0}
div#C {z:index: 7}
</style>
<div class="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
This code will display C hidding D, hidding B, hidding A.
CSS with display:flex and flex-direction:column-reverse; can help you:
body {/* parent container of div to shw in a reverse flow*/
display:flex;
flex-direction:column-reverse; /* row-reverse if on line*/
}
div {
width:50%;
border:solid;
margin:auto;
}
div:last-of-type:after {
content:'last in document !';
color:red;
}
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
anyway, in the DOM or for CSS selector, last will be last. reverse order only shows at screen.

Why does my script not make new lines using keyup?

I'm coding a script for my forum which generates a preview of the given string.
Here is my js code
function MakePreview() {
var getText = document.getElementById('inputText').value;
document.getElementById('outputText').innerHTML = getText;}
Here is my HTML code
<article>
<h2>What are you doing?</h2>
<textarea id="inputText" onkeyup="MakePreview()"></textarea>
<br/>
<input type="submit" class="button" value="Hello"/>
</article>
<article>
<p id="outputText"></p>
</article>
Furthermore I have an textarea for the input and an paragraph for the output. But the output does not make a new line like textareas does.
Usually a paragraph makes automatically new lines when the string is longer than the width of the given content.
Does someone have a solution?
Thanks in advance
I'm not sure, if it's possible to achieve exactly what you want (due to the different font size and family), but this snippet is very close to it.
function makePreview() {
var text = document.getElementById('inputText').value;
document.getElementById('outputText').innerHTML = text;
}
.wrapper {
width: 150px;
}
.wrapper textarea {
width: 100%;
}
#outputText {
position: relative;
white-space: pre-wrap;
word-break: break-all;
border: 1px solid #ccc;
}
<div class="wrapper">
<textarea id="inputText" oninput="makePreview()"></textarea>
<p id="outputText"></p>
</div>
The idea is to wrap both the textarea and the p within a same parent to get their widths to match. word-break: break-all and white-space: pre-wrap "copies" the automatic text wrapping and entered new-lines within textarea to the p element.
However, the text might be cutted in a different place, depending on the used font family and size. You could get a better match if you'd use the same font in both elements.
You can instruct paragraph to respect new lines characters (and other whitespaces like tabs, spaces, etc.) by setting its white-space property to pre:
function MakePreview() {
var getText = document.getElementById('inputText').value;
document.getElementById('outputText').innerHTML = getText;
}
#outputText {
white-space: pre;
}
<textarea id="inputText" onkeyup="MakePreview()" rows="4" cols="20"></textarea>
<p id="outputText"></p>
In html multiple whitespaces are replaced by single space so if you want to preview in paragraph you need to replace newlines with <br/>
function MakePreview() {
var getText = document.getElementById('inputText').value;
document.getElementById('outputParagraph').innerHTML = getText.replace('\n', '<br/>');
}
Use wrap="hard" on your textArea. It will help for new line if the length is more the textArea size.
For fixed row and column you can use rows="2" cols="20" in textarea.

Categories

Resources