What is a promise in Javascript?

Question

J. Mick

Asked: 2020-09-04 20:15:38 +0800 CST 2020-09-04 20:15:38 +0800 CST 2020-09-04 20:15:38 +0800 CST

How to fix errors when scrolling video detail?

772

Expanding the body container in Introduction displays the content of all videos.

Now the error is in expanding the video detail of the following video title:

audio video audio video audio video +

If you click on more detail of the video, that is, on the (+) you will observe that there is an overflow, a total disorder when you expand in the detail of the video, the preview of the time of the video , the play image, everything overflows, moves.

Now in the text of the video detail it does not have a margin a set width the text is hidden.

When making responsive the detail of the text is not shown, it is hidden in its entirety, showing a certain part of the text.

In this image I show the errors, when executing my code you will see the problem that I have mentioned.

The solution, ideally what I want is that my code is displayed in this way as I show in this image

How can I correct the mentioned errors, fix them as shown in this image. is what I want to apply to my code?

full code

  jQuery(document).ready(function ($) {
$('.accordion').click(function(e) {
  e.preventDefault();
  var $this = $(this);

  if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.removeClass("active");
$this.next().slideUp(350);
  } else {
$this.addClass("active");

$this.parent().parent().find('.panel').removeClass('show');
$this.parent().parent().find('.panel').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
  }
});


$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);

  if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.removeClass("active");

$this.next().slideUp(350);
  } else {
$this.addClass("active");

$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
  }
  });});

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion.active,
.accordion:hover {
  background-color: #ddd;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-right: 10px;
}

.accordion.active:after {
  content: "\2212";
}

.panel {
  background-color: white;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: none;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

.toogle {
  float: left;
}

.toggle:after {
  content: '\002B';
  margin-left: 5px;
}

.toggle.active:after {
  content: "\2212";
}

.inner {
  display: none;
  overflow: hidden;
}

ul .inner.show {
  /*display: block;*/
}

.label:empty {
  display: none;
}
.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover{
  background:#f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items:center;
  /*justify-content:space-between;*/
}

.play { 
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width:60%;
  white-space: normal !important;
}

.view-preview,.length {
  color: #000;
  text-align:center;
}

.view-preview{
  width:23%;
}

.length {
  width:10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Introducción</button>
<div class="panel">
  <div class="chapters">
<ul class="view">
  <li>
    <div class="rows">
      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
      <div class="video-title"><a href="vid.mp4">audio video audio video audio video</a><span class="toggle"></span>
        <ul class="inner">
          <li>Lorem ipsum dolor sit amet, Lorem ipsum Lorem ipsum.Integer varius est vitae iaculis suscipit. Integer sed rutrum lectus</li>
        </ul>
      </div>
      <div class="view-preview"><a href="vid.mp4">&nbsp;Vista Previa</a></div>
      <div class="length">&nbsp;02:34</div>
    </div>
  </li>
  <li>
    <div class="rows">
      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
      <div class="video-title"><a href="video2.mp4">audio video audio video audio video</a></div>
      <div class="view-preview"><a  href="video2.mp4">&nbsp;Vista Previa</a></div>
      <div class="length">&nbsp;02:34</div>
    </div>
  </li>
</ul>
  </div>
</div>

2 Answers

Voted

juliocpiro · Answer 1 · 2020-09-07T09:24:58+08:00

According to your 2nd image:

Normal size.- You indicate that it moves. According to your code the "play button", "preview" and "02:20" scroll vertically.

Solution (remove align-items):

.rows {
    text-decoration: none;
    display: flex;      
}

To remove the bullet from liand then align it to the margin:

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
  list-style:none;
}

.view ul {
    margin-left : -35px;
}

Reduced size (responsive).- avoid overlapping "preview_" and "02:20"

solution ,

Option 1: change css:

 .length {
   width:20%;
 }

Option 2: As you see that it overlaps when the container is approx 440px, then:

window.addEventListener("resize", resizeWindows);
function resizeWindows(){
    if(parseInt($('.view .rows').css('width').replace('px',''))<440){
      $('.length').css('width','20%');
    }else{
      $('.length').css('width','10%');
    }
}

If I have misunderstood the objective, let me know so I can adjust my answer.

Button, preview and time did not scroll vertically
Preview and time adjusted in reduced mode (responsive)

Thakur · Answer 2 · 2020-09-07T09:29:51+08:00

jQuery(document).ready(function ($) {
$('.accordion').click(function(e) {
  e.preventDefault();
  var $this = $(this);

  if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.removeClass("active");
$this.next().slideUp(350);
  } else {
$this.addClass("active");

$this.parent().parent().find('.panel').removeClass('show');
$this.parent().parent().find('.panel').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
  }
});


$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);

  if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.removeClass("active");

$this.next().slideUp(350);
  } else {
$this.addClass("active");

$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
  }
  });});

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion.active,
.accordion:hover {
  background-color: #ddd;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-right: 10px;
}

.accordion.active:after {
  content: "\2212";
}

.panel {
  background-color: white;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: none;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

.toogle {
  float: left;
}

.toggle:after {
  content: '\002B';
  margin-left: 5px;
}

.toggle.active:after {
  content: "\2212";
}

.inner {
  display: none;
  overflow: hidden;
  list-style: none;
  padding: 0;
  text-align: justify;
}

ul .inner.show {
  /*display: block;*/
}

.label:empty {
  display: none;
}
.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover{
  background:#f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items:center;
  /*justify-content:space-between;*/
}

.play { 
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width:60%;
  white-space: normal !important;
}

.view-preview,.length {
  color: #000;
  text-align:center;
}

.view-preview{
  width:23%;
}

.length {
  width:10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Introducción</button>
<div class="panel">
  <div class="chapters">
<ul class="view">
  <li>
    <div class="rows">
      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
      <div class="video-title"><a href="vid.mp4">audio video audio video audio video</a><span class="toggle"></span>
        <ul class="inner">
          <li>Lorem ipsum dolor sit amet, Lorem ipsum Lorem ipsum.Integer varius est vitae iaculis suscipit. Integer sed rutrum lectus</li>
        </ul>
      </div>
      <div class="view-preview"><a href="vid.mp4">&nbsp;Vista Previa</a></div>
      <div class="length">&nbsp;02:34</div>
    </div>
  </li>
  <li>
    <div class="rows">
      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
      <div class="video-title"><a href="video2.mp4">audio video audio video audio video</a></div>
      <div class="view-preview"><a  href="video2.mp4">&nbsp;Vista Previa</a></div>
      <div class="length">&nbsp;02:34</div>
    </div>
  </li>
</ul>
  </div>
</div>

I don't know if this works for you :-

.inner { display: none; overflow:hidden; list-style: none; padding: 0; }

How to fix errors when scrolling video detail?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?