We Keep Coding

making multiple sliders with one set of jQuery code

I've made a slider with jQuery using html tags which have classes instead of IDs so that I will be able to use the same jQuery code for other duplicated sliders.
The problem is, I want the width of my ul to be calculated based on the number of lis, instead of setting it manually in CSS. When there is only one slider I can set my vars outside of the function, but when I have to use it though event attributes on my html parts so that I will be able to use them for multiple sliders, I have to move the vars inside of my function, which sets the wrong width.
This is my code:
function OLAR(direction,span) {
var OurNexNPrv = $(span);
var Parent_OLAR = OurNexNPrv.parents('.OLAR');
var UL_OF_OLAR = Parent_OLAR.find('.OLAR_CONTENT ul');
var LI_OF_OLAR = UL_OF_OLAR.find('li');
var LI_OF_OLAR_LENGTH = LI_OF_OLAR.length;
var Quantity_OF_OLAR_PAGES = LI_OF_OLAR_LENGTH / 3;
var Max_Margin_LEFT = -(Quantity_OF_OLAR_PAGES - 1) * 576;
UL_OF_OLAR.css('width',LI_OF_OLAR_LENGTH*192);
var AffectedLeftMargin;
var CurrentLeftMargin = UL_OF_OLAR.css('margin-left');
CurrentLeftMargin = parseFloat(CurrentLeftMargin);
if (direction == 'right') {
AffectedLeftMargin = CurrentLeftMargin - 576;
}
if (direction == 'left') {
AffectedLeftMargin = CurrentLeftMargin + 576;
}
if (AffectedLeftMargin < Max_Margin_LEFT) {
AffectedLeftMargin = 0;
}
if (AffectedLeftMargin > 0) {
AffectedLeftMargin = Max_Margin_LEFT;
}
UL_OF_OLAR.animate({'marginLeft': AffectedLeftMargin}, 1000);
}
$('.CIRCLE_LOAD_RIGHT').click(function () {
OLAR('right');
});
$('.CIRCLE_LOAD_LEFT').click(function () {
OLAR('left');
});
How can I set the width for each of my uls individually, through css commands outside of that function?

Okay, my ul tag did not have the absolute position; after giving it the right position and left:0 and bottom:0 or right:0 and bottom:0 (based on your language)the given width which comes from JQuery code can rhyme perfectly with everything else. I've tried it with multiple sliders and it works perfectly :)
So, we need an anchor point in order to make this work. And there is nothing wrong with this JQuery code which has been mentioned above!
Have a great day.

Replacing Bootstrap Dropdown with Dropup (Different activity on two near identical implementations)

I'm working on a project over at github pages, which I replace a bootstrap .dropdown with .dropup if the div's overflow-y: scroll will cause the dropdown menu to be cutoff / overflow. You can see the function working properly at this jsfiddle. Notice if you click on the ellipsis icon to the right on the top rows, it will drop down, if you click on the icon on the bottom rows, it will drop up.
Now, my actual implementation (github page), the code is exactly the same (below), but it wants to replace all .dropdown classes with .dropup when opened, including the top-most row which gets cut off, seen in the photo below.
I've been struggling with this for a week and can't quite figure it out. I've tried a few different things that I thought fixed it but ended up just being a hack and didn't work on mobile, or replaced some but not all etc.
Here is the Javascript / jQuery I'm using, which can be seen in the jsfiddle and my github source here.
$(document).on("shown.bs.dropdown", ".dropdown", function () {
// calculate the required sizes, spaces
var $ul = $(this).children(".dropdown-menu");
var $button = $(this).children(".song-menu");
var ulOffset = $ul.offset();
// how much space would be left on the top if the dropdown opened that direction
var spaceUp = (ulOffset.top - $button.height() - $ul.height()) - $('#playlist').scrollTop();
// how much space is left at the bottom
var spaceDown = $('#playlist').scrollTop() + $('#playlist').height() - ((ulOffset.top + 10) + $ul.height());
// switch to dropup only if there is no space at the bottom AND there is space at the top, or there isn't either but it would be still better fit
if (spaceDown < 0 && (spaceUp >= 0 || spaceUp > spaceDown))
$(this).addClass("dropup");
}).on("hidden.bs.dropdown", ".dropdown", function() {
// always reset after close
$(this).removeClass("dropup");
});
Edit:
To clear up any confusion, here's an example of the behavior without my added .dropup function. jsfiddle Notice when you click the last menu item, it opens the menu but requires scrolling. I specifically want to remove the .dropdown class and add .dropup in this case, so no scrolling is required.

