Hi there,
I'm the maker of the plugin. If I am not responsive, than its because
I'm pretty busy right now.
That's a lot of code to scan through. How do you include the CSS and
scripts you're talking of?
You need to include all of that in the page that contains the tabs, not
the one that gets loaded (well, at least CSS won't get applied to the
page automagically).
Also take care that you're only including the relevant chunks of html,
not a complete page with a body tag and such. Make sure it gets served
as text/html, not text/plain.
Last not least, most probably you'll need to instantiate the mapMaker in
the onshow callback:
$('#whatever').tabs({
remote: true,
onShow: mapMaker.init
});
Most probably the document.write in the code also breaks the tabs loading.
I'm just guessing a little bit. An online demo would for sure help us to
see better what is going wrong.
-- Klaus
Digislick schrieb:
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 :-)
