We Keep Coding

simultaneously scroll multiple elements

I'm at a brick wall. I have a little project:
(LINK HAS BEEN REMOVED)
You can see lots of horizontal scrolls, when you bring the browser down to mobile width, you can scroll horizontally. My problem is, how do I get it so that if you horizontally scroll one item, all the others will follow too? I have tried the following:
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
})
But I'm getting nowhere fast. Any help would be appreciated.
UPDATE
Turns out it does work when you put the code into console AFTER the page has loaded.
I resorted to:
$(document).on('scroll', '.container', function(){
$('.container').scrollLeft($(this).scrollLeft());
});
UPDATE2
Big thanks to #George and everyone who answered to point me in the right direction. The tables are loaded with jQuery:
$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"");
All I had to do was attach my scroll code after the elements were loaded, like so:
$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"", function(){
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});

You told it works from console after page has loaded. So, try this out.
$(document).ready(function(){
$(document).on('scroll', '.container', function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
OR use the below code:
$(document).ready(function(){
$('.container').scroll(function(){
$('.container').scrollLeft($(this).scrollLeft());
});
});
Hope this helps.

Please try this
$('.container').scroll(function(){
var scrolled = $(this);
$('.container').each(function() {
$(this).scrollLeft(scrolled.scrollLeft());
})
})
Hope it helps.

Jquery show/hide hover or mouse enter issue

Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves
so far ive got this on my fiddle
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
Thanks any help would be great

You Should Read Basic of JavaScript
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
})//added
Updated Demo

You were missing a });
Also, you can simplify your code to:
$(document).ready(function () {
$(".image").mouseover(function () {
$(".hover").show();
}).mouseout(function () {
$(".hover").hide();
});
});
BTW, your HTML is broken. Fix that first.

Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
});
$(".image").mouseout(function(){
$(".hover").hide();
});
});
You can test it here: http://jsfiddle.net/5PR5E/3/

switching between multiple images

I've got this in my js:
$(function(){
$('.slide:nth-child(11) .layout-100:first-child').click(function(){
$('.slide:nth-child(11) .layout-100:first-child').fadeOut('slow');
$('.slide:nth-child(11) .layout-100:nth-child(2)').fadeIn('slow');
});
});
$(function(){
$('.slide:nth-child(11) .layout-100:nth-child(2)').click(function(){
$('.slide:nth-child(11) .layout-100:nth-child(2)').fadeOut('slow');
$('.slide:nth-child(11) .layout-100:nth-child(3)').fadeIn('slow');
});
});
...And so on.
I've got multiple images which I want to be able to switch through with a click function. But how i'm writing it down now is a lot of code. Is there a way of putting this into 1 function?

You can get the index of the visible image and pass that as a parameter to the function. Than you can easily calculate which images should fade in and out.
Can you make a fiddle with something that works? I can edit the fiddle and show you how it could work.

You can give this a shot, but without seeing your html structure I can't test it.
jQuery(function($){
$('.slide:nth-child(11) .layout-100').each(function() {
$(this).click(function() {
$(this).fadeOut('slow');
if ($(this).next().length)
$(this).next().fadeIn('slow');
else
$(this).parent().children().first().fadeIn('slow');
});
});
});

onClick show iframe 5000 and then hide

I'm trying to build an impression test for a remote usability test using HTML, CSS and jQuery. The user needs to click on a button to start the impression test, which will show the page of the client in an iframe for 5 seconds and then hide itself.
I looked for many codes very similar to this but not exactly what I needed and I can't make it work myself as my jQuery knowledge is yet v poor.
So, what I'm looking for is something like this:
on click show iframe 5000
hide
I tried using this bit of code to show on click with the css iframe {display:none};
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#iframe1").show("5000");
});
});
</script>
Thinking "it will show after the click for 5 seconds and then go back to normal display: none.
But no... It shows on click and it stays there.
Can anyone help me?

Here's how you would do it in jQuery:
$(document).ready(function() {
$("#show").click(function() {
$("#iframe1").show().delay(5000).hide(500);
});
});
Fiddle: http://jsfiddle.net/5vC68/

You'll want to use the window.setTimeout event. For example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/

Try this
<script type="text/javascript">
$(function() {
$( "#show" ).click(function() {
$( "#iframe1" ).show().delay(500);
$( "#iframe1" ).show().delay(5000);
});
});
</script>

Incorrect code syntax (scrollbar)

I'm trying to implement this scrollbar and would like to change the scroll inertia but looks like I made a syntax error in the code below. Would you know what the error is?
Many thanks
<script>
(function($){
$(window).load(function(){
$(".content_2").mCustomScrollbar()
scrollInertia:150
});
})(jQuery);
</script>

Change
$(".content_2").mCustomScrollbar()
scrollInertia:150
by
$(".content_2").mCustomScrollbar({
scrollInertia:150
});

You are not passing in the data but trying to define an object somehow.
$(".content_2").mCustomScrollbar({
scrollInertia:150
});

$(window).load(function(){
$(".content_2").mCustomScrollbar({
scrollInertia:150
});
});
You should see examples here for proper usage -
http://manos.malihu.gr/jquery-custom-content-scroller/