Заместване на тага marquee за валиден XHTML
Публикувано в (SEO, Валиден HTML код) от gan на 2 юни 2009 в 11:28

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

&lt;marquee direction=<strong title="Position where error was detected.">"</strong>up"


 scrollamount="2" loop="true"

&gt;&lt;ul&gt;...

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

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

Брой разглеждания на тази статия: 324
(след дата 20 декември 2009)

Сподели статията в Тези бутончета са връзки към сайтове, в които можете да качите линк към тази страница.
  • Piron.bg
  • Trohi.com
  • Dao.bg
  • Relacia.com
  • Zdravei.net
  • Web-bg.com
  • Lubimi.com
  • Facebook
  • LinkedIn
  • Google Bookmarks

Ако тази статия е била полезна за теб може да почерпиш автора в тази страница »
(6) коментара    Статия презареждане


Коментари
Васил Тошков на 4 юни 2009 в 19:37 #

Много полезно. Освен че не е валиден, тагът marquee страхотно натоварва процесора и ние, феновете на малки компютърчета, сме ощетени. Не че jQuery не товари, но е в разумни граници.

Boycho Dobrev на 8 септември 2009 в 14:14 #

Защо да е просто, като може да е сложно. Marquee се валидира много лесно. Добре де, пак се прибягва до Javascript, но съвсем символично. И не мисля, че натоварва чак толкова процесора, ако се използва в разумни граници.
Пример за валидиране:
http://properties.frombulgaria.net
/кода всеки може да го види/

gan на 8 септември 2009 в 15:27 #

Работи, но ако JS е изключен или по друга причина не се зареди, посетителя няма да види снимките, които скролираш като в твоя случай това е фатално. Няма елегантност в това решение. Изглежда като кръпка с таг, който в бъдеще няма да се поддържа. Какво правиш, ако с IE9 не се зарежда или направо ти чупи страницата?

Boycho Dobrev на 8 септември 2009 в 16:28 #

Ако JS е изключен, ще е фатално и за Google Maps в моя случай, но също и за твоето решение на проблема, мисля. Тогава сигурно трябва да се извика Флаш.
Предимството на marquee според мен, е че линковете вътре в тага се виждат от търсачките, за разлика от линковете в JS /поне аз и lynx така мислим/. Всъщност пробвах как изглеждат нещата при мен без JS. Вярно малко са комични, но не са фатални, като се изключи Google Maps.
Та според мен е добре да се ползва marquee валидиран чрез JS, ако е решаващо за вас линковете да са видими.
Всъщност с IE9 трябва да се вижда, защото този таг мисля, че е изми…. на Microsoft за IE. По-вероятно е да не се вижда с Mozilla 4.

Малко със закъснение видях, че и твоя сайт е валидиран. Поздравления – рядкост са HTML валидираните сайтове.
И понеже стана дума и за Google Maps, ще споделя полезен опит. За да валидирате сайта си, когато имате маркери с табелки и HTML вътре, завършвайте таговете с \/ – напр. или

gan на 8 септември 2009 в 17:26 #

Е разбира се, че е валиден. Аз съм един „борец за XHTML“ :) Имам отделна категория „Валиден HTML код“ в блога ;)
Изключи си JS и влез в http://arthuradams.bg и ще видиш, че всички връзки в дясната колона се зареждат – перфектно за търсачките и дори върши работа на посетителите на сайта. В твоя сайт при спрян JS не работят както връзките на картинките, така и връзките отгоре. Според мен тези връзки са „невидими“ за търсачките.

Boycho Dobrev на 8 септември 2009 в 17:52 #

Добре, прав си, виждат се както от търсачките, така и от посетителите. Малко странно, както и при мен, но се виждат.
Но не си прав, че моите линкове на картинките не работят. Просто в href вместо http имам Javascript(). И целта ми е не да се виждат от търсачките, а да се интегрират с Google Maps. Google Maps с Java. Може би като пример трябваше да посоча не субдомейна, а домейна.

Напиши коментар
Име: 
Имейл (не се показва): 
Сайт (незадължително): 
Коментар: