I'm trying to write jQuery plugin for making accordion.
All items inside the container need to reduce their width so all items could be shown on one line.
On item hover, rest of the items should reduce width so it the hover item could be shown at its original width.
The error occurs when trying to initial set the items: the last item disappears.
the math is:
slider-width / all-items-width
and then:
each-item * (slider-width / all-items-width)
What am I calculating wrong?
jQuery(function($) {
$.fn.shadeAccordion = function(elmwrap, sliderH) {
var $this = $(this), //get the slider countiner
SlideR = $this,
SliderWidth = SlideR.width(), // slider should inherit parent witdth
thumbA = SlideR.find('a'), // images should wrap with a tag
thumbMOunt = thumbA.length, // count the number of images
thumbImg = thumbA.find('img'); // find acctual imgaes
var imgaesWidth = 0;
thumbImg.each(function(index, el) {
imgaesWidth += $(el).width();
});
console.log(imgaesWidth);
var margineach = SliderWidth / imgaesWidth;
console.log(margineach);
//some CSS Settigns
SlideR.find(elmwrap).css({
'transition': 'width .2s ease-in',
'height': sliderH,
'overflow': 'hidden',
'position': 'static'
}).find('img').css({
height: sliderH,
width: 'auto',
'position': 'relative',
'max-width': 'none'
});;
$.fn.HoverAnimation = function(SliderWidth) {
var $this = $(this), //get the specific hoverd container
imgWid = $this.data('orginalwidht'), //actual image width for this cont
sliderWidthAfterOpen = SliderWidth - imgWid,
thumbImgSibDiv = $this.siblings(elmwrap);
var sibImgaesWidth = 0;
thumbImgSibDiv.each(function(index, el) {
sibImgaesWidth += $(el).width();
});
var margineachOpend = sliderWidthAfterOpen / sibImgaesWidth;
$this.addClass('active').width(imgWid).css('opacity', '1');
thumbImgSibDiv.addClass('inactive').each(function() {
var thisW = $(this).width();
$(this).width(thisW * margineachOpend).css('opacity', '0.4');
});
}; //End of mouse over
$.fn.LeaveAnimation = function(SliderWidth) {
var $this = $(this),
imgWid = $this.data('editedwidth');
$this.removeClass('active').width(imgWid);
SlideR.find(elmwrap).css('opacity', '0.4').not('.active').removeClass('inactive').each(function() {
$(this).width($(this).data('editedwidth'));
}); //End of Each change Margin
}; //End of mouseleave
widhtS = 0;
// adjust new width and declare animation when hover
SlideR.find(elmwrap).each(function(idx, el) {
var imgW = $(el).find('img').width();
$(el).width(Math.round(imgW * margineach)); //change images width so they will super fit to the slider
$(el).attr('data-orginalwidht', imgW).attr('data-editedwidth', Math.round(imgW * margineach)).find('img').css({
margin: '0',
padding: '0'
});
$(el).css({
'margin': 0,
'clear': 'none',
'padding': 0
}); //change images width so they will super fit to the slider
widhtS += Math.round(imgW * margineach);
console.log(Math.round(widhtS));
})
.mouseover(function() {
$(this).HoverAnimation(SliderWidth)
})
.mouseleave(function() {
$(this).LeaveAnimation(SliderWidth)
});
}
});
heres a demo: https://jsfiddle.net/12345/8zd9nmvf/23/
the issue was CSS - i was calculating all images width before their width became auto.
so i moved css properties up before the calculation and it fixed:
//some CSS Settigns
SlideR.find(elmwrap).css({
'transition': 'width .2s ease-in',
'height': sliderH,
'overflow': 'hidden',
'position': 'static'
}).find('img').css({
height: sliderH,
width: 'auto',
'position': 'relative',
'max-width': 'none'
});
var imgaesWidth = 0;
thumbImg.each(function(index, el) {
imgaesWidth += $(el).width();
});
var margineach = SliderWidth / imgaesWidth;
I'm using slimScroll within a js project for a scroll bar on one side of the page. There are a lot of elements within the the scrollView and right now it's scrolling way to quickly and not intuitively. When I reduce the amount of wheel and/or touchScrollStep there is not change it speed.
* Version: 1.3.0
*
*/
(function($) {
jQuery.fn.extend({
slimScroll: function(options) {
var defaults = {
// width in pixels of the visible scroll area
width : 'auto',
// height in pixels of the visible scroll area
height : '250px',
// width in pixels of the scrollbar and rail
size : '7px',
// scrollbar color, accepts any hex/color value
color: '#000',
// scrollbar position - left/right
position : 'right',
// distance in pixels between the side edge and the scrollbar
distance : '1px',
// default scroll position on load - top / bottom / $('selector')
start : 'top',
// sets scrollbar opacity
opacity : .4,
// enables always-on mode for the scrollbar
alwaysVisible : false,
// check if we should hide the scrollbar when user is hovering over
disableFadeOut : false,
// sets visibility of the rail
railVisible : false,
// sets rail color
railColor : '#333',
// sets rail opacity
railOpacity : .2,
// whether we should use jQuery UI Draggable to enable bar dragging
railDraggable : true,
// defautlt CSS class of the slimscroll rail
railClass : 'slimScrollRail',
// defautlt CSS class of the slimscroll bar
barClass : 'slimScrollBar',
// defautlt CSS class of the slimscroll wrapper
wrapperClass : 'slimScrollDiv',
// check if mousewheel should scroll the window if we reach top/bottom
allowPageScroll : false,
// scroll amount applied to each mouse wheel step
wheelStep : 20,
// scroll amount applied when user is using gestures
touchScrollStep : 200,
// sets border radius
borderRadius: '7px',
// sets border radius of the rail
railBorderRadius : '7px'
};
var o = $.extend(defaults, options);
// do it for every element that matches selector
this.each(function(){
var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
barHeight, percentScroll, lastScroll,
divS = '<div></div>',
minBarHeight = 30,
releaseScroll = false;
// used in event handlers and for better minification
var me = $(this);
// ensure we are not binding it again
if (me.parent().hasClass(o.wrapperClass))
{
// start from last bar position
var offset = me.scrollTop();
// find bar and rail
bar = me.parent().find('.' + o.barClass);
rail = me.parent().find('.' + o.railClass);
getBarHeight();
// check if we should scroll existing instance
if ($.isPlainObject(options))
{
// Pass height: auto to an existing slimscroll object to force a resize after contents have changed
if ( 'height' in options && options.height == 'auto' ) {
me.parent().css('height', 'auto');
me.css('height', 'auto');
var height = me.parent().parent().height();
me.parent().css('height', height);
me.css('height', height);
}
if ('scrollTo' in options)
{
// jump to a static point
offset = parseInt(o.scrollTo);
}
else if ('scrollBy' in options)
{
// jump by value pixels
offset += parseInt(o.scrollBy);
}
else if ('destroy' in options)
{
// remove slimscroll elements
bar.remove();
rail.remove();
me.unwrap();
return;
}
// scroll content by the given offset
scrollContent(offset, false, true);
}
return;
}
// optionally set height to the parent's height
o.height = (o.height == 'auto') ? me.parent().height() : o.height;
// wrap content
var wrapper = $(divS)
.addClass(o.wrapperClass)
.css({
position: 'relative',
overflow: 'hidden',
width: o.width,
height: o.height
});
// update style for the div
me.css({
overflow: 'hidden',
width: o.width,
height: o.height
});
// create scrollbar rail
var rail = $(divS)
.addClass(o.railClass)
.css({
width: o.size,
height: '100%',
position: 'absolute',
top: 0,
display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
'border-radius': o.railBorderRadius,
background: o.railColor,
opacity: o.railOpacity,
zIndex: 90
});
// create scrollbar
var bar = $(divS)
.addClass(o.barClass)
.css({
background: o.color,
width: o.size,
position: 'absolute',
top: 0,
opacity: o.opacity,
display: o.alwaysVisible ? 'block' : 'none',
'border-radius' : o.borderRadius,
BorderRadius: o.borderRadius,
MozBorderRadius: o.borderRadius,
WebkitBorderRadius: o.borderRadius,
zIndex: 99
});
// set position
var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
rail.css(posCss);
bar.css(posCss);
// wrap it
me.wrap(wrapper);
// append to parent div
me.parent().append(bar);
me.parent().append(rail);
// make it draggable and no longer dependent on the jqueryUI
if (o.railDraggable){
bar.bind("mousedown", function(e) {
var $doc = $(document);
isDragg = true;
t = parseFloat(bar.css('top'));
pageY = e.pageY;
$doc.bind("mousemove.slimscroll", function(e){
currTop = t + e.pageY - pageY;
bar.css('top', currTop);
scrollContent(0, bar.position().top, false);// scroll content
});
$doc.bind("mouseup.slimscroll", function(e) {
isDragg = false;hideBar();
$doc.unbind('.slimscroll');
});
return false;
}).bind("selectstart.slimscroll", function(e){
e.stopPropagation();
e.preventDefault();
return false;
});
}
// on rail over
rail.hover(function(){
showBar();
}, function(){
hideBar();
});
// on bar over
bar.hover(function(){
isOverBar = true;
}, function(){
isOverBar = false;
});
// show on parent mouseover
me.hover(function(){
isOverPanel = true;
showBar();
hideBar();
}, function(){
isOverPanel = false;
hideBar();
});
// support for mobile
me.bind('touchstart', function(e,b){
if (e.originalEvent.touches.length)
{
// record where touch started
touchDif = e.originalEvent.touches[0].pageY;
}
});
me.bind('touchmove', function(e){
// prevent scrolling the page if necessary
if(!releaseScroll)
{
e.originalEvent.preventDefault();
}
if (e.originalEvent.touches.length)
{
// see how far user swiped
var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
// scroll content
scrollContent(diff, true);
touchDif = e.originalEvent.touches[0].pageY;
}
});
// set up initial height
getBarHeight();
// check start position
if (o.start === 'bottom')
{
// scroll content to bottom
bar.css({ top: me.outerHeight() - bar.outerHeight() });
scrollContent(0, true);
}
else if (o.start !== 'top')
{
// assume jQuery selector
scrollContent($(o.start).position().top, null, true);
// make sure bar stays hidden
if (!o.alwaysVisible) { bar.hide(); }
}
// attach scroll events
attachWheel();
function _onWheel(e)
{
// use mouse wheel only when mouse is over
if (!isOverPanel) { return; }
var e = e || window.event;
var delta = 0;
if (e.wheelDelta) { delta = -e.wheelDelta/120; }
if (e.detail) { delta = e.detail / 3; }
var target = e.target || e.srcTarget || e.srcElement;
if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
// scroll content
scrollContent(delta, true);
}
// stop window scroll
if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
if (!releaseScroll) { e.returnValue = false; }
}
function scrollContent(y, isWheel, isJump)
{
releaseScroll = false;
var delta = y;
var maxTop = me.outerHeight() - bar.outerHeight();
if (isWheel)
{
// move bar with mouse wheel
delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
// move bar, make sure it doesn't go out
delta = Math.min(Math.max(delta, 0), maxTop);
// if scrolling down, make sure a fractional change to the
// scroll position isn't rounded away when the scrollbar's CSS is set
// this flooring of delta would happened automatically when
// bar.css is set below, but we floor here for clarity
delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
// scroll the scrollbar
bar.css({ top: delta + 'px' });
}
// calculate actual scroll amount
percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
if (isJump)
{
delta = y;
var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
bar.css({ top: offsetTop + 'px' });
}
// scroll content
me.scrollTop(delta);
// fire scrolling event
me.trigger('slimscrolling', ~~delta);
// ensure bar is visible
showBar();
// trigger hide when scroll is stopped
hideBar();
}
function attachWheel()
{
if (window.addEventListener)
{
this.addEventListener('DOMMouseScroll', _onWheel, false );
this.addEventListener('mousewheel', _onWheel, false );
this.addEventListener('MozMousePixelScroll', _onWheel, false );
}
else
{
document.attachEvent("onmousewheel", _onWheel)
}
}
function getBarHeight()
{
// calculate scrollbar height and make sure it is not too small
barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
bar.css({ height: barHeight + 'px' });
// hide scrollbar if content is not long enough
var display = barHeight == me.outerHeight() ? 'none' : 'block';
bar.css({ display: display });
}
function showBar()
{
// recalculate bar height
getBarHeight();
clearTimeout(queueHide);
// when bar reached top or bottom
if (percentScroll == ~~percentScroll)
{
//release wheel
releaseScroll = o.allowPageScroll;
// publish approporiate event
if (lastScroll != percentScroll)
{
var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
me.trigger('slimscroll', msg);
}
}
else
{
releaseScroll = false;
}
lastScroll = percentScroll;
// show only when required
if(barHeight >= me.outerHeight()) {
//allow window scroll
releaseScroll = true;
return;
}
bar.stop(true,true).fadeIn('fast');
if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); }
}
function hideBar()
{
// only hide when options allow it
if (!o.alwaysVisible)
{
queueHide = setTimeout(function(){
if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
{
bar.fadeOut('slow');
rail.fadeOut('slow');
}
}, 1000);
}
}
});
// maintain chainability
return this;
}
});
jQuery.fn.extend({
slimscroll: jQuery.fn.slimScroll
});
})(jQuery);
I've just played around with this script and I kept adjusting the numbers and these are the numbers that felt more natural to me.
wheelStep : 10,
touchScrollStep : 75
The only thing I'm not happy with is how it doesn't understand how fast you scrolled with touch events, so it doesn't have that inertia effect like native iOS does naturally. I'm hoping they'll add that option soon.
Find
delta = (y > 0) ? Math.ceil(delta): Math.floor(delta);
and change it to the following:
var speedfix = 10;
delta = (y > 0) ? Math.ceil(delta) + speedfix : Math.floor(delta)- speedfix;
Change the value of speedfix to your requirement
This one is fairly simple, but very weird:
var dims = this.placeholder.node().getBoundingClientRect();
this.mapContainer = d3.select('body').append('div')
.classed('map-container', true)
.style({
position : 'absolute',
width : dims.width,
height : dims.height,
top : dims.top,
left : dims.left
});
dims.width, dims.height, etc. return non-zero values, but the div that I get is just plain <div class="container" style="position:absolute;"></div>
I can set other style values in the console (d3.select('.map-container').style({color:'red','background-color':'blue'}) works fine), but setting width d3.select('.map-container').style({width:30,top:40}) does nothing at all.
Here's a straight jsbin where it also doesn't work: http://jsbin.com/gequrasivo/1/edit?html,js,output
What's going on here?
It's because CSS style values require a unit.
this.mapContainer = d3.select('body').append('div')
.classed('map-container', true)
.style({
position : 'absolute',
width : dims.width + 'px',
height : dims.height + 'px',
top : dims.top + 'px',
left : dims.left + 'px'
});
works fine.
This will make a div that is position: absolute ( top: 46px ) on a page become fixed to the top of the page ( top: 0px ) when scrolled to a certain point ( the distance from the div to the top of the page )
$(window).scroll(function (e) {
$el = $('#sticky');
if ($(this).scrollTop() > 46 && $el.css('position') != 'fixed') {
$('#sticky').css({
'position': 'fixed',
'top': '0px'
});
}
});
BUT it doesn't reset the position of the div when you're back at the top of the page, and I want it to. Any suggestions? Also I want to make sure this is the best way to do this — if there's a css only, non-javascript solution I'm all ears.
I would recommend either keeping the sticky content fixed or absolute, but not switching between the two.
Fixed: http://jsfiddle.net/CpM8H/2/
$(window).scroll(function (e) {
$scrollTopDiff = 46 - $(this).scrollTop();
$('#sticky').css({
'top': ( $scrollTopDiff > 0 ? $scrollTopDiff : 0 ) + 'px'
});
});
Absolute: http://jsfiddle.net/CpM8H/3/
$(window).scroll(function (e) {
$scrollTop = $(this).scrollTop();
$('#sticky').css({
'top': ( $scrollTop > 46 ? $scrollTop : 46 ) + 'px'
});
});
If you really need to switch between fixed and absolute, here is my first though on how to do that, but the sticky content may jump around a bit:
$(window).scroll(function (e) {
$el = $('#sticky');
if ($(this).scrollTop() > 46 ) {
$el.css({
'position': 'fixed',
'top': '0px'
});
} else {
$el.css({
'position': 'absolute',
'top': '46px'
});
}
});
I have the following script that is working great, but I want to wrap it in an if statement that only runs this script when the window height is larger than the #tip element. What do I add?
$(document).scroll(function () {
if($(window).scrollTop() >= 40){
$('#tip').css({'position' : 'fixed', 'top' : '20px', 'left' : '50%', 'margin-left' : '250px' });
}
if($(window).scrollTop() <= 40){
$('#tip').css({'position' : 'absolute', 'top' : '15px', 'left' : '', 'margin-left' : ''});
}
console.log($(window).scrollTop());
});
simply
$(document).scroll(function () {
if ($(window).height() > $('#tip').height()) {
... your code here
}
});