[DHTML] Extended Scrollable Content Window (Based On Scrollable Content II)

[ruuk]

1) CODE TITLE: Scrollable Content III

2) AUTHOR NAME/NOTES: Rick Phillips

3) DESCRIPTION: Multiple scrollable content windows with options

4) URL TO CODE: http://2ndmind.com/scw

[djr33]

Looks like a good script to me.

[thetestingsite]

I alos like the script, although I fell there should be one modification to it. You should add an "onclick" attribute with a value of "return false" to the up and down arrows (the ones that you can mouseover and the script slides the content). Other than that, good work.

[ruuk]

Thanks. I added the onClick="return false".

[eskwire]

Thanks for the great script!

I am receiving an error message from firebug.

this.crossobj has no properties
moveupp()
control("up")
onmouseover(mouseover clientX=0, clientY=0)
var topint = parseInt (this.crossobj.style.top)

Any idea what this could be related to? I think it may be getting confused with the slideshow lower on the page.

Thankyou very much for your time and effort!

[ruuk]

I'm not sure what you are showing me in the code box there. I haven't used firebug before (but thanks for bringing it to my attention, it looks useful =] )
Are you showing me the error message?

This is the only line that is directly in the script:

var topint = parseInt (this.crossobj.style.top)

If this refers to the object function within the script it should be moveup()

moveupp()

This is definitely from somewhere else.

onmouseover(mouseover clientX=0, clientY=0)

In any case I think I need more info about what you are doing. Perhaps a sample of some of the code would help.

There shouldn't be any conflict with another script as the whole thing is done as an object, and all the variables and functions are internal.

[eskwire]

Thanks for the reply!

Essentially I am able to get your script to run when it is the only script on the page. When I run a slideshow component then the scrolling on mouseover stops.

You can see an example of it here:
http://www.site.3ozproductions.com/i...=76&Itemid=147

Firebug which is a great tool gave me this error message. I added the extra "p" to be sure the function was not being used elsewhere on the page.

I am not sure why the scripts are conflicting. I am new to javascript but very willing to learn

Thanks again!

[eskwire]

Here is the code in the header that I am using:

<link href="/templates/3oz_sitesol/css/scw.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/templates/3oz_sitesol/scripts/scrollablecontent.js"></script>

<script type="text/javascript">
scw1 = new SCWindow("scw1",400,100);
</script>

Here is the HTML that I am using: Perhaps I have some dimensions wrong

<script type="text/javascript">scw1.startblock()</script>

<div id="scw3container" class="scwd1" style="width: 500px; height: 200px;"> <!-- dimensions of the outer box -->
<div id="scw3content2" class="scwd2" style="width: 100px; left: 0pt; top: 0px;">
<div id="scw3content" class="scwd3" style="width: 296px; clip: rect(0pt, 0pt, 100px, 100px); height: 124px;"><!-- this is the width of the text -->
<!--INSERT CONTENT HERE-->
Some content...  fk;ldk;l k;ldskfd;lk ;ldsk;lfk flksdj lkjdlkfj lksdjflksjadlk jfklsdjf 
lkasjdl kfjlk;sdajflk; sjdklfjsdajf  lk;jdsfkljsadk ljfkl;sadjflkjsadl kfjlk;sdjksjlkfj 
END OF THEN CONTENT!!!!!!!
<!--END CONTENT-->
      
<script type="text/javascript">scw1.endblock()</script>
</div>
</div>
</div>
</td></tr>
<tr><td>
      <script type="text/javascript">scw1.makecontrols("images/stories/arrowup.png","images/stories/arrowdown.png")</script>
<div id="scw3scroll" class="scwscrollcontrol">
</td></tr>

<script type="text/javascript">scw1.endblock()</script>
<script type="text/javascript">
function start(){
scw1.initialize()
}
window.onload=start
</script>

I do not believe I made any changes to the scrollablecontent.js file

Thanks for your time!

[ruuk]

This part looks fine:

<link href="/templates/3oz_sitesol/css/scw.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/templates/3oz_sitesol/scripts/scrollablecontent.js"></script>

<script type="text/javascript">
scw1 = new SCWindow("scw1",400,100);
</script>

<script type="text/javascript">scw1.startblock()</script>

I'm not sure why this is here.

<div id="scw3container" class="scwd1" style="width: 500px; height: 200px;"> <!-- dimensions of the outer box -->
<div id="scw3content2" class="scwd2" style="width: 100px; left: 0pt; top: 0px;">
<div id="scw3content" class="scwd3" style="width: 296px; clip: rect(0pt, 0pt, 100px, 100px); height: 124px;"><!-- this is the width of the text -->

<!--INSERT CONTENT HERE-->
Some content...  fk;ldk;l k;ldskfd;lk ;ldsk;lfk flksdj lkjdlkfj lksdjflksjadlk jfklsdjf 
lkasjdl kfjlk;sdajflk; sjdklfjsdajf  lk;jdsfkljsadk ljfkl;sadjflkjsadl kfjlk;sdjksjlkfj 
END OF THEN CONTENT!!!!!!!
<!--END CONTENT-->
      
<script type="text/javascript">scw1.endblock()</script>

And these can go if you lose the other divs

</div>
</div>
</div>

</td></tr>
<tr><td>
      <script type="text/javascript">scw1.makecontrols("images/stories/arrowup.png","images/stories/arrowdown.png")</script>

</td></tr>

This can go.

<script type="text/javascript">scw1.endblock()</script>

<script type="text/javascript">
function start(){
scw1.initialize()
}
window.onload=start
</script>

So if you remove that stuff is should look like this:

<script type="text/javascript">scw1.startblock()</script>
<!--INSERT CONTENT HERE-->
Some content...  fk;ldk;l k;ldskfd;lk ;ldsk;lfk flksdj lkjdlkfj lksdjflksjadlk jfklsdjf 
lkasjdl kfjlk;sdajflk; sjdklfjsdajf  lk;jdsfkljsadk ljfkl;sadjflkjsadl kfjlk;sdjksjlkfj 
END OF THEN CONTENT!!!!!!!
<!--END CONTENT-->
      
<script type="text/javascript">scw1.endblock()</script>
</td></tr>
<tr><td>
      <script type="text/javascript">scw1.makecontrols("images/stories/arrowup.png","images/stories/arrowdown.png")</script>
</td></tr>
<script type="text/javascript">
function start(){
scw1.initialize()
fpssinit()
}
window.onload=start
</script>

In the end though what is stopping it from working is conflicting window.onload functions.
Only the last defined onload function will work.
If you notice I added fpssinit() in the start() function at the end. If you put all onload functions in the start function, they can all be called when 'start' is called in the onload. Then remove the following line from the end of mod_fpslideshow.js

window.onload = fpssinit;

Hope that helps. Let me know if you need more help.

[eskwire]

You my friend are a genius!!!

Thank you so much for your help. It is all working now!

I still have some cleanup but I now know I can get to where I need to be by tomorrow morning.

When I comment out the window.onload = fpssinit; the other scripts that I had tried now work in IE. I am not entirely sure why but I am excited to really start learning JavaScript. Can you recommend a good book?

One interesting thing is the the module will periodically rewrite the file. Effectively removing the comments that I made. I can follow up with the slideshow maker.

Thanks Again!!!!!