Setting height of surrounding DIV after inner DIV is expanded/collapsed - javascript

I have a simple accordion. What i am trying to do is that when an item within the content is clicked (How to reach us) for example, the hidden subsequent text is expanded. Once expanded, the new height of the content DIV is calculated. This newly calculated content DIV height is then assigned to the height of .wrapper. The red wrapper should then surround the entire box.
See fiddle: http://jsfiddle.net/oampz/jLQf4/1/
HTML:
<div class="wrapper">
<ul class="panel">
<li>
<div class="heading"> <a>Menu 1</a>
</div>
<div class="content">
<ul>
<h2>Top Ten Questions</h2>
<li>
How to reach us
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
How to email us
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
Contact Number
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.heading {
color: white;
font-weight: bold;
padding: 15px 0 15px 20px;
background: grey;
}
.content {
background: #99CCFF;
position: absolute;
}
.hide {
display: none;
}
.wrapper {
background: #FFD1E0;
position: relative;
}
jQuery:
$(".content ul li a").click(function () {
var $this = $(this);
$this.next(".content ul li a").show(400);
$this.parent().siblings().children().next().hide();
return false;
});
UPDATE *******************************
After the .onClick, would something like:
$(".wrappper").css({'height':($(".content").height()+'px')});
Work?
UPDATE *******************************
Updated fiddle: http://jsfiddle.net/oampz/jLQf4/9/

If I understand your issue correctly, then this may help:
Demo Fiddle
Your content div doesn't have a specified width, so it's automatically wrapping whatever is inside of it, when you show your text it extends out further than it was initially.
EDIT - I think that there may be an easier way to go about what you're trying to accomplish. Instead of using JS to dynamically update the .wrapper I think it would be easier to remove the position: absolute from .content. Some padding seemed to make it look the same.
CSS:
.content {
width: 280px;
background: #99CCFF;
padding: 10px 0;
//position:absolute;
}

Related

How to handle click window event in good way using javascript

I have a window that can be opened by clicking a button using javascript. The window cannot be closed by clicking on the inside of the window, and the window can only be closed by clicking on the outside of the window. At present, I always grab e.target.className to judge whether the clicked element should close the window, but if there are hundreds of elements in a window, this method does not seem to be a good way. I would like to ask if there is a formal What's a good way to handle this need?
$('.click').on('click',function(e){
$('.dialog').toggle()
$(document).on('click',function(e){
if(e.target.className == 'confirm' || e.target.className == 'item' || e.target.className == 'text' || e.target.className == 'dialog_wrap' || e.target.className == 'dialog' || e.target.className == 'head' || e.target.className == 'title'){
$('.dialog').css('display','inline-block');
}
})
})
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
Find whether the click was inside the .dialog with .closest. If it returns a .dialog element, the click was inside, so do nothing; otherwise, the click was outside or on the button, so you can close the dialog.
Also, you almost certainly don't want to add another click listener to the document every time .click is clicked; better to only add the listener once.
const dialog = $('.dialog');
$('.click').on('click', function(e) {
if (!e.target.closest('.dialog')) {
dialog.toggle();
}
e.stopPropagation();
});
$(document).on('click', function(e) {
dialog.hide();
});
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
You can assign a body id when the click starts, and you can close the form when you click anywhere on the body.

how to place the "read more" text next to the end of truncated line- Javascript [duplicate]

