CODEWITHSUNDEEP
jquery
prochine
prochine

Reputation: 43

what is the rel attribute and why is it used in this code?

I know that the rel attribute refers to the stylesheet (correct me if I'm wrong), but I don't know why it is there in this piece of code. I'm taking this from a magic line demo http://css-tricks.com/examples/MagicLine/ (the second one). 

$MagicLineTwo
     .data("origColor", $(".current_page_item_two a").attr("rel"));

the .attr('rel') is what I am getting confused about. What is it storing as the value of origColor?

Upvotes: 0

Views: 96

Answers (2)

couzzi
couzzi

Reputation: 6366

Once upon a time, when the world wide web was the wild wild west, developers "hijacked" the rel attribute to store all sorts of things on DOM elements. Since rel is a real attribute, it played nice with browsers—they didn't freak out when they encountered it. Now in the modern world, we can store data in data- attributes. This is referred to as DOM Expando:

Expando Properties are attributes (of a DOM element in this case) which are not part of the standard definition.

http://wiki.greasespot.net/Expando_Properties

Modern browsers see these attributes and say "I don't know what you are, but that's cool with me", and carry on rendering HTML.

The appropriate way to do this, is to leave rel out of it (as pointed out above, it has it's own purpose), and use the proper data- attribute (note the data- prefix below):

<div id="myCoolDiv" data-original-color="blue"></div>

Then, getting that value is the same as before:

var originalColor = $("#myCoolDiv").attr("data-original-color");

Upvotes: 1

Vennik
Vennik

Reputation: 565

It is storing the color code of where he's going to make the transition posible. Bad use of the attribute rel in this case. But it is possible to store data in it.

Upvotes: 0

Related Questions