Develop Reference

Scroll to div on clicking the div

Here is the fiddle link https://jsfiddle.net/hitech0101/5vhdm5hy/
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'})
});
In the fiddle, i am using jquery to convert the horizontal blocks into vertical blocks. I have changed the block color from red to blue when the block is clicked. When i click a particular block i would the scroll to move to the location of the block in the vertical view. I have tried jquery's scrollTop() method but still could not get it working the way i wanted it to. Please help.
The fiddle is partial representation of the webpage i am working on. There is more content on the original page which i have excluded. The maincontainer is the second container on the page.

No JavaScript necessary. You can specify an element in an anchor's href and it'll scroll it to the top of the window, including itself.
Wrap the div in an anchor or just use the anchor tag itself, they're both wrappers.
<a href="#scrollToMe">
<div id="scrollToMe"></div>
</a>
Just remember that it can only scroll the element into view to the best of its ability, if the item is at the bottom of the parent element the scroll will hit the bottom and it won't be able to go any further.

$(this).get(0).scrollIntoView();
Add this line into the .click function.
Fiddle

I suggest you get the offset top value and animate the #maincontainer to that position
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'});
/*below is what i was talking about*/
var pos = $(this).offset();
$('#mainContainer').animate({ scrollTop: pos.top });
});

$(document).on("click", ".block", function() {
var _body_html = $('html, body');
var _scroll_to = $('.scroll-to');
var _top = _scroll_to.offset().top;
_body_html.animate({
scrollTop: _top
}, 1000);
setTimeout(function() {
_body_html.finish();
}, 1000);
});

Center an element in middle on screen for an horizontal scroll list

I'm attempting to have the element clicked being positioned automatically at the center of the screen. The list is having a horizontal scroll with some overflow-x : scroll which is hiding what's outside of the div(screen).
I can't find out what coordinates to pass to scrollLeft().
$('#timepicker li').on('click',function(){
var maxScrollLeft= $("#timepicker").scrollLeft('#timepicker').prop('scrollWidth') - $("#timepicker").width();
$('#timepicker').animate({
scrollLeft:
});
});
Please see my codepen: codepen
thank you.

Its a little tricky, but here's the solution.
var left = $(this).offset().left
var width = $("#timepicker").width();
var diff = left - width/2
$("#timepicker").scrollLeft($("#timepicker").scrollLeft()+diff)
Basically what i've done is get the present left position of the clicked element and divide it with half of the width of the container. This gives the difference which the scroller has to move in order to take the elment to the middle. Hope you understood the logic.
Here's the codepen attached
http://codepen.io/prajnavantha/pen/eNwWgx
You can copy paste this in the code pen click handler and see it working.

try this
$('#timepicker li').on('click',function(){
var pos=$(this).position().left; //get left position of li
var currentscroll=$("#timepicker").scrollLeft(); // get current scroll position
var divwidth=$("#timepicker").width(); //get div width
pos=(pos+currentscroll)-(divwidth/2); // for center position if you want adjust then change this
$('#timepicker').animate({
scrollLeft: pos
});
});

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

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.

How would I implement a vertical version of this horizontal dynamic header?

On The Economist website, there is a horizontal header that only appears after you scroll down the page once. See here:
http://www.economist.com/blogs/asiaview/2010/12/china_and_nobel_peace_prize
What I want is a vertical version of this that would come out of the left or right side of the page and expand over the page content that is already in place.
Anyone know of an existing plugin or how I could build something like that in jQuery?

Here's a simple jQuery plugin that should work for you:
(function($) {
$.fn.scrollToast = function(options) {
var settings = options || {};
var offset = settings.offset;
var toast = settings.toast;
var $toast = $(toast);
var hidden = true;
// prepare the toast:
$toast.css({
display: 'none',
position: 'fixed',
top: '0px',
left: '0px',
zIindex: '1',
overflow: 'hidden'
});
this.bind("scroll", function($event) {
var top = $(this).scrollTop();
if ((top >= offset && hidden) || (top < offset && !hidden)) {
hidden = !hidden;
$toast.animate(
{width: "toggle"});
}
});
};
})(jQuery);
Usage: $(window).scrollToast({toast: "#toast", offset: 50});, where #toast is a selector indicating the element to slide out, and offset is how long you want the user to scroll before the toast appears.
Notes:
Uses CSS position:fixed and an elevated z-index to make the toast element appear on top of other content.
When the target element is scrolled to a value equal to or beyond offset, the toast element is slid out (it is initially hidden).
When the target element is scrolled to a value less than offset the toast element is slid back in.
Could easily be extended to show the toast on the other edge of the screen or the top or bottom.
Will probably work on any scrollable element, but I've used $(window) because it seems to fit the use case you described.
See a working example here: http://jsfiddle.net/andrewwhitaker/56dTA/

Yes, it's pretty easy to build:
You create a:
<div id="hiddenmenu">
This Appears on scrolldown
</div>
This div should be absolute positionend, and display:none;
With the jQuery, on scroll-down you use $('#hiddenmenu').show();
That's pretty much it, if you need the full code, just ask and I'll post it.