Фильтр по:
  

Как задать стиль оформления для $IMAGE1$...$IMAGE10$?

Как сделать...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как задать стиль оформления для $IMAGE1$...$IMAGE10$? (Оформление $IMAGE-left$ отступами, CSS, JavaScript)
Как задать стиль оформления для $IMAGE1$...$IMAGE10$?
Дата: Понедельник, 09.05.2011, 20:15 |
Лейтенант
Группа: Проверенные
Сообщений: 69
Награды: 0
Репутация: 0
Статус: Offline


 И снова здравствуйте. Одна знакомая блондинка:) интересуется как сделать тоже самое:

Code
<script type="text/javascript">  
  $(function(){             
  $('div.eMessage img[align="left"]').addClass('imgLeft');  
  $('div.eMessage img[align="right"]').addClass('imgRight');  
  });            
  </script>

Code
.eMessage img.imgLeft,.eMessage img[align="left"]{float:left;margin:0 5px 3px 0!important;}  
  .eMessage img.imgRight,.eMessage img[align="right"]{float:right;margin:0 0 5px 3px!important;}

для $IMAGE1$...$IMAGE10$

 
Дата: Вторник, 10.05.2011, 00:36 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Lunder,
Доброй ... Ночи)
Quote (Lunder)
как сделать тоже самое

Ну ... как - вы всё написали)
Вот это:
Quote (CSS)
.eMessage img.imgLeft,.eMessage img[align="left"]{float:left;margin:0 5px 3px 0!important;}
.eMessage img.imgRight,.eMessage img[align="right"]{float:right;margin:0 0 5px 3px!important;}

Добавить в CSS.

А вот это:
Quote (JS)
<script type="text/javascript">
$(function(){
$('div.eMessage img[align="left"]').addClass('imgLeft');
$('div.eMessage img[align="right"]').addClass('imgRight');
});
</script>

- В глобальный блок, например верхний, или в нижний - в любой, который на всех страницах есть.
...
- По сути - скрипт нужен только для ИЕ - его можно в комментарии заключить ...
Типа вот так:
Quote (Code)
<!--[if lte IE 7]><script type="text/javascript">
$(function(){
$('div.eMessage img[align="left"]').addClass('imgLeft');
$('div.eMessage img[align="right"]').addClass('imgRight');
});
</script><![endif]-->

...
Остальные браузеры понимают формат записи img[align="left"] .....

Ну и при добавлении, используем:
Quote (Info)
Вы можете вставлять картинки в любое место сообщения используя специальные коды $IMAGE1$, $IMAGE2$, $IMAGE3$...
Выравнивать картинку относительно текста можно следующим образом - $IMAGE1-left$.

$IMAGE1-left$ - текст справа, картинка слева ...
$IMAGE1-right$ - текст слева, картинка справа )
....

Готовые стили: (добавляем в CSS в любое место)
Для модулей (нормальные браузеры):
Code
div.eMessage img[align=left],div.eMessage img.imgLeft,td.eText img[align=left],td.eText img.imgLeft{float:left;margin:0 5px 3px 0!important;}
div.eMessage img[align=right],div.eMessage img.imgRight,td.eText img[align=right],td.eText img.imgRight{float:right;margin:0 0 5px 3px!important;}


Для модулей, (ИЕ):
Code
div.eMessage img,td.eText img{z-index: expression(runtimeStyle.zIndex=1,align&&"left"==align.toLowerCase()?(className+=" imgLeft"):(align&&"right"==align.toLowerCase()?(className+=" imgRight"):0));}

.....

Для Форума (нормальные браузеры):
Code
td.posttdMessage img[align=left],td.posttdMessage img.imgLeft{float:left;margin:0 5px 3px 0!important;}
td.posttdMessage img[align=right],td.posttdMessage img.imgRight{float:right;margin:0 0 5px 3px!important;}


Для Форума (ИЕ):
Code
td.posttdMessage img{z-index: expression(runtimeStyle.zIndex=1,align&&"left"==align.toLowerCase()?(className+=" imgLeft"):(align&&"right"==align.toLowerCase()?(className+=" imgRight"):0));}

 
Дата: Четверг, 12.05.2011, 22:00 |
Лейтенант
Группа: Проверенные
Сообщений: 69
Награды: 0
Репутация: 0
Статус: Offline


 сорь, не заметил 7.

Примеры (скрипт в самом низу футера, стиль - в самом низу CSS):

ИЕ 9: здесь и здесь

Опера, ФФ, НН, Сафари, Хром : здесь

рис. в примерах вставлен

Code
$IMAGE1-left$Текст

Сообщение отредактировал Lunder - Четверг, 12.05.2011, 22:09
 
Дата: Четверг, 12.05.2011, 23:18 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Lunder,
Quote (Lunder)
ИЕ 9: здесь и здесь

Запакуй в шаблоне вид материалов код $MESSAGE$ в блок с классом «eMessage», что бы было вот так:
Code
<div class="eMessage">$MESSAGE$</div>

