Добрый день. Уважаемые форумчане, столкнулся с необъяснимой для меня проблемой на ровном месте.
Имеется следующий код:
|
Код:
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Demo</title>
<link id="cssStyle" href="" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function loadfirst() {$("#cssStyle").attr("href","1.css");alert($(".some").width())}
function loadsecond() {$("#cssStyle").attr("href","2.css");alert($(".some").width())}
window.onorientationchange = function() {
var ww = $(window).width();
var wh = $(window).height();
if(ww>wh) {alert("landscape");loadsecond()}
else {alert("portraite");loadfirst()}
}
</script>
</head>
<body>
<a href="#" onclick="loadfirst();">First css load</a>
<a href="#" onclick="loadsecond();">Second css load</a>
<div class="some"></div>
</body>
</html>
|
Имеется две ссылки, при нажатии на которые подгружается соответствующий стиль (стили подгружаются также при смены ориентации дисплея(для мобилок)).
Файл 1.css:
|
Код:
|
.some {
width:111px;
height:20px;
background-color: #1144CC;
} |
И файл 2.css:
|
Код:
|
.some {
width:222px;
height:20px;
background-color: #1144CC;
} |
В итоге после загрузки первого стиля должен вылезть alert со значением 111, а после второго - 222 соответственно. Но при первоначальной загрузке документа и нажатии на любую ссылку - вылазит alert со значением ширины окна! А должен содержать значение ширины элемента .some! Если страницу обновить и опять нажать на любую ссылку - получим верное значение. Но вот на мобильных девайсах (пример айфон) сколько не обновляй - первый клик по ссылке дает ошибочное значение.
Помогите, кто знает решение проблемы!!! ломаю мозг над решением уже неделю, безрезультатно... архивчик с исходником прилагаю
p.s. Еще глюк - загружаем страницу, жмем на 2й ссылке, получаем алерт с кривым значением, жмем ок, жмем на 1й ссылке - вместо "111" получаем "222", т.е. то значение, которое загрузилось перед этим (но тем не менее не показалось), следующие клики уже дают нужный результат. Взрыв мозга