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
Слайдерът може да скролира не само текст, но и картинки.
Брой разглеждания на тази статия: 3658
(след дата 20 декември 2009)
Сподели статията в
Бутончета на сайтове, в които можете да споделите линк към тази страница.
Подобни статии:
- Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб страница, която показва swf флаш анимация да бъде преработена към...
- XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл в уеб страница, така че при зареждане на страницата мултимедийния...
- Премахване на грешки в сайт и преминаване към XHTML Тази статия е за често срещани HTML грешки в сайтовете и оправянето им с помощта на HTML валидатора http://validator.w3.org Валидаторът...
- jQuery галерия за бързо преглеждане на снимки Представям ти един jQuery плъгин, който създава уеб интерфейс за преглеждане на снимки качени на твоя сайт. Възможностите на плъгина...
- Карта от Google Maps и валиден XHTML Google Maps карта за твоя сайт В статията Google maps – бързо включване на карта в сайт показах, как бързо да...