Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.8.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div class="news-holder">
  
    <ul class="news-headlines">
      <li class="selected">100 red bicycles stolen from local bike store</li>
     <li>New leash laws in effect for floppy-eared dogs</li>
      <li>Insider: Can palm trees be saved?</li>
     <li>Fresh recipes to titillate the taste buds</li>
     <li>Truck inspections under way for the metropolitan area</li>
      <li>Are the beaches safe for swimming this year?</li>
     <li class="highlight"></li>
    </ul>
    
    <div class="news-preview">
      
      <div class="news-content top-content">
        <img src="http://cdn.impressivewebs.com/news1.jpg">
        <p><a href="#">100 red bicycles stolen from local bike store</a></p>
          
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div><!-- .content-1 -->
      
      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news2.jpg">
        <p><a href="#">New leash laws in effect for floppy-eared dogs</a></p>
        
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div><!-- .content-2 -->
      
      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news3.jpg">
        <p><a href="#">Insider: Can palm trees be saved?</a></p>
        
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div><!-- .content-3 -->
      
      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news4.jpg">
        <p><a href="#">Fresh recipes to titillate the taste buds</a></p>
        
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div><!-- .content-4 -->
      
      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news5.jpg">
        <p><a href="#">Truck inspections under way for the metropolitan area</a></p>
        
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div><!-- .content-5 -->
      
      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news6.jpg">
        <p><a href="#">Are the beaches safe for swimming this year?</a></p>
        
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div><!-- .content-6 -->
      
    </div><!-- .news-preview -->
​
  </div><!-- .news-holder -->
​
</body>
</html>
​
 
/*globals $, clearInterval, setInterval, window, setTimeout */
​
$(function () {
  "use strict";
​
  var          hl = $('.highlight'),
         newsList = $('.news-headlines'),
    newsListItems = $('.news-headlines li'),
    firstNewsItem = $('.news-headlines li:nth-child(1)'),
      newsPreview = $('.news-preview'),
          elCount = $('.news-headlines').children(':not(.highlight)').index(),
         vPadding = (parseInt(firstNewsItem.css('padding-top').replace('px', ''), 10)) +
                    (parseInt(firstNewsItem.css('padding-bottom').replace('px', ''), 10)),
          vMargin = (parseInt(firstNewsItem.css('margin-top').replace('px', ''), 10)) +
                    (parseInt(firstNewsItem.css('margin-bottom').replace('px', ''), 10)),
          myTimer = null,
         siblings = null,
      totalHeight = null,
          indexEl = 1,
                i = null;
  
  function doEqualHeight() {
    
    if (newsPreview.height() < newsList.height()) {
      newsPreview.height(newsList.height());
    } else if ((newsList.height() < newsPreview.height()) && (newsList.height() > parseInt(newsPreview.css('min-height').replace('px', ''), 10))) {
      newsPreview.height(newsList.height());
    }
    
  }
  
  function doTimedSwitch() {
  
    myTimer = setInterval(function () {
      if (($('.selected').prev().index() + 1) === elCount) {
        firstNewsItem.trigger('click');
      } else {
        $('.selected').next(':not(.highlight)').trigger('click');
      }
    }, 3000);
  
  }
  
  function doClickItem() {
  
    newsListItems.on('click', function () {
  
      newsListItems.removeClass('selected');
      $(this).addClass('selected');
  
      siblings = $(this).prevAll();
      totalHeight = 0;
  
      // this loop calculates the height of individual elements, including margins/padding
      for (i = 0; i < siblings.length; i += 1) {
          totalHeight += $(siblings[i]).height();
          totalHeight += vPadding;
          totalHeight += vMargin;
      }
  
      // this moves the highlight vertically the distance calculated in the previous loop
      // and also corrects the height of the highlight to match the current selection
      hl.css({
        top: totalHeight,
        height: $(this).height() + vPadding
      });
  
      indexEl = $(this).index() + 1;
  
      $('.news-content:nth-child(' + indexEl + ')').siblings().removeClass('top-content');
      $('.news-content:nth-child(' + indexEl + ')').addClass('top-content');
  
      clearInterval(myTimer);
      doTimedSwitch();
  
    });
  
  }
  
  function doWindowResize() {
  
    $(window).resize(function () {
  
      clearInterval(myTimer);
      setTimeout(function () {
        $('.selected').trigger('click');
      }, 1000 );
  
      doEqualHeight();
  
    }); 
  
  }
  
  doClickItem();
  doWindowResize();
  setTimeout(function () {
      doEqualHeight();
  }, 500);
  $('.selected').trigger('click');
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ImpressiveWebspro
0viewers