Toby A Inkster wrote:
In "the other place" Jukka has pointed out that semantically <blockquote/>
is useless in many browsers, so I'm experimenting with Javascript to put
some functionality back into <blockquote/>.
I'm not well-versed in HTML subtleties, but according to the HTML
reference, BLOCKQUOTE elements only offer a "cite" attribute, aside of
the ones defined by the %attrs; entity. Since you're likely to want to
precise source, date, author etc, ISTM that blockquote cannot be
particularly enhanced, you'd indeed use a larger structure most of the
time (for instance a DIV as a container and other tags for other
information).
The enhancement you want to set up is probably the only logical one
(apart from working with extended DTD), although I think that having the
link already existing as part of an additional tag would probably be
safer (for instance you position your link relatively to the top-left
blockquote point, but what if the quotation needs scrolling?).
1. When the "cite" text is hovered over, the link goes invisible. The link
still works, but this is certainly not desirable behaviour. I believe it
has to do with event bubbling.
That's correct, moving into an inner element fires the mouseout event of
the outer element, then the event mouseover event is fired from the
inner element and bubbles to the outer element; each time the
appropriate handlers being triggered.
You can manage this issue by studying the origin/direction of the event
and taking adapted decision (or using mouseenter-mouseleave non-standard
events).
2. I need a way to attach the bqHover and bqHoverOut functions to the
blockquote without using the onmouseover and onmouseout HTML attributes so
that all the JS can go in one external script file. I think
addEventListener comes into play here,
You can always define mouseover/mouseout handlers outside of the tag
declaration, using a reference to the element, so that's not a problem.
Alternatively, you could also set up some kind of mousemove conception,
though this would be more complex to manage.
"addEventListener" is a way to define a handler, it is useful when you
want to set up many listeners to the object (and for the sort of script
you want to design it would indeed make sense to use addEventListener
and IE's attachEvent methods - I prefer using a specific function for
that, though).
Here's a simple example of what you're asking; tested IE6, Mozilla 1.5,
Opera 7 - you might surprisingly experience flickering with IE if you
include several block-level elements in the blockquote - I think that
nothing can be done about that. All the script part can be safely
inserted as a js include if needed.
<script type="text/javascript">
(function(){
var CITE_VALUE="Jump!";
var CITE_CLASS="jsCite";
function _e(obj, evt, func) {
if(obj[evt]) {
obj[evt]=(function(originalHandler) {
return function () {
func.apply(obj, arguments);
return originalHandler.apply(obj, arguments);
}
})(obj[evt]);
} else
obj[evt]=func;
}
function contains(container, containee) {
if(container.contains) {
return container.contains(containee);
} else {
while(containee && containee!=container)
containee=containee.parentNode;
return !!containee;
}
}
function mover (evt) {
evt=evt||window.event;
var related=evt.fromElement||evt.relatedTarget;
if(related) {
if(!contains(this, related)) {
Cite.define(this.citeObject, this);
Cite.setVisible(true);
}
}
}
function mout(evt){
evt=evt||window.event;
var related=evt.toElement||evt.relatedTarget;
if(related) {
if(!contains(this, related)) {
Cite.define(this.citeObject, this);
Cite.setVisible(false);
}
}
}
var Cite = (function() {
var $child, $parent;
return {
define:function(child, parent){
if(!child) {
var a, c, d=document;
if((c=parent.getAttribute("cite"))!="") {
a=d.createElement("a");
a.href=c;
a.appendChild(d.createTextNode(CITE_VALUE));
parent.citeObject=d.createElement("span");
parent.citeObject.className=CITE_CLASS;
parent.citeObject.appendChild(a);
child=parent.citeObject;
}
}
$child=child;
$parent=parent;
},
setVisible:function(bVisible){
if($child && $parent)
$parent[(bVisible?"append":"remove")+"Child"]($child);
}
}
})();
if(typeof Function!="undefined" &&
Function.prototype &&
Function.prototype.apply) {
_e(window, "onload",
function(evt){
var d=document;
if(d && d.body && d.createElement && d.body.appendChild &&
typeof d.body.parentNode!="undefined" &&
d.getElementsByTagName) {
var bq=d.getElementsByTagName("blockquote");
for(var ii=0; ii<bq.length; ii++) {
_e(bq[ii], "onmouseover", mover);
_e(bq[ii], "onmouseout", mout);
}
}
}
);
}
})();
</script>
<style type="text/css">
blockquote {
position: relative;
margin-left:0; padding-left:4em;
}
blockquote .jsCite {
font-size: 85%;
position: absolute; top: 0; left: 0;
padding: 1px;
border: 1px dotted black;
}
</style>
<blockquote cite="hello.html">
<p>Hello</p>
</blockquote>
HTH
Yep.
