Установите для всех детей высоту самого большого ребенка

0

Я почти закончил создание слайд-шоу jQuery. Он отлично работает, за исключением того, что высота слайд-шоу всегда является высотой первого отображаемого слайда, а не самым большим слайдом в слайд-шоу, который закручивает слайд-шоу. Вы можете увидеть это здесь: http://www.renegademagsu.com. Я нашел некоторые решения jQuery для этой проблемы в StackOverflow, но ни один из них не работает для меня.

Мне нужно прокрутить каждый элемент.slideshow на странице, затем пропустить каждую из выбранных слайдов слайдов, найти самую большую высоту и применить ее ко всем слайдам в этом слайд-шоу. Вот то, что я закодировал, что я думал, будет работать:

var maxheight = 0;
$('.slideshow').each(function() {
    $(this).children().each(function(){
        maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight);
        console.log(maxheight);
    })
    $(this).children().height(maxheight);
    console.log('Final:' + maxheight);
    maxheight = 0;
})

Но это просто повредило слайд-шоу, которое можно увидеть в этом JSFiddle: http://jsfiddle.net/B4rqz/

Если бы кто-нибудь мог помочь мне понять это, я был бы очень признателен. Вот мой код:

HTML:

<div class="container">
<div class="post-container">
    <div class="post-content">
                    <div class="post-meta">
            <h3>Date: May 9, 2014 | Author: Noelle Devoe | <a href="http://renegademagsu.com/?p=195/#comments"><span class="dsq-postid" rel="195 http://renegademagsu.com/?p=195">0 Comments</span></a></h3>
        </div>
        <div class="post">
            <a href="http://renegademagsu.com/?p=195">
                <h1>6 Moments That Denzel Washington was a bad ass</h1>
            </a>
                                                                                            <div class="slideshow">
                                                        <div class="slideContainer">
                    <div class="slide">
                      <span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/training-day.png" />
                    </div>
                    <div class="slideInfo">
                        <h1>1. Training Day</h1>
                        <p class="slideCaption">
                            Who could forget Denzels Academy Award winning role as Detective Alonzo Harris, the corrupt and rogue narcotics officer who plays by his own rules.  A memorable scene is when Alonzo and the rookie cop Jake, stop two guys from raping a 14-year-old girl. While Jake chooses to arrest them, Alonzo grabs one of the men, puts a knife to his throat, and then points 2 guns at his crouch, threatening to shoot him.  Instead of shooting he punches him and says, "Man Im thirsty, I could use a beer."                              </p>
                        <p class="slideCredit">
                            <a href="http://roley.tumblr.com/post/8472254874/told-me-to-suck-your-dick-is-that-what-you" target="_blank">roley.tumblr.com</a>                            </p>
                    </div>
                    <!--slideInfo end-->
                    <div class="fix"></div>
                </div>
                <!--slideContainer end-->
                 <!--end if each if-->
                                                        <div class="slideContainer">
                    <div class="slide">
                      <span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/man-on-fire.png" />
                    </div>
                    <div class="slideInfo">
                        <h1>2. Man on Fire</h1>
                        <p class="slideCaption">
                            If you want to learn about revenge, just watch Denzel in action in this movie after kidnappers try to take little Dakota Fanning. Denzel, her bodyguard, gets ahold of a corrupt cop who he needs answers from, and interrogates him by sticking a detonator up his rectum, threatening to blow the cop up if he doesnt get information. However, when he finally gets the answers hes looking for, Denzel detonates the bomb anyway and walks away from the explosion in slow motion. Total bad ass move.                             </p>
                        <p class="slideCredit">
                            <a href="http://www.thefancarpet.com/uploaded_assets/images/gallery/1498/Man_On_Fire_18347_Medium.jpg" target="_blank">The Fan Carpet</a>                            </p>
                    </div>
                    <!--slideInfo end-->
                    <div class="fix"></div>
                </div>
                <!--slideContainer end-->
                 <!--end if each if-->
                                                        <div class="slideContainer">
                    <div class="slide">
                      <span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/american-gangster.png" />
                    </div>
                    <div class="slideInfo">
                        <h1>3. American Gangster</h1>
                        <p class="slideCaption">
                            Denzel plays the notorious gangster, Frank Lucas, who kills a man who doesnt pay him the money he owes.  Without hesitation, Lucas kills the man in the stree                             </p>
                        <p class="slideCredit">
                            <a href="http://www.dvdbeaver.com/film2/DVDReviews42/american%20gangster%20blu-ray/HF7Y9005_american_gangster_blu-ray.jpg" target="_blank">DVD Beaver</a>                            </p>
                    </div>
                    <!--slideInfo end-->
                    <div class="fix"></div>
                </div>
                <!--slideContainer end-->
                 <!--end if each if-->
                                                        <div class="slideContainer">
                    <div class="slide">
                      <span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/safe-house.png" />
                    </div>
                    <div class="slideInfo">
                        <h1>4. Safe House</h1>
                        <p class="slideCaption">
                            What do you do when youre a fugitive and a CIA agent is looking after you?  Just follow Denzels bad ass steps in this one scene.  After Ryan Reynolds character has arrested Denzels character, he takes him to an arena where a soccer game is taking place in order to get weapons out of a locker. While in a crowd outside the arena, Denzel manages to trick the stadium security into believing hes being kidnapped. They not only set him free, but then arrest Ryan Reyonlds. Denzel then effortlessly waltzes right out of the stadium. No sweat for a bad ass.                            </p>
                        <p class="slideCredit">
                            <a href="http://www.hbo.com/movies/safe-house" target="_blank">HBO</a>                            </p>
                    </div>
                    <!--slideInfo end-->
                    <div class="fix"></div>
                </div>
                <!--slideContainer end-->
                 <!--end if each if-->
                                                        <div class="slideContainer">
                    <div class="slide">
                      <span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/malcolm-x.png" />
                    </div>
                    <div class="slideInfo">
                        <h1>5. Malcolm X</h1>
                        <p class="slideCaption">
                            Denzels portrayal of Malcolm X was the role that most thought would win him an Oscar. In one scene, Malcolm and other members of the Nation of Islam demand the release of one of their fellow Muslims from jail by crowding the street outside of the building. After succeeding in this, Malcolm raises his hand and signals for his men to leave. With flick of his wrist, about one hundred protesters turn in unison and march away, as if a general had commanded them. Even a white cop notices his influence and says, "Thats too much power for a n***er to have." If Malcolm X wasnt bad ass enough, Denzel playing him just sweetened the deal.                             </p>
                        <p class="slideCredit">
                            <a href="http://www.popjavascript:void(0);cornreel.com/jpgimg/x%20004.png" target="_blank">Popcorn Reel</a>                            </p>
                    </div>
                    <!--slideInfo end-->
                    <div class="fix"></div>
                </div>
                <!--slideContainer end-->
                 <!--end if each if-->
                                                        <div class="slideContainer">
                    <div class="slide">
                      <span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/remember-the-titans.png" />
                    </div>
                    <div class="slideInfo">
                        <h1>6. Remember the Titans</h1>
                        <p class="slideCaption">
                            No one can forget Denzels role as coach of a newly integrated high school football team in 1970s Virginia. Even though this is one of Denzels small bad ass roles, you have to admit, Coach Boone was scary enough to intimate anyone into doing 100 push ups.                            </p>
                        <p class="slideCredit">
                            <a href="http://www.monologuedb.com/wp-content/uploads/2011/02/denzel-washington-coach-herman-boone-remember-the-titans.jpg" target="_blank">MonologueDB</a>                            </p>
                    </div>
                    <!--slideInfo end-->
                    <div class="fix"></div>
                </div>
                <!--slideContainer end-->
                 <!--end if each if-->
                 <!--end each-->
            </div>
            <!--slideshow end-->
            <div class="slideNav">
                <div class="prevSlide">
                    <i class="fa fa-chevron-left fa-2x"></i>
                </div>
                <div class="slideCount"></div>
                <div class="nextSlide">
                    <i class="fa fa-chevron-right fa-2x"></i>

