We Keep Coding

Trouble showing only 3 thumbnails after mouse drag

I have a thumbnail gallery, a div that show only 3 thumbnails at once, user can mouse drag left or right to show more.
current fiddle: http://jsfiddle.net/31ua6jL3/2/
What i want to achieve:
-All the 6 box to align in one line, but only show the left 3 first. If outside the div, the right 3 will be hidden
-When i drag box out of the div, the box will be hidden
<div class="container">
<div class="image_holder">
<div class="drag">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</div>
I have some trouble with this, and i don't want to use a plugin. Can somebody guide me on the right track?
i'm trying to do something like http://www.pikachoose.com/, u can see that it contain 5 thumbnails, what i want to do is more than 10 thumbnails in 1 line but only 5 visible, and user can mouse drag to slide to view through the other thumbnails.

First what you need to do is add the following style inside .image_holder
overflow : hidden;
What overflow decides is when the contents inside a box overflows it, how should it react. Using hidden we've decided to make the contents hide inside the box.
Problem in your code :
Now as you've specified the width of .image_holder to 300px when it's inner elements will have cumulative width more then it's own width they will break down to bottom left.
Solution :
So to make all these elements get hidden when they overflow the .image_holder you have to keep another div that holds all the elements with a high range of width. Fortunately you have that div which is .drag. Just give it a bigger width,
.drag{
width : 1000px;
}
Now this .drag div will flow inside the .image_holder and as it's width is a big value all elements will be in one row and they also will flow inside .image_holder div as you expected.
Here's a working fiddle : jsFiddle
References :
CSS overflow Property

scroll target div when dragging from a different div

Given 2 divs, both of which are auto scroll.
I want to be able to drag an item from Div1 into Div2, or internally within Div1.
Items will never be in Div2 - the drop event on Div2 will take care placing it into the correct place on Div1
So far that's easy enough but here's the snag - Div2 needs to be able to scroll vertically while dragging.
I can't find anything in the jQuery draggable that helps here so I tried to create my own hover regions which cause a scroll on Div2. This works when not dragging but not while dragging. I suspect jQuery is stealing the event causing mine not to fire.
html:
<div id="Outer">
<div id="Div1">
<div class='Item'></div>
<div class='Item'></div>
<div class='Item'></div>
</div>
<div id="Div2">
<div class="ScrollUp"></div>
some long content that causes a scrollbar
<div class="ScrollDown"></div>
</div>
</div>
css:
#Div1, #Div2
{
overflow: auto;
}
javascript:
$('#Div1>.Item').draggable({appendTo: $('#Outer')});
$('#Div1').droppable({tolerance: 'pointer'});
$('#Div2').droppable({drop: Div2Drop});
function Div2Drop() {}; //function places the item into the approriate place in Div1
$('#ScrollUp, #ScrollDown').mouseenter(function(){... }); /* These 2 events don't */
$('#ScrollUp, #ScrollDown').mouseout(function(){... }); /* fire when dragging */
Div1 also needs to be scrollable when dragging internally.
How can I make the events fire, or is there a better way to do this? (Perhaps something internal to the draggable and droppable interactions that I missed?

jQuery menu links mouseout issue

I have menu links on a page that lie across the top horizontally.
When I hover on a particular link, a div appears below it showing child divs. for this I used jQuery hover function.
Now, when I mouseout of the link, the div that appeared should dissappear, I used mouseout function to do that.
My problem is, when I am leaving the link to go into one of the child links, it should not dissappear. How do I achieve this?
as I move my mouse towards the child links, as soon as I moouseout of the parent link, the child div dissappears.

You can give them(menu and layers) the same class.
Sample code:
<div class="menu keep">
<div class="layer keep">Layer1</div>
<div class="layer keep">Layer2</div>
<div class="layer keep">Layer2</div>
<div class="layer keep">Layer3</div>
</div>
and in JQuery:
$(".keep").on("mouseenter",function(){
$(".layer").show();
});
$(".keep").on("mouseleave",function(){
$(".layer").hide();
});

Achieving slideUp() without content distortion

I want to implement a simple slide up and slide down mechanism for revealing content on the press of a button. Using the out of the box jquery functions slideUp() and slideDown() squishes the content. I want the slide mechanism to be similar to the one used in twitter (in the timeline when you click on a tweet, more info and options slide down). There the content does not get squished. Instead the bottom border seamlessly moves over the content thus sliding up without squishing. Any pointers on how to implement this?
Edit:
The content to be slided into and out of visibility is inside a div
<div id='container'>
<div id='slider'>
<div> other content </div>
</div>
<div id='button'>
Click to slide
</div>
</div>
I listen to the click event of the 'button' div
$('.button').click(function(){
if($('.slider').is(":visible"))
{
$('.slider').slideUp();
}
else { $('.slider').slideDown(); }
});
This is a basic slider. The contents inside the 'slider' div get squished and distorted when animating.

try this demo
$(function(){
$('#button').click(function(){
if($('#slider').is(":visible"))
{
$('#slider').slideUp();
}
else { $('#slider').slideDown(); }
});
});

Scrolling to the next element

I'm struggling with a jquery or javascript problem.
It already got annoying which tells me I might think too complicated on this one.
So my markup (simplyfied) looks like this:
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
Basically just some containers.
Each one contains different content and a button.
The Plan:
1) After a click on a button the window should scroll down to the next container.
2) The last button scrolls to the first container again. So I need a loop.
3) The numbers of containers may change from page to page.
EDIT: 4) The containers may not always be direct siblings to each other (see markup below)
The Problem:
I could get this to work by giving each container a unique ID as a target for the scroll effect.
The problem with that is that it gets too messy quickly.
Cant I just somehow target "the next object with the class: container", and scroll to that?
I'm not sure if js or jquery is the right approach. My knowledge in both is somewhat limited.
I would be really grateful for a push in the right direction.
EDIT: The containers may not always be direct siblings of each other.
<div class="row">
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="row">
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
</div>

