Hi all,
I've been lurking for a while, reading as much as I can, trying to learn
quickly. But sometimes it's an uphill battle :-) Sorry if this is an
obvious question to you all, but I'm really banging my head against the
wall with this. I've already directly emailed the maker of this plugin
but haven't heard anything back yet, so thought I'd give asking the
group a try.
I would really appreciate it if somebody could tell me why the Tabs
plugin won't work for me. I believe it's what I'm trying to do with it
that's messing things up. The tabs display fine and are active when
clicked, but all I get in the tabs is ugly text from the html file I'm
trying to load in the tab via the AJAX method. The related graphics in
the page just disappear (which are called up through a related CSS
file). I know very, very little about javascript, so I am completely
lost. I am using the following js file to bring up sticky events when
CSS positions are moused over on a calendar (which is all based on a
graphic). What in this script is messing me up? What can I do?
var mapMaker = {
offsetX: -16, // tooltip X offset
offsetY: 16, // tooltip Y offset
element: null,
DLs: false,
DTs: false,
DDs: false,
on: false,
/* constructor - sets events */
init: function(){
var i=0;
var ii=0;
var currentLocation = 0;
mapMaker.DLs = document.getElementsByTagName('dl');
mapMaker.DTs = document.getElementsByTagName('dt');
mapMaker.DDs = document.getElementsByTagName('dd');
// only loop thru items once
if( mapMaker.on == false ){
//loop through each DL on page
while (mapMaker.DLs.length > i) {
//only affect DLs with a class of 'map'
if (mapMaker.DLs[i].className == 'map'){
//change map DL class, this way map is text only
without javascript enabled
mapMaker.DLs[i].className = 'map on';
//strip whitespace
mapMaker.stripWhitespace(mapMaker.DLs[i]);
mapMaker.stripWhitespace(mapMaker.DTs[i]);
mapMaker.stripWhitespace(mapMaker.DDs[i]);
// loop thru all DT elements
while (mapMaker.DTs.length > ii){
// set the link for the current DT
currentLocation = mapMaker.DTs[ii].firstChild;
// add events to links
mapMaker.addEvt(currentLocation,'mouseover',mapMaker.showTooltip);//displays
tooltip on mouse over
mapMaker.addEvt(currentLocation,'focus',mapMaker.showTooltip);//display
tooltip on focus, for added keyboard accessibility
mapMaker.addEvt(currentLocation,'blur',mapMaker.hideTooltip);//hide
tooltip on focus, for added keyboard accessibility
ii++;
};
ii=0;
//loop through DT elements and assign event to close
link
while (mapMaker.DDs.length > ii){
currentLocation = mapMaker.DDs[ii].firstChild;
mapMaker.addEvt(currentLocation,'click',mapMaker.hideTooltip);//hide
tooltip on click of close button
ii++;
};
ii=0;
};
i++;
};
mapMaker.on = true;
};
},
/* SHOW TOOLTIP */
showTooltip: function() {
var evt = this;
var i = 0;
mapMaker.hideTooltip();
//Find DD to display - based on currently hovered anchor move to
parent DT then next sibling DD
var objid = evt.parentNode.nextSibling;
mapMaker.element = objid;//set for the hideTooltip
//get width and height of background map
var mapWidth = objid.parentNode.offsetWidth;
var mapHeight = objid.parentNode.offsetHeight;
//get width and height of the DD
var toopTipWidth = objid.offsetWidth;
var toopTipHeight = objid.offsetHeight;
//figure out where tooltip should be places based on point location
var newX = evt.offsetLeft + mapMaker.offsetX;
var newY = evt.offsetTop + mapMaker.offsetY;
//check if tooltip fits map width
if ((newX + toopTipWidth) > mapWidth) {
objid.style.left = newX-toopTipWidth-24 + 'px';
} else {
objid.style.left = newX + 'px';
};
//check if tooltip fits map height
if ((newY + toopTipHeight) > mapHeight) {
objid.style.top = newY-toopTipHeight-14 + 'px';
} else {
objid.style.top = newY + 'px';
};
},
/* HIDE TOOLTIP */
hideTooltip: function() {
if (mapMaker.element != null) {
mapMaker.element.style.left = '-9999px';
};
},
addEvt: function(element, type, handler) {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = mapMaker.addEvt.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
};
};
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = mapMaker.handleEvent;
},
handleEvent: function(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || mapMaker.fixEvent(window.event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
};
};
return returnValue;
},
fixEvent: function(event) {
// add W3C standard event methods
event.preventDefault = mapMaker.fixEvent.preventDefault;
event.stopPropagation = mapMaker.fixEvent.stopPropagation;
return event;
},
stripWhitespace: function( el ){
for(var i = 0; i < el.childNodes.length; i++){
var node = el.childNodes[i];
if( node.nodeType == 3 &&
!/\S/.test(node.nodeValue) )
node.parentNode.removeChild(node);
}
}
};
mapMaker.fixEvent.preventDefault = function() {this.returnValue = false;};
mapMaker.fixEvent.stopPropagation = function() {this.cancelBubble = true;};
mapMaker.addEvt.guid = 1;
/* LOAD SCRIPT */
/* for Mozilla */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", mapMaker.init,
null);
};
/* for Internet Explorer */
/[EMAIL PROTECTED] @*/
/[EMAIL PROTECTED] (@_win32)
document.write("<script defer src=ie_onload.js><"+"/script>");
/[EMAIL PROTECTED] @*/
/* for other browsers */
mapMaker.addEvt( window, 'load', mapMaker.init);
If anybody could give me a hand to get this running as I'd wish it
would, it would be much appreciated. If you have a PayPal account, I'd
even be willing to buy you a beer! Seriously! If I need to upload the
calendar itself so somebody can clue me in, please let me know. And
apologies again to the old hands at this if this is a ridiculous
question, but I have to learn somehow.
Thanks :-)