It took some basic math, but I managed to figure out what you desired to do. This code changes the bootstrap classes between dropup and dropdown depending on the room available for a normal dropdown.
I calculated this by detracting the height of the button, dropdownmenu and how far the button was scrolled down in the scrollContainer from the height of the scrollContainer. I got the value how much the div was scrolled down by using the buttons offset and detracting the offset from the scrollContainer.
Here is my jQuery (I selected the .playlist class because this was attached to your scrollContainer, but you should replace it by an id or select it by other means):
$(".dropdown, .dropup").click(function(){
var dropdownClassCheck = $(this).hasClass('dropdown');
var buttonOffset = $(this).offset().top;
var scrollboxOffset = $('.playlist').offset().top;
var buttonHeight = $(this).height();
var scrollBoxHeight = $('.playlist').height();
var dropDownButtonHeight = $(this).children('ul').height();
dropdownSpaceCheck = scrollBoxHeight>buttonOffset-scrollboxOffset+buttonHeight+dropDownButtonHeight;
if(dropdownClassCheck && !dropdownSpaceCheck){
$(this).removeClass('dropdown').addClass('dropup');
}
else if(!dropdownClassCheck && dropdownSpaceCheck){
$(this).removeClass('dropup').addClass('dropdown');
}
});
A working JSFiddle
Let me know if there are parts of the code that could be improved/done easier or if there are any problems with my solution.

I have not thoroughly checked, but .scrollTop() is probably why the code fails when combined with other elements in the DOM, so here is a solution without it:
function checkHeights(){
// LOOP through each dropdown
$('.dropdown,.dropup').each(function(index,element){
var $dropDown = $(element),
$dropDownMenu = $dropDown.find('.dropdown-menu'),
dropDownTop = $dropDown.offset().top,
visibleHeight = $dropDown.height(),
hiddenHeight = $dropDownMenu.height(),
ddTop = dropDownTop - hiddenHeight,
ddBottom = dropDownTop + visibleHeight + hiddenHeight;
// LOOP through all parents
$dropDown.parents().each(function(ix,el){
var $el = $(el);
// CHECK if any of them have overflow property set
if( $el.css('overflow') !== 'visible' ){
var limitTop = $el.offset().top,
limitBottom = limitTop + $el.height();
// CHECK if parent is better fit when dropped upside
if( limitBottom < ddBottom && ( ddTop - limitTop ) > ( limitBottom - ddBottom ) )
$dropDown.removeClass('dropdown').addClass('dropup');
else
$dropDown.removeClass('dropup').addClass('dropdown');
// BREAK LOOP
return false;
}
});
});
}
$(document).ready(function() {
checkHeights();
$('.playlist').scroll(checkHeights);
});
JS Fiddle here.
This one does not require any class or id given to it except for dropdown,dropdown-menu, and dropup (all of which are Bootstrap defaults) and would work fine even if there are multiple playlists on page.
UPDATE
The code is modified and wrapped in a function in order to allow being called when scroll event fires.

I think that the problem it's that you have a big header, and the jsFiddle don't. So ulOffset.top it's always big, and spaceDown is always negative

Replace parent div.dropdown with div.dropup.

How do you get this result, using Jquery Scroll Event & offset/position, css or javascript?

How do you get this result in css, javascript or jquery, or a combination of all:
I asked and posted a similar question before, but no one answered it.
Someone said:
"Maybe you can use javascript (or bether JQuery) for this.
If you use JQuery, you can use the scroll event. If you are scrolling, do a
check if it hits the other div. https://api.jquery.com/scroll/
Checking the positions of the divs is possible with offset/position.
http://api.jquery.com/offset/ https://api.jquery.com/position/
If you want to change the background, you give the div a background color
that is pink. If it hits then you can add an additional background-image
that has a specific background-position
(http://www.w3schools.com/cssref/pr_background-position.asp xpos ypos).
I don't have tried it yet, but I guess it is possible that way."
So my question is, how would you go about doing it to get this result or regardless of what way?

I came up with this after a couple of hours trying to make it work. It was pretty fun doing it, so I'm sharing it.
$(document).ready(function() {
var initScrollTop = $(window).scrollTop();
$('.div1').css('top', (initScrollTop+100)+"px");
$(window).scroll(function () {
var top = parseInt($('.div1').css('top').split("px")[0]);
// I GIVE A FIXED TOP TO .DIV1
var scrollTop = $(this).scrollTop() + 100;
$('.div1').css('top', scrollTop+"px");
// GETTING SOME VALUES
// DIV1
var div2Top = parseInt($('.div2').css('top').split('px')[0]);
var div2Height = parseInt($('.div2').css('height').split('px')[0]);
var div2Bottom = parseInt($('.div2').css('bottom').split('px')[0]);
// DIV2
var div1Width = parseInt($('.div1').css('width').split('px')[0]);
var div1Height = parseInt($('.div1').css('height').split('px')[0]);
var div1Top = parseInt($('.div1').css('top').split('px')[0]);
var div1Bottom = parseInt($('.div1').css('bottom').split('px')[0]);
var div1Left = parseInt($('.div1').css('left').split('px')[0]);
// WE ARE GOING THROUGH THE GREEN BOX
if(scrollTop + div1Height > div2Top) {
// OUTSIDE OF THE GREEN BOX (.div2)
if(scrollTop + div1Height > div2Height + div2Top) {
var div3Height = div2Top + div2Height - scrollTop;
$('.div3').css('top', scrollTop+ "px")
// .css('bottom', div2Bottom + "px")
.css('width', div1Width + "px")
.css('height', div3Height + "px")
.css('visibility','visible');
console.log("I'm out");
}
// INSIDE OF THE GREEN BOX (.div2)
else {
var div3Height = (div1Top > div2Top) ? div1Height : scrollTop + div1Height - div2Top;
var div3Top = (div1Top > div2Top) ? div1Top : div2Top;
$('.div3').css({
'top' : div3Top + "px",
'left': div1Left + "px",
'width': div1Width + "px",
'height': div3Height + "px",
'visibility':'visible'
});
}
} else {
$('.div3').css('visibility','hidden');
}
// WE ARE ABSOLUTELY OUT OF THE GREEN BOX (FROM THE BOTTOM GOING DOWN)
if(scrollTop > div2Top + div2Height) {
$('.div3').css('visibility','hidden');
}
});
});
Here's there a fiddle so you can test it http://jsfiddle.net/5076h670/2/
So basically what it does is create three divs, two of them will be visible and 'collide' between each other, the other one starts hidden and it shows only when the position of the div1 is in the range of the div2. This div3 (the third div) will be shown over the div1 (see the z-index). When it's absolutely out of the box div3 will be hidden.
I don't know what else to explain about the code, I don't know if (and I don't think, it took me a while to make it work) it's understandable what it does. If you have something to ask I'll be reading ;)
Hope it helps

How can I have two of these on one page with different variables? (JQuery)

I need to have 2 of these one page but each with different percentages. When I try re-writing the JS or even use different class/ID names it still always pulls from the first SPAN.
http://jsfiddle.net/K62Ra/
<div class="container">
<div class="bw"></div>
<div class="show"></div>
<div id="bar" data-total="100">
<div class="text">Currently at <br/><span>70</span><br><i>Click To Give</div>
</div>
JS and CSS in the Fiddle.
Much Thanks.

This one will work smoothly:
http://jsfiddle.net/K62Ra/7/
$('.bar').each(function() {
var percentStart = 0;
var total = $(this).data('total');
var percent = parseInt($(this).find('span').html());
$(this).find('> div').addClass("load");
var that = this;
var timer = setInterval(function() {
$(that).siblings('.show').css('height', percentStart/total*100+'%');
$(that).css('height', percentStart/total*100+'%');
$(that).find('span').html('%'+percentStart);
if(percentStart<percent) { percentStart=percentStart+1; return; }
clearInterval(timer);
}, 35);
});
The interval has to be terminated as well, or it will run infinitely (though not doing anything).

I've changed your id="bar" into a class. Then I'm running a each loop for the .bar classes. here is the fiddle: http://jsfiddle.net/K62Ra/3/
here is the code:
$('.bar').each(function (index, element) {
percent = $(this).find('span').html();
total = $(this).attr('data-total');
percentStart = 0;
setInterval(function () {
$('.show').css('height', percentStart / total * 100 + '%');
$(this).css('height', percentStart / total * 100 + '%');
$(this).find('span').html('%' + percentStart);
if (percentStart < percent) {
percentStart = percentStart + 1;
}
}, 35);
});
$(".bar div").addClass("load");

Like some of the comments have stated, having duplicate ids is bad design and can cause some weird errors.
You can find a solution to your problem by changing a number of things. One, instead of
referring to divs in you selectors by id'#', you can infer them by class '.' like
$('.bar')
The next step would be to ensure exclusivity for each div with class 'container' by using a closure
$('.container').each(function(){
var x
var y
.
.
});
And finally, avoid 'selecting' elements in the selector directly, but use $(this) and .find() to ensure you are within the current div with class 'container'.
http://jsfiddle.net/K62Ra/5/
$('.container').each(function(){
var percent = $(this).find('div.bar div span').html();
var total = $(this).find('div.bar').attr('data-total');
var percentStart = 0;
var that = $(this);
setInterval(function() {
that.find('.show').css('height',percentStart/total*100+'%');
that.find('div.bar').css('height',percentStart/total*100+'%');
that.find('div.bar div span').html('%'+percentStart);
if(percentStart<percent) {percentStart=percentStart+1;}
},35);
$(this).find("div.bar div").addClass("load");
});

There are already several good answers here. I would recommend validating your html. Also some of your css was causing weirdness when there was scrolling involved (fixed background images weren't scrolling.)
I took a slightly different approach than everyone else. Instead of using a setInterval I went with $.animate and a step function. Like others, I chose a class to target each of the items: 'fill-me-up'.
Fiddle: http://jsfiddle.net/LFbKs/6/
NOTE: Check the fiddle since I modified the HTML (very slightly) and the css to a larger degree.
// for each item we need to "fill up"
$('.fill-me-up').each(function(){
// cache DOM references
var this$ = $(this)
, bar$ = this$.find('.bar')
, show$ = this$.find('.show')
, span$ = bar$.find('div span')
// the target percentage height for this item
, p = span$.text()
// combine '.bar' and '.show' so we can apply the animation to both
, toAnimate = $().add(bar$).add(show$);
// add class causing fade-in
bar$.find('div').addClass('is-visible');
// animate height to target height over 2 seconds and
// at each step, update the span with a truncated value
toAnimate.animate(
{ height: p+'%' },
{
duration: 2000,
step: function( currentStep ) {
span$.html('%'+currentStep.toFixed(0));
}
}
);
});
Cheers

How to improve image cross-fade performance?

I want to be able to do a cross fade transition on large images whose width is set to 100% of the screen. I have a working example of what I want to accomplish. However, when I test it out on various browsers and various computers I don't get a buttery-smooth transition everywhere.
See demo on jsFiddle: http://jsfiddle.net/vrD2C/
See on Amazon S3: http://imagefader.s3.amazonaws.com/index.htm
I want to know how to improve the performance. Here's the function that actually does the image swap:
function swapImage(oldImg, newImg) {
newImg.css({
"display": "block",
"z-index": 2,
"opacity": 0
})
.removeClass("shadow")
.animate({ "opacity": 1 }, 500, function () {
if (oldImg) {
oldImg.hide();
}
newImg.addClass("shadow").css("z-index", 1);
});
}
Is using jQuery animate() to change the opacity a bad way to go?

You might want to look into CSS3 Transitions, as the browser might be able to optimize that better than Javascript directly setting the attributes in a loop. This seems to be a pretty good start for it:
http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/

I'm not sure if this will help optimize your performance as I am currently using IE9 on an amped up machine and even if I put the browser into IE7 or 8 document mode, the JavaScript doesn't falter with your current code. However, you might consider making the following optimizations to the code.
Unclutter the contents of the main photo stage by placing all your photos in a hidden container you could give an id of "queue" or something similar, making the DOM do the work of storing and ordering the images you are not currently displaying for you. This will also leave the browser only working with two visible images at any given time, giving it less to consider as far as stacking context, positioning, and so on.
Rewrite the code to use an event trigger and bind the fade-in handling to the event, calling the first image in the queue's event once the current transition is complete. I find this method is more well-behaved for cycling animation than some timeout-managed scripts. An example of how to do this follows:
// Bind a custom event to each image called "transition"
$("#queue img").bind("transition", function() {
$(this)
// Hide the image
.hide()
// Move it to the visible stage
.appendTo("#photos")
// Delay the upcoming animation by the desired value
.delay(2500)
// Slowly fade the image in
.fadeIn("slow", function() {
// Animation callback
$(this)
// Add a shadow class to this image
.addClass("shadow")
// Select the replaced image
.siblings("img")
// Remove its shadow class
.removeClass("shadow")
// Move it to the back of the image queue container
.appendTo("#queue");
// Trigger the transition event on the next image in the queue
$("#queue img:first").trigger("transition");
});
}).first().addClass("shadow").trigger("transition"); // Fire the initial event
Try this working demo in your problem browsers and let me know if the performance is still poor.

I had the same problem too. I just preloaded my images and the transitions became smooth again.

The point is that IE is not W3C compliant, but +1 with ctcherry as using css is the most efficient way for smooth transitions.
Then there are the javascript coded solutions, either using js straight (but need some efforts are needed to comply with W3C Vs browsers), or using libs like JQuery or Mootools.
Here is a good javascript coded example (See demo online) compliant to your needs :
var Fondu = function(classe_img){
this.classe_img = classe_img;
this.courant = 0;
this.coeff = 100;
this.collection = this.getImages();
this.collection[0].style.zIndex = 100;
this.total = this.collection.length - 1;
this.encours = false;
}
Fondu.prototype.getImages = function(){
var tmp = [];
if(document.getElementsByClassName){
tmp = document.getElementsByClassName(this.classe_img);
}
else{
var i=0;
while(document.getElementsByTagName('*')[i]){
if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img) > -1){
tmp.push(document.getElementsByTagName('*')[i]);
}
i++;
}
}
var j=tmp.length;
while(j--){
if(tmp[j].filters){
tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
tmp[j].style.filter = 'alpha(opacity=100)';
tmp[j].opaque = tmp[j].filters[0];
this.coeff = 1;
}
else{
tmp[j].opaque = tmp[j].style;
}
}
return tmp;
}
Fondu.prototype.change = function(sens){
if(this.encours){
return false;
}
var prevObj = this.collection[this.courant];
this.encours = true;
if(sens){
this.courant++;
if(this.courant>this.total){
this.courant = 0;
}
}
else{
this.courant--;
if(this.courant<0){
this.courant = this.total;
}
}
var nextObj = this.collection[this.courant];
nextObj.style.zIndex = 50;
var tmpOp = 100;
var that = this;
var timer = setInterval(function(){
if(tmpOp<0){
clearInterval(timer);
timer = null;
prevObj.opaque.opacity = 0;
nextObj.style.zIndex = 100;
prevObj.style.zIndex = 0;
prevObj.opaque.opacity = 100 / that.coeff;
that.encours = false;
}
else{
prevObj.opaque.opacity = tmpOp / that.coeff;
tmpOp -= 5;
}
}, 25);
}