Abonneren op: RSS

I scream, you scream, We all scream for HTML5.

Gigadesign


Remote linking

In: CSS, HTML5, jQuery

Remote linking, maar dan iets juister

Op http://css-tricks.com/remote-linking legt Chris Coyier uit, hoe je remote linking kunt doen met CSS only.

rolleverexample

Enigste nadeel vind ik dat de HTML/CSS code ervan uit gaat dat alles bij elkaar hangt, zowel afbeelding alsook de tekst.

Gebruikte HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="page-wrap">
<h1>Remote Linking</h1>
<div class="people">
 <a href="#toby" id="toby">
   <span class="name">Toby Yong</span><br>
 Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People.
   <span class="photo">
    <img src="images/blog-toby_young_0.jpg" alt="Toby Pic">
   </span>
  </a>
 ...// the rest // ...
</div>
</div>

Gebruikte CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* {margin: 0; padding: 0;}
body {font: 12px/1 Arial, Sans-Serif;}
#page-wrap {width: 600px; margin: 50px auto;}
.people {position: relative;} 
a {text-decoration: none;color: #222;display: block;
    margin: 0 0 0 270px;outline: none;padding: 5px;}
a img {border: 1px solid #ccc;display:block;position:absolute;}
a:hover {background: #ffefcd;}
a .name {font: 18px Georgia, Serif;}
a:hover .name {color: #900;font-weight: bold;} 
a:hover img {border: 5px solid #222;margin: -4px;}
#toby img {top: 0;left: 0; }
#tom img {top: 0;left: 134px; }
#gail img {top: 134px;left: 0;}
#padma img {top: 134px;left: 134px;}

Zoals je ziet, niet veel CSS voor nodig, maar niet echt flexibel qua uitbreiding of maintenance daar absolute positionering gebruikt is.

Dus dacht ik …, maak dat eens met jQuery.

Ik wou het zo maken dat de afbeeldingen niet “vast” zaten aan hun tekst, en ook omgekeerd, iets wat in de werkelijkheid ook het geval kan zijn, afbeeldingen staan “daar”, en bijhorende tekst/link “daarzo” ergens.

Nieuwe HTML

Let op: toevoeging is het HTML5 attribuut data-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="page-wrap">
<h1>Remote Linking</h1>
<img src="images/blog-toby_young_0.jpg" alt="Toby Pic" data-alt="toby">
<img src="images/tom_1.jpg" alt="Tom Pic" data-alt="tom">
<img src="images/Gail125w.jpg" alt="Gail Pic" data-alt="gail">
<img src="images/padma.jpg" alt="Padma Pic" data-alt="padma">
<h2>Some title to make seperation visible</h2>
<div class="people">
<a href="#toby" id="toby">
 <span class="name">Toby Yong</span><br>
 Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People.
 </a>
 ...// the rest // ...
</div>
</div>

Nieuwe CSS

Niet veel verandert, de absolute positioneringen weg gehaald en de nieuwe “active” situatie toegevoegd

1
2
3
4
5
6
7
8
9
10
11
* {margin: 0;padding: 0;}
body {font: 12px/1 Arial, Sans-Serif;}
#page-wrap {width: 600px; margin: 50px auto;}
h1 {font-size: 30px; letter-spacing: -1px; margin-bottom: 20px;}
h2 {margin: 20px 0 ;font-size: 20px;}
a {text-decoration: none; color: #222; display: block;margin: 0; outline: none; padding: 5px;}
img {border: 1px solid #ccc;margin-right: 4px;}
a:hover, a.active {background: #ffefcd;}
a .name {font: 18px Georgia, Serif;}
a:hover .name, a.active .name {color: #900; font-weight: bold;} 
img:hover, img.active {border: 5px solid #222; margin: -4px 0 -4px -4px;}

En dan de jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
 var alt, personName;
 $('img, a').mouseenter(function() {
  $dit = $(this);
   if($dit.is('img')) {
    alt = $dit.data('alt').toLowerCase();
    $('a#'+alt).addClass('active');
   }
   else {
     personName = $dit.attr('id');
     $('img[data-alt~='+personName+']').addClass('active');
   }
  }).mouseleave(function() {
   $('a#'+alt).removeClass('active');
   $('img[data-alt~='+personName+']').removeClass('active');
 });
});

jQuery een beetje toelichten

Zoals je ziet gebruik ik de mouseenter() en de mouseleave() functies.
Bij mouseenter() zorg ik ervoor dat ik weet waarover ik met de muis ga (link of afbeelding) door in de code een variabele te zetten die telkens het huidige element bevat (waar de muis over gaat).
Waarna ik eerst moet checken om wat een element dat het gaat met $dit.is('img'), aangezien we telkens andere waarden moeten ophalen afhankelijk van het element.

Als het een afbeelding is, dan halen we de data-alt attribuut waarde op met $dit.data('alt') en zoeken dan de link met deze ID en zetten deze “active” met addClass().

Als het een link is, halen we de ID waarde op met $dit.attr('id'); en zoeken naar een afbeelding in welke het data-alt attribuut de waarde heeft van de ID met $('img[data-alt~='+personName+']') en zetten deze ook eveneens “active” met addClass().

Bij mouseleave(), dus als je muis weg is van het element, zetten we de class‘ses terug naar hun initiele waarde met removeClass().

Beter of niet?

Dit hangt af van de situatie. als het een vaste hoeveelheid afbeeldingen zijn, dan ben je best af met de manier van Chris Coyier, als het maintainable moet zijn, en er zullen meer afbeeldingen kunnen zijn, die al dan niet in de html genest zijn, ben je beter af met de voorgestelde jQuery manier.active

Ook een reactie geven!!

Je email is nodig en zal nooit worden weer- of doorgegeven.