PDA

View Full Version : Scrollable Content II doesn't scroll



chechu
12-17-2007, 01:36 PM
1) Script Title: Scrollable Content II

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

3) Describe problem:

Hey,
I placed the above code on my site, but the text doesn't scroll. Anyone knows why ? See it at http://hetbestevoordeel.be/test/test.html

chechu
12-17-2007, 03:50 PM
Also: why are the imgs of 'up' and 'down' not as close to eachother as in the example on DD ?
Could it be that the problem is caused by the lightbox ?

jscheuer1
12-18-2007, 10:06 PM
For more than one scroller on a page you would need something like this:

http://home.comcast.net/~jscheuer1/side/index_side_table.htm

However, many of your page's resources aren't on the server and/or are being served without the proper mime type. After you get rid of Scrollable Content II, first take away any references to external files that aren't being used, then make sure all of those that are meant to be used are where they are mentioned in the page's code, and being served in the proper mime type. Once the rest of the page is working, try installing the modular version of Scrollable Content linked to in this message.

chechu
12-18-2007, 11:42 PM
Indeed not all the external files were there.
So please have a look here: http://www.cecicasariego.com/indexNL.html: same site but with all links in it.
As you can see the scrollers don't move.

jscheuer1
12-19-2007, 05:55 AM
All you need to do now is to switch to the script I recommended in my last post.

chechu
12-19-2007, 09:54 AM
Still doesn't work.
Could it be that there is a problem if I want to place it with the Lightbox Viewer ?
Maybe because there is twice an onload function ?

Sorry, I correct, it does work, but only one scroller; the second scroller makes the first one move (I use the arrows under the text).
You can see it on http://www.hetbestevoordeel.be/test/indexNL.html

jscheuer1
12-19-2007, 01:50 PM
You left out:


/******************************************
* Scrollable content script III- John Davenport Scheuer
* As first seen in: http://www.dynamicdrive.com/forums - membername: jscheuer1
* Very freely adapted from Scrollable content script II- Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full original source code
* This notice must stay intact for legal use
******************************************/

But, of course, that's not the problem. You need a unique:


contentid="content2";

for each scroller. Incidentally, this must also be different than all id="whatever" attributes and all id assignments on the page. Try:


contentid="content3";

for the second one.

chechu
12-22-2007, 08:33 PM
You left out:


Code:
/******************************************
* Scrollable content script III- John Davenport Scheuer
* As first seen in: http://www.dynamicdrive.com/forums - membername: jscheuer1
* Very freely adapted from Scrollable content script II- Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full original source code
* This notice must stay intact for legal use
******************************************/But, of course, that's not the problem.

Didn't really leave it out. As my whole site is built up with DD-stuff, I placed a big thanks at the top of the page, so the rest of the codes would be easy to to oversee.

Anyway. It all works well, except one detail:
The text shown when loading the page begins at a certain level, but as soon as you start scrolling down, the top level of the text is much higher. I tried to play with margin-top and padding-top in the div, but I can't find it. What's the secret, please ?

jscheuer1
12-23-2007, 08:41 AM
Didn't really leave it out. As my whole site is built up with DD-stuff, I placed a big thanks at the top of the page, so the rest of the codes would be easy to to oversee.

