I'm working on a large text editor application in Chromium. The editable content resides in a contenteditable div. This div can contain divs and spans which get various classes applied to them to create rich content. The trouble I have is with a very large amount of text/html in my contenteditable div, typing is very slow since it causes the entire document to reflow (all of my div/spans inside of my contenteditable are position:relative). If I make these position:absolute, typing is fine since reflow does not occur, but each child div/span overlaps.
Does anyone have a method for preserving the non-overlapping flow of position:relative, but without having to reflow the ENTIRE document when I type some text, even if it doesn't change line geometry?
-- Edit --
Example:
https://jsfiddle.net/05xfc6pj/
CSS
.editable {
position: absolute;
}
.wrapper {
position: relative;
}
.title {
font-weight: bold;
background-color: red;
width: 100%;
}
.body {
width: 100%;
margin-bottom:20px;
}
HTML
<div class="editable" contenteditable="true">
<div class="wrapper">
<div class="title">Title</div>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
...
</div>
(Note, if the example isn't slow for you, copy and paste everything inside of .editable a few times)
I am using backbone.js to render these .wrapper items; would it be feasible making .wrapper have position:absolute and then calculating the position with JS (we know the height of each div), and setting a top offset?
Related
I'm trying to add a dropdown effect to my website but I can't seem to get it right.
I'd like to click on the '+' and let the shape expand to show text, so after I clicked '+', some sort of animation should begin?
I'm new to javascript and I'd like if someone could help me out
http://severinereard.be/test/
Here's the website, I only finished the mobile version so it's best viewed in a thin browser window.
In the first section 'Pelvi-périnéologie' I added a paragraph which I hid with display none.
I hope this is enough information
UPDATE:
I added the javascript and it works for the first section but not for the rest. I'd also like for the dropdown to not go so fast but smooth?
Thanks in advance!
Here's an example of a possible solution. Layout is different, but you'll get the idea.
UPDATE: included javascript to handle the click
const sections = [...document.getElementsByTagName("section")];
sections.map((section) => {
section.addEventListener("click", function() {
const paragraph = this.querySelector("p");
paragraph.style.maxHeight = "100px";
})
})
section {
display: inline-block;
}
section img,
section h3,
section h5 {
display: inline;
}
section p {
max-height: 0;
overflow-y: scroll;
transition: max-height 1s;
width: 300px;
/* for demo purpose */
}
section:hover p {
/*max-height: 100px; to force scrollbar */
}
<section>
<img src="https://via.placeholder.com/40">
<h3>Pelvi-périnéologie</h3>
<h5>+</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
I am developing a jQuery Mobile project which i have an extendable popup in it but when i extent the text in the popup, it doesn't scroll.
I have checked overflow: scroll and all the other options in overflow, but none worked. but when i extent the text i see a bar appears on the right side of the popup, but no scroll.
this is the last code i tried and did not work as well
$("#buttonTest").click(function() {
$('#Popup').css('overflow', 'scroll');
$('#Popup').popup('open');
});
and this is the popup itself
<div data-role="popup" id="Popup" data-transition="flow">
<div class="newsCards">
<img src="images/back.svg">
<h4> header</h4>
<div class="newsFader">
<!-- extended text which is hidden at first -->
</div>
</div>
</div>
I tried to replicate your use case by creating the popup and styling it, the ideal way to make the test scrollable is by using css only.
This is my scrollable newsFader class i took for the text container.
<style type="text/css">
.newsFader {
width: 80%;
height: 50px;
overflow: scroll;
margin-left: auto;
margin-right: auto;
}
</style>
Maybe the text was not scrolling beacuse the size of the container was not defined forcing it to adapt to its content. Anyway this is the popup code i tried and scrolled correctly:
<div data-role="popup" id="Popup" data-transition="flow">
<div class="newsCards">
<img src="">
<h4> header</h4>
<div class="newsFader">
<!-- extended text which is hidden at first -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
I hope it helps you, Happy Coding!
Here is what I have so far and here is the link to see it online.
p { line-height: 2; }
.highlight { background-color: yellow; }
The goal is to wrap the quoted content like below (no border is necessary but I want the whole background including the space between lines to be colored)
I see that the picture isn't clear but I hope you can figure out the idea.
The current version only highlights the lines and the space between lines(due to line height being taller than 1) is not highlighted.
Is there any way to achieve this either in CSS or in JavaScript?
One way to do this is to give the marked text a top and bottom padding.
p {line-height:2}
mark {padding:.5em 0}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Hi you can use the span tag and set the background of that span so it will work like
<p>this is the dummy text without any background <span style='background:yellow'> This text with the background colour</span> this text have no background</p>
Is it possible to make text inside a div to fit its DIV while the bowser window is resized?
I read this and this and few other about Fit Text to DIV but none of them gives an accepted answer about fit text when browser window is resized.
<div id="wrapper">
<div class= "tfz">FIT THIS TEXT</div>
</div>
jsFiddle
Try with -
word-wrap: break-word;
and set the width in %. Hope that will fix the problem.
Example
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Style
div {
width: 500px;
word-wrap: break-word;
font-size: 2vw;
}
Check it here
With width given as px, you really cannot resize it, unless you use some javascript/jquery! So if it is really important you to mention width in px you just can achieve it through jquery/javascript.
So if you agree to mention it in % then definitely you can manage it through CSS as below:
#wrapper{
position: relative;//no need to change this
width: 50%;
word-wrap: break-word;//apply this.
height: auto;
}
DEMO
I'm looking to create a ruled page effect in CSS or Javascript/JQuery, for example. I know this can be achieved with CSS by setting a fixed line height and create a background image to suit.
I would, however, prefer to create a vector solution (ie no images) much like this, but I need it to work in IE.
Is it possible to generate this effect without use of images that works across all modern browsers?
The ideal solution would be to detect the top and bottom of a line in paragraph and draw a line in between with javascript - so it'll work with undefined line heights (but I'm happy to define them if necessary).
I forgot to mention that the text is dynamic.
Try heading in this direction: http://jsfiddle.net/Jw8pw/
It's very basic but You can get more in depth, if you consider the line border height, the text position.
Basically everything needs to be based on em height. Use a transparent div for the margin with a border and divs for hole punches via border radius.
Just added some more: to it http://jsfiddle.net/julienetienne/Jw8pw/6/
//jquery
var lineHeight = $('#content p').css('line-height') ;
$('.line').css({height: lineHeight },0);
var x = $('#content').height();
$('#paper').css('height', x + 40 +"px");
You will need to write a script to manually add the line divs so they fill the paper past the overflow but not too much.
Estimate how many pixels to em you use in the max case, (lets say 40px),
You will do something like "height of text #content div" divided by custom (40px)ratio, add 10 (to be on the safe side), and that's how many lines you need to "write"
The #paper has no overflow so more div lines are welcomed but too much over (as in hundreds) is a bit lazy
You can use a Canvas in all modern browsers (incl. IE9). The following example won't work in IE7 and IE8, but I haven't tested there.
<!DOCTYPE html>
<html>
<head>
<title>Line Test</title>
<style type="text/css">
#ruled {
border: 1px solid red;
}
#textContainer {
position: absolute;
left: 0;
top: 0;
width: 580px;
height: 1200px;
font-size: 12px;
margin: 10px;
padding: 5px 10px;
line-height: 20px;
}
</style>
<script type="text/javascript">
function drawLines(){
// get the canvas element using the DOM
var canvas = document.getElementById('ruled');
var currentLineY = 0;
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "#CCC";
ctx.beginPath();
// draw some lines (the +1.5 offsets the text baseline
// and we use the .5 for crisp lines because the stroke()
// method requires floats, not ints
for (var i=1, imax=30; i<imax; i++) {
currentLineY = i*20 + 1.5;
ctx.moveTo(0,currentLineY);
ctx.lineTo(600,currentLineY);
}
ctx.stroke();
} else {
alert('You need a modern browser to see the lines.');
}
}
</script>
</head>
<body onload="drawLines()">
<canvas id="ruled" width="600" height="602"></canvas>
<div id="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>