This question already has answers here:
Toggle Read More/Read Less using Javascript?
(4 answers)
Closed 1 year ago.
I am referring this solution. The Change I want is Read More button should come at the end of the line as shown in pic
on load it should be only two lines with show more button in second line at the end
on show more it should expand and show entire text
on show less it should shrink back to two lines with button at the end of the line
function myFunction() {
let text = document.getElementById('overflow_text')
let toggle = document.getElementById('toggle_text')
if (text.style.overflow == 'visible') {
toggle.innerHTML = '..more'
text.style.overflow = 'hidden'
text.style.textOverflow = 'ellipsis'
text.style.whiteSpace = 'nowrap'
} else {
toggle.innerHTML = 'less'
text.style.overflow = 'visible'
text.style.textOverflow = 'string'
text.style.whiteSpace = 'normal'
}
}
.myClass {
height: 150px;
width : 500px;
}
#overflow_text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#toggle_text {
cursor: pointer;
}
.button_span{
border: black;
border-width: 1px;
border-color: black;
border-style: solid;
}
<div class="container">
<div class="row">
<div class="col-md-6 myClass">
<p id='overflow_text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
<span onClick="myFunction()" id="toggle_text" class="button_span">more</span>
</div>
</div>
</div>
I suggest including the "..." in the button, because the text does not "know" when it has run out of space.
CSS:
#mainContent{
position:relative;
line-height:1em;
overflow:hidden;
}
.showContent{
height: 2em;
}
.hideContent{
height: auto;
}
#moreButton{
position:absolute;
bottom:0;
right:0;
cursor:pointer;
background:white;
padding-left:4px;
}
HTML:
<div class="showContent" id="mainContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
<span id="moreButton" onclick="showMoreLess()">...more</span>
</div>
...and finally JS:
function showMoreLess(){
var mc = document.getElementById('mainContent');
var btn = document.getElementById('moreButton');
if (btn.innerHTML == '...more') {
mc.className = 'hideContent';
btn.innerHTML = '...less';
} else {
mc.className = 'showContent';
btn.innerHTML = '...more';
}
}
Please let me know if this helps!
Related
I want to show a div only if the page has scrollbars, and hide it if not. I want to do this in either pure CSS or JavaScript (if impossible in CSS).
I've found a question on Stack Exchange, but it's infested with that garbage jQuery cancer, so it's useless. I'm talking about pure JavaScript -- not jCancer.
Here's a pure JS solution, using this function:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
Edit (description):
The function returns true if the element is scrollable, false otherwise.
Example:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
// make scrollable divs have a red border
document.querySelectorAll("div").forEach(div => {
if (isScrollable(div)) div.style.borderColor = "red";
});
div {
border: 1px solid grey;
width: 200px;
overflow: auto;
margin-bottom: 1rem;
}
div#div1 {
height: 100px;
}
div#div2 {
height: 170px;
}
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat. Fusce tempor erat eget dolor ultrices interdum. Pellentesque sed placerat nulla. Duis consequat, lorem quis vehicula lacinia, libero leo tincidunt odio, et porta ex turpis malesuada lorem. Proin sapien metus, facilisis sed urna non, vehicula commodo velit. Etiam venenatis laoreet neque vel sollicitudin. Suspendisse lacinia, lectus hendrerit dapibus laoreet, dui lorem condimentum enim, a vulputate ex ipsum ut nibh.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat.
</div>
I'm using shape-outside to give a "magazine" feel to a website. Each page has a new image of a person and the text wraps around that person. Shape outside works perfectly and easy! Only issue is that I can't figure out how to make it so the text in one column (left) sets the height not the image (right).
Take this example:
https://jsfiddle.net/kvzmw0sy/22/
Or the raw code
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
CSS:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width:100%;
height:50px;
border: 2px solid green
}
What I get is this:
But, what I want is this (see how the image goes behind the footer):
Essentially I want it to work like a background image.
I tried position absolute but it breaks the text wrapping. I don't think i can do this with a background image. And so the only solution I have so far is to use JS to get the height on the left and apply it to the container with an overflow:hidden which I'd really like to avoid.
the new overflow:clip applied to the container will do the job
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
/* .text{
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
} */
.container {
overflow: clip;
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
For better support you can rely on clip-path instead:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
.container {
clip-path: inset(0);
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
In all of my divs, I am adding scrollbar on hover if necessary. Initially the overflow is set to hidden for that div and on hover it becomes auto.
div{
overflow-y: hidden;
}
div:hover{
overflow-y: auto;
}
but when the scrollbar is added on hover, the content jumps to the left. I don't want to make the scrollbar present all the time, I only want to add it when we hover over the div and there is overflow in that div.
Try this. I have used perfect-scrollbar.
$('.perfectscroll').perfectScrollbar();
div.perfectscroll{
height:100px;
border:1px solid black;
overflow:hidden;
width:50%;
position:relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/js/perfect-scrollbar.jquery.js"></script>
<div class="perfectscroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare bibendum varius. In tempor et neque a luctus. Integer vel diam sed sapien lacinia tincidunt. Sed lobortis rhoncus velit, at molestie sem varius id. Sed vel leo in neque sollicitudin lacinia. Mauris a ultrices enim. Aliquam sollicitudin tempor neque, vitae varius felis lobortis ac. Vestibulum et ultrices augue. Proin eros magna, dapibus et orci sit amet, tempus imperdiet risus. Etiam ac nisi in mi aliquet blandit. Aliquam erat volutpat. Duis iaculis neque justo, quis commodo magna pharetra ut.
</div>
Based on this post where scrollbars are usually 17px wide, you can set the div to be 17px thinner, allowing room for the scrollbar to appear once you hover over, and still maintain the width of the div.
div{
overflow-y: hidden;
width: calc(100% - 17px)
}
div:hover{
overflow-y: auto;
width: 100%
}
With example:
div{
height: 100px;
border: 1px solid black;
overflow: hidden;
width: calc(50% - 17px);
}
div:hover {
overflow: auto;
width: 50%
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare bibendum varius. In tempor et neque a luctus. Integer vel diam sed sapien lacinia tincidunt. Sed lobortis rhoncus velit, at molestie sem varius id. Sed vel leo in neque sollicitudin lacinia. Mauris a ultrices enim. Aliquam sollicitudin tempor neque, vitae varius felis lobortis ac. Vestibulum et ultrices augue. Proin eros magna, dapibus et orci sit amet, tempus imperdiet risus. Etiam ac nisi in mi aliquet blandit. Aliquam erat volutpat. Duis iaculis neque justo, quis commodo magna pharetra ut.
</div>
This will work fine
div{
height:100px;
border:1px solid black;
overflow:hidden;
width:183px;
}
div:hover{
overflow:auto;
width:200px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare bibendum varius. In tempor et neque a luctus. Integer vel diam sed sapien lacinia tincidunt. Sed lobortis rhoncus velit, at molestie sem varius id. Sed vel leo in neque sollicitudin lacinia. Mauris a ultrices enim. Aliquam sollicitudin tempor neque, vitae varius felis lobortis ac. Vestibulum et ultrices augue. Proin eros magna, dapibus et orci sit amet, tempus imperdiet risus. Etiam ac nisi in mi aliquet blandit. Aliquam erat volutpat. Duis iaculis neque justo, quis commodo magna pharetra ut.
</div>
EDIT
Just add >17px width on hover, it will work
I Have a div container with paragraphs and image i want the paragraphs to be width 100% only when image deleted only here the code:
<div class="dynamicPageImageConstant">
<img alt="" src="/Upload/Images/DynamicImages/Subsea Package.jpg">
<p> this is the paragraph</p>
</div>
.dynamicPageImageConstant {
float: left;
padding: 1px;
width: 96%;
}
.dynamicPageImageConstant p {
width: 100%;
}
When I do that the text of the paragraph came down the image and part of it is hidden. Can I fix this with CSS or do I need jQuery?
here screen shot for the issue as more information
I'm not sure whether this is most suitable, as its a little hard to ascertain the specifics of what you're after..but you can apply a rule to p tags which only follow img tags, to override the default for when an image is not present:
.DynamicPageImageContant p{ /* default p styling, e.g. with no image present */
width: 100%;
}
.DynamicPageImageContant img + p{ /* p styling with image present */
width: auto;
}
.
Update: Accepted code:
HTML
<h1>With Image</h1>
<p class="DynamicPageImageContant">
<img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTn_KAfHdyEKDpeGIJixdWvr_gvONoL3Pyp8P4VzyAXA3ILs0_r" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel pellentesque urna. Fusce euismod, est eget tristique mattis, arcu nibh gravida nisi, ac feugiat dui lorem id sem. Sed quis fringilla nisl, ac dignissim mi. In hac habitasse platea dictumst. Integer elementum nibh eget mi malesuada ornare. Vestibulum ultrices tortor eget suscipit volutpat. Pellentesque venenatis odio sit amet est adipiscing, nec sollicitudin massa luctus. Sed tempor nibh vel pellentesque dictum. Nam porttitor laoreet bibendum.</p>
<h1>Without Image</h1>
<p class="DynamicPageImageContant">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel pellentesque urna. Fusce euismod, est eget tristique mattis, arcu nibh gravida nisi, ac feugiat dui lorem id sem. Sed quis fringilla nisl, ac dignissim mi. In hac habitasse platea dictumst. Integer elementum nibh eget mi malesuada ornare. Vestibulum ultrices tortor eget suscipit volutpat. Pellentesque venenatis odio sit amet est adipiscing, nec sollicitudin massa luctus. Sed tempor nibh vel pellentesque dictum. Nam porttitor laoreet bibendum.</p>
CSS
.DynamicPageImageContant img {
float:right;
margin:0 5px 5px 0;
}
.DynamicPageImageContant p {
display:inline;
}
This code will do the job:
<div class="dynamicPageImageConstant">
<img alt="" src="/Upload/Images/DynamicImages/Subsea Package.jpg">
<p> this is the paragraph</p>
</div>
<style>
.dynamicPageImageConstant {
width: 100%;
padding: 1px;
}
.dynamicPageImageConstant p, .dynamicPageImageConstant img {
display: inline-block;
width: auto;
}
</style>
I have a page with up and down arrows that are links that float on the left. I want them to navigate between div's on the page as a scrolling anchor links. Here is what I have so far.....I know the jquery is far from complete but I think im going in the right direction. Any help would be great.
JSFIDDLE: http://jsfiddle.net/t8uaQ/
HTML:
<ul id="et-float-menu">
<li class="et-float-menu-item1">
<span><img></span>
</li>
<li class="et-float-menu-item2">
<span><img></span>
</li>
</ul>
<div class="jumptosection" id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section4">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
MY CSS:
#section1 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section2 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#section3 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section4 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#et-float-menu {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #000;
padding: 20px 10px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#et-float-menu a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
color: #fff;
}
#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }
#et-float-menu li {
display: block;
margin-left: 0;
}
.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
.et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }
JQUERY:
jQuery(document).ready(function(){
var jumptosectionTopPosition = jQuery('.jumptosection').offset().top;
jQuery('#scroll').click(function(){
jQuery('html, body').animate({scrollTop:jumptosectionTopPosition}, 'slow');
return false;
});
});
Change hrefs of your <a> to scrollUp and scrollDown correspondingly.
Stick to some .selected class, which will be used for identifying current selected section.
Add this class to the first section in html.
Add a function that will perform selection: by adding .selected class and scrolling to newly selected div.
function changeSelection(sectionFrom, sectionTo) {
if(sectionTo.length > 0) {
sectionFrom.removeClass("selected");
sectionTo.addClass("selected");
$("body").animate({scrollTop: sectionTo.offset().top});
}
}
Attach click listeners to your anchors. Inside each of them find current selected div and div you want to be selected and call changeSelection() using these divs.
For scrollDown we want to select the next div:
$(document).on("click", "[href='#scrollDown']", function(){
var currentSection = $(".selected");
var nextSection = currentSection.next(".jumptosection");
changeSelection(currentSection, nextSection);
return false;
});
For scrollUp we want to select the previous div:
$(document).on("click", "[href='#scrollUp']", function(){
var currentSection = $(".selected");
var prevSection = currentSection.prev(".jumptosection");
changeSelection(currentSection, prevSection);
return false;
});
In case you reach the end (the first or the last .jumptosection div), nothing will be changed (it is controlled by the changeSelection function - it checks do we have sectionWeWantScrollTo)
Here is the Demo
Edited (for http://94co.com/client3/about/)
See this answer about WordPress and jQuery. Use jQuery instead of
$ in your script
It is better to use id instead of href on anchor
Make sure you wrap JavaScript of click listeners in
jQuery(document).ready(function(){
/*scrollUp and scrollDown click listeners should be here*/
});
(JSFiddle makes this wrap automatically). changeSelection function doesn't need to be wrapped
Here is the updated Demo
You can set some initial var that let you know the start point like this:
var pre = $('.et-float-menu-item1'),
nex = $('.et-float-menu-item2'),
act = $('#section1');
Where act is the start
And then evaluate prev and next elements:
nex.click(function(){
pre.slideDown();
var gt = act.next('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.next('div');
})
pre.click(function(){
var gt = act.prev('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.prev('div');
})
This code can be improved but is the first aproach I can give.
Check the Demo Fiddle