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.

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>

check if .load has actually loaded content yet, then slide down

So I want to slide down some content that is loaded with jquery .load function
I have this where I load the content and then Hide it
function froth(){
$("#area").hide();
$("#area").load("test.html #enquiry1");
$("#area").hide();
}
Here I want to make sure that when i click the button it loads the document and then once its loaded then it slides down the content.
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
$('#area').ready(function(){$("#area").slideDown('slow');})
});
});
Any ideas on how to do this.
I've been looking at the API's and it looks like i will probably have to use some ajax function instead... but i wanted to see if there was any other way.

.load accepts a callback as parameter http://api.jquery.com/load/
$("#area").load("test.html #enquiry1", function() {alert('done')});

use the callback function of load to make sure the load content is loaded first.. and then do the animation
try this
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
function froth()
{
$("#area").hide();
$("#area").load("test.html #enquiry1",function(){
$(this).slideDown('slow')
});
}
OR
$(document).ready(function() {
$('#t1').on('click', function(){
$("#area").hide().load("test.html #enquiry1",function(){
$(this).slideDown('slow')
});
});
});

Launch an anchor after index is load

Well, I´m not programmer so I can´t handle this at all.
I need to launch a part of a website after index is loaded. I´ve been trying some jquery without any luck, ie this:
$("document").ready(function() {
setTimeout(function() {
$('#tensa-inicio').trigger('click');
},1000);
});
You can see the site in this url: 3w[dot]tensa[dot]es. I need to display the HOME link after index is loaded, but can´t see how to do this.
Any help is really appreciated.
TIA!

Considering that you are trying to fire click event for the Anchor tag, You can make it work with following script too
$("document").ready(function() {
setTimeout(function() {
window.location = $('#tensa-inicio').attr('href');
},1000);
});

Assuming that "tensa-inicio" is the ID of anchor element in the document, you better call the native click() method rather than the jQuery event:
setTimeout(function() {
var oLink = $('#tensa-inicio');
if oLink.length === 1)
oLink[0].click();
},1000);

This was the tweak:
<script type="text/javascript">
$(document).ready(function(){
$("#sliderpromo").easySlider({
//auto: true,
//continuous: true,
speed:500,
pause:6000,
numeric: true
}, window.location="#!/tensa-inicio");
});
</script>
Now, every time index is loaded, that ID is loaded... ; )
Thanks to ALL!

Fade in Ajax content after it's fully loaded

My current solution gets some content via AJAX, Inserts it into a DIV then hides it and fade it in.
The issue with that is the content contains images and an iframe, The solutions flickers and the fadeIn doesn't look smooth.
What i'd like to do is to only fadeIn after the iframe and pictures are fully loaded.
How to do that?

This will wait until all child content has finished loading:
$("#wrapperDivID").load(function (){
// do something, e.g.
$(this).fadeIn();
});
See .load().
In your specific case the following should work:
$('#content').load('/echo/html/',data, function() {
alert('fired');
});

I would change the duration for fadeIn so that it will take little long.
$("#content").load("getform.php"), function() {
$(this).fadeIn(1500); // or another bigger number based on your load time
});
If you know what all images are going to be in the page, Preload all those images in the page where you have the div "content", so that you will save some loading time.

If you use $.ajax to get the HTML you can wrap the resulting HTML like below:
$.ajax('some/path/to.html',{
'success':function(html){
var result = $(html).load(function(){
$('#content').fadeIn()
});
$('#content').html(result);
}
});
jsfiddle example

another way you can do this:
$( "#content" ).fadeOut(200, function() {
$(this).load( url, function() {
$(this).fadeIn(200);
});
});
change the fadeIn and Out times to whatever is good for you.