Develop Reference

Bootstrap slider - prevent flipping the two cursors and stop slide

I would like to use Bootstrap slider to represent 3 lengths of axes whose sum doesn't change (the max value of the slider corresponds to this sum).
So I have 2 cursors on bootstrap slider and the 3 intervals represent these lengths.
Here's an example: bootstrap with two cursors
My issue is that I would like to stop dragging the second cursor (on the right) when it is equal (or nearly with a fixed step) to the first one (on the left) and inversely for the first cursor.
I saw there's an slide stop event but this doesn't seem to be the same thing.
I have surely to modify the bootstrap-slider.js source but I don't know how to do for implementing this specific functionality.
It would be like:
slider.on("slide", function(slideEvt) {
if ((cursor2.value - cursor1.value) < step)
{ this.stopSlide();}
});

Using slides events it's possible. The idea is to see which cursor is fixed, and when its value change, block the slide movement, by setting value.
Didn't find a cleaner way to block slide event...
Working code :
var slider = new Slider("#slider1");
var initPos,
fixedCursor,
fixedCursorPos;
slider.on("slideStart", function(slideEvt) {
initPos = slideEvt;
fixedCursor = null;
fixedCursorPos = null;
});
slider.on("slide", function(slideEvt) {
if (initPos[0] !== initPos[1] && (slideEvt[0] !== initPos[0] || slideEvt[1] !== initPos[1])) {
if (fixedCursor == null) {
fixedCursor = (slideEvt[0] === initPos[0] ? 0 : 1);
fixedCursorPos = slideEvt[fixedCursor];
}
if (fixedCursorPos !== slideEvt[fixedCursor]) {
slider.setValue([fixedCursorPos, fixedCursorPos], false, false);
}
}
});
Working JS Bin : http://jsbin.com/kopakiciti/1/edit?html,js,output

Scrolling content in a div when it's passed

Trying to accomplish something like on this website:
http://www.strangelove.nl/cases/kpmg-meijburg
The part where the responsive design is showcased, the image inside the devices start to scroll when a visitor scrolls past that point. I've tried to replicate it and I see a .js in the footer which is probably contributing. For now I have the css and html working on my test page.
Any help is gladly appreciated.

Strangelove is using their own Kubrick-js, which is available here: Kubrick-js
If you just want to have the 'images scrolling inside of frame while scrolling by'-effect, you can do it like this:
$(window).scroll(function() {
var animStart = 0, // the point where the animation starts
animEnd = 500, // the point, where the animation ends
scrollStartPos = 0, // the position your inside scrolling element starts
scrollEndPos = -300, // the position your inside scrolling element should end
winPosY = window.pageYOffset, // the scroll distance from top of document
scrollElement = $('.picture'); // the element to scroll
if(winPosY > animStart && winPosY < animEnd) {
// how far through the animation are we?
var howFar = (winPosY - animStart) / (animEnd - animStart),
scrollPos = Math.round(scrollStartPos + howFar * (scrollEndPos - scrollStartPos));
scrollElement.css('top', scrollPos + 'px');
$('.show-stats').html('How far: ' + howFar + '<br>scroll Position: ' + scrollPos);
}
});
Here is a fiddle for it: Fiddle
hope that helps.

How to detect if any divs are overlapping/'touching' a specific div?

