We Keep Coding

How to add one class at a time if two divs are ovelapped in the same position

I am stuck in one problem and tried a lot but couldn't get the solution.
What happens is, there is an mp3 player and below that player there is a strip what holds pictures (comments from users) based on the mp3 progress.
When ever the progress bar of the player reach the start of the image it ads "active" class to the image so people can see that at this time this user commented.
Now the problem I am facing is that at 01:46 there are two images that overlap each other and due to this overlap the javascript is adding active class to both images which I don't want, I want if the progress bar reach the start of the first image it will make it active but as soon as the second image starts (which is overlapped) the second image gets active so that there would be only 1 active at a time. same as soundcloud comments.
No matter if the first image duration will be less but this is what i wanted to achieve, as these images will be dynamic and user can choose where ever they want to comment i can not give the specific class to overlapped images so something needs to be done through javascript which i am stuck badly.
Because now there are two overlapped but in future it can be three four or how many overlapped so i want a effect that when we move the mouse from left to right on these images how the hover effect makes pictures active and as the second picture gets in focus that become active, i want it to be that way.
Can any expert help me with this?
I am using this function to get the left position of the progress bar meets the image to add "active" class and when the width of the image end it will remove the active class
$(document).ready(function() {
function highlightImg(progress){
progress = parseFloat(parseFloat(''+progress).toFixed(1));
var imgs = $('img.comment');
imgs.map(function (i, im)
{
var img = $(im);
var currentImgLeftPos = parseFloat(parseFloat(im.style.left).toFixed(1));
var currentImgRightPos = $(this).width() / $(this).parent().width() * 100;
console.log(progress);
console.log('left' ,currentImgLeftPos);
img.removeClass('active'); // remove active from other images
if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + currentImgRightPos ) {
$('#imgwidimg').text('this'+currentImgRightPos);
img.addClass('active'); // add the class when needed
}
}
);
}
And with this function i am making the jplayer progress update
$('#jquery_jplayer_2').on($.jPlayer.event.timeupdate, function(e){
var progress = document.querySelector('.jp-play-bar').style.width;
highlightImg(progress);
});
Here's a fiddle demonstrating the problem.

Please try with this.
if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + currentImgRightPos ) {
$('#imgwidimg').text('this'+currentImgRightPos);
imgs.removeClass("active"); //add this line to your code
img.addClass('active'); // add the class when needed
}

strange behaviour while sliding images on carousel

I made a jsfiddle so you can reproduce the bug:
FIDDLE
I implemented a carousel to display 3 images. There's a current image (the image being displayed) and the other two remain hidden until I click one of the lateral arrows, causing the next image to slide from the side overlaying the (now previous) current image.
I've been 2 hours trying to figure out why there are certain specific 'transitions' in which the animation doesn't seem to work. For example, when clicking the left arrow to pass from the first image to the second and from the second to the third the animation works fine, but when clicking it again, the transition from 3 to 1 doesn't perform the slide animation. When moving in the opposite direction (using the right arrow) only one transition is animated. I think the problem has to do with that if in the click event handler function, but couldn't spot what's causing it.
Any help would be greatly appreciated.
TIA

The underlying issue here is related to the z-order of the three images. Your slide animations are only showing up where the image being slid in is above the displayed image; the "broken" transitions are actually occurring, they're just obscured by the "higher" visible image.
You can fix this by explicitly setting the z-index of the new and current image. For example, on the right transition:
prevLandscape.zIndex(1);
currLandscape.zIndex(0);
If you do this, you'll also need to increase the z-index of the arrows so they're above the images.
Fiddle

jsfiddle
The issue is with the hide method you just simply hide it add the slide transition for the hide method.
change this line currLandscape.hide(); to currLandscape.hide("slide");

