Заместване на тага marquee за валиден XHTML

HTML тага marquee се използва за автоматично скролиране на текст. Текста поставен между тагове marquee се показва от браузъра като движещ се текст, хоризонтално или вертикално. Не използвай тага marquee основно по следните причини: кода на страницата, която съдържа marquee не е валиден XHTML; браузъра натоварва процесора на компютъра;  движението не е плавно, а накъсано и като резултат от това изглежда грозно и се чете трудно. Грозни примери има тук.

Да приемем, че имаш страница която съдържа код за превъртане на новини. Подобен на този:
<div class=“news“>
<marquee direction=“up“ scrollamount=“2″ loop=“true“>
<ul>
<li><h4><span class=“orange“>Заглавие 1</span></h4><p>Текст новина 1</p></li>
<li><h4><span class=“orange“>Заглавие 2</span></h4><p>Текст новина 2</p></li>
<li><h4><span class=“orange“>Заглавие 3</span></h4><p>Текст новина 3</p></li>
  </ul>
</marquee>
</div>

При опит страницата да мине през валидатора се получава грешка подобна на следната:

Line 41, Column 52: Attribute „DIRECTION“ is not a valid attribute
<marquee direction=up“ scrollamount=“2″ loop=“true“><ul>…

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element.

Заместване на тага marquee с jQuery

Най-доброто решение на проблема е като тази част от кода за показване на новини се преработи на JavaScript.

Следния пример се базира на кода на Easy Slider 1.5 за скролиране на текстово съдържание и на картинки. Този код от своя страна разчита на библиотеката jQuery.

Копирай файловете:

http://arthuradams.bg/jscripts/jquery.js

http://arthuradams.bg/jscripts/easySlider1.5.js

http://arthuradams.bg/jscripts/slider.js

и ги качи в директория jscripts, която се намира в главната уеб директория.

Файла http://arthuradams.bg/css/slider.css постави в /css

Файловете за бутончета за превъртане (правени от мен)

http://arthuradams.bg/images/btn_prev.gif

http://arthuradams.bg/images/btn_next.gif

постави в директория /images

В страницата която ще показва новините между таговете head включи файловете
<script type=„text/javascript“ src=„jscripts/jquery.js“></script>
<script type=„text/javascript“ src=„jscripts/easySlider1.5.js“></script>
<script type=„text/javascript“ src=„jscripts/slider.js“></script>
<link href=„css/slider.css“ rel=„stylesheet“ type=„text/css“ media=„screen“ />

Замествам целия блок div id=news с:
<div id=„slider“>
<ul>
<li><h4><span class=“orange“>Заглавие 1</span></h4><p>Текст новина 1</p></li>
<li><h4><span class=“orange“>Заглавие 2</span></h4><p>Текст новина 2</p></li>
<li><h4><span class=“orange“>Заглавие 3</span></h4><p>Текст новина 3</p></li>
</ul>
</div>

Това е. Получения код е валиден XHTML и движението е много по-плавно.  Освен това можеш да използваш бутончето стрелка нагоре, за да се върнеш на предната новина при което движението спира, за да може да я прочетеш спокойно. Настройки за движението, като скорост, секунди за които спират новините и др.  се задават от файла jscripts/slider.js

Работещ код има във всяка страница на сайта за обучения по мениджмънт и маркетинг arthuradams.bg

Слайдерът може да скролира не само текст, но и картинки.

Прочетена:7715
« Предишна публикация

Флаш анимация без таг embed за валиден XHTML

В този урок за SEO оптимизиране се показва как уеб страница, която показва swf флаш анимация да бъде преработена към валиден XHTML код. В примера се приема, че флаша се намира в директория /flash/2009.swf и има ... Повече информация »

Следваща публикация »

Популяризиране на сайт с външни връзки

Внимание! Забележка от 13 май 2014г.:  Моля да имате предвид, че тази публикация е писана отдавна и много от изброените тук методи вече не работят, а други могат да бъдат опасни за вашия сайт! Вижте публикацията ... Повече информация »

6 коментара

  1. Boycho Dobrev 08.09.2009
  2. gan 08.09.2009
  3. Boycho Dobrev 08.09.2009
  4. gan 08.09.2009
  5. Boycho Dobrev 08.09.2009