[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Странное поведение страницы со скриптом
Страницы: 1, 2
Владимир55
Визуальный редактор при вставке графических материалов вырабатывает код вида
<img src="/1-my-images/328904408.jpg" width="170" height="79" style="float: right;" />  


Параметр width с помощью специального скрипта пробразуется в ширину картинки таким образом, что численное значение ширины в пикселях интерпретируется как то же самое количество процентов, а если ширина больше 100 пикселей, то принимается равной 100%. Вот этот замечательный скрипт:
<script>  
$(function(){
$('.image_formatting img').each(function(){
$(this).attr('width', parseInt($(this).attr('width'))>100 ? '100%' : $(this).attr('width')+'%');
$(this).removeAttr('height');
});
});
</script>



Если бы в коде отсутствовал параметр style, то все было бы великолепно. Но наличие этого параметра меняет ситуацию самым странным образом: если ширина графики ненамного больше 100рх, то все нормально. Но если ширина намного больше 100рх, то скрипт отказывается её переварить!

Вот здесь тестовая страница, в которой размер графики составляет не более 170 пискселей. Во всех браузерах все нормально.

А вот та же страница, но ширина графики порядка 950рх. И в браузерах Яндекс, Сафари и Maxthon страница разваливается самым ужасным образм!

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

Можно ли решить эту проблему?
linker
Надо определиться, либо используются стили, либо атрибуты, т.е. либо удалять ненужные атрибуты и устанавливаться стили, либо удалять стили и устанавливать атрибуты.

_____________
Gear Framework
Gear Framework на Github
Владимир55
Если бы это было в моей власти, то не возникло бы и проблем. Но, как я уже сказал, код выдает визуальный редактор. И водыет его только так и никак иначе. Поэтому задача - приспособиться к этому коду.
linker
Я не вижу где разваливается.

_____________
Gear Framework
Gear Framework на Github
Владимир55
Цитата (linker @ 6.01.2014 - 18:02)
Я не вижу где разваливается.

Каким браузером смотрите?

Дефект проступает в браузерах Яндекс, Сафари и Maxthon.
Игорь_Vasinsky
<script type="text/javascript">
var imgs = document.getElementsByTagName('img');

for(key in imgs){
if(typeof(imgs[key]) == 'object'){
var width = imgs[key].getAttribute('width');
imgs[key].setAttribute('width',width > 100 ? '100%' : width+'%');
imgs[key].removeAttribute('height');
}
}

</script>


Хром - полёт нормальный с любым отличным width от 100

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker
linker
Яндекс, Сафари, Хром на одном движке и работают у меня нормально (по вашей ссылке).

_____________
Gear Framework
Gear Framework на Github
Владимир55
А чего же у меня Яндекс показывает так плохо? На двух разных компах!
sergeiss
Цитата (Владимир55 @ 6.01.2014 - 21:45)
Но, как я уже сказал, код выдает визуальный редактор.

Но ты так и не ответил на вопрос, какой же это редактор.

PS. Из тебя как из партизана тащить приходится smile.gif Если это ДримВивер, то там очень легко ИЗНАЧАЛЬНО эта проблема обходится и он не ставит ширину и высоту для картинки. Если другой какой-то, то тоже, возможно, есть возможность заставить редактор работать по-нормальному, вместо того, чтобы разбираться с его последствиями.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Игорь_Vasinsky
в консоле смотри - выполняется ли условие, меняются ли значения у атрибутов

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker
Zzepish
Владимир55
забей фиг на Яндекс, Maxthon. Ориентируйся на популярные браузеры
Владимир55
Цитата (sergeiss @ 6.01.2014 - 19:50)
Но ты так и не ответил на вопрос, какой же это редактор.

Редактор TinyMCE - он в комментариях в коде прописан.

Цитата (Zzepish @ 6.01.2014 - 21:02)
Владимир55
забей фиг на  Яндекс, Maxthon.

В принципе, да - Яндекс.Браузер дает всего 4%. Но как-то не люблю я, когда что-то криво... Да и увеличиться может его использование.
sergeiss
Цитата (Владимир55 @ 7.01.2014 - 01:25)
Редактор TinyMCE

В таком случае - смени редактор... Серьёзно говорю: редактор не должен диктовать делать всякие "танцы с бубном" из-за таких штуковин.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Zzepish
а вообще: учи верстку. Гемора меньше будес
Владимир55
Цитата (sergeiss @ 6.01.2014 - 22:18)
Цитата (Владимир55 @ 7.01.2014 - 01:25)
Редактор TinyMCE

В таком случае - смени редактор...

Да как я его сменю, когда он в CMS встроен?

Цитата (Zzepish @ 6.01.2014 - 23:22)
а вообще: учи верстку.

А я сейчас что делаю, по Вашему?
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.