SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Tools - Scrollable - Make fully accessible

    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:

    Code HTML4Strict:
    <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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    On the div that will wrap all your other divs simply do this

    HTML Code:
    <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

    Code CSS:
    .vertical {
        overflow: auto;
    }
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    It seems to work if you change

    Code:
    .vertical {  
    	overflow:hidden;
    }
    to

    Code:
    .vertical {  
    	overflow:auto;
    }
    Scroll bars appear if JS is off.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    @ralph.m

    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
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Silver Firefly View Post
    is it possible to do it without the scrollbars showing when JS is turned off?
    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

    Code:
    <script type="text/javascript">
        $(function(){
            // initialize scrollable with mousewheel support
            $(".scrollable").css('height','665px').scrollable({vertical: true, mousewheel: true});   
        });
    </script>
    Code:
    .vertical {
    height: 2670px;
    }
    I'm just experimenting here. May not work, but worth a try.

  7. #7
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Silver Firefly View Post
    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.
    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. #9
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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:

    Code HTML4Strict:
    <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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Silver Firefly View Post
    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
    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. #11
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's fine, although it might be better to wrap the <a>s in a block element like a <p>.
    It's already wrapped in a div.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Silver Firefly View Post
    It's already wrapped in a div.
    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. #13
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Silver Firefly View Post
    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.
    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.

    Quote Originally Posted by Silver Firefly View Post
    if it matters to you that much, use a span.
    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. #15
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. :-)

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Silver Firefly View Post
    Using a p to wrap a lonely link is not semantically correct.
    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. #17
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I disagree - a link is not a paragraph. It's a simple link. I guess we can agree to disagree on this one. :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •