AJAX Tabs - "sliding me back up the page on click"

[scott.richardson]

1) Script Title: Ajax Tabs Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem: When I click a tab, and I have partially scrolled down the page.... my page scrolls back up a little... like the link is pointing to an anchor.

However, on your demo page (script URL aboove) it does not do it... it's only doing it on my site. However I have not changed the script.. only the CSS styling for the tabs and content.

http://www.trancetribe.com/home.htm

Try scrolling down so the top of the page is out of view... then clicking a tab.. it works, but also 'pops' you up the page a little.

How do I stop this from happening?? It's happening on Mac Safari, and Windows Firefox and IE afaik.

Any suggestions are greatly appreciated. Great site you have going here. So happy I stumbled upon it.

Scott

[ddadmin]

Welcome to the forums! Firstly, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice.

Regarding your question, that's because the contents to show in your case have varying heights, and since the script appears at the bottom of the page, it's going to hop around a bit as the height of the fetch content changes. You can give the content container a fixed height to stop this from happening. For example:

<div id="ajaxcontentarea" style="height: 300px" class="contentstyle">
"
"
</div>

Make sure this height can accomodate the longest content nicely.

[scott.richardson]

heya

fixed the credit. Apologies. I didn't mean to leave it out.

As for the height... hrmm... well its difficult to say how long that div should be... since each tab will actually be sucking in dynamic content from a php/mySQL connection... and it will vary... I'm gonna have to think about this..

Thankyou for your quick reply!

[scott.richardson]

well I set it to 300px.. and it's working fine now..

IF my content happens to come down from the database.. and there is a lot of it... it should just overflow anyway right? I could just tell it to have visible overflow.

Anyways.. great script...

I have one last question

What if I wanted to display another 'page' of content using AJAX in that div... however I didn't want it to be a separate tab...

here is my php version with dynamic content: http://www.trancetribe.com/home.php

Scott

[ddadmin]

If you're concerned that certain content may be clipped due to an explicit height, yes, you could throw in "overflow", such as:

<div style="border: 1px solid black; height: 200px; overflow-y: scroll">

Regarding your second question, you'd have to modify the function ajaxpage() within the script first:

function ajaxpage(url, containerid, targetobj, direct){
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
if (typeof direct=="undefined"){
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var i=0; i<ullist.length; i++)
ullist[i].className=""  //deselect all tabs
targetobj.parentNode.className="selected"  //highlight currently clicked on tab
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)
}

The code in red is new. Then, to directly load a page within the content area, try using a link like:

<a href="javascript:ajaxpage('test.htm', 'ajaxcontentarea', '')">Load page</a>

where the first parameter is the path to the page, the 2nd is the id of the content container. This is untested, though it should work.

[scott.richardson]

mate, thanks so much. I'll test this out tomorrow and let you know how I go. Means I'll be able to have a lot more dynamic content in there.. pages relating to those tabs... but without adding extra tabs!

Cheers

Scott