How to modify :Hidden elements with jquery?

Asked

Viewed 108 times

1

I use Bootstrap Carousel and need to modify the margin-top of a title, but when the content div is :Hidden, I cannot get the text height with jquery.
Follows the code:

$(document).ready(function () {
    $('.slogan').each(function () {
        var id = $(this).attr("id");
        var margin = ($('#' + id).height()/2) - ($('#' + id + ' b').height()/2);
        $('#' + id + ' h1').css('margin-top', margin);
    });
});
#bg-img-1{
    background-image: url("../img/pessoas-efeito.png")!important;
    background-repeat: no-repeat;
    height: 297px;
    background-size: 100% auto;
}
#bg-img-2{
    background-image: url("../img/familia-feliz.jpg") !important;
    background-repeat: no-repeat;
    background-size: 100%;
}
<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div id="bg-img-1" class="slogan">
                <div class="container">
                    <h1 class="text-center text-slogan">
                        <b>
                             asdfasdfasdfasdffasdf
                        </b>
                    </h1>
                </div>
            </div>
        </div>

        <div class="item">
            <div id="bg-img-2" class="slogan">
                <div class="container">
                    <h1 class="text-center text-slogan">
                        <b>
                            lorem ipsum Lorem ipsum dolor sit amet <br>
                            asfasfasdf
                        </b>
                    </h1>
                </div>
            </div>
        </div>
    </div>
</div>

javascript jquery html css

  • It is not possible to know the height of elements with display: none;.

  • Is there any other way? @Sergio

  • What effect do you want to make?

  • The text is in the middle vertically of the image. @Sergio

1 answer

0

Unfortunately there is no way to know this height, but for you to center, da para usar apenas css, com o display:flex; align-items:center; follows the code with the centralized texts:

#bg-img-1{
    background-image: url("../img/pessoas-efeito.png")!important;
    background-repeat: no-repeat;
    height: 300px;
    background-size: 100% auto;
}
#bg-img-2{
    background-image: url("../img/familia-feliz.jpg") !important;
    background-repeat: no-repeat;
    height: 300px;
    background-size: 100%;
}

.slogan {
    display:flex;
    align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div id="bg-img-1" class="slogan">
                <div class="container">
                    <h1 class="text-center text-slogan">
                        <b>
                             asdfasdfasdfasdffasdf
                        </b>
                    </h1>
                </div>
            </div>
        </div>

        <div class="item">
            <div id="bg-img-2" class="slogan">
                <div class="container">
                    <h1 class="text-center text-slogan">
                        <b>
                            lorem ipsum Lorem ipsum dolor sit amet <br>
                            asfasfasdf
                        </b>
                    </h1>
                </div>
            </div>
        </div>
    </div>
</div>

I hope I’ve helped.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.