Good Day,
I have been trying various methods both found on here and in various Google searches (with no success). I am trying to re-create the “Top Products Viewer” functionality found on this Microsoft Page (look just below the rotator which lays atop the page). I did very well on the CSS and layout. However, I am having SERIOUS problems getting the animation to work.
I would like the slides to animate ALWAYS TO THE LEFT.
Any help is aprreciated. I hollowed-out the animateLeftOnly function because I am looking for a fresh option.
UPDATE:
The help below was very useful. But scope changes made me go a different way. Below is the FINAL WORKING VERSION in its’ ENTIRETY:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
/* This styling is assumed to come-in from a master set of CSS files */
body, select { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; }
h3 { font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 11pt; font-weight: normal;}
h4 { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; font-size: 9pt; font-weight: normal;}
</style>
<style type="text/css">
/* This is the styling for the control (itself) */
.metroPivot { border: 1px solid #D3D3D3; height: 250px; width: 930px; overflow: hidden; }
.metroPivot .header { border-bottom: 1px solid; padding: 0px 0px 0px 15px; background-color: #FFFFFF; border-bottom-color: #D3D3D3; color: #4F4F4F; }
.metroPivot .header h3 { font-size: 162.5%; margin-bottom: 10px; }
.metroPivot .content-categories { width: auto; }
.metroPivot .content-categories div { float: left; }
.metroPivot .content-categories div.current
{
background-image: url(http://i.microsoft.com/global/en-us/homepage/PublishingImages/Sprites/white-carousel.png);
background-position: -55px -61px;
overflow: hidden;
background-repeat: no-repeat;
}
.metroPivot .content-categories div h4 { width: 115px; float: left; text-align: center; font-size: 81.5%; border-right: 1px solid #4F4F4F; }
.metroPivot .content-categories div h4 a { padding-top: 10px; color: #0060A6; cursor: pointer; }
.metroPivot .content-categories div.last h4 { border-right: 0px; }
.metroPivot .content-categories div.current h4 a { color: #4F4F4F; cursor: default; }
.metroPivot .content-viewer { width: 20000px; clear: both; }
.metroPivot .content-viewer .master-slide { float: left; height: 123px; width: 928px; line-height: 123px; }
.metroPivot .content-viewer .master-slide .html-template { border-right: 1px solid #D3D3D3; float: left; height: 110px; width: 288px; padding: 0 10px; }
.metroPivot .content-viewer .master-slide .last { border-right: 0px; }
.metroPivot .content-listing { display: none; }
/* DELETE LATER - maybe
.metroPivot .content-listing .html-template .wrapper { width: 100%; }
.metroPivot .content-listing .html-template .wrapper a.image { float: left; text-decoration: none; padding-right: 10px; }
.metroPivot .content-listing .html-template .wrapper .content { float: left; width: 215px; }
.metroPivot .content-listing .html-template .wrapper .content a.title { display: block; text-decoration: none; }
.metroPivot .content-listing .image-template .wrapper { width: 100%; }
.metroPivot .content-listing .image-template .wrapper a { float:left; text-decoration: none; }
*/
</style>
<script type="text/javascript">
var metroPivot = (function ($) {
var publicInstances = {};
publicInstances.controller = controller;
function controller(clientId, options) {
var defaults =
{
templateType: 'html-template',
behavior: 'continuous-left'
};
this.CSSCLASS_CURRENT = 'current';
this.CSSCLASS_LAST = 'last';
var self = this;
this.clientId = clientId;
this.context = $('#' + self.clientId);
this.header = $('.header', self.context);
this.category = $('.content-categories', self.context);
this.categories = self.category.children();
this.viewer = $('.content-viewer', self.context);
this.viewerItems = self.viewer.children();
this.list = $('.content-listing', self.context);
this.listItems = self.list.children();
this.current = undefined;
this.previous = undefined;
this.isAnimating = false;
this.initialize = function () {
if (self.categories.length >= 1)
self.current = $('.' + self.CSSCLASS_CURRENT, self.category);
if (self.categories.length <= 1)
return;
if (options != undefined)
if (options.length > 0)
defaults = $.extend(defaults, options);
self.populateMaster(0, 0);
self.categories.each(function () {
$(this).click(self.categoryClicked);
});
self.listItems.each(function () {
$(this).data('index', $(this).index());
});
};
this.categoryClicked = function () {
var next = $(this);
if (next.hasClass(self.CSSCLASS_CURRENT))
return;
if (self.isAnimating)
return;
self.isAnimating = true;
var previous = self.current;
next.toggleClass(self.CSSCLASS_CURRENT);
previous.toggleClass(self.CSSCLASS_CURRENT);
self.current = next;
self.previous = previous;
self.move();
};
this.populateMaster = function (masterIndex, categoryIndex) {
// TODO: the selectors need to work directly off of this objects properties.
masterIndex += 1;
var master = $(".master-slide:nth-child(" + masterIndex + ")", self.viewer);
var clones = $("[data-index=" + categoryIndex + "]", self.list).clone();
master.empty();
clones.css('display', 'block').appendTo(master);
};
this.move = function () {
var categoryIndex = self.current.index();
self.populateMaster(1, categoryIndex);
if(defaults.behavior == 'continuous-left')
self.animateContinuousLeft();
};
this.animateContinuousLeft = function () {
// TODO: the selectors need to work directly off of this objects properties.
var currentSlide = $('div.content-viewer div:first');
if (currentSlide.length > 0) {
currentSlide.clone().appendTo('div.content-viewer');
currentSlide.animate({ width: 'hide' }, function () {
$(this).remove();
self.isAnimating = false;
});
}
};
self.initialize();
};
return publicInstances;
})(jQuery);
var instance = undefined;
$(document).ready(function () {
instance = new metroPivot.controller('myControl');
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="myControl" class="metroPivot">
<div class="header">
<h3>
Top Products
</h3>
</div>
<div class="content-categories">
<div class="current">
<h4>
<a>Most Popular</a>
</h4>
</div>
<div>
<h4>
<a>Windows</a>
</h4>
</div>
<div>
<h4>
<a>Office</a>
</h4>
</div>
<div>
<h4>
<a>Xbox</a>
</h4>
</div>
<div>
<h4>
<a>Windows Phone</a>
</h4>
</div>
<div>
<h4>
<a>Windows Live</a>
</h4>
</div>
<div>
<h4>
<a>Bing</a>
</h4>
</div>
<div class="last">
<h4>
<a>Bada-Bing!</a>
</h4>
</div>
</div>
<div class="content-viewer">
<div class="master-slide">
</div>
<div class="master-slide">
</div>
</div>
<div class="content-listing">
<div data-index="0" class="html-template">
Most Popular
</div>
<div data-index="0" class="html-template">
Most Popular
</div>
<div data-index="0" class="html-template last">
Most Popular
</div>
<div data-index="1" class="html-template">
Windows
</div>
<div data-index="1" class="html-template">
Windows
</div>
<div data-index="1" class="html-template last">
Windows
</div>
<div data-index="2" class="html-template">
Office
</div>
<div data-index="2" class="html-template">
Office
</div>
<div data-index="2" class="html-template last">
Office
</div>
<div data-index="3" class="html-template">
Xbox
</div>
<div data-index="3" class="html-template">
Xbox
</div>
<div data-index="3" class="html-template last">
Xbox
</div>
<div data-index="4" class="html-template">
Windows Phone
</div>
<div data-index="4" class="html-template">
Windows Phone
</div>
<div data-index="4" class="html-template last">
Windows Phone
</div>
<div data-index="5" class="html-template">
Windows Live
</div>
<div data-index="5" class="html-template">
Windows Live
</div>
<div data-index="5" class="html-template last">
Windows Live
</div>
<div data-index="6" class="html-template">
Bing
</div>
<div data-index="6" class="html-template">
Bing
</div>
<div data-index="6" class="html-template last">
Bing
</div>
<div data-index="7" class="html-template">
Bada-Bing!
</div>
<div data-index="7" class="html-template">
Bada-Bing!
</div>
<div data-index="7" class="html-template last">
Bada-Bing!
</div>
</div>
</div>
</asp:Content>
UPDATE:
Everything below here was part of the original question. Use the code ABOVE as a final solution.
Here is a JS-FIDDLE of the code below.
Here is the code:
<script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
/* This styling is assumed to come-in from a master set of CSS files */
body, select { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; }
h3 { font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 11pt; font-weight: normal;}
h4 { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; font-size: 9pt; font-weight: normal;}
</style>
<style type="text/css">
/* This is the styling for the control (itself) */
.slideScroll-horizontal { border: 1px solid #D3D3D3; height: 270px; width: 960px; overflow: hidden; }
.slideScroll-horizontal .header { border-bottom: 1px solid; padding: 0px 0px 0px 15px; background-color: #FFFFFF; border-bottom-color: #D3D3D3; color: #4F4F4F; }
.slideScroll-horizontal .header h3 { font-size: 162.5%; margin-bottom: 10px; }
.slideScroll-horizontal .content-categories { width: auto; }
.slideScroll-horizontal .content-categories div { float: left; }
.slideScroll-horizontal .content-categories div.current
{
background-image: url(http://i.microsoft.com/global/en-us/homepage/PublishingImages/Sprites/white-carousel.png);
background-position: -55px -61px;
overflow: hidden;
background-repeat: no-repeat;
}
.slideScroll-horizontal .content-categories div h4 { width: 118px; float: left; text-align: center; font-size: 81.5%; border-right: 1px solid #4F4F4F; }
.slideScroll-horizontal .content-categories div h4 a { padding-top: 10px; color: #0060A6; cursor: pointer; }
.slideScroll-horizontal .content-categories div.last h4 { border-right: 0px; }
.slideScroll-horizontal .content-categories div.current h4 a { color: #4F4F4F; cursor: default; }
.slideScroll-horizontal .content-listing { width: 20000px; clear: both; padding: 0 10px; }
.slideScroll-horizontal .content-listing .html-template { border-right: 1px solid #D3D3D3; float: left; height: 145px; width: 300px; padding: 0 10px; }
/* DELETE LATER - maybe */
.slideScroll-horizontal .content-listing .html-template { text-align: center; line-height: 145px; }
</style>
<script type="text/javascript">
var slideScroll = (function ($) {
var publicInstances = {};
publicInstances.controller = controller;
function controller(clientId, options) {
var defaults = {};
this.CSSCLASS_CURRENT = 'current';
this.CSSCLASS_LAST = 'last';
var self = this;
this.clientId = clientId;
this.context = $('#' + self.clientId);
this.header = $('.header', self.context);
this.category = $('.content-categories', self.context);
this.categories = self.category.children();
this.list = $('.content-listing:first', self.context);
this.listItems = self.list.children();
this.current = undefined;
this.previous = undefined;
this.initialize = function () {
if (self.categories.length >= 1)
self.current = $('.' + self.CSSCLASS_CURRENT, self.category);
if (self.categories.length <= 1)
return;
if (options != undefined)
defaults = $.extend(defaults, options);
self.categories.each(function () {
$(this).click(self.categoryClicked);
});
self.listItems.each(function () {
$(this).data('index', $(this).index());
});
};
this.categoryClicked = function () {
var next = $(this);
if (next.hasClass(self.CSSCLASS_CURRENT))
return;
var previous = self.current;
next.toggleClass(self.CSSCLASS_CURRENT);
previous.toggleClass(self.CSSCLASS_CURRENT);
self.current = next;
self.previous = previous;
if (self.categories.length <= 3)
return;
// TODO: check if animation even needs to happen
self.move();
};
this.move = function () {
self.animateLeftOnly();
};
this.animateLeftOnly = function () {
// Any help here is appreciated.
};
self.initialize();
};
return publicInstances;
})(jQuery);
var instance = undefined;
$(document).ready(function () {
instance = new slideScroll.controller('myControl');
});
</script>
The HTML Looks Like:
<div id="myControl" class="slideScroll-horizontal">
<div class="header">
<h3>
Top Products
</h3>
</div>
<div class="content-categories">
<div class="current">
<h4>
<a>Most Popular</a>
</h4>
</div>
<div>
<h4>
<a>Windows</a>
</h4>
</div>
<div>
<h4>
<a>Office</a>
</h4>
</div>
<div>
<h4>
<a>Xbox</a>
</h4>
</div>
<div>
<h4>
<a>Windows Phone</a>
</h4>
</div>
<div>
<h4>
<a>Windows Live</a>
</h4>
</div>
<div>
<h4>
<a>Bing</a>
</h4>
</div>
<div class="last">
<h4>
<a>Bada-Bing!</a>
</h4>
</div>
</div>
<div class="content-listing">
<div data-index="0" class="html-template">
one
</div>
<div data-index="1" class="html-template">
two
</div>
<div data-index="2" class="html-template">
three
</div>
<div data-index="3" class="html-template">
four
</div>
<div data-index="4" class="html-template">
five
</div>
<div data-index="5" class="html-template">
six
</div>
<div data-index="6" class="html-template">
seven
</div>
<div data-index="7" class="html-template">
eight
</div>
</div>
</div>
Previous (pathetic) attempts Looked Like:
this.animateLeftOnly = function () {
var categoryIndex = self.current.index();
var targetSlide = $("[data-index=" + categoryIndex + "]", self.list);
var targetSlideIndex = targetSlide.index();
var currentSlide = undefined;
for (var i = 0; i < targetSlideIndex; i++) {
currentSlide = $('div.content-listing div:first');
currentSlide.animate({ width: 'hide' }, function () {
$(this).insertAfter('div.content-listing div:last', self.listItems);
$(this).removeAttr('style');
});
}
};
I’m being called to a meeting so I can’t answer completely but what you want to do is pretty simple.
You want to clone the first child, append to the end, slide left, remove first child. This makes an endless loop. I have made this many times.
Here’s something to get you started…
your css would be something like this
Then your click action (assuming you had an image or arrow or something with an id called left)
So you clone the first child, throw it at the end of the slider container, then remove the cloned element and return the left position back to zero. It should be seamless… gotta run now. hope it helps