Ajax Tabs script - Can the current tab not be linked?

[AshleyQuick]

1) Script Title: Ajax Tabs content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent/index.htm

3) Describe problem: Can the script be modified so that the tab you're on isn't hyperlinked? That always seems counterintuitive...to me anyway. :rolleyes:

[jscheuer1]

Add this line to startajaxtabs (red):

function startajaxtabs(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
return false
}
if (ulist[x].className=="selected"){
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currenly selected tab content
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files
ulistlink.onclick=function(){return false;};  // remove onclick event
}
}
}
}
}

Replace the function ajaxpage with this one (additions/changes red):

function ajaxpage(url, containerid, targetobj){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var i=0; i<ullist.length; i++)
if (ullist[i].className=="selected") {
ullist[i].className=""  //deselect tab
ullist[i].getElementsByTagName("a")[0].onclick=function(){ //reinstate onclick function
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
return false
}
}
targetobj.parentNode.className="selected"  //highlight currently clicked on tab
targetobj.onclick=function(){return false;};  // remove onclick event
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
return
}
document.getElementById(containerid).innerHTML=loadstatustext
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

[AshleyQuick]

Hmmm, that doesn't seem to work. The current tab is still linked. Any ideas?

[jscheuer1]

I almost always test my work and this was no exception. However, I only tested a local installation of AJAX tabs. This really shouldn't matter though, as the changes I made affect only the 'top' page and do not rely upon AJAX routines or server participation.

I just retried my modifications here and they still work (nothing lost in the translation to the forum post)

However, the link technically still exists. This may be what is confusing you. I simply made it so that it wouldn't fire. I figured this was sufficient.

If you are still having problems using the modification:

Please post a link to the page on your site that contains the problematic script so we can check it out.

Otherwise, please explain why having the link not fire isn't good enough for your purposes.

[AshleyQuick]

I need to clarify. Is it possible to make it so that your cursor doesn't turn into the hand? The link doesn't fire but when the cursor changes, it gives the impression you can click on it.

I have the files here:
http://home.comcast.net/~maxpixel/dev/

Thanks for the help thus far!

[jscheuer1]

That can be resolved using style. Find this in the ajaxtabs.css file (addition red):

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
cursor:text;
}

You can use any valid css cursor value in place of 'text' (which makes it like the cursor over normal text), 'default' will make it an arrow, for example, 'help' an arrow with a question mark, etc.

[keren2]

in this renewal script, you just trying to remove the onclick function isn't it??

how about removing onmousedown function... can u please help me how to remove the onclick function and onmousedown function at the same time???

[jscheuer1]

in this renewal script, you just trying to remove the onclick function isn't it??

how about removing onmousedown function... can u please help me how to remove the onclick function and onmousedown function at the same time???

Unless you've made additional modifications, there is no onmousedown event. If you have created one, hard coded it to the link, and wish it not to operate during the time that the onclick event is suspended modify it like so:

onmousedown="if(/this/.test(this.onclick.toString())){do whatever}"

where do whatever is the original code of the onmousedown event.

[keren2]

i modified the current version of AJAX Tabs with the modification that you gave in this thread..

http://www.dynamicdrive.com/forums/s...ad.php?t=17418

[jscheuer1]

i modified the current version of AJAX Tabs with the modification that you gave in this thread..

http://www.dynamicdrive.com/forums/s...ad.php?t=17418

Then you are doing something like so:

<li><a href="tab2.htm" rel="ajaxcontentarea" onmousedown="window.tab2Init=false;">More Tabs</a></li>

Which is what I was thinking. To follow my advice, you then would do:

<li><a href="tab2.htm" rel="ajaxcontentarea" onmousedown="if(/this/.test(this.onclick.toString())){window.tab2Init=false;}">More Tabs</a></li>

Explanation: The way it works (given the modifications from post#2 in this thread) is that the test method is used to determine if the onclick function contains the 'this' keyword like so:

function(){ 
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
return false
}

or doesn't, like so:

function(){return false;}

Those are the only two possibilities. That way, the onmousedown event will only fire if the onclick event is set to actually import content to the page.