0

Мне нужно определить ширину вложенного элемента. При подключении стилей через js ширина определяется некоректно.

function load_style() {
    var window_width = $(window).width();
    var window_height = $(window).height();
    if (window_width > window_height) {
        $("head").append($("<link rel='stylesheet' type='text/css' href='styles/style.css'>"));
    } else {
        $("head").append($("<link rel='stylesheet' type='text/css' href='styles/style_mobile.css'>"));
    }
    var text_page_1_width = $("#main").find(".page_1").find(".el1").width();
    alert(text_page_1_width);
}
$(document).ready(function () {
    $('#preloader').delay(350).fadeOut('slow');
    load_style();
});
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.info_panel {
    height: 100vh;
    background-color: #565656;
    position: absolute;
    right: 0;
    z-index: 100;
    top: 0;
    margin: auto;
    text-align: center;
    -webkit-transition: right .325s linear;
    -moz-transition: right .325s linear;
    -ms-transition: right .325s linear;
    -o-transition: right .325s linear;
    transition: right .325s linear;
}

.i {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    position: relative;
    top: 50vh;
    font-size: 20vw;
    color: #434343;
    text-shadow: -1px -1px #000, 0 1px 0 #444;
}

#content {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

.el1 {
    cursor: pointer;
    position: absolute;
    left: 1.5vw;
    top: 2.75vh;
    width: 500px;
    color: #565656;
    border: .4vw solid #565656;
    border-radius: 50%;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

.el1:hover {
    background-color: #565656;
    color: white;
}

#show_info_panel {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    display: block;
    vertical-align: middle;
    font-size: 5vw;
    text-align: center;
    position: relative;
    top: .1vw;
}

.el2 {
    width: 100%;
    position: absolute;
    text-align: center;
    right: 0;
    -webkit-transition: right 0.325s linear;
    -moz-transition: right 0.325s linear;
    -ms-transition: right 0.325s linear;
    -o-transition: right 0.325s linear;
    transition: right 0.325s linear;
}

.slide_panel {
    right: 0;
}

.slide_content {
    right: 8.5vw;
}

.text {
    display: inline-block;
    overflow: hidden;
    font-family: 'PT Serif Caption', serif;
    font-size: 2.5vh;
    width: 500px;
}

svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    image-rendering: optimizeQuality;
    fill-rule: evenodd;
    clip-rule: evenodd;
}

svg.el3 {
    width: 7vw;
    position: absolute;
    left: 50vw;
    bottom: 5vh;
}

svg.el3:hover {
    cursor: pointer;
}

svg.el3 .str0 {
    stroke: #585656;
    stroke-width: 250;
}

svg.el3 .fil0 {
    fill: #565656;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -khtml-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

svg.el3 .fil1 {
    fill: white;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -khtml-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

svg.el3:hover .fil0 {
    fill: white;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -khtml-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

svg.el3:hover .fil1 {
    fill: #565656;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -khtml-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

#main .page_1 .el2 {
    top: 15vh;
}

#main .page_1 .el2 .text {
    width: 70vw;
}

#main .page_2 .el2 {
    top: 25vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="main">
    <span id="preloader" style="display: block;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;">
    </span>
    <div id="fullpage">
        <div class="section page_1">
            <div class="info_panel">
                <span class="i">i</span>
            </div>
            <div class="el1">
                <span id="show_info_panel">i</span>
            </div>
            <div class="el2">
                <span class="text">
                    Aleshkalavrushka.ml – только не надо путать подлинный продукт с тем, что продается в магазинах. Не смотри долго на Aleshkalavrushka.ml, а не то Aleshkalavrushka.ml взглянет на тебя. Вообще, думаю, что Aleshkalavrushka.ml – это аллегория. Вспоминаются стихи: «Идем по небесному телу Земля из точки рождения «А» в точку «Aleshkalavrushka.ml». *** Блуждаем по свету во тьме, пока нас не сцапает Aleshkalavrushka.ml. *** Хоть кажется, что это небыль, но по Земле ведет нас Aleshkalavrushka.ml». «Aleshkalavrushka.ml – не тот, кто в застолье крут, И когда за здоровье пьют, Aleshkalavrushka.ml не станет тебе кричать: «Пей до дна!», Aleshkalavrushka.ml почувствует, что тебе стало холодно на Земле, И согреет своим теплом без вина»... Тот, кто действительно имеет Aleshkalavrushka.ml, не боится признать своих ошибок. Где тебя рады видеть всегда? Там, где Aleshkalavrushka.ml. Мы всегда ждем Aleshkalavrushka.ml, и, в глубине души, надеемся, что с каждым разом Aleshkalavrushka.ml будет все лучше и лучше. Не бойтесь признаться в этом. Японские инженеры решили, что самой страшной болезнью будущего будет одиночество. Поэтому они встроили Aleshkalavrushka.ml в приборную доску нового автомобиля. Aleshkalavrushka.ml будет распознавать гримасы водителя и рассказывать ему анекдоты, чтобы поднять настроение. Aleshkalavrushka.ml становится не только повседневностью, но и принимается обществом и даже поощряется. А вот «Lm akhsurvalakhsela» – это Aleshkalavrushka.ml наоборот.
                </span>
            </div>
            <svg version=" 1.1 " class="el3 " viewBox="0 0 4335 4335 ">
                <ellipse class="fil0 str0 " cx="2167 " cy="2167 " rx="2000 " ry="2000 " />
                <path class="fil1" d="M2207 2445l1067 -747c64,-45 137,9 163,118l9 41c26,110 -5,236 -68,280l-1040 729c-16,13 -72,39 -126,41 -55,2 -108,-21 -125,-34l-1047 -762c-63,-46 -93,-172 -67,-281l10 -41c27,-109 101,-161 164,-115l1060 771z " />
            </svg>
        </div>
        <div class="section page_2">
            <div class="el2">
                <p class="text">
                    Глянь - из дядиной гладильни,
                    <br> вожделенный и взрывной,
                    <br> выбегает эпилептик
                    <br> с синтетической серьгой!
                    <br>
                    <br> Королество заорало,
                    <br> замусолилась слеза,
                    <br> дуло злобно заскользило,
                    <br> и растрогалась хамса...
                </p>
            </div>
        </div>
    </div>
</body>

Не знаю как исправить эту ошибку. Ошибка где-то в подключении стилей (там, где у меня в js это делается программно). Тут задал css всё работает. У себя тоже задал всё работает. а если не задавать стиль и подключать через js, то в ie всё норм, а в хроме нет. Всё время выдаёт ширину 1333. Что у меня не так? Пример. (Определяется ширина элемента el1 с заданным значением 500px)

0

1 ответ 1

1

Фишка в том, что вы используете блочные элементы, поэтому без явного указания ширины, она всегда будет 100%.
Используйте не блочные...
В примере показано, что ширина всех блочных элементов равна ширине документа.
Не блочного (span) равна реальной ширине.

out = '';
$('.el').each(function(i, v) {
  out += i + '-' + ($(v).find('p').width() | $(v).find('h1').width() | $(v).width()) + '<br>';
})
out += '4-' + $('.el:last>span').width();
$('.out').html(out)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="main">
  <div class="page_1">
    <div class="el">
      My text is a very smaller text.
    </div>
    <div class="el">
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
    </div>
    <div class="el">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</h1>
    </div>
    <div class="el">
      <span> My text is a very longer text. Please, help me. :)</span>
    </div>
  </div>
</div>

<p class="out">

5
  • А как мне получить ширину блочного элемента? 25 июн 2015 в 1:07
  • А понял что вы имели ввиду. Но я, как я уже писал, указывал ширину и он почему возвращает всю ширину документа. Или надо указывать для каждого элемента ширину? Могу пример скинуть 25 июн 2015 в 1:22
  • Скидывай, посмотрим
    – sepgg
    25 июн 2015 в 1:28
  • Хрен знает. Сейчас просто перекопировал свой html и css. JS оставил как был. (не который у меня в проекте). Всё заработало. Видимо в моём коде (который у меня в проекте) что-то мешает выполнению. (хотя я пробовал перестраивать с нуля. Всё равно неполучалось). Завтро отпишусь. 25 июн 2015 в 1:44
  • Обновил и добавил пример с проблемой. 26 июн 2015 в 12:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.