Scrollable content II and Ajax

[Shanti]

1) Script Title: Scrollable content II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

3) Describe problem: I am trying to make this script work with Ajax, I can load the information (just text) no problem my problem is that the height does not change to reflect the new text so when i scroll down if the text is longer than the original, the scroll will stop in the middle, is there any work around this?
I tried using eval to try and validate the new height but it seems it did not worked

any ideas?

Thanks in advance

[jscheuer1]

You need to poll the new content, put this function in the script:

function pollContent(){
if (document.getElementById('unique')){
getcontent_height();
return;
}
setTimeout("pollContent()", 60);
}

At the very end of all new content (as well as the initial content) for the scroller put this:

<span id="unique"></span>

Now, since you did not mention which of the many AJAX scripts that you are using, I'm not sure where exactly to call this new function other than, it must be called a little after the function that adds the new content. Also, the polled for id must be removed before the AJAX call. One possible way (as I say this depends upon the AJAX script you are using):

<a href="#" onclick="document.getElementById('unique').id='';ajaxpage('some.htm', 'container');pollContent();return false;">Some Link Text</a>

The above onclick syntax is an example that would work with the Dynamic Ajax Content script:

http://www.dynamicdrive.com/dynamici...jaxcontent.htm

[Shanti]

Maybe i am doing something wrong but it did not worked for me.

i was using Eval to call the getcontent_height(); function, which seems to be the same thing you did, but it does not work

the Ajax i am using is a simple call to xmlhttp and it returns some text that i then split and set into the different Divs i have set like this

var content = xmlhttp.responseText; //The content data which has been retrieved ***
                if( content ){ //Make sure there is something in the content variable


                 var contenido = content.split("|");
                 document.getElementById('contenido').innerHTML = contenido[0];
                 document.getElementById('titulo').innerHTML = contenido[1];
                 document.getElementById('imagen').src = contenido[2];
                 //eval(contenido[3]);

contenido[0] has the new content followed by <span id="unique"></span>
contenido[1] and contenido [2] are just samples of other stuff

contenido[3] is the call to getcontent_height(); which I commented to test your code.

i set the code you gave me at the bottom of the script

function pollContent(){
if (document.getElementById('unique')){
getcontent_height();
return;
}
setTimeout("pollContent()", 60);
}

and i changed my links to look like this:

<a href="#" onclick="document.getElementById('unique').id='';javascript:getPage('2');pollContent();return false;">Page2</a>

and it does the same thing, it loads the new content and everything dandy, but it does not scroll

any idea whats wrong?

Shanti

[jscheuer1]

Using javascript: (red) is not required in an onclick event and may cause problems.

<a href="#" onclick="document.getElementById('unique').id='';javascript:getPage('2');pollContent();return false;">Page2</a>

I would need a link to your page or its entire code including any associated files.

[Shanti]

its on my local PC but you can check it here.

http://189.164.89.213:8181/hotelito/test.php

its not pretty, but everything is there

i did the change of the javascript. still not working.

note that the initial scroll box needs to be empty.

Shanti

[jscheuer1]

Your test is too thorough. By placing the generated content on the page twice, you are creating two elements with the id of 'unique'. This completely defeats the purpose of testing for the unique content.

[jscheuer1]

Also, the version of scrollable content that you have on your test page doesn't work even re-enabling the onload event and without the AJAX stuff.

[jscheuer1]

Try this for the scrollable script:

<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container" style="position:relative;width:675px;height:160px;border:1px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:670px;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
<div align="left" id="contenido">
<span id="unique"></span>
</div>

<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table>
<tr><td valign="top">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)">up</a></td><td valign="bottom"><a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)">down</a>
</td></tr>
</table>
<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}

function pollContent(){
if (document.getElementById('unique')){
getcontent_height();
return;
}
setTimeout("pollContent()", 60);
}

window.onload=getcontent_height
</script>

[Shanti]

Thanks, you are right the problem was with a small modification I made to the script, it now works like a charm.

Thank you!!