I have trouble with this jQuery function cause it doesn't work what it should and that is >>get the first list item and put it after the last list item (that's how the infinite effects is made) ' , i cannot make that infinite effects
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
//move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
//jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last'));
//when user clicks the image for sliding right
jQuery('#right_scroll img').click(function(){
//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
var item_width = jQuery('#carousel_ul li').outerWidth() + 10;
//calculate the new left indent of the unordered list
var left_indent = parseInt(jQuery('#carousel_ul').css('left')) - item_width;
//make the sliding effect using jquery's anumate function '
jQuery('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){
//get the first list item and put it after the last list item (that's how the infinite effects is made) '
jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first'));
//and get the left indent to the default -210px
jQuery('#carousel_ul').css({'left' : '-210px'});
});
});
//when user clicks the image for sliding left
jQuery('#left_scroll img').click(function(){
var item_width = jQuery('#carousel_ul li').outerWidth() + 10;
/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
var left_indent = parseInt(jQuery('#carousel_ul').css('left')) + item_width;
jQuery('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){
/* when sliding to left we are moving the last item before the first item */
jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last'));
/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
jQuery('#carousel_ul').css({'left' : '-210px'});
});
});
});
</script>
Related
I Want to know how to Scroll up and down on the behalf of div highlights,
Here the example :
This is my Screen of kot Entry page when i click on item one by one that is added in left side of the image in kotEntry Section and scroll down automatically in footer but my question is when i repeated any item like AFGANI MOMOS (highlight that div block) still scroll stand down in footer then how to scrolling show on front of highlight div
CODE
if (i.length > 0) { // this is check for repeated item
debugger;
var s = this.cart.indexOf(i[0]);
var b = this.cart[s][this.options.paramSettings.productQuantity];
var cd = this.cart[s][this.options.paramSettings.Modifier];
this.cart[s][this.options.paramSettings.productQuantity] = this.cart[s][this.options.paramSettings.productQuantity] - 0 + (e[this.options.paramSettings.productQuantity] - 0), e = this.cart[s], this._triggerEvent("itemUpdated", [e]);
}
else // scroll down for new item
**$(".sc-cart-item-list").animate({ scrollTop: $(document).height() }, "slow");**
I am trying to apply animation jquery effect to div having list of category which is at center of page.when i am clicking on 1st category then that initial div should move to left from center and new div should appear from right to left.when clicked on 2nd category 1st div having content should move to right and 2nd content div should appear.
effect mostly same like http://livedemo00.template-help.com/wt_47602/index.html
I am able to use viewport to implement div moving from right to left but 1st transition of div having category list from center to left is not achieved.
Thank u
JS
var navClick = function() {
$viewport = $('#viewport');
$targetElem = $('#content' + $(this).data('target'));
$active = $viewport.find('.active');
$active.animate({'right': '-' + $active.width() + 'px'}, function() {
$(this).removeClass('active');
});
$targetElem.animate({'right': '100px'}, function() {
$(this).addClass('active');
});
};
$(function() {
$('nav span').on('click', navClick);
});
JSFiddle
I am implementing an image slider in javascript/jquery.
The demo should work like this.
http://londatiga.net/tutorials/scrollable/
Anyway I don't won't to rely on jquery.tools.min.js because this lib is out of date (the last update is about 8 months ago ).
I decide to make the js code by me.
When clicking on next or prev button I would like to shift the images on the list of one item/image.
The script shifts the items but the display is quite crappy, because the next items is not displayed.
The list is made of 4 images. At the beginning only the first two images are displayed, then when clicking on the next button I would like to display the second and the third image.
Actually the script shows just the first and the second image even if I click on the next button.
Here is the demo: http://jsfiddle.net/xRQBS/5/
Here is the code (1)
Any hints how should I fix it?
thanks
(1)
/*global jQuery */
(function ($) {
var imgs = [
'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSsarNmO4Vdo5QwHfznbyxPmOyiYQ-KmBKUFsgEirvjW6Kbm7tj8w',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfIAfLXj3oK1lso1_0iQploSKsogfJFey3NnR0nSD9AfpWjU7egA',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1dO4FVDDitdS85aLOCsOpQyHHTysDhD4kHQ749bMtNxaj5GMKnA',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRAPO77sVu-Xk80S_txagySoTq8gKHgeiS63a9TYtKbPpGYVI5X'
];
var $list = $('.list-images');
var $slider = $('.slider');
var slideImage = function (direction) {
var unit = 150;
var left = parseInt($slider.attr('left'), 10) || 0;
left = (direction === 'prev') ? left - 150 : left + 150;
$slider.css('left', left + 'px');
};
$(function () {
$.each(imgs, function (i, img) {
$list.append($('<li>').append($('<img>').attr('src', img)));
});
$('body').on('click', '.direction', function () {
slideImage($(this).attr('data-tid'));
});
});
}(jQuery));
With the animate function:
$slider.animate({'left': left + 'px'}, 1000);
http://jsfiddle.net/xRQBS/6/
I'm assuming that you want the shift to be more of an animation. If so, take a look at jQuery's animate. Something like this:
$slider.animate({left: left + 'px'});
That will give it a sliding effect, which what I'm assuming you want :)
Greeting's
I'am still relatively new to JavaScript and Jquery and I know there has got to be a better method than the one I'am using.
I'am working on a serialScroll implementation. There is a master scrollTo that controls the left/right movement of a number of slides. Each slide contains it's own implementation of a vertical serialScroll. I have the resize on the scrollTo working great and the resize on the vertical works but I can't figure an elegant method for ensuring that on resize the current position remains centered, My current method works but is very inefficient.
$(function(){
var $up = $('#sec1_nav a.up').hide();//up button -- each slide needs it's own unique nav buttons
var $down = $('#sec1_nav a.down');//down button -- each slide needs it's own unique nav buttons
$('#screen1').serialScroll({
target:'#section1',
items:'.item',
prev:'#sec1_nav a.up',
next:'#sec1_nav a.down',
axis:'y',
duration:1000,
force:true,
cylce: false,
onBefore:function( e, elem, $pane, $items, pos ){
$up.add($down).show();
if( pos == 0 )$up.hide();
else if( pos == $items.length -1 )
$down.hide();
// Here's where it get ugly, I'am adding a unique class for each slide to the item's
$('.item').removeClass('pos1'); //Each slides need's it's own class i.e. slide1 = pos1, slide2 = pos2 etc.
$(elem).addClass('pos1');
}
});
$(window).bind("resize", function(){
resize1(); // Same goes for the resize function, each slide need's it's own function.
});
});
function resize1() {
height = $(window).height();
width = $(window).width();
mask_height = height * $('.item').length; // sets the new mask height
// Resize Height of the area
$('.sections').css({height: height, width : width});
$('.item').css({height: height, width : width});
$('#mask').css({height : mask_height, width : width});
$('.sections').scrollTo('.pos1', 0 ); // This issue is where it all fall apart, instead of using serialScroll, i'am stuck using scrollTo to maintain the current slide position.
}
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