Setting max size of contenteditable element - javascript

I wonder if I could set the max size of contenteditable element, preventing it from typing more characters than the editable "window" width is.
I have something like this:
<h2 contenteditable="true">My text</h2>
The h2 element has it's own size and style:
h2 {
display: inline-block;
overflow: hidden;
width: 300px;
max-width: 300px;
height: 15px;
max-height: 15px;
}
Now, when I reach the max size, I can type more characters and it looks like I jump into next line. When I hit enter button i also jump down into next line/raw.
What I want to reach is to block this editable content "window" when I reach their max width and block the possibility to increase the height by hitting enter button.
I want to know if it is possible to do it using html5/css or only chance is to create some javascript code?
Thanks in advance for you help!

You use following statement
<h2 contenteditable="true">My text</h2>
But you didn't apply settings for h2.So,replace h4 to h2.
h2 {
display: inline-block;
overflow: hidden;
width: 300px;
max-width: 300px;
height: 15px;
max-height: 15px;
}

First of all your post isn't clear at all,
do you need to control the number of insertions in chars on the contenteditable element or do you just need to style the visible portion of the dom??
If you need to simulate the maxlength attribute that an input element normally has, you need to replicate this behaviour with javascript, CSS can't help you...
otherwise, if it's is just a presentation issue, you can do it with css using em unit...
<div contenteditable style="width: 20em"; height: 1em; line-height:1em; overflow:hidden;></div>

Related

Adjusting container div using JS

I am currently struggling with a site and I have no idea where to start on this bit of code.
I have a container div, .overflow-block1, which has 4 image divs in them, .block-container. These are automatically pulled in via php and JS and there are 54 image blocks in this container.
Currently I am using JS to add a class to the .overflow-block which increases its width to 25750px to fit all the image blocks next to each other in a single row.
The problem with this is that as content gets added they now need more width so I have to manually add more width, but content will be added regularly and I do not wish to spend the rest of my life changing the width of this block every time content is added.
Can anyone point me in the right direction to use JS to automatically set the container width to fit all the image blocks?
Thank you
As I've written on a comment, here is a solution only with CSS.
#parent {
overflow-x: hidden;
width: 190px;
}
#container {
white-space: nowrap;
border: 1px solid #f0f;
width: 190px;
overflow-x: visible;
}
#container>div {
background: #ccc;
width: 50px;
height: 50px;
display: inline-block;
/* for IE6/7, remove if you don't need to support those browsers */
*display: inline;
zoom: 1
}
<div id="parent">
<div id="container">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eee</div>
<div>fff</div>
</div>
</div>

CSS width: Use min-content above a certain width

Update: Added an additional image and added red arrows to more clearly point to my issue.
I'm trying to style a tooltip with text properly. the issue I have, is I used a max-width value to force the text to wrap beyond a certain width.
Then I found out about min-content, but it shrinks to the largest word in the text. So for long bits of text, this creates a long vertical tooltip.
Is there a way to combine both approaches, and use min-content only beyond a certain minimal width, while allowing very short texts to also display right?
Here are the 3 examples:
The first, with a max-width: 120px, as you can see there is unnecessary space on each side of the text, compared to the smaller one (which is correct).
Using width: min-content, everything shrinks to the largest word, making it hard to read.
A final example using width: min-content, with text short enough I wouldn't want it to wrap
Use display: inline-block, min-width, max-width, padding and you will get what you are looking for.
.tooltip {
min-width: 50px;
max-width: 150px;
background-color: rgba(0,0,0, .4);
border-radius: 4px;
padding: 7px 7px;
text-align: center;
display: inline-block;
}
<div class="tooltip">
<span>Little tooltip</span>
</div>
<br><br>
<div class="tooltip">
<span>Very long tooltip but not that long as expected, looks cool.</span>
</div>

Jquery mouseover dynamic p tag expansion

[this is another question related to something i posted earlier]
I have a p tag inside an anchor, there many be a variable number of instances of this during the loop. My goal is to on hover make the p tag expand and show more information. I have this so far in terms of mouseover.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$('p', this).addClass('popupHighlight')
});
I need to edit this code to allow the p tag to increase its height in relation to the amount of text in the element. if it needs three lines it will expand that amount and vice versa.
.popupHighlight {
height: 3.6em !important;
}
As you can see it is hard coded at this point to a certain height, is there a away to get around this issue?
you can do this by setting some values in css
.popupHighlight {
min-height:100px;
overflow:hidden;
}
it will expand according to the size of the content
Hey this thing is very easy to do.
Here is a fiddle
http://jsfiddle.net/robbiebardijn/vAyn9/
.boxOPToneplustwo{
background-color: red;
height: 1em;
line-height: 1em;
position: relative;
overflow: hidden;
transition: height 1s ease
}
.boxOPToneplustwo.popupHighlight{
height: 3em;
}