This question already has answers here:
Generating ellipsis AND "Read more" link with CSS
(3 answers)
Closed 2 years ago.
I have a text that I have truncated using the css - height and overflow property.
.container {
width: 600px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary {
height: 47px;
/* adjust based on line-height * rows desired */
overflow: hidden;
}
.ellipsis {
height: 0;
}
.ellipsis span {
background: white;
padding-left: 0.5em;
position: relative;
top: -1.2em;
left: 3.2em;
color: blue;
}
<div class="container">
<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<strong>testststststs</strong>
</div>
<div class="ellipsis"><span>... Read more</span></div>
</div>
however my issue is when I try placing the "...read more" using he position relative property it does not work: ex below:
http://jsfiddle.net/ctges45w/3/
As you can see the above fiddle the text is floating in middle of the sentence.
http://jsfiddle.net/ctges45w/5/
how can I make sure that the "read more" text always get placed at the end of the line where its truncated regardless of the width of the content?- something like this:
http://jsfiddle.net/ctges45w/4/
I have tried looking up at sources on stack overflow with similar issue and those havent or partially worked for me: ex here:how to place " ...view more " text next to the truncated sentence in a container-Javscript
any ideas?
Forget all the relative positioning. Just simply put the readmore at the end of the text and style it as you wish.
let summary = document.querySelector('.summary')
if (summary.textContent.length > 100){
let truncated = summary.textContent.substring(0, 100)
summary.innerHTML = `<p style="margin:0;">${truncated}<span class='ellipsis'>... Read more</span></p>`
}
.container {
width: 600px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary{
overflow: hidden;
height: 47px;
padding: 0;
}
.ellipsis{
color: blue;
}
<div class="container">
<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<p>
<strong>testststststs</strong>
<span class="ellipsis">... Read more</span>
</p>
</div>
</div>

Remove CSS class properties for Child List Items

I've been trying to create an unordered List in Html.
A css class will be attached with the "ul" element and its child "li" elements.
The issue is if another "unordered List" becomes child element of this parent unordered List.
I've created following sample to show my issue:-
Javascript:-
$(function () {
$('.marquee').marquee({
duration: 10000,
duplicate: false,
delayBeforeStart:0,
allowCss3Support: true,
gap: 600,
});
});
HTML:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<ul class='marquee'>
<li>1. Longer text lorem ipsum dolor sit amet,<h3>consectetur adipiscing elit END</h3></li>
<li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li><ul><li><b>I'm the Child Unordered List Element. I don't want this CSS</b></li></ul></li>
</ul>
CSS:-
body {
margin: 10px;
font-family:'Lato', sans-serif;
}
.marquee {
width: 100%;
overflow: hidden;
border:1px solid #ccc;
background: black;
color: rgb(202, 255, 195);
}
ul.marquee li {
display: inline-block;
padding: 10px 20px;
}
Jsfiddle
Can any one suggest how to remove the CSS class "marquee" from the Child Unordered List?
Thanks in advance.
Please share the code in your question. For now which i understood by your statement, that can be achieved by using below code (replace '.xyz' with actual class)
jQuery("ul.xyz").find("ul.xyz").removeClass(".xyz");
I've noticed your ul within the parent ul is not within a li. Make sure any child element in a list is within a li element.

showing a div content after scrolling down

hi there i'm trying to show a hidden div when scrolling down from the top of the browser page, like the Accordion function. What i'm using here is this Code:
HTML:-
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS:-
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
}
jQuery:-
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").fadeIn();
} else {
$(".textBlock").stop().fadeOut();
}
});
});
but it needs some modification in order to work like Accordion-Function.
If you want the accordion effect you should use the slideDown and slideUp functions (docs here), like so:
http://jsfiddle.net/b7yomjd0/3/

How can I use fittext in jQuery to resize text in a div? // Edit

I try to use resize my text by fittext. the div container have the width 200 px to 200 px. The result should be that the text have to fit in the box no matter how the text have 10 or 200 words.
Edit: fittext in jQuery didn't works to fit a text about more lines, that my problem.
So I will try to dynamically the font-size about more lines. If I try this, you see me problem. The text can be dynamic:
body{
background-color: rgb(48, 54, 52);
}
.parent{
position: relative;
background-color: black;
width: 200px;
height: 200px;
clear: both;
}
.child_1
{
width: 200px;
height: 200px;
position: absolute;
padding: 5px;
}
.child_1
{
background-color: rgb(255, 255, 255);
color: rgb(124, 170, 52);
}
<div>
<div class="parent">
<div class="child_1" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem
ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</div>
</div>
</div>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$(".child_1").fitText(1.1, { minFontSize: 30, maxFontSize: '75px' });
</script>
If you have a box with fixed dimensions, putting to much things, obviously will get full, the same goes for what you are trying to do.
You need either to dynamicly resize de font-size or the div width/height.
Check out the FitText documentation. It's as simple as:
$("#div_id").fitText();
Still, FitText makes its calculations based on the width of the container, not the height. It's good if you want to fit the text in one line, but not very useful if you want to fit it in a box.

Categories

Resources