there seemed to be a problem with the order of the images also. please try this code out. The code is reuse of the previous image arrow code. Just try it out.
$('.arrowRight').on('click',function(e) {
var currLandscape = $(this).siblings(".currImg");
var nextLandscape = currLandscape.nextAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var nextDesc= currDesc.nextAll(".hiddenDesc").first();
if (nextLandscape.length == 0) {
nextLandscape = currLandscape.siblings('.hiddenImg').first();
}
if (nextDesc.length == 0) {
nextDesc= currDesc.siblings('.hiddenDesc').first();
}
nextLandscape.show("slide", { direction: "right" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
nextLandscape.removeClass('hiddenImg').addClass('currImg');
});

Check Position During Each Click and Add Class

I want the class .disabled to be added to the left and/or right controls (.tab-left, .tab-right) if the first or last tab is showing so a user can see that they have reached the end and cannot click any further.
Right now I something like this to prevent the user from going past the end.
if (tabs are at the end) {
return;
}
This works for users not being able to click past the end, but if I add the class before returning, the problem is the .disabled class won't be added until the tabs have reached the end and the user clicks again.
if (tabs are at the end) {
$('.tab-right').addClass('disabled');
return;
}
I need the disabled class to be added when the last tab is showing, not when the user trys to click past the end.
Here's a link to the js fiddle: http://jsfiddle.net/uue6pgcx/

One option you could try is to enable/disable the right and left buttons once the animation is complete.
$ul.filter(':not(:animated)').animate({
"left": dir + liWidth
}, {
complete: function () {
// Calculate the number of items in the container (without left and right navigation buttons).
var lisContainer = Math.round(($container.width() - $left.outerWidth() - $right.outerWidth()) / liWidth);
// Disable right button when list is moved to the left a number of items
// such as the remaining number of them is less or equal than the number
// of items that fit in the container.
$right.toggleClass('disabled', $li.length + $ul.position().left / liWidth <= lisContainer);
// Disable left button when list is in the origin.
$left.toggleClass('disabled', $ul.position().left === 0);
}
});
Disclaimer: According to jQuery outerWidth additional notes, The number returned by dimensions-related APIs, including .outerWidth(), may be fractional in some cases. Code should not assume it is an integer.. So lets hope Math.round will suffice to get the proper number.
Maybe there is a better way to calculate if the right button must be disabled/enabled instead of relying on the number of items that fit in the container.
Here it is your code with the above modification:
http://jsfiddle.net/0Lsepxeu/

jQuery hide div, remove background and change page width on click

I'm trying to hide a div on click (well i'm trying to slide it to the left), but what it will have to do is also from the main page div swap the background and also i think, swap the width of another div. I've got it swapping the background and removing the things I don't want (although they slide down rather then to the left)
This video shows what happens (and then at the end i use firebug to show you what i want to happen) http://www.youtube.com/watch?v=tti_L_ofelg&feature=youtu.be (edit: video online now)
Here is my html for the sliding div:
The CSS:
.slidingDiv {
}
.show_hide {
display:none;
}
And the jQuery:
var defOpen = 1;
jQuery(".slidingDiv").show();
jQuery(".show_hide").show();
jQuery('.show_hide').click(function(){
if(defOpen == 1)
{
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripeclear.png) fixed 0 0 repeat-y")
jQuery("#primary_right").css("width","")
jQuery(".slidingDiv").slideToggle();
defOpen = 0
} else {
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripe.png) fixed 0 0 repeat-y")
jQuery(".slidingDiv").slideToggle();
defOpen = 1
}
So it's bgwrap that has the image in it that i have to swap to a clear one (to stop it being there as it's a fixed image on the left)
and primary_right seems to be the one when I remove the width goes full screen (what i'm really trying to acheive)
It also needs to be able to toggle closed and open!
Thanks for any help you can give!

question is not clear..but as far as i understood...you want to hide a left side division by which the right side division occupies full screen and vice versa..is it?????
if yes defOpen variable will not help u..use JQuery toggle function...datz the best way to do it...

I think you need to set the width to "inherit". That's essentially what you're doing when you are selecting the delete style in Firebug.
jQuery("#primary_right").css("width","inherit")

Jquery image scroller not switching to next image

I have an image scroller that I am trying to implement. The image scrolling works, but it is moving vertically instead of horizontally. Here is what I got so far:
Next Image
$('#btnNext').click(function () {
//Calls new image with value true, meaning next image
newImage(true);
return false;
});
function newImage(direction) {
//Get the current selected item (with selected class), if none was found, get the first item
current_image = $('#imageGallery li.selected').length ? $('#imageGallery li.selected') : $('#imageGallery li:first');
//If determines slideshow direction
if (direction) { //Next image
//Get next sibling
next_image = (current_image.next().length) ? current_image.next() : $('#imageGallery li:first');
} else { //Previous image
//Get previous sibling
next_image = (current_image.prev().length) ? current_image.prev() : $('#imageGallery li:last');
}
//Clear selected class
$('#imageGallery li').removeClass('selected');
//Reassign selected class to current image
next_image.addClass('selected');
//Scroll images
$('#images').scrollTo(next_image, 800);
}
Update: Here are my quesions:
1) How do I edit this to make it move horizontally?
2) Is there a way to make an image scroller like this without using .scrollTo()?

I assume you want to make the gallery move horizontally, not vertically. (You say both in the question.) This is just a CSS issue: change the list to show horizontally (display: inline-block or float: left for instance) and the scrollTo plugin should do that for you.
It is possible to do this without the scrollTo plugin. The plugin uses the jQuery animate function to move around the page and, well, you can do the same if you want. :) Here's a quick jsFiddle that uses animate to move pictures in a gallery. Obviously it needs quite a bit of work (doesn't go back to the beginning at the last pic, only goes 1 way, doesn't calculate picture width, etc.), but it should hopefully give you an idea of how it can be done.
http://jsfiddle.net/meloncholy/KzBzT/