jQuery Tools - Scrollable - Make fully accessible

JavaScript
1

Hi,

I want to make a list of divs into a vertical scrollable slider.

Each div will consist of a small thumbnail image, a small title header and a link.

Something like this:

<div><!-- item 1 -->
  <img src="..." alt="">
  <h3>Descriptive title</h3>
  <a href="...">Link</a>
</div>
<div><!-- item 2 -->
  <img src="..." alt="">
  <h3>Descriptive title</h3>
  <a href="...">Link</a>
</div>
<div><!-- item 3 -->
  <img src="..." alt="">
  <h3>Descriptive title</h3>
  <a href="...">Link</a>
</div>
<div><!-- item 4 -->
  <img src="..." alt="">
  <h3>Descriptive title</h3>
  <a href="...">Link</a>
</div>
<div><!-- item 5 -->
  <img src="..." alt="">
  <h3>Descriptive title</h3>
  <a href="...">Link</a>
</div>

I haven’t started coding this yet but the above code should give you an idea of what I’m aiming for. The image thumbnails will be floated on the left, and the titles/links will be floated on the right.

I’ve been looking at the jQuery Scrollable script here and when I tested it with JS turned off, the rest of the content within the slider stayed hidden, instead of being visible and there was no way of viewing the rest of the content within the slider, other than the three images that were “in view”.

I would like to know if there’s a way of making all the content within the slider visible all at once when JS is disabled. Is it possible to do this?

2

On the div that will wrap all your other divs simply do this

<body>

<div class="scrollable vertical">
    <!-- Content Here -->
</div>

<script type="text/javascript">
    $(function(){
        // initialize scrollable with mousewheel support
        $(".scrollable").css('overflow','hidden').scrollable({vertical: true, mousewheel: true});   
    });
</script>

</body>
</html>

Then in the scrollable CSS file add the following to the .vertical class

.vertical {
    overflow: auto;
}
3

It seems to work if you change

.vertical {  
	overflow:hidden;
}

to

.vertical {  
	overflow:auto;
}

Scroll bars appear if JS is off.

4

@[COLOR=#336633][B]ralph.m[/B][/COLOR]

Yes that works but with javascript enabled it shows the scrollbar where as the method i posted will hide the scrollbar if javascript is enabled

5

Thanks guys. I guessed that scrollbars would be involved. I should have made myself clearer, is it possible to do it without the scrollbars showing when JS is turned off?

6

That’s what StLegend’s version is for. I only tested mine a bit sloppily. Scroll bars didn’t seem to appear with JS off with just the CSS fix, but I obviously didn’t test properly.

EDIT: o, sorry, didn’t read it properly. Well, maybe instead of the js setting an overflow property it could focus on the height of the div. Something like

<script type="text/javascript">
    $(function(){
        // initialize scrollable with mousewheel support
        $(".scrollable").css('height','665px').scrollable({vertical: true, mousewheel: true});   
    });
</script>

.vertical {
height: 2670px;
}

I’m just experimenting here. May not work, but worth a try.

7

Possibly, but it seems that I would only be able to have a fixed number of items in the sider with this approach. Like a maximum of 5 items or something like that.

Originally, I was thinking of using a list to display the items (because, essentially, it is a list I’m on about) but then I couldn’t really see a way of having a thumbnail image with a h3 and a link for each list item - at least, not without bloating the markup. My thought was, if I can just have the users without JS enabled to view an ordinary styled list, then that would be accessible.

But it seems to me that all the slider scripts I know of rely on the use of divs and they all seem to suffer from the same issue - can’t view all items within the list when JS is turned off.

I’ll give the above suggestions a go when I have some time on Friday.

Thanks.

8

No, not at all. You can have as many as you like. I just set a hight on the div that would allow them all to show, so it’s not very flexible. that’s why the scoll option is better.

I couldn’t really see a way of having a thumbnail image with a h3 and a link for each list item - at least, not without bloating the markup.

It’s fine to use a list. The LIs basically work like divs.

9

Yeah I know I can have as many as I like, but say I had five items, so I set the total height for 5 items, but then I decide I need to add a couple more items at a later date, I’d need to calculate the new height and then fiddle with the CSS. It’s fine for having a fixed number of items but in my case, it wouldn’t work very well because as you say, it’s not flexible.

It’s fine to use a list. The LIs basically work like divs.

Yeah I’m only guessing right now but it’s probably something like this:

<ul>
  <li><!-- Item 1 -->
    <img src="..." alt="...">
    <div>
      <h3>A descriptive title</h3>
      <a href="...>Link</a>
    </div>
  </li>
  <li><!-- Item 2 -->
    <img src="..." alt="...">
    <div>
      <h3>A descriptive title</h3>
      <a href="...>Link</a>
    </div>
  </li>
  <li><!-- Item 3 -->
    <img src="..." alt="...">
    <div>
      <h3>A descriptive title</h3>
      <a href="...>Link</a>
    </div>
  </li>
  <li><!-- Item 4 -->
    <img src="..." alt="...">
    <div>
      <h3>A descriptive title</h3>
      <a href="...>Link</a>
    </div>
  </li>
</ul>

Have the image float to the left and the title/link float to the right for each list item.

Not sure if it’ll validate because I’ve never actually created a list of this type before but I’ll experiment on Friday. But how to get the scrollable script to work with lists instead of divs…? I don’t know how to code in jQuery or JS but I’ll have a crack on Friday.

10

Really no height setting should be needed. The ideal is to let the div find its own height based on the amount of content. Then in the JS set a height. At the moment removing the height makes the div disappear, but there’s no doubt an easy way around that. I need to have another look.

Not sure if it’ll validate because I’ve never actually created a list of this type before

It’s fine, although it might be better to wrap the <a>s in a block element like a <p>.

11

It’s already wrapped in a div.

12

Yeah, but I don’t like <a> butting up against block level elements like <h3>. I think it’s better not to have an inline element sitting beside a block level one, so I would wrap it in a <p>.

13

That’s just a preference though. The reason why I wouldn’t put the link in a pair of p tags is because it’s not semantic. A link alone is not a paragraph. Could wrap the link in another div but that would be a case of divitis because it’s not necessary. I would say, if it matters to you that much, use a span.

Just going to finish off the page I’m working on then I’ll have a crack at the scrollable tomorrow evening (got a full day tomorrow).

14

I don’t agree with that logic. An inline element needs a block level context. What is the context of the link? At the moment it has none. Inline elements don’t have any structural role to define, as that is handled by the block-level elements.

That’s inline too, so no point. I’ve seen layout issues with inline elements sitting beside block elements. You can set them to display:block, but it’s risky.

15

If you really must use a block element, use a div. Using a p to wrap a lonely link is not semantically correct.

Sorry, I’m just really into using lean, semantic markup. :slight_smile:

16

What is it if it isn’t a paragraph? It’s not true to say wrapping the <a> in a <p> is unsemantic. It’s perfectly semantic. What isn’t semantic is leaving the <a> naked altogether.

17

I disagree - a link is not a paragraph. It’s a simple link. I guess we can agree to disagree on this one. :slight_smile: