How to modify elements: hidden with jquery?

Question

How to modify elements: hidden with jquery?

Navigation

#1 by (0 votes)

1

I use the Bootstrap carousel and I need to modify the margin-top of a title, but when the content div is: hidden, I can not get the height of the text with jquery. Here is 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 html jquery css

asked by anonymous 19.09.2016 / 19:36

1 answer

Protect firebird database uibModal does not show items in ng-repeat

score 0 · Answer 1

Unfortunately there is no way to know this time, but for you to centralize, to use only css, with display:flex; align-items:center; follow 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><!--LatestcompiledandminifiedCSS--><linkrel="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><divid="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 have helped.