Background Summary
I have a toggle menu that moves and slides down upon document load. However the web page is responsive. So on bigger screen sizes there is empty room for the menu to unroll but some pages contain IMG, DIV, or SPAN tags that rearrange themselves via media queries and take up the needed space for the menu.
Thus one of two things can happen (that are not desired):
a) The page loads, the menu begins to slide open but there is already one of the aforementioned HTML objects already located in its path so the menu unrolls over it, making things look ugly.
b) A mobile visitor enters the site using landscape view and the menu unrolls with nothing in its path, but then the user changes to portrait view causing (sometimes) an HTML tag to overlap the menu.
Desired Result:
I would like the menu to react to its environment so that if some other DIV encroaches on its space, the menu would automatically trigger the click event on itself which would cause it roll back up and sit on its perch on top of the screen.
This would also mean that as it unrolls initially , the menu should be either 'aware' of what is below it and in the case something is there, to not unroll in the first place; or unroll until it touches some other html object in its way, and immediately reverse course and roll back up to its perch.
One quick look is worth a thousand sentences, so please take a look at jsfiddle below.
JSFiddle Setup of Current Code
http://jsfiddle.net/Nick_Wordpress/jLeGq/1/
Current Working Code
jQuery(window).load(function() {
if (jQuery(".toggle").is(":hidden")) {
jQuery(".toggler").trigger("click");
}
});
jQuery(".toggler").on("click touchstart", function() {
toggler = jQuery(this);
room_navigation_top = 150;
pos = 20;
room_navigation_left = 80;
toggler.next(".toggle").is(":visible") ? toggler.next(".toggle").slideUp(function() {
toggler.addClass("minimized").removeClass("maximized").find(".indicator").text("+");
toggler.parent().animate({top:pos + "px", left:pos + "px"});
}) : ("object" == typeof event.originalEvent && (lock_room_navigation = !0), toggler.parent().animate({top:room_navigation_top + "px", left:room_navigation_left + "px"}, function() {
toggler.addClass("maximized").removeClass("minimized").find(".indicator").text("-");
toggler.next(".toggle").slideDown();
}));
});
Thanks in advance for any input towards solving this issue.

Decide whether to expand the menu or not after you've calculated whether it would overlap any other elements. (Expanding first and then checking if you need to collapse it again would be an ugly solution)
Check for potential overlapping by calculating where the menu would be positioned on expansion, and compare that position to the elements which it could overlap.
You should be able to figure out the expanded size if you know the number of menu items and the size of each menu item. Use the top, bottom, left and right properties together with the height and width to figure out the position.
Compare the calculated position of the positions of the elements that risk being overlapped.
Here's some example code for calculating overlap (not written by me): http://jsfiddle.net/98sAG/
function getPositions( elem ) {
var pos, width, height;
pos = $( elem ).position();
width = $( elem ).width();
height = $( elem ).height();
return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}
function comparePositions( p1, p2 ) {
var r1, r2;
r1 = p1[0] < p2[0] ? p1 : p2;
r2 = p1[0] < p2[0] ? p2 : p1;
return r1[1] > r2[0] || r1[0] === r2[0];
}

Image Rotation using pure Javascript

PLEASE DO NOT RECOMMEND JQUERY - I AM DOING THIS EXERCISE FOR LEARNING PURPOSES.
I have implemented a JavaScript, which rotates images (_elementSlideChange) on a timer, using a set interval of 10 seconds. Also I have added a slide functionality to this, which is 7 milliseconds (_slideImage).
The image rotates automatically every 10 seconds on page load, and I have also provided next and previous buttons, which allow the user to change the images manually.
_elementSlideChange: function () {
var myString;
var myText;
for (var i = 0; i < this._imgArray.length; i++) {
var imageArr = "url(" + this._imgArray[i].src + ")";
var imageBg = this._imageHolder.style.background + "";
if (imageArr == imageBg) {
if (i == (this._imgArray.length - 1)) {
myString = "url(" + this._imgArray[0].src + ")";
myText = this._infoArray[0];
} else {
myString = "url(" + this._imgArray[(i + 1)].src + ")";
myText = this._infoArray[i + 1];
}
}
}
this._imageNextSlide.style.background = myString;
this._imageNextSlide.style.background);
this._infoElement.innerHTML = myText;
this._myTimer = setInterval(MyProject.Utils.createDelegate(this._slideImage, this), 7);
},
_slideImage: function () {
if (parseInt(this._imageHolder.style.width) >= 0 && parseInt(this._imageNextSlide.style.width) <= 450) {
this._imageHolder.style.backgroundPosition = "right";
this._imageHolder.style.width = (parseInt(this._imageHolder.style.width) - 1) + 'px';
console.log(this._imageNextSlide.style.background);
this._imageNextSlide.style.width = (parseInt(this._imageNextSlide.style.width) + 1) + 'px';
} else {
console.log("reached 0px");
if (parseInt(this._imageHolder.style.width) == 0) {
this._imageHolder.style.background = this._imageNextSlide.style.background;
this._imageHolder.style.width = 450 + 'px';
this._imageHolder === this._imageNextSlide;
this._imageHolder.className = "orginalImage";
this._imageNextSlide.style.width = 0 + "px";
this._imageNextSlide = this._dummyImageNextSlide;
this._imagesElement.appendChild(this._imageHolder);
this._imagesElement.appendChild(this._imageNextSlide);
clearInterval(this._myTimer);
}
clearInterval(this._myTimer);
clearInterval(this._elementSlideChange);
}
}
So when the user clicks on the Next arrow button, the event listener for "click" is triggered. This creates a div for the current image on display, and creates a new div, which will contain the next image. The image slide and rotation works correctly (whether it's onLoad or onClick). The issue I have is if I click the Next button, while the new div image is sliding into position, it causes it to run into an infinite loop, so the same div with the image to be displayed keeps sliding in, and the more you click the Next button, the faster the image starts to rotate.
I have tried putting a clear interval for the image rotation and slider, but I do understand my code is wrong, which causes the infinite loop of the sliding image. And I know I am close to finishing the functionality.
Can anyone please advise where I could be going wrong? Or should I try to implement the sliding DIV in another way?
Once again please don't recommend jQuery.
And thank you for your help in advance.
Kush

To solve the issue, I did re-write the entire code, where I had a next and previous button event listener.
myProject.Utils.addHandler(this._nextImageElement, "click", myProject.Utils.createDelegate(this._changeImage, this));
Both the buttons will call the same function :
_changeImage: function (e)
In this function I check to see if the function is Transition (changing images),
I declare a boolean var forward = e.target == this._nextImageElement;
Then check to see the current index if forward ? Add 1 else minus 1
this._currentImageIndex += forward ? 1 : -1;
If its at the end of the Array and forward is true, assign the this._currentImageIndex to reset to 0 or Array.length – 1 if it’s in reverse
Then call another function which gives the ‘div’ a sliding effect. In this case call it this._transitionImage(forward);
In this function, set the this._inTranstion to true. (Because the div’s are sliding in this case).
The following code solved the issue i was having.
this._slideImageElement.style.backgroundImage = "url(\"" + this._imgArray[this._currentImageIndex].src + "\")";
this._slideImageElement.style.backgroundPosition = forward ? "left" : "right";
this._slideImageElement.style.left = forward ? "auto" : "0px";
this._slideImageElement.style.right = forward ? "0px" : "auto";
The above code is very important as the object is to place the “sliding in div” Left or Right of the current Visible “div” to the user, and this is mainly dependent on if the forward variable is true or false.
var i = 0;
Then start the transition by
setInterval( function() {
this._currentImageElement.style.backgroundPosition = (forward ? -1 : 1) * (i + 1) + "px";
this._slideImageElement.style.width = (i + 1) + "px";
Notice the forward will determine if the bgPosition will go to the left if its forward as we multiple by -1 or +1,
So for example
If the user clicks NEXT BUTTON,
Forward = true
So the first thing we do is set the
this._slideImageElement.style.backgroundPosition = "left"
Then
this._slideImageElement.style.left = "auto"
this._slideImageElement.style.right = "0px"
This means when the sliding image moves in its background position is LEFT but the div is placed on the RIGHT to 0px;
then this._currentImageElement.style.backgroundPosition = -1 * (i + 1)
Which moves the position of the currentImageElement to the left by 1px,
Increase the width of the slideImage which in this case is right of the current div,
and as the current div moves to the left the sliding image starts to appear from the right. (By default set the width of slideImageElement to 0px so the div exists but isn’t visible to the user). This gives it the slide effect of moving forward new image coming from the right.
this._slideImageElement.style.width = (i + 1) + "px";
then declare it to stop when it it’s the image width. In this case it will be 500px.
if ((i = i + 2) == 500) {
In this if statement reset the currentImageElement background and the background position “right” or “left” don’t really matter as long it has been reset.
Clear the interval
Set the transition to false again
Then call a setTimeout for the function changeImage, which will continue until the slide is completed.
The following shows the reset code as this is very important to prevent repeating the same image (This solved my entire issue)
// set the current image to the "new" current image and reset it's background position
this._currentImageElement.style.backgroundImage = "url(\"" + this._imgArray[this._currentImageIndex].src + "\")";
this._currentImageElement.style.backgroundPosition = "right";
// reset the slide image width
this._slideImageElement.style.width = "0px";
// clear the transition interval and mark as not in transition
clearInterval(this._transitionInterval);
this._inTransition = false;
// setup the next image timer
this._nextImageTimeout = setTimeout(myProject.Utils.createDelegate(this._changeImage, this), 2500);
}
I have provided a thorough detail because then it easier to understand the logic of the problem, and even if your not having the same issue, this may help you fingure out any problem.
I couldn't provide a JSfiddle, as i have created my CSS using Javascript, there are different ways of doing this, but i wanted to understand the logic behind the forward and reverse, and having a timer which continuously goes forward.

It seems like you want to cancel the animation on the slide (perhaps have it fade out while the next slide animates in, cancel its animation abruptly or let it finish and ignore the button click)
What I usually do, personally, is check for the animated state (yes, I use jquery, but you should be able to test the CSS or positioning values you are using to animate in the same way) you could even add an "active" class or data type during animation to make testing easier. Global flags work, too. If there is animation, ignore the button. (For my work... Depends on your intention)
Like I said, the problem may be with button behaviour not with the animation routine. It would be useful to see how you are calling this from the button click, and what your intended results are going to be.

How about CSS3 transitions?
transition: all 1s ease 0.5s;
Simple example on JS Fiddle.
This takes care of the animation, so you just need to set the intended destination using JavaScript, i.e.
this.style.left = '100px';
Or
this.style.top = '30px';
And CSS3 transitions will smoothly slide the element.
Cross Browser Note!
The transition property may need a vendor prefix for some browsers, I am using the latest production Firefox and you don't need -moz for that. Same goes for Opera, no '-o' required. Internet Exporer 10 needs no prefix. You may need to use -webkit for Safari / Chrome, but test without first.

How to slide images in from the side using JavaScript?

I have a script that displays images sort of like a carousel. The images are placed in LIs and the left positioning is changed based on the width of each slide (all the same). Currently, the old slide just disappears then the new one appears.
I would like to make it so they slide in from the side and was wondering if someone could give me a basic example of how to do this using plain JavaScript (no jQuery!).
For example, I'm using the following code to update the left positioning of the containing UL. How can I make it so it will slide the selected image to the left or to the right (depending upon whether the next or previous button is clicked)
containingUL.style.left = '-' + (slideNumber * slideWidth) + 'px';

Here's a basic element slide function. You can play with the values of steps and timer to get the animation speed and smoothness just right.
function slideTo(el, left) {
var steps = 25;
var timer = 25;
var elLeft = parseInt(el.style.left) || 0;
var diff = left - elLeft;
var stepSize = diff / steps;
console.log(stepSize, ", ", steps);
function step() {
elLeft += stepSize;
el.style.left = elLeft + "px";
if (--steps) {
setTimeout(step, timer);
}
}
step();
}
So you could go:
slideTo(containingUL, -slideNumber * slideWidth);
Edit: Forgot to link to the JSFiddle
Edit: To slide to the left, provide a left value less than the current style.left. To slide to the right, provide a value greater than the current style.left. For you it shouldn't matter much. You should be able to plug it into your existing code. I'm guessing your current code either increments or decrements slideNumber and then sets style.left according to the slideNumber. Something like this should work:
if (nextButtonClicked) slideNumber++;
else slideNumber--;
slideTo(containingUL, -slideNumber * slideWidth);
I updated the JSFiddle with a working example of a sliding "gallery", including prev and next buttons. http://jsfiddle.net/gilly3/EuzAK/2/

Simple, non jQuery:
http://sandbox.scriptiny.com/contentslider/slider.html
http://www.webmonkey.com/2010/02/make_a_javascript_slideshow/
http://javascript.internet.com/miscellaneous/basic-slideshow.html