I'm not sure if that quite 'gets it' as far as DD's usage policy (http://www.dynamicdrive.com/notice.htm) (see particularly #4), and certainly not as far as mine. That's my script, not DD's.


Anyway. It all works well, except one detail:
The text shown when loading the page begins at a certain level, but as soon as you start scrolling down, the top level of the text is much higher. I tried to play with margin-top and padding-top in the div, but I can't find it. What's the secret, please ?

There's really no secret, you can just play with the actual elements used and/or the style until it suits you and/or use one of the demo scrollers as a template - they work. But since neither of your pages currently have both the script working properly and the content you are actually going to use, I think I will wait on that before offering any specific fine tuning advice.

chechu
12-24-2007, 02:21 PM
That's my script, not DD's.

I see your point. Will adjust that.


But since neither of your pages currently have both the script working properly and the content you are actually going to use, I think I will wait on that before offering any specific fine tuning advice.

They work on my computer on http://www.cecicasariego.com
In your script you find this in the div:

"margin-top:-.8em!important;margin-top:.2em;"
Could this be what I am looking for, but is not correct ?

jscheuer1
12-24-2007, 03:08 PM
This style for the page:


div.container div
{
float: left;
width: 180px;
margin-right: 16px;
padding-right: 0;
padding-left: 0;
background-repeat: no-repeat;
padding-top: 18px;
margin-top: 0px;
}

Is adding top padding to some of the divisions within the scroller that you do not intend. To change that, either make that a more specific style, not one applied to all div elements in the container div, or add this style to override it:


div.container .content2 div, div.container .content1 div {
padding-top:0;
}

where content2 and content1 are the contentid values for the two scrollers.

chechu
12-24-2007, 06:31 PM
Thank you so much ! Looks good now.
Honestly last question: how come the arrows are more apart than in your example ?
Something to do with another style ?

jscheuer1
12-24-2007, 10:30 PM
Give a man a fish and he will eat for a day, teach a man to fish and he will spend all of his time down at the docks drinking beer.

You're right of course, you have this page style:


div.container img
{
border-top: 0;
margin-left: 20px;
margin-bottom: 5px;
}

which, once again pulls in all tags specified (in this case the img tags in the class container divs), rather than distinguishing among them.

I used this contravening style:


div.container .content2 img, div.container .content1 img {
margin:0;
}

to counteract that. But it would probably be better not to use such broadly reaching styles on such a complex page in the first place.

chechu
12-25-2007, 12:40 PM
Give a man a fish and he will eat for a day, teach a man to fish and he will spend all of his time down at the docks drinking beer.

You're right, but I don't drink beer ..


But it would probably be better not to use such broadly reaching styles on such a complex page in the first place.

Do you mean there is too much code for the content of the page ?

jscheuer1
12-25-2007, 06:21 PM
You're right, but I don't drink beer ..

Apparently not.


Do you mean there is too much code for the content of the page ?

No, when one first starts designing a page, it is usually tempting, and even appropriate to use only tag names as selectors in the style section. Once the the page develops complexity though, and increasingly so as it develops more complexity, it is best to develop class names for every repeating style. For example -

At some point:


div.container img {
whatever:something;
other:styles;
}

used with:


<div class="container">
<img src="some.jpg">
lots of other stuff in here
</div>

should become:


div.container img.type1 {
whatever:something;
other:styles;
}

used with:


<div class="container">
<img class="type1" src="some.jpg">
lots of other stuff in here
</div>

If your style and markup had already been like that, you wouldn't have had the issue with the arrow images in the first place.

mpiedlourde
03-12-2008, 12:05 AM
For more than one scroller on a page you would need something like this:

http://home.comcast.net/~jscheuer1/side/index_side_table.htm

However, many of your page's resources aren't on the server and/or are being served without the proper mime type. After you get rid of Scrollable Content II, first take away any references to external files that aren't being used, then make sure all of those that are meant to be used are where they are mentioned in the page's code, and being served in the proper mime type. Once the rest of the page is working, try installing the modular version of Scrollable Content linked to in this message.
i think your script is great, as i haven't been able to find many workarounds to multiple instances of scrollers. i only have one question however, is there any way to have the two arrows (up, down) become left and right arrows, and be on the opposite sides of the content? for example:

(left arrow) (scrolling content) (right arrow)

there's only a variable for side control, so that's why i figured i should ask. thank you much for any help you're willing to provide!

chechu
06-09-2008, 10:17 AM
Hey jscheuer1,
Question about your scrolling content:
Is it possible to add in the content a 'back to top'-link (don't know how it is called, an anchor ?) ? I tried to do so, just adding the code in the content of the scroller, but didn't work out. Thanks !