Develop Reference

How to done the scrollRight without animation?

I tried to scroll the div tag in the right side but this is not worked. But the scroll left function and scroll right with animation is perfectly works. But i want to scroll right without animation I tried code something like this
$().ready(function(){
$("#container").scrollLeft(500); //This works
return hus;
});
function hus(){
$("#container").scrollLeft(-200); //This is not work
}
But i want to scroll the right side without animation how can i do it?

I am not sure what you mean about "scroll right".
$("#container").scrollLeft(500)
scroll the div to the x-position of 500px (This works)
$("#container").scrollLeft(-200) scroll the div to the x-position of -200px, this is not a valid position since the minimum value is 0px, this is the left-most position, and you can't expect that it will "float" to the right side like a circle loop
scrollLeft: leftPos - 800 doesn't "scroll right" as you thing, it scroll the div element to the left, too
So, as I guest, there are 2 posible case that match your problem
Let's begin with:
var leftPos = $('#container').scrollLeft();
We suppose that:
leftPos = 1000, this is current x-position of the div
scrollWidth = 10000, obtain from $('#container')[0].scrollWidth
width = 500, obtain from $('#container').width()
If you want to move 200px to the right from current position, that is 1200, you can use:
$("#container").scrollLeft(leftPos + 200);
If you want to move to the right position that is "200px away" from the right side, that is 10000-500-200, you can use:
$("#container").scrollLeft(scrollWidth - width - 200);
Hope this can solve your problem. (Sorry, my grammar is not very well)

You can set a duration of 0 or 1 ms which would do the trick:
var leftPos = $('#container').scrollLeft();
$("#container").animate({
scrollLeft: leftPos - 800
}, 0);

An element is set to the left side by defaults. In this sense, there's no way you can scroll the element "in the right side" (a.k.a. to the left) at the very beginning.
In your case:
1. $("#container").scrollLeft(500); //This works
This would work because you just move the element to the right side for 500px.
2. $("#container").scrollLeft(-200); //This is not work
This would not work since you are already on the left-most side, you are not able to scroll an element out of the outer box.
3. var leftPos = $('#container').scrollLeft();
$("#container").animate({
scrollLeft: leftPos - 800
}, 500);
});
I am not sure what do you mean by "work perfectly" in this case, due to the lack of the context.
If what you want is to move the element "to the left" without animation, you may simply set $('#container').scrollLeft('200');
(since you already set the element to scroll to right for 500px at the very beginning.)
You may check on jsFiddle for the example. If you want to turn off the animation effect, you can just set the duration to 0.

How to load data without changing the scrolling position?

Why does the scroll position change when I prepend data in given data. I scroll to top it prepend data but scroll position goes to top. But I saw lot of example in Facebook and whatsapp in which when it load previous data scroll position remain same.
Can we retain the scroll position ? http://jsfiddle.net/cQ75J/17/
if ($(this).scrollTop() === 0 && pages.length) {
console.log("up");
$("#next").html('')
$("#pre").html('')
$("#next").html($("#current").html());
$("#current").html('');
$("#current").html(pages.pop())
.prependTo($("#fullContainer"));
}

This has to be done in Javascript:
One way to do this is to use a hidden div of the same height and width as the one you are prepending and measure it's scrollHeight when you add the content to it. Then, after you prepend the text, simply set the content div's scrollTop to the scrollHeight of the hidden div:
$(document).ready(function(){
setTimeout(function(){
$("div#hiddenDiv").html("Testing<br><br><br>");
var coffset = document.getElementById("hiddenDiv").scrollHeight;
$("div#content").prepend($("div#hiddenDiv").html());
document.getElementById("content").scrollTop += coffset;
}, 5000);
});
In the following fiddle, text will be prepended to the div after a few seconds, but the scroll
position will not change.
JSFiddle

Using Jquery to toggle on and off items based distance to top

I am creating a site in which there are a number of fixed background images that you scroll past. Associated with each fixed background is an image slider (or text) that is hidden until the title is clicked on. These items are all fixed positioned.
I was able to make this work by using z-index to place items in order top to bottom/first to last and then have each disappear in turn using:
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < 225);
});
However, I am unable to use this because the length pixel distance down on the page changes based on the screen size. I am pretty new to Jquery but wanted to try to use .offset .top to have the item disappear not based on the pixel length to the top of the page but instead when an element appears on the screen. This is what I have so far but it isn't seeming to work.
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < $(‘article.post-100’).offset().top);
});
Here is the link to the site: http://s416809079.onlinehome.us (not final location - just developing)
Any thoughts?
Thanks!

I think this may work for you, read the comments on the code for a line by line explanation.
Working Example
$(window).scroll(function () { // When the user scrolls
$('div').each(function () { // check each div
if ($(window).scrollTop() < $(this).offset().top) { // if the window has been scrolled beyond the top of the div
$(this).css('opacity', '1'); //change the opacity to 1
} else { // if not
$(this).css('opacity', '0'); // change the opacity to 0
}
});
});
I'm conditionally changing the opacity rather than using toggle because:
...jQuery does not support getting the offset coordinates of hidden
elements or accounting for borders, margins, or padding set on the
body element.
While it is possible to get the coordinates of elements with
visibility:hidden set, display:none is excluded from the rendering
tree and thus has a position that is undefined.
Related documentation:
.offset()
.each()
.scroll()
.scrollTop()

javascript content slider displaying only first slide

I have a text slider on my home page, that should display slides individually according to which arrow is selected. Currently, only the first slide is showing and each slide thereafter is blank. What am I missing to make each individual slide show?
jsfiddle
jQuery(document).ready(function($){
// Setup Variables
var slides = $('#slider_mask .slide_container').children();
var total_slides = slides.children().length;
var slide_width = $('#slider_mask').width();
var current_slide = 0;
slides.not(':first').hide();
// Set the width of the slide_container to total width of all slides
$('#slider_mask .slide_container').width(slide_width*total_slides);
// Handle Right Arrow Click
$('#slider_mask .right_button').on('click', function() {
current_slide++;
if(current_slide == total_slides){ current_slide = 0; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
// Handle Left Arrow Click
$('#slider_mask .left_button').on('click', function() {
current_slide--;
if(current_slide < 0){ current_slide = total_slides-1; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
});

Check out this fiddle. I scaled it down to a minimum.
I started with the slider mask having the fixed width and set the other widths off of that.
Ludovico Grossi is correct about making the slide element float left. When they are "block" elements without the float, they stack. If they are changed to "inline" elements, they cannot have a fixed width. It worked to set them to "inline-block", but I don't know if that is supported in all browsers. Having them as "block" and float left works.
I also had to make some other changes. One of which was that the .animate() function does not cause a hidden element to be shown. It says this on the documenation page. Instead of hiding the slides by calling .hide(), they simply are out of view by having overflow set to hidden for the mask element.
I also put the text-align center on the slide elements, rather than the container element.
UPDATE:
I created another fiddle that starts with the code from adeneo's fiddle and includes the necessary changes. I put comments next to all the code and CSS that was added, removed, or changed. I had to make one change to the html. I added the <div id="home"> element that wraps everything. Without it the CSS selectors don't match anything.

Check your css:
slide: fixed width, float left.
container: width n_slide * slide_(outer)_width
slide mask: the same as a single slide width, overflow hidden.

Scroll a div vertically to a desired position using jQuery

This is a followup question for this:
Scrollpane on the bottom, css is hacky, javascript is hard
I ended up doing the scrolling in the same way explained in the accepted answer.
Now there is a request that one item is selected somehow (eg. as an url parameter or by some javascript calls) I should scroll the pane to the item with the corresponding ID in the scrollpane. Like a link to an anchor () would work!
I want to make a javascript call like this
function scrollTo(id) {
$('#middle').magicallyScrollThatItemWouldBeVisible(itemid);
}
But this is not in jQuery (or at least I don't know of it). So is there a way to make it?
I'll post a simple jsFiddle here:
http://jsfiddle.net/ruisoftware/U6QdQ/4/
Help me write that scrollTo function!
A .animate would be fine too.
UPDATE: If it was not clear I would like it to only align to the left or right side of the panel, it it was overflowed on that side (so the minimum possible amount of scrolling happens)

It's not jQuery, just JavaScript, and I've actually never used it all, so I'm not sure how you would have to mess with it to get it to work in this situation, but there is a scrollIntoView function:
yourElement.scrollIntoView();

Since the elements have a fixed width, you can count the number of elements by using .index() + 1, and animate to this value (after subtracting the container's width).
If you want the element to be centered, use - Math.round(middle.width()/100)*50.
Fiddle: http://jsfiddle.net/U6QdQ/17/
//This code should be run on load / DOMReady
(function($){ //Run on load / DOMReady
$.fn.magicScrollTo = function(){
var middle = $("#middle");
var currentScrollLeft = middle.scrollLeft();
var width = middle.width();
var newScrollLeft = this.offset().left + currentScrollLeft - middle.offset().left;
if(newScrollLeft >= currentScrollLeft && newScrollLeft <= currentScrollLeft + width - this.outerWidth()) return;
if(newScrollLeft > currentScrollLeft){ //If the element is at the right side
newScrollLeft = newScrollLeft - width + this.outerWidth();
}
middle.animate({
scrollLeft: newScrollLeft,
}, 'fast')
}
})(jQuery);
Usage:
//Select the 4rd element, and scroll to it (eq is zero-based):
$('.item').eq(3).magicScrollTo();

Something along these lines would be a good start:
http://jsfiddle.net/vHjJ4/
This will bring the target into the centre of the carousel. I think you will have to add in some extra checks to make sure that it didn't scroll to far, for example if you targeted the first or last element...unless this is built into the scroll function (it might be).

I'm not sure I understand your question exactly, but it sounds like you're asking how to scroll horizontally to the selected item in the bottom pane. If so, try something like this:
//get the position of the element relative to the parent ("middle")
var pos = $("#itemid").position();
if (pos){
$("#middle").scrollLeft(pos.left);
}
From here, you can use the width of middle to center the item if needed.