CSS:

body {
     background-color: #000;
     font-family:'Source Sans Pro', Arial;
     font-size: 18px;
 }

b, strong {
  font-weight: bold;
}

 .container {
     width: 960px;
     margin: 0 auto;
 }

 header {
     width: 100%;
     height: 135px;
 }

 .logo {
     width: 260px;
     height: 135px;
     float: left;
 }

 nav {
     width: 685px;
     height: 135px;
     padding-left:15px;
     float: left;
 }

 nav ul li {
     float: left;
     line-height: 135px;
     position: relative;
 }

 nav ul li a {
     font-size: 24px;
     color: white;
     background-color: black;
     font-weight: bold;
     margin-right: 20px;
     text-decoration: none;
     text-transform: uppercase;
     display: block;
 }

 nav ul li a:hover {
     text-decoration: underline;
 }

 nav ul ul {
     width: 200px;
     height: 50px;
     position: absolute;
     top: 85px;
     left: 0;
     display: none;
     z-index: 1000;
 }

 nav ul ul li {
     float: none;
     line-height: 50px;
 }

 nav ul ul li a {
     font-weight: regular;
     font-size: 20px;
 }

 nav ul li:hover ul {
     display: block;
 }

 .search {
     width: 260px;
     height: 135px;
     float: left;
 }

 section {
     width: 640px;
     float: left;
 }

 .post-container {
     width: 100%;
     position: relative;
     margin-bottom: 30px;
 }

 .post-image img {
     max-width: 100%;
     z-index: 1;
 }

 .post-content {
     position: relative;
     left: 30px;
     width: 580px;
     z-index: 2;
 }

 .thumbnail-positioning {
     bottom: 110px;
     margin-bottom: -110px;
 }

 .post-content p {
     line-height: 22px;
     margin-bottom: 15px;
 }

 .post-content img {
     max-width: 100%;
 }
 .post-meta h3 {
     text-transform: uppercase;
     font-size: 12px;
     color: white;
     margin-bottom: 3px;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
 .post-meta a {
     color: white;
     text-decoration: underline;
     font-weight: bold;
 }

 .post {
     background-color: white;
     color: black;
     padding: 15px;
 }

 .post ol {
     list-style-type: none;
     list-style-type: decimal !ie;
     /*IE 7- hack*/
     margin: 0;
     margin-left: 3em;
     padding: 0;
     counter-reset: li-counter;
 }

 .post ol > li {
     position: relative;
     margin-bottom: 20px;
     padding-left: 0.5em;
     min-height: 3em;
     border-left: 2px solid #CCCCCC;
 }

 .post ol > li:before {
     position: absolute;
     top: 0;
     left: -1em;
     width: 0.8em;
     font-size: 3em;
     line-height: 1;
     font-weight: bold;
     text-align: right;
     color: #464646;
     content: counter(li-counter);
     counter-increment: li-counter;
 }

 .post p:last-child {
     margin-bottom: 0 !important;
 }

 .post h1 {
     font-size: 34px;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 7px;
 }

 .post a {
     color: black;
     text-decoration: none;
 }

 .page {
     width: 550px;
     margin: 0 auto;
     background-color: white;
     padding: 15px;
 }

 .page p {
     line-height: 22px;
     margin-bottom: 15px;
 }

 .page h1 {
     font-size: 34px;
     text-transform: uppercase;
     font-weight: bold;
     border-bottom: 1px solid black;
     margin-bottom: 7px;
 }

 .leftimage {
     margin: 0 10px 2px -50px;
     float: left;
 }

 .leftcaption {
     margin: 3px 0 0 80px;
     font-style: italic;
     font-size: 11px;
     width: 220px;
 }

 .leftimage img {
     max-width: 300px;
 }

 .rightimage {
     margin: 0 -50px 2px 10px;
     float: right;
 }

 .rightcaption {
     margin: 3px 80px 0 0;
     font-style: italic;
     font-size: 11px;
     width: 220px;
 }

 .rightimage img {
     max-width: 300px;
 }

 aside {
     width: 290px;
     float: right;
 }

 aside h1 {
     color: white;
     font-size: 28px;
     border-bottom: 1px solid white;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 10px;
 }

 aside .widget {
     margin-bottom: 20px;
 }

 aside ul li {
     margin-bottom: 10px;
 }

 aside ul li a {
     font-size: 19px;
     color: white;
     text-decoration: none;
 }

 aside ul li a:hover {
     font-size: 19px;
     color: black;
     background-color: white;
     text-decoration: none;
 }

input[type=text]{
    width: 100%;
    background-color: white;
    color:#505358;
    font-size: 18px;
}

 footer {
     width: 100%;
 }

 footer .widget {
     width: 300px;
     float: left;
     margin-bottom: 20px;
     padding-right: 20px;
 }

 footer h1 {
     color: white;
     font-size: 28px;
     border-bottom: 1px solid white;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 10px;
 }

 footer ul li a {
     font-size: 19px;
     color: white;
     text-decoration: none;
 }

 footer ul li a:hover {
     font-size: 19px;
     color: black;
     background-color: white;
     text-decoration: none;
 }

 .alignleft {
     float: left;
     margin: 0 10px 2px -45px;
 }

 .alignright {
     float: right;
     margin: 0 -45px 2px 10px;
 }

 .fix {
     clear: both;
 }

/************SLIDESHOW************/

.slideshow {
    background-color: #000;
    width: 100%;
    height: 500px;
    position: relative;
}
.slideContainer {
    background-color: #000;
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.slideshow .slideContainer:not(:first-child) {
    display: none;
}

.slide {
    width: 100%;
    height: 400px;
    text-align: center;
    background-color: #FFF;
}
.slideMiddle {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.slide img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
.slideInfo {
    width: 100%;
    height: 80%;
    padding: 10px;
    color: #fff;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.slideNav {
    width: 100%;
    padding: 10px;
    background-color: #000;
    color: #fff;
    position:relative;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.prevSlide {
    width: 33.3%;
    float: left;
}
.nextSlide {
    width: 33.3%;
    float: right;
    text-align: right;
}
.slideCount {
    width: 23.3%;
    text-align: center;
    position:absolute;
    left:40%;
}
.slideCredit {
    width: 100%;
    font-style: italic;
    font-size: 12px;
}

.slideCredit a {
    color: #FFF;
}

JQuery

$('.slideCount').each(function(){
var text='1/'+$(this).parents('div.post-container').find('.slideContainer').length
$(this).text(text)
})

var maxheight = 0;
$('.slideshow').each(function() {
    $(this).children().each(function(){
        maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight);
        console.log(maxheight);
    })
    $(this).children().height(maxheight);
    console.log('Final:' + maxheight);
    maxheight = 0;
})

$('.nextSlide').show()  
$('.prevSlide').hide()

$('div.nextSlide').click(function (e){
var count=parseInt($(this).siblings('.slideCount').text())
var slideshow=$(this).parents('div.post-container').find('.slideshow')
var slides = $(slideshow).children().length;
if(count===slides){
  e.preventDefault()
    }else{
  count++
  $(this).parents('div.post-container').find('div.slideContainer:first').appendTo(slideshow) 
  $(this).siblings('.slideCount').text(count+'/'+slides)
}
if(count===slides){$(this).hide()}else{$(this).parent().find('div.prevSlide').show()}
});

$('.prevSlide').click(function (e){
var count=parseInt($(this).siblings('.slideCount').text().slice(0,-2))
var slideshow=$(this).parents('div.post-container').find('.slideshow')
var slides = $(slideshow).children().length;
if(count===1){e.preventDefault()}else{
  count--
  $(this).parents('div.post-container').find('div.slideContainer:last').prependTo(slideshow) 
  $(this).siblings('.slideCount').text(count+'/'+slides)
} 
if(count===1){$(this).hide()}else{$(this).parent().find('div.nextSlide').show()} 
});

И здесь JSFiddle со всеми движущимися частями: http://jsfiddle.net/B4rqz/

Теги:

2 ответа

0
Лучший ответ

Когда вы устанавливаете высоту детей, вам также нужно установить высоту родителя.

var maxheight = 0;
$('.slideshow').each(function() {
    $(this).children().each(function(){
        maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight);
        console.log(maxheight);
    })
    $(this).height(maxheight).children().height(maxheight);
    console.log('Final:' + maxheight);
    maxheight = 0;
})
  • 0
    Спасибо вам большое! Это сработало!
0

Попробуйте использовать отложенные объекты

$ (this).children(). height (maxheight) может выполняться до того, как каждый цикл завершится, поскольку javascript является асинхронным

  • 0
    Извините, я не знаком с этим методом.
  • 0
    Собирался через код. В вашем случае конечное значение максимальной высоты составляет 781. Но добавленная стоимость для вас - 801. т.е. на 20 больше, чем 801, если вы жестко задаете максимальную высоту 50, то высота вашего div будет изменена на 70. Есть ли у вас код для увеличения?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню