…meie igapäevast IT’d anna meile igapäev…

2013-03-04

jQuery.viewSource

Filed under: HTML,Isiklikud,JavaScript — Sander @ 16:13:10
Tags: , ,

I finally released jQuery.viewSource – a jQuery plugin to show the HTML source of current web page, or just a HTML snippet from a page. This is useful for web pages which include HTML/JS/CSS examples and such.

image

As you can see from the image, the plugin can also highlight the HTML, using google-code-prettify script. You have to include the prettify script and CSS to the page yourself.

There are just two methods:

  1. Add $(someselector).viewSource(code-to-show-selector); to document.ready() method. This will bind the click event to the element(s) specified by your jQuery selector – i.e. clicking on those elements will show the source.
  2. Call $().showSource(code-to-show-selector); yourself to immediately show the source.

Note: "code-to-show-selector" is optional selector for the element which code to show. If left empty or passed an empty string, it will default to "html", ie. the whole page.

Download includes both minified and normal version of the script, along with a barebones example. jQuery.viewSource is licenced under Mozilla Public Licence 1.1.

2010-05-05

How to remove border from clicked links

Filed under: CSS,HTML,Nipid — Sander @ 12:02:54

SelectedRaamid

By default, all browsers draw a border around the clicked links – Firefox and IE do a dotted line (first on the image on right) and Chrome (second) has an orange border. While normally this is not an issue – they do it to help user understand that the link has been clicked and is now active. In short, it is an accessibility and usability feature, meant to persist while the page is loading after the link was clicked.

Second (and for some people, more important functionality), is moving between the links using tab key. The outline helps to see what link is currently selected, so user can press enter to navigate.

However, there are times when we do not want or need the border around the link – accordion menus (which are on the picture above) are a perfect example. When user clicks on a menu item, we already have designs in place that show him which item became active – in case of accordion menus, the sub-items become visible.

We also may have tabs, to which we add  “active” class after click, distinguishing the selected element from its siblings – or a myriad of other Web 2.0 features, where the border just becomes unneeded ugly reminder of the time when JavaScript and CSS did not exist.

How does browser apply the border? Easy – it simply applies default design for :focus CSS pseudo-selector. And herein lies the key to removing the border – we override the style:

a:focus { outline: none; }

Or, to remove it from all selectable elements (accordion tabs are usually header tags, tab elements are list elements etc):

:focus { outline: none; }

2007-07-28

IBM’i (X)HTML DOCTYPE: plussid ja miinused

Filed under: CSS,Firefox,HTML,Infotehnoloogia — Sander @ 17:49:38

Ilmselt on ka paljudele profesionaalsetele veebiseppadele üllatuseks, et peale W3C‘poolt soovitatavatele DOCTYPE’dele – ehk siis siin nimekirjas olevatele – olemas ka muud, teiste organisatsioonide poolt loodud DOCTYPE’d. Nendest üks levinumaid on IBM’i XHTML’i versioon, mis on ka mitmes mõttes huvitav.

Kõigepealt – miks on DOCTYPE oluline ja misasi see üldse on?

DOCTYPE on üks instruktsioonidest, mis ütleb SGML või XML dokumendis – näiteks tavalises veebilehes – millist Document Type Definition’i kasutada ja kuidas seda renderdada. Iga hästi tehtud veebilehe päisest võib leida sarnase teksti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

See ütleb brauserile, et tegemist on Transitional XHTML versioon 1.0 tüüpi dokumendiga, mida tuleb sellel aadressil oleva Document Type Definition faili instruktsioonide järgi käsitleda. Tegelikult on tegemist lihtsalt süntaktiliste reeglite koguga.

Mis siis on aga IBM’i XHTML DOCTYPE‘s teistmoodi?

See baseerub tavalisel W3C XHTML 1.0 Transitional DTD‘l – aga järgmiste muudatustega:

  • <noscript></noscript> on lubatud <head></head> sees
  • border, width ja height on lubatud <input> tagile
  • <form> ja <input> võivad olla tagide <table>,<tr> ja <td> sees
  • Atribuudid marginheight, marginwidth, topmargin ja leftmargin võivad olla tagil <body>

Ei paista nagu midagi erilist? Kuid pööra tähelepanu esimesele punktile – <noscript></noscript> on lubatud <head></head> sees – ning tänu sellele saad sa teha:

<noscript>
<meta http-equiv="Refresh" content="0;URL=noajax.php">
</noscript>

Ehk teisisõnu saad sa teha soft redirect’i kasutajatele, kellel JavaScript keelatud, juba lehe head’is, suunates neid tähelepandamatult teisele lehele! Oh miks ometi ei luba seda W3C?

Muud kolm muudatust on eelkõige kujunduslikud, lubades teha asju mis on saavutatavad ka CSS’iga.

Miinused?

Eelkõige see, et eriti vähemlevinud brauserid ei oska IBM’i DTD’ga suurt midagi peale hakata. Mozilla Firefox’i on sisse kooditud konkreetne käsk, et IBM’i DTD tuleb renderdada quirks mode‘s, IE6’l on nagunii viga XML’i deklaratsiooniga – ükskõik mis peale whitespace’i enne doctype deklaratsiooni paneb lehe renderduma quirks mode‘s, kuid IE on tuntud selle poolest et suudab igasugust pahna korralikult renderdada.

Peab tunnistama et ei tea, kuidas Opera – see pirtsakas renderduse priimabaleriin – ja Safari saavad IBM’i DTD’ga hakkama. Oletan, et probleemideta – see on siiski piisavalt levinud dokumenditüübi deklaratsioon. Samuti kasutatakse üsna tihti eelpool kirjeldatud soft redirect’i veebilehtedes, mis tavalisi W3C DTD’sid kasutavad – peab tunnistama, et ka mu oma inglise-eesti sõnastik kasutab seda W3C loose DTD’ga.

Järgmine lehekülg »

Create a free website or blog at WordPress.com.