Ошибка загрузки CSS по событию...
Вложений: 1
Добрый день. Уважаемые форумчане, столкнулся с необъяснимой для меня проблемой на ровном месте.
Имеется следующий код: Код:
Файл 1.css: Код:
.some { Код:
.some { Помогите, кто знает решение проблемы!!! ломаю мозг над решением уже неделю, безрезультатно... архивчик с исходником прилагаю p.s. Еще глюк - загружаем страницу, жмем на 2й ссылке, получаем алерт с кривым значением, жмем ок, жмем на 1й ссылке - вместо "111" получаем "222", т.е. то значение, которое загрузилось перед этим (но тем не менее не показалось), следующие клики уже дают нужный результат. Взрыв мозга |
Vision,
1. Смена href="" в линке не означает действительно полную смену стиля - стили складываются последующий накладывается на предыдущий для реальной смены необходимо ремовить тег и а потом его добавлять заново на страницу уже с новой ссылкой А дважды из-за того то первый раз вы меняете href в линке, а при обновлении он единственный и неповторимый - а не подмененный |
Спасибо за быстрый ответ! Идея решения понятная, а вот реализация не совсем. Вот что наваял, глюки те же, а может даже и больше:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Demo</title> <link id="cssStyle" /> <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").remove(); var css_link = $("<link>", {id: "cssStyle", rel: "stylesheet", type: "text/css", href: "1.css"}); css_link.appendTo("head"); alert($(".some").width()); } function loadsecond() { $("#cssStyle").remove(); var css_link = $("<link>", {id: "cssStyle", rel: "stylesheet", type: "text/css", href: "2.css"}); css_link.appendTo("head"); alert($(".some").width()); } window.onorientationchange = function() { var ww = $(window).width(); var wh = $(window).height(); if(ww>wh) {alert("landscape");loadsecond()} else {alert("portraite");loadfirst()}; return false; } </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> |
|
Deff,
Спасибо, сделал по образу и подобию - НЕ работает! Ошибки те же, неверное значение при первой загрузке <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Demo</title> <link rel="stylesheet" type="text/css" href="> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style>#changeStyle img{border:solid 2px transparent;} .STYLselect {border-color:red!important;} </style> </head> <body> <script type="text/javascript"> var linkStyles = '<link rel="stylesheet" type="text/css" href="'; function setcookie(a, b, c) { if (c) { var d = new Date(); d.setDate(d.getDate() + c); } if (a && b) document.cookie = a + '=' + b + (c ? '; expires=' + d.toUTCString() : ''); else return false; } function getcookie(a) { var b = new RegExp(a + '=([^;]){1,}'); var c = b.exec(document.cookie); if (c) c = c[0].split('='); else return false; return c[1] ? c[1] : false; } function clearSet(L) { if (L) { setcookie("changeStyle", L, 30); $("link[rel='stylesheet']:first").replaceWith(linkStyles + L + '"/>'); } }; var Lmem = getcookie("changeStyle"); clearSet(Lmem); </script> <div id="changeStyle" style="top:0; left: 3px; position:fixed!important;"> <img src="http://www.10pix.ru/img1/3444/5439522.jpg" alt="1.css"/> <br> <img src="http://www.10pix.ru/img1/3492/5439523.jpg" alt="2.css"/> <br> </div> <script> $("#changeStyle img[alt='" + Lmem + "']").addClass("STYLselect"); $('#changeStyle img[alt]').click(function () { L = $(this).attr("alt"); $('#changeStyle img[alt]').removeClass("STYLselect"); $(this).addClass("STYLselect"); clearSet(L); alert($(".some").width()); }); </script> <br /><br /><br /><br /><br /> <div class="some"></div> </body> </html> |
Vision,
попробуйте обрамить $(window).load(function () { alert($(".some").width()); }); (стиль меняется не одномоментно |
Deff,
вызов функции $(window).load внутри $('#changeStyle img[alt]').click(function (...)) никогда не сработает. А вызов этой же функции извне возвращает значение загруженной css в самом начале, если же в моем случае первоначальное href="" то и значение принимает значение ширины окна. Задача в том и состоит, чтобы после загрузки страницы, по некоторому событию загрузить соответствующий стиль и получить из него значения некоторых величин, в одном и том же скрипте. |
Цитата:
когда Вы пишите такую строчку {$("#cssStyle").attr("href","1.css");alert($(".som e").width() то после установки нового значения href нужно время чтобы файл загрузился а Вы сразу хотите получить результат его работы Кроме того при загрузке css по моему не работает onload и мы не узнаем когда же загрузился очередной файл Я бы предложил сделать два класса some1 и some2-которые загрузятся сразу а потом просто менять атрибут class либо просто менять стилями-если это возможно |
Vision,
Цитата:
тады так: <script type="text/javascript"> var W=false; function TstWidth() { var s=100; // var W2=false; if($(".some").length){var W2 = $(".some").width();return true; if(W2!=false&&(W2-W)==0){alert(W)} } timerId01=setTimeout(function(){TstWidth()},s);return;} } </script> <script type="text/javascript"> $("#changeStyle img[alt='" + Lmem + "']").addClass("STYLselect"); $('#changeStyle img[alt]').click(function () { L = $(this).attr("alt"); $('#changeStyle img[alt]').removeClass("STYLselect"); $(this).addClass("STYLselect"); clearSet(L); TstWidth() }); </script> |
Пробовал еще такой вариант - setTimeout(function() { someCSSload(); }, 2000); - иногда работает правильно, иногда не очень. vadim5june, а вот Ваша идея с переключением классов должна сработать. Но чувствую что мне еще придется к Вам обратится. Спасибо большое за помощь!
Deff Ваша конструкция интересна, сейчас опробую |
Часовой пояс GMT +3, время: 15:50. |