И всё будет работать.
...
Quote (Lunder)
Опера, ФФ, НН, Сафари, Хром : здесь

А к стилям добавь ещё класс «eText»
Что бы было вот так:
Code
.eMessage img.imgLeft,.eMessage img[align="left"],.eText img.imgLeft,.eText img[align="left"]{float:left;margin:0 5px 3px 0!important;}
.eMessage img.imgRight,.eMessage img[align="right"],.eText img.imgRight,.eText img[align="right"]{float:right;margin:0 0 5px 3px!important;}

И скрипт тоже подредактировать придётся ....
Code
<script type="text/javascript">
$(function(){
$('div.eMessage img[align="left"],div.eText img[align="left"]').addClass('imgLeft');
$('div.eMessage img[align="right"],div.eText img[align="right"]').addClass('imgRight');
});
</script>

...

 
Дата: Суббота, 14.05.2011, 22:38 |
Лейтенант
Группа: Проверенные
Сообщений: 69
Награды: 0
Репутация: 0
Статус: Offline
Quote
Запакуй в шаблоне вид материалов код $MESSAGE$ в блок с классом «eMessage»,

В стандартном шаблоне уже запаковано:
Code
<div class="eMessage" style="text-align:justify;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div>

«eText» добавил, CSS и скрипт изменил, как Вы написали. Во всех перечисленных браузерах, кроме ИЕ9, работает корректно.

ИЕ в сокращенных версиях "Новостей" и "Статей" скрипт отрабатывает (причем, только на первых страницах), а в полных нет.

Сообщение отредактировал Lunder - Суббота, 14.05.2011, 23:30
 
Дата: Суббота, 14.05.2011, 23:46 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Lunder,
Quote (Lunder)
ИЕ в сокращенных версиях "Новостей" и "Статей" скрипт отрабатывает (причем, только на первых страницах), а в полных нет.

В полных - у вас не div, а «td» ...

Вот так пропишите скрипт:

Code
<script type="text/javascript">
$(function(){
$('.eMessage img[align="left"],.eText img[align="left"]').addClass('imgLeft');
$('.eMessage img[align="right"],.eText img[align="right"]').addClass('imgRight');
});
</script>

...
Прикрепления: 9685725.png (8.2 Kb)

 
Дата: Суббота, 14.05.2011, 23:56 |
Лейтенант
Группа: Проверенные
Сообщений: 69
Награды: 0
Репутация: 0
Статус: Offline


 есть. работает и в полной версии. Но на 2,3,4 и т.д. странице ИЕ скрипт не отрабатывает. wacko

 
Дата: Воскресенье, 15.05.2011, 02:01 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Lunder,
Quote (Lunder)
есть. работает и в полной версии. Но на 2,3,4 и т.д. странице ИЕ скрипт не отрабатывает

Отключи аякс для переключателей ... ПУ » Общие настройки сайта.

 
Дата: Вторник, 17.05.2011, 16:14 |
Лейтенант
Группа: Проверенные
Сообщений: 69
Награды: 0
Репутация: 0
Статус: Offline


 Отключил. спс большое. Все работает.

 
Дата: Пятница, 19.10.2012, 12:21 |
Dejet
Сержант
Группа: Пользователи
Сообщений: 22
Награды: 0
Репутация: 0
Статус: Offline


 Все сделал как тут описано, но у меня почему то нет отступов от картинки к тексту, а весь текст будто приклеен к изображению.
Вот тут ...

Сообщение отредактировал Dejet - Пятница, 19.10.2012, 13:45
 
Дата: Пятница, 19.10.2012, 12:49 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Dejet,
Quote (Dejet, Пт, 19.10.2012, 12:21:59)
Все сделал как тут описано, но у меня почему то нет отступов от картинки к тексту, а весь текст будто приклеен к изображению.
Вот тут http://www.filmstok.ru/blog/kovboj_majkl_fassbender_zastupitsja_za_krasotku_portman/2012-08-28-5

Уберите из таблице отмеченное красным:
Quote (CSS)
<style type="text/css">
/* StartStyle */
.hideWrap{
text-align:left; /* аЃб�б�аАаНаАаВаЛаИаВаАаЕаМ аВб�б�аАаВаНаИаВаАаНаИаЕ аПаО аЛаЕаВаОаМб� аКб�аАб� */
clear:both;
}
....
.hideCont{
display:none; /* аЁаКб�б�аВаАаЕаМ аКаОаНб�аЕаНб� */
}
/* EndStyle */
</style>

- это теги, им там не место.
По этому и не обрабатываются стили, так как ошибки синтаксиса.


Прикрепления: 1057067.png (14.9 Kb)

 
Дата: Пятница, 19.10.2012, 13:45 |
Dejet
Сержант
Группа: Пользователи
Сообщений: 22
Награды: 0
Репутация: 0
Статус: Offline


 Спасибо все получилось

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как задать стиль оформления для $IMAGE1$...$IMAGE10$? (Оформление $IMAGE-left$ отступами, CSS, JavaScript)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия