Develop Reference

scrollTop to active element in a overflow scroll div

I have a specific question about .scrollTop. I have a div with a specific height and a lot of p tags inside:
<div id="scroll">
<p>name1</p>
<p>name2</p>
<!-- till name50 -->
</div>
depending on the name you click it gets a class .active. What I then want to do is scroll the div so, that the name is at the top. So what I get is that I can use scrollTop in an animate function like this:
$('#scroll').animate({scrollTop: value });
but how can I get the var value. I tried it with
var value = $('#scroll p').hasClass('active').position().top;
But somehow it does not work.
Some help is much appreciated.

You need to check scrollTop() for the container #scroll and add that back to the position() arg.
var $scroll = $('#scroll');
$('p').click(function(e){
var $this = $(this);
$scroll.animate({
"scrollTop": $this.position().top + $scroll.scrollTop()
}, 1000);
});
http://jsfiddle.net/yCEap/1/
To just get the value:
var value = $('#scroll').scrollTop();

fade in a series of divs then fade out the previous one

So using jquery, I got a bit of javascript to fade in a series of divs over a certain amount of time. Now I want to fade out the previous div. Would I be right in putting a fade out function as a call back in the fade in function?
So it would look like this.
<script type="text/javascript">
$(function() {
$("div").each(function(i, e) {
$(this).delay(i*400).fadeIn(
$(this).delay(i*400).fadeOut);
});
});
</script>
Would that be right or am I doing it wrong?

You have a few syntax problems, the callback should be like so:
$("div").each(function(i, e) {
$(this).delay(i*400).fadeIn(function() {
$(this).delay(i*400).fadeOut();
});
});
Demo: http://jsfiddle.net/tymeJV/FJMa4/

Try this, if you need to cycle through and fixed syntax.
Demo
var arrDivs = $("div").get(); //Get all the divs into an array
function fade()
{
var div = arrDivs.shift(); //get the top div
var $this = $(div);
arrDivs.push(div); //push it to the end for cycle to repeat
$this.delay($this.index()*400).fadeIn(function(){ //get the index to calculate the delay time.
$this.delay($this.index()*400).fadeOut(function(){
window.setTimeout(fade,1000);
});
});
}
fade();

Trying to get a div in to view

I was trying to get a div in to the view and the div elements are being added dynamically.. so i am assigning a link with which on click a div element can be brought in to the view no matter if it is already in view. so when i click on the link, if the div im trying to get to the view is already in view, it will go away from my view. is it a bug??
http://jsfiddle.net/xFu3M/6/
Ive added a working example.
the code goes like
$(".testClick").on("click",function(e){
e.preventDefault();
// Call the scroll function
goToByScroll("indID"+1);
});
function goToByScroll(id){
// Reove "link" from the ID
id = id.replace("link", "");
// Scroll
$('.contentBody').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}

It would be useful to take in consideration the parent offset too:
LIVE DEMO
$(document).ready(function(){
$(".wrapper").css({"width" : $(window).width() , "height" : $(window).height()} );
$(".testClick").on("click",function(e){
e.preventDefault();
goToByScroll("indID1"); // try change to indID4
});
});
function goToByScroll(id){
var el = $('#'+id);
var elOffs = el.offset().top;
var parOffs = el.closest('.contentBody').offset().top;
$('.contentBody').stop().animate({ scrollTop: elOffs - parOffs },800);
}

Add new item to bottom of scrollabe div

I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.
Please see the fiddle here
If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).
I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.

I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:
$(document).ready(function() {
var list = $("#q-d-list");
$(document).on('click', '#add', function() {
$('.active', list).removeClass("active");
var count = list.children().length + 1;
var active = $('<div />', {
'data-qid': count,
'class': 'mli active'
}).text('q' + count).appendTo(list);
list.scrollTop(list[0].scrollHeight);
});
});​
Demo: http://jsfiddle.net/MrvcB/19/

Use
list.scrollTop(list.get(0).scrollHeight);
rather than
list.scrollTop($(".active").offset().top);

Try:
$(document).ready(function () {
var count = 2;
$("#add").live("click", function () {
var list= $("#q-d-list");
// remove the active class from the old item
var $clone = $(list.find("div:last-child").removeClass("active").clone());
count+=1;
var str_count = "q"+count.toString();
$clone.addClass("active").attr("data-qid",str_count).text(str_count);
list.append($clone);
list.scrollTop(list.get(0).scrollHeight);
});
});
http://jsfiddle.net/H4Kb3/

JQuery: Using :not(.active) selector, and adding an Active class, to the item selected

I'm new to Javascript and am having a bit of an issue with using a NOT selector, and adding a class during the function, hopefully this will make sense to someone.
I am creating a small gallery, and my goal is to have clickable navigation, however the active image will redirect to another page when clicked.
Code is as follows:
$("ul#mainGallery li:not(.active) a").click(function(){
var thisListClass = $(this).parent().attr('class');
var activeListId = $(this).parent().attr('id');
var newMarginLeft = (activeListId-3) * -200;
var animateAction = {};
animateAction['margin-left'] = newMarginLeft + 'px';
$("ul#mainGallery").animate(animateAction, 1000);
$('li.active img').animate({width:'100px', height:'100px'},1000)
$(this + 'img').animate({width:'300px', height:'300px'},1000)
$(li.active).removeClass('active');
$(this).parent().addClass('active');
return false;
I know there is likely a much better way to do this, but I can't get my head around it.
Edit: I should probably say what the problem is...
When an active image is clicked, it follows the hyperlink all is well.
When a non active image is clicked, it begins the animation, then (i assume) when the 'active' class is added, instead of returning false, it returns true and follows the hyperlink.

You are binding the click event to $("ul#mainGallery li:not(.active) a") whenever that code is run (presumably on document load). The items which are not active at that point will have that item bound, and changing the class afterwards on other items won't bind this event to them. You will need to either change how you bind it or check inside the function whether the item has that class.
Something like this:
$("ul#mainGallery li a").click(function(){
if(!$(this).parent().hasClass('active')){
var thisListClass = $(this).parent().attr('class');
var activeListId = $(this).parent().attr('id');
var newMarginLeft = (activeListId-3) * -200;
var animateAction = {};
animateAction['margin-left'] = newMarginLeft + 'px';
$("ul#mainGallery").animate(animateAction, 1000);
$('li.active img').animate({width:'100px', height:'100px'},1000)
$(this + 'img').animate({width:'300px', height:'300px'},1000)
$('li.active').removeClass('active');
$(this).parent().addClass('active');
return false;
}
EDIT, or if you prefer to continue using the same selector with the :not and everything, then switch your click function to .live()

To stop the default behaviour use the preventDefault() function
$("ul#mainGallery li:not(.active) a").click(function(e){
e.preventDefault(); // will stop the default behaviour
}
Read more on Jquery docs