Simple solution:
To get the next container, try using next().
Basically, the <div> containers are siblings of each other, so calling .next() on one div container will give you the next.
$(".button").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
// $(this).parent().next() // this is the next div container.
return false; // prevent anchor
});
http://jsfiddle.net/Pm3cj/1/
You just use $(this) to get the link object, .parent() to get the parent of the link, which is the <div>, then .next() to get the next sibling (note it will wrap automatically, so the sibling after the last <div> is the first <div>!),.offset()to get its position relative to the page,.top` to get it relative to the top border.
Then you just use $(document).scrollTop() to scroll to that location.
For a completely general solution, use:
$(".button").on("click", function(e) {
container = $(this).parent();
// if I am the last .container in my group...
while ( document != container[0] // not reached root
&& container.find('~.container, ~:has(.container)').length == 0)
container = container.parent(); // search siblings of parent instead
nextdiv = container.nextAll('.container, :has(.container)').first();
// no next .container found, go back to first container
if (nextdiv.length==0) nextdiv = $(document).find('.container:first');
$(document).scrollTop(nextdiv.offset().top);
// $(this).parent().next() // this is the next div container.
return false;
});
​The code basically uses container.find('~.container, ~:has(.container)') to find any sibling that has or is a .container. If nothing, then go up the DOM tree 1 step.
After it finds something which is or has a .container, it grabs it with nextdiv = container.nextAll('.container, :has(.container)').first();.
Lastly, if nothing is found, checked by nextdiv.length==0, just grab the first .container in the whole page.
Then scroll to whatever .container was grabbed.
http://jsfiddle.net/Pm3cj/3/
To animate the scroll, place the scrollTop property in an animate function:
// $(document).scrollTop(nextdiv.offset().top); // snaps to new scroll position
$('body').animate({scrollTop:nextdiv.offset().top},300); // animates scrolling
http://jsfiddle.net/Pm3cj/4/

JavaScript is not required for this. You can use HTML anchors.
<div class="container" id="first">
My Content
scroll down
</div>
<div class="container" id="second">
My Content
scroll down
</div>
<div class="container" id="third">
My Content
scroll down
</div>
<div class="container" id="fourth">
My Content
scroll down
</div>

What you want can be easily achieved through parent() and child().
If the number of containers on each page is different, then you should start ID'ing (don't know if that's a term) containers serially. Something like, class="container-1"
The click event on the last button should do something like:
var num = $('div[class^="container-"]').filter(function() {
return((" " + this.className + " ").match(/\scontainer-\d+\s/) != null);
});
num++;
var last_container = $(this).parent('.container' + num);
last_container .scrollTo();
Am sure you can figure out what the next button should do ;)