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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
​
<title>Test</title>
​
<link rel="stylesheet" type="text/css" href="http://test.nattywp.com/newsone/wp-content/themes/Newsone/style.css" media="screen" />
​
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://test.nattywp.com/newsone/wp-content/themes/Newsone/js/jquery.jcarousel.pack.js"></script>
​
<script type="text/javascript">
  
  
  // I rolled your click() handler into this one.
  //    No sense in binding two click handlers on the same elements.
function mycarousel_initCallback(carousel,item) {
  jQuery('#features-nav .features-nav-item').bind('click', function() {
    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
    $("#features-nav .features-nav-item").removeClass("current");
    $(this).addClass("current");
    return false;
  });
};
  
  // Added function for jCarousel's "itemVisibleCallback.onBeforeAnimation"
function mycarousel_itemVisibleBefore() {
  $("#features-nav .current").removeClass("current");
};
​
  // Added function for jCarousel's "itemVisibleCallback.onAfterAnimation"
function mycarousel_itemVisibleAfter(carousel, item, idx) {
  $("#features-nav").children().eq(idx - 1).addClass("current");
};
  
  // Wrapped all your ready() functions into one.
  //   No need to have several.
jQuery(document).ready(function() {
  jQuery("#features").jcarousel({
    scroll: 1,
    auto:2,
    wrap: 'both',
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null,
    
    // Callbacks that run just before and after new item is displayed
    itemVisibleInCallback: {
      onBeforeAnimation: mycarousel_itemVisibleBefore,
      onAfterAnimation: mycarousel_itemVisibleAfter
    }
  });
  
  jQuery("#screenshots").jcarousel({
    scroll: 1,
  });
  
  var el = $('#portfolio-services');
  if(el.html()) { el.html(el.html().replace(/, /ig, "</li><li>")); }
});
​
</script>
​
</head>
<body>
​
<div class="mytop">     
  <div style="display: block;" id="features" class="jcarousel-features jcarousel-container jcarousel-container-horizontal">  
    <div class="jcarousel-clip jcarousel-clip-horizontal">
      <ul style="width: 1890px; left: 0px;" class="jcarousel-list jcarousel-list-horizontal">
        <li jcarouselindex="1" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-3-horizontal"><a 
​
href="http://test.nattywp.com/newsone/?p=232"><img src="http://test.nattywp.com/newsone/wp-content/main5.jpg" alt="Short announce" class="" title="" width="630" 
​
height="250"><span class="features-effects png_scale">&nbsp;</span></a></li>
        <li jcarouselindex="2" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-4-horizontal"><a 
​
href="http://test.nattywp.com/newsone/?p=230"><img src="http://test.nattywp.com/newsone/wp-content/main3.jpg" alt="Second review here" class="" title="" 
​
width="630" height="250"><span class="features-effects png_scale">&nbsp;</span></a></li>
        <li jcarouselindex="3" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-5-horizontal"><a 
​
href="http://test.nattywp.com/newsone/?p=228"><img src="http://test.nattywp.com/newsone/wp-content/main4.jpg" alt="Website review" class="" title="" width="630" 
​
height="250"><span class="features-effects png_scale">&nbsp;</span></a></li>
      </ul>
    </div>         
    <div id="features-nav">
      <div id="features-nav1" class="features-nav-item png_crop current">
        <div class="num">1</div>
        <h3>Short announce</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem 
​
[...]</p>
        </div>
      <div id="features-nav2" class="features-nav-item png_crop">
        <div class="num">2</div>        
        <h3>Second review here</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem 
​
[...]</p>
      </div>    
      <div id="features-nav3" class="features-nav-item png_crop">
        <div class="num">3</div>
        <h3>Website review</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem 
​
[...]</p>
      </div>    
    </div>    
  </div>  
</div>
<!-- end verticle carousel -->
​
​
</body>
</html>
​
​
 
​
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers