Prepending content - javascript

What is the best way to repeat the content in this slideshow, so when you click .left and the carousal starts moving, you get a neverending loop? At the moment, if you click .left, the carousal starts moving and leaves behind empty space.
http://jsfiddle.net/tmyie/mZRQx/1/
var loop;
var moveRight = function(){
$('.box').animate({left: '-=10'}, 100);
};
var moveLeft = function(){
$('.box').animate({left: '+=10'}, 100);
};
$('.right').mousedown(function(){
loop = setInterval(moveRight, 200);
}).mouseup(function(){
clearInterval(loop);
});
$('.left').mousedown(function(){
loop = setInterval(moveLeft, 200);
}).mouseup(function(){
clearInterval(loop);
});
Any help would be great.

Here's a demo for your 'left' movement (though I think you got directions confused):
var moveLeft = function(){
$('.box').animate({left: '+=10'}, 100, function(){
var $last = $('.box').last();
if ($last.css('left') == '100px') {
$last.prependTo('.container').before('\n\r');
$('.box').css('left','0px');
}
});
};
It checks whether elements shifted by 100px and if so - moves the last element before first. Note I am also adding CrLf there to keep original formatting and distance between the DIVs (remove it if u don't need it).
"Left" Demo: http://jsfiddle.net/mZRQx/3/

Related

Custom buttons to replace browser scrolls -- hold and continuous scroll?

I have custom buttons that replaces the browser scrollbar. The idea is so that scrolling oversize elements in a page wouldn't result to a dozen scroll bar on a page.
See: https://jsfiddle.net/bwgxs6ng/
Since I must show some code sample (according to some SO error message), see this:
$('.right').on('click', function(event) {
var target = $(".image-container");
var current_x = target.scrollLeft();
if( target.length ) {
event.preventDefault();
$(target).animate({
scrollLeft: current_x+100
}, 500);
}
});
It's very simple, basically it takes current scroll position of the parent, and add x to it based on the direction that's clicked.
However, going further, I want it to imitate the hold and continuous scroll, but I'm not sure how to do it.
1) What is the mouse hold event called? (OK, this part is answered, it's called MouseDown as someone point out of the duplicate)
2) What is the continuous scrolling called, and how can I do something that'd imitate the browser's continuous scroll?
You can just call .animate() repeatedly (with easing set to linear, for smooth movement) inside your setInterval() callback. Just arrange for the interval to be equal to the animation duration, so that the next animation starts just when the previous one ends.
Or, better yet, make the interval shorter (say, 50 ms or less) and just call .prop() instead of .animate(), effectively performing your own animation. (This is how jQuery implements animation internally, anyway.)
Anyway, here's how I'd rewrite your code to support smooth continuous scrolling:
var speed_x = 0, speed_y = 0;
var timer = null;
var target = $(".image-container");
function scroll() {
if (speed_x == 0 && speed_y == 0) return;
var current_x = target.scrollLeft();
var current_y = target.scrollTop();
target.prop({
scrollLeft: current_x - speed_x,
scrollTop: current_y - speed_y
});
}
$('.control').on('mouseover mouseout', function (event) {
var $this = $(this);
var speed = (event.type == 'mouseover' ? 10 : 0)
if ($this.hasClass('left')) speed_x = +speed;
if ($this.hasClass('right')) speed_x = -speed;
if ($this.hasClass('up')) speed_y = +speed;
if ($this.hasClass('down')) speed_y = -speed;
}).on( 'mousedown', function () {
scroll();
if (timer !== null) clearInterval(timer);
timer = setInterval(scroll, 50);
return false;
});
$(document).on('mouseup', function () {
if (timer !== null) clearInterval(timer);
timer = null;
});
Note how the animation is started and stopped in the mousedown and mouseup handlers, but the direction of movement is set on mouseover and mouseout. This allows you to change the scrolling direction while holding the mouse down, by dragging the cursor from one edge to another.
(For bonus points, add divs with e.g. class="control up left" in the corners of the scroll area, so that holding the mouse down over those corners will allow you to scroll diagonally. The JS code above already supports it.)
you need to set an interval on mousedown, and clear the interval on mouseup, as done in this fiddle for left and right.
The relevant code change is that we removed the click event and replaced it with
$('.left').on('mousedown', function(event) {
... scroll code ...
interval = setInterval(function(){
... scroll code ...
},500);
})
.on('mouseup',function(){clearInterval(interval);});

Apple timeline style scrolling on mouseover

I would like to build a slider like Apple did: http://www.apple.com/30-years/
I have no idea how to scroll on mouseover like on the link above. I know I have to decrease the translateX value by X, but what is X? :)
// scroll animation
function scrollAnimation(){
$('ul').css({
'transform' : 'translateX(-' +mouseX+ 'px)'
});
scrollAnimation();
}
I would like to scroll the images continuosly, with a speed what depends from the mouse's position.
Here is my full code: http://jsfiddle.net/M8cnV/light/
I'm new here, so I appreciate any comments about my code.
Here's what I came up with:
http://jsfiddle.net/5nTpS/
I added some new variables to keep track of how far from the left or right edge the cursor is, which direction to scroll and how fast to scroll:
var scrollSpeed = 0;
var hotEdgeWidth = 200;
var animationSign = "-";
And modified your mousemove function so that it works out if the cursor is close enough to the left or right of the container that you want the images to scroll, which direction you want them to scroll in, and how fast you want them to scroll:
$(container).mousemove(function(e) {
if(e.pageX > $(this).width() - hotEdgeWidth){
scrollSpeed = hotEdgeWidth - ($(this).width() - e.pageX);
animationSign = "-";
}
else if(e.pageX < hotEdgeWidth){
scrollSpeed = hotEdgeWidth - e.pageX;
animationSign = "+";
}
else{
scrollSpeed = 0;
}
scrollAnimation();
}).mouseout(function(e){
scrollSpeed = 0;
});
Then, change scrollAnimation to use the .animate function, and add a complete function to call the scrollAnimation function again once the animation has finished. It only animates if no animation is already happening to prevent a feedback loop happening:
function scrollAnimation(){
if (!$('li').is(':animated')){
$( "li" ).animate({
"left": animationSign + "="+scrollSpeed+"px"
},
500,
function(){
scrollAnimation();
});
}
}

Issue with animation : Titanium

I'm new in titanium and I have a strange problem with animate, the code is like this.
var animateRight = Ti.UI.createAnimation({
left : 150,
curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});
var animateStart = Ti.UI.createAnimation({
left : 0,
curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});
$.menu.addEventListener('click', function(){
if($.container.left >= 10){
//$.container.left = 0;
$.container.animate(animateStart);
}
else{
//$.container.left = 150;
$.container.animate(animateRight);
}
});
menu is a button, when I touch it, the menu should move to right, and if a touch it again the menu should move to left, so if a use "$.container.left = 150;",the action in the menu work well, but if use animate the menu never return to original position.
I think that the problem is for the animate, but I'm not sure, somebody can I help me ?
Thanks.
Animation is perfectly fine.I think there is something wrong with your condition.Checkout whether both conditions work by showing an alert
Thanks
you can use Boolean variable to control animation like :
var is_container_change = false;
var animateRight = Ti.UI.createAnimation({
left : 150,
curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});
var animateStart = Ti.UI.createAnimation({
left : 0,
curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});
$.menu.addEventListener('click', function(){
if(is_container_change){
$.container.animate(animateStart);
}
else{
$.container.animate(animateRight);
}
is_container_change = !is_container_change
});

Create snowflakes in jquery

I create the snowflake using jquery. Everything seems ok but i want to do alert option when you click particular flake then it should alert the message. But i implemented the click function that alert option is continuously triggering. I am not sure where i did mistake. I tried the preventDefault still nothing happens.
http://jsfiddle.net/vicky081/4cZdu/12/
function snowFalling(){
// move the snow
$('.snow').each(function(key, value){
// check if the snow has reached the bottom of the screen
if( parseInt($(this).css('top')) > windowHeight - 80 ) {
// remove the snow from the HTML DOM structure
$(this).remove();
}
// set up a random speed
var fallingSpeed = Math.floor(Math.random() * 5 + 1);
// set up a random direction for the snow to move
var movingDirection = Math.floor(Math.random()*2);
// get the snow's current top
var currentTop = parseInt($(this).css('top'));
// get the snow's current top
var currentLeft = parseInt($(this).css('left'));
// set the snow's new top
$(this).css('top', currentTop + fallingSpeed );
// check if the snow should move to left or move to right
if( movingDirection === 0){
// set the snow move to right
$(this).css('left', currentLeft + fallingSpeed );
}else {
// set the snow move to left
$(this).css('left', currentLeft + -(fallingSpeed) );
}
});
jQuery(this).click(function() {
alert('You Clicked');
});
// repeat the rollIt() function for each 200 microseconds
window.setTimeout(snowFalling, 200);
}
// call the function when the document is loaded completely
generateSnow();
snowFalling();
});
Now i want to alert particular click. How to prevent multi alert on click the snow flakes.
Thanks.
If you only want the alert to occur when snow is clicked, move the handler to the point where the snowflake is created, not when it us updated, as you currently have it.
$('<div />')
.addClass('snow')
.css('top', snowTop)
.css('left', snowLeft)
.css('position','absolute')
.html('*')
.click(function() {
alert('You Clicked');
})
);
jsFiddle
You're binding a click handler every 200 ms on each snowflake element.
It looks like generateSnow() would be a good place to bind your click handler instead.
You could also use event delegation and bind on DOM ready:
$(document).on('click', '.snow', function() {
alert('You clicked');
});
Just move the click handler to outside your snowFalling function, after you generate your snowflakes:
JSFiddle
// this function is to alter the top of each snow, using the handy .each() jQuery method
function snowFalling(){
// move the snow
$('.snow').each(function(key, value){
// check if the snow has reached the bottom of the screen
if( parseInt($(this).css('top')) > windowHeight - 80 ) {
// remove the snow from the HTML DOM structure
$(this).remove();
}
// set up a random speed
var fallingSpeed = Math.floor(Math.random() * 5 + 1);
// set up a random direction for the snow to move
var movingDirection = Math.floor(Math.random()*2);
// get the snow's current top
var currentTop = parseInt($(this).css('top'));
// get the snow's current top
var currentLeft = parseInt($(this).css('left'));
// set the snow's new top
$(this).css('top', currentTop + fallingSpeed );
// check if the snow should move to left or move to right
if( movingDirection === 0){
// set the snow move to right
$(this).css('left', currentLeft + fallingSpeed );
}else {
// set the snow move to left
$(this).css('left', currentLeft + -(fallingSpeed) );
}
});
// repeat the rollIt() function for each 200 microseconds
window.setTimeout(snowFalling, 200);
}
// call the function when the document is loaded completely
generateSnow();
snowFalling();
$('.snow').click(function() {
alert('You Clicked');
});

deactivate button on gallery slider

I'm am trying to make my javascript/jquery slider button deactivated when it reaches the the end of the scrolling images( when the images have moved all the way to the right, the MoveRight button must be deactivated and only leave MoveLeft button active, same for the move LeftButton), can anybody help with this ? Im not sure if im using
.attr() and removeAttr() correctly. I have pasted my code below.
<script type="text/javascript">
$(document).ready(function(){
//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var NoListed = $("ul.GalleryItem li").length;
var galleryItemWidth = 1881;
$('.MoveRight')
$('.GalleryItem').css('width', galleryItemWidth);
//Check width of Gallery div on resize
$(window).resize(function(){
var galleryWidth = $("#Gallery").innerWidth();
});
$('.MoveLeft').click(function() {
$(".GalleryItem2").animate({"left": "-=350px"}, "slow");
$(".GalleryItem3").animate({"left": "-=280px"}, "slow");
$(".GalleryItem").animate({
left: '-=230',
}, "slow", function() {
position = $(".GalleryItem").position();
galleryItemLeft = position.left;
if(galleryItemLeft <= galleryWidth - galleryItemWidth) {
$('.MoveLeft').removeAttr('disabled');}
else{
$('.MoveLeft').attr('disabled','disabled');
$('.MoveRight').attr('disabled','disabled');
}
});
});
$('.MoveRight').click(function() {
$(".GalleryItem2").animate({"left": "+=350px"}, "slow");
$(".GalleryItem3").animate({"left": "+=280px"}, "slow");
$(".GalleryItem").animate({
left: '+=230',
}, "slow", function() {
position = $(".GalleryItem").position();
galleryItemLeft = position.left;
if(galleryItemLeft >= "0") {
$('.MoveLeft').removeAttr('disabled');}
else{
$('.MoveLeft').attr('disabled','disabled');
$('.MoveRight').attr('disabled','disabled');
}
});
});
});
</script>
first of all, I see you doing the following:
//Check width of Gallery div on resize
$(window).resize(function(){
var galleryWidth = $("#Gallery").innerWidth();
});
I like the fact that you keep your variables local, but the var keyword should be omitted in this case. You've declared galleryWidth already in the function that encloses this resize callback, so by omitting the var keyword here, the value will be assigned to the variable you use in your script, with this va keyword, you create a new galleryWidth variable, only visible in the resize callback, and therefore never used.
now for the enabling and disabling of the buttons:
you could keep a currentitem counter, and update it every time the moveright or moveleft buttons are clikced. When this counter reaches 0, you disable the moveleft button, when it reaches the number of items, you disable the moveright button, and enable them otherwise.

Categories