API tools faq
paste
Advertisement
javecantrell

jquery scroller/accordion

javecantrell
Sep 15th, 2014
191
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.     "http://www.w3.org/TR/html4/strict.dtd"
  3.     >
  4. <html lang="en">
  5. <head>
  6. <title><!-- Insert your title here --></title>
  7. <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  8. <script src="http://www.inforum.com/javascript/jqueryui/js/jquery.tools.min.scrollableOnly.js" type="text/javascript"></script>
  9.  
  10. <style type="text/css">
  11. .left {
  12.     float: left;
  13. }
  14. .article_brief_box {
  15.     margin: 10px 6px 0 13px;
  16.     padding: 0 0 10px 0;
  17.     border-bottom: 1px solid #ccc;
  18.     width: 305px;
  19. }
  20. div {
  21.     display: block;
  22. }
  23. .clearfix::after {
  24.     content: ".";
  25.     display: block;
  26.     height: 0;
  27.     clear: both;
  28.     visibility: hidden;
  29. }
  30. .tagAccordionBtn
  31. {
  32.     border: 1px solid #ccc;
  33.     cursor: pointer;
  34.     background-image:url('http://www.inforum.com/dynamic/original/png/2010/12/21/bg_tr_group_headers_hover.png');
  35.     background-position:center;
  36.     background-repeat:repeat-x;
  37.     font-weight:bold;
  38.     padding:5px;
  39.     margin: 0;
  40.     -moz-border-radius: 4px; /* {cornerRadius} */
  41.     -webkit-border-radius: 4px; /* {cornerRadius} */
  42.     color:#FFF;
  43.     float: left;
  44.     width:300px;
  45.     _float: none;  /* Float works in all browsers but IE6 */
  46.     display: block;
  47. }
  48. .accordionContent {
  49.     float: left;
  50.     width:310px;
  51.     padding: 5px 0;
  52.     display: none;
  53. }
  54. .on {
  55.     background: #13416e;
  56. }
  57. .over {
  58.     background: #000;
  59. }
  60. .scrollableTagFeed
  61. {
  62.     /* required */
  63.     position:relative;
  64.     overflow: hidden;
  65.     width: 265px;
  66.     height:90px;
  67.     /* misc */
  68.     float:left;
  69.     margin:0 3px;
  70. }
  71. .scrollableTagFeed .items {
  72.     /* Both Required */
  73.     width:20000em;
  74.     position:absolute;
  75. }
  76. .scrollableTagFeed .items div {
  77.     float:left;
  78.     width:260px;
  79.     margin:5px;
  80. }
  81. /* prev next buttons */
  82. .prev {
  83.     background-image:url('http://www.inforum.com/dynamic/original/png/2010/12/21/prev_button.png');
  84.     width:18px;
  85.     height: 30px;
  86.     cursor: pointer;
  87.     display:block;
  88.     float:left;
  89.     margin-top:20px;
  90. }
  91. .next {
  92.     background-image:url('http://www.inforum.com/dynamic/original/png/2010/12/21/next_button.png');
  93.     width:18px;
  94.     height: 30px;
  95.     cursor: pointer;
  96.     display:block;
  97.     float:left;
  98.     margin-top:20px;
  99. }
  100.  
  101. </style>
  102. <script>
  103.  
  104. // truncates string to max words
  105. function truncate(stringToChange, maxChars) {
  106.     if (maxChars < stringToChange.length) {
  107.         stringToChange = stringToChange.substr(0, maxChars);
  108.         return stringToChange.replace(/\W+\w+[.!?]?\s*$/, '...');
  109.     } else {
  110.         return stringToChange;
  111.     }
  112. }
  113.  
  114. $(function() {
  115.     $('.tagAccordionBtn')
  116.         .mouseover(function() {
  117.             $(this).addClass('over');
  118.         })
  119.         .mouseout(function() {
  120.             $(this).removeClass('over');
  121.         });
  122.  
  123.     // Create a list of feed urls to pull data from.
  124.     var feedList = [
  125.         'event/json.tag/tag/food',
  126.         'event/json.tag/tag/health',
  127.         'event/json.tag/tag/Travel',
  128.         'event/json.tag/tag/money',
  129.         'event/json.tag/tag/dragons'
  130.     ];
  131.  
  132.     for (feed in feedList) {
  133.         var index = 0;
  134.         // For each feed we fetch the remote JSON using jQuery's
  135.         // .getJSON() method.
  136.         $.getJSON(feedList[feed], function(data) {
  137.             // The feeds return an array of objects representing articles
  138.             $.each(data.items, function(i, article) {
  139.                 // for each article we pull out what we need and attach it to
  140.                 // the appropriate div
  141.                 var htmlFeed = '<div><strong><a href="' +
  142.                                 article.url +
  143.                                 '" style="font-size:14px;">' +
  144.                                 article.title +
  145.                                 '</a></strong><br />' +
  146.                                 truncate(article.brief, 80) +
  147.                                 '</div>';
  148.                 $('#feedNum' + index).append(htmlFeed);
  149.             });
  150.             index++;
  151.         });
  152.         // The above ajax call fills divs with the ids feed0 through feed4
  153.         // with a child div for each JSON object we received. After each call
  154.         // completes then the divs are ready to be used.
  155.         $('#feed' + feed).ajaxStop(function() {
  156.             // Use the jquery tools scrollable method to make the underlying
  157.             // divs scroll horizontally every 6 seconds. We set the circular
  158.             // property to true so that the list cycles back to the beginning
  159.             // after we reach the end.
  160.             $(this).scrollable({circular: true}).autoscroll({interval: 6000});
  161.  
  162.             // Once the divs inside each section are scrollable, then we
  163.             // allow the accordion to display them by attaching a click handler to the button above.
  164.         // Since the button is the previous sibling of the parent div we use .parent().prev()
  165.             // to get the button object.
  166.             $(this).parent().prev()
  167.                 .click(function() {
  168.                     $('.tagAccordionBtn').removeClass('on');
  169.  
  170.                     // Close all open sections.
  171.                     $('.accordionContent').slideUp('normal');
  172.  
  173.                     // Open the next section if it's not already open.
  174.                     if($(this).next().is(':hidden') == true)
  175.                     {
  176.                         $(this).addClass('on');
  177.                         $(this).next().slideDown('normal');
  178.                      }
  179.                 });
  180.         });
  181.     }
  182. });
  183. </script>
  184. </head>
  185. <body>
  186.     <div class="left">
  187.         <div class="article_brief_box clearfix">
  188.             <div class="tagAccordionBtn largetxt" rel="0">
  189.                 <noscript>
  190.                     <a href="http://www.inforum.com/event/tag/tag/food">
  191.                 </noscript>
  192.                 Food
  193.                 <noscript>
  194.                     </a>
  195.                 </noscript>
  196.             </div>
  197.             <div class="accordionContent">
  198.                 <a class="prev">&nbsp;</a>
  199.                 <div class="scrollableTagFeed" id="feed0"><div class="items" id="feedNum0">&nbsp;</div></div>
  200.                 <a class="next">&nbsp;</a>
  201.             </div>
  202.  
  203.             <div class="tagAccordionBtn largetxt" rel="1">
  204.                 <noscript>
  205.                     <a href="http://www.inforum.com/event/tag/tag/health">
  206.                 </noscript>
  207.                 Health
  208.                 <noscript>
  209.                     </a>
  210.                 </noscript>
  211.             </div>
  212.             <div class="accordionContent">
  213.                         <a class="prev">&nbsp;</a>
  214.                         <div class="scrollableTagFeed" id="feed1"><div class="items" id="feedNum1">&nbsp;</div></div>
  215.                         <a class="next">&nbsp;</a>
  216.             </div>
  217.  
  218.             <div class="tagAccordionBtn largetxt" rel="2">
  219.                 <noscript>
  220.                     <a href="http://www.inforum.com/event/tag/tag/Travel">
  221.                 </noscript>
  222.                 Travel
  223.                 <noscript>
  224.                     </a>
  225.                 </noscript>
  226.             </div>
  227.             <div class="accordionContent">
  228.                          <a class="prev">&nbsp;</a>
  229.                         <div class="scrollableTagFeed" id="feed2"><div class="items" id="feedNum2">&nbsp;</div></div>
  230.                         <a class="next">&nbsp;</a>
  231.             </div>
  232.  
  233.             <div class="tagAccordionBtn largetxt" rel="3">
  234.                 <noscript>
  235.                     <a href="http://www.inforum.com/event/tag/tag/money">
  236.                 </noscript>
  237.                 Money
  238.                 <noscript>
  239.                     </a>
  240.                 </noscript>
  241.             </div>
  242.             <div class="accordionContent">
  243.                         <a class="prev">&nbsp;</a>
  244.                         <div class="scrollableTagFeed" id="feed3"><div class="items" id="feedNum3">&nbsp;</div></div>
  245.                         <a class="next">&nbsp;</a>
  246.             </div>
  247.  
  248.             <div class="tagAccordionBtn largetxt" rel="4">
  249.                 <noscript>
  250.                     <a href="http://www.inforum.com/event/tag/tag/family">
  251.                 </noscript>
  252.                 Family
  253.                 <noscript>
  254.                     </a>
  255.                 </noscript>
  256.             </div>
  257.             <div class="accordionContent">
  258.                          <a class="prev">&nbsp;</a>
  259.                          <div class="scrollableTagFeed" id="feed4"><div class="items" id="feedNum4">&nbsp;</div></div>
  260.                          <a class="next">&nbsp;</a>
  261.             </div>
  262.         </div>
  263.     </div>
  264. </body>
  265. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!