Мне нужно определить ширину вложенного элемента. При подключении стилей через 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)