div position absolute... overflow-y:auto and then vertical scrollbar covers some of the content

I have a div with absolute position
inside some other divs.
http://jsfiddle.net/d8GYk/
<div style="position: absolute;
display: block;
outline: 0px;
margin: 0px;
padding: 0px;
top: 0;
text-align: left;
font-size: 11px;
font-family: arial;
cursor: default;
border: 1px solid rgb(170, 170, 170);
overflow-x: hidden; white-space: pre;
overflow-y: auto;
left: 0px;
height: 132px;"><div>a a END</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div></div>
As you can see the first div is not completely visible
That's because the vertical scroll bar covers it.
If I set overflow-y:scroll. The problem goes away.
However I don't want to do it because this div is autogenerated (via javascript) and in many cases I don't need the vertical scroll bar (for example if the list has one or two or three items)
Can somebody suggest how to resolve this problem ?
if the scrollbar may or may not show, use a content container with a wrapper that may or may not scroll. html:
<div class="container">
<div class="entries">
<div>ab a</div>
<div>ab</div>
...
</div>
</div>
and css:
.container {
height: 100px;
overflow-y: auto;
}
.entries div {
white-space: pre;
}
Demonstrator: http://jsfiddle.net/gFrbM
That said, if you absolute need pre white space handling, AND your lines are very long, you'll either need to turn on scroll for both directions, not just y, and that's a good indication that the way you're trying to present content is not a good way to go about it. The UX will be poor for your users, and depending on the content you're listing in these entry divs, there will be much better ways to show that data.
Du you really need "white-space: pre;"?
If you remove this part i think it is going to work
Use a margin-right for each div inside the container:
.container div{margin:0 20px 0 0}
http://jsfiddle.net/Karzin/d8GYk/2/
Add this to css
{padding-right: 20px;}
Reason: The border of the scroll is covering your div text. you need to give some space for the same.
http://jsfiddle.net/d8GYk/3/

HTML truncate content based on div height

I have a div with width of 130px a height of 200px.
Various text content gets displayed in this div (I've written some JS to fade in and out different content). The problem is even though I've tried truncating the text to say 180 characters, sometimes the content loaded into this div may contain a picture (or it may not) or might contain some line breaks (or may not) so a fixed character count for truncating sometimes does not clip enough of the text (i.e. the line breaks or perhaps an image will have taken up more vertical space in the div).
Ideally I'd like to truncate and add an ellipsis to the content when it is about to go over the 200px height limit - is this possible? I've looked at the CSS text-overflow property...this seems to work only really for width based truncating (or is that an incorrect assumption?)
Perhaps there is a JS based solution or maybe calcuating how many characters and image (the image sizes ARE fixed) and line break will take up and truncating after that.
Any ideas are much appreciated.
I used dotdotdot jQuery plugin to solve a similar problem. Line breaks should not be an issue with dotdotdot but inserted images should have width and height atributes specified in html.
If you are generating content dynamically you could determine image dimensions server-side (e.g. getimagesize function if you are using PHP). If this is not an option you can initialize dotdotdot inside $(window).load() but this will probably show content without ellipsis till all the media on the page is loaded.
Here's a solution:
http://jsfiddle.net/2jCHg/2/
There's a dangling ellipsis container at the end of the text container. The ellipsis is hidden using JavaScript if the text fits the container. The <span> for the ellipsis has to have a background to occlude the original text. I used flat white in my example. You can optionally use a PNG with alpha transparency to occlude the text with a nice gradient (transparent to white).
You can optionally inject the ellipsis markup with your script to keep your original markup pristine.
It's also unfortunate that the ellipsis is right-justified instead of immediately following the last character that's displayed.
Markup:
<div class="container">
<div class="summary">
Your text goes here
</div>
<div class="ellipsis"><span>…</span></div>
</div>
Style:
.container {
width: 200px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary {
height: 6em; /* adjust based on line-height * rows desired */
overflow: hidden;
}
.ellipsis {
height: 0;
position: relative;
top: -1.2em;
text-align: right;
}
.ellipsis span {
background: white; /* occlude text with background color */
padding-left: 0.5em;
position: relative;
top: -0.25em;
}
Script:
$(".summary").each(function () {
$(this).next().toggle(this.scrollHeight > this.offsetHeight);
});
Try this:
.ellipsis{
white-space: word;
overflow:hidden;
}
.ellipsis:after{
content:'...';
}
Try this:
.ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

Categories

Resources