We Keep Coding

Can this javascript code be cleaned up?

The code is working just fine now, but is a bit sloppy and long. I'm not as proficient in js as I would like to be.
Javascript
$("#IDArea1").click(function () {
$('#indicator1').toggleClass("icon-caret-up icon-caret-down");
$('#indicator2').removeClass("icon-caret-up");
$('#indicator2').addClass("icon-caret-down");
$('#indicator3').removeClass("icon-caret-up");
$('#indicator3').addClass("icon-caret-down");
});
$("#IDArea2").click(function () {
$('#indicator2').toggleClass("icon-caret-up icon-caret-down");
$('#indicator1').removeClass("icon-caret-up");
$('#indicator1').addClass("icon-caret-down");
$('#indicator3').removeClass("icon-caret-up");
$('#indicator3').addClass("icon-caret-down");
});
$("#IDArea3").click(function () {
$('#indicator3').toggleClass("icon-caret-up icon-caret-down");
$('#indicator2').removeClass("icon-caret-up");
$('#indicator2').addClass("icon-caret-down");
$('#indicator1').removeClass("icon-caret-up");
$('#indicator1').addClass("icon-caret-down");
});
DOM Structure
<div id="IDArea1">
<i class="icon-caret-up"></i>
</div>
...
<div id="IDArea2">
<i class="icon-caret-down"></i>
</div>
...
<div id="IDArea3">
<i class="icon-caret-down"></i>
</div>
Basically, the first area (IDArea1) is open by default. Then, depending on which heading you click, will toggle the clicked heading to the opposite icon and force the others to be "icon-caret-down". So the structure of each function is the same and I have a feeling there is a cleaner way to execute this code, I just can't find a solution.
Thank you for your help.

Rename f() to something else that makes more sense to your domain:
var f = function(indicatorClicked, remainingIndicators) {
$(indicatorClicked).toggleClass("icon-caret-up icon-caret-down");
$.each(remainingIndicators, function(index, indicator) {
$(indicator).removeClass("icon-caret-up").addClass("icon-caret-down");
});
}
$("#IDArea1").click(function () { f('#indicator1', ['#indicator2', '#indicator3']) });
$("#IDArea2").click(function () { f('#indicator2', ['#indicator1', '#indicator3']) });
$("#IDArea3").click(function () { f('#indicator3', ['#indicator1', '#indicator2']) });

Yes, you can clean up your code.
You can create a function like this:
function iconCaret(el1, el2, el3, el4, el5) {
$(el1).toggleClass("icon-caret-up icon-caret-down");
$(el2).removeClass("icon-caret-up");
$(el3).addClass("icon-caret-down");
$(el4).removeClass("icon-caret-up");
$(el4).addClass("icon-caret-down");
}

Here's something you could try. Haven't tested it so it may contain typos. [id=^'IDArea'] selects elements with id starting with "IDArea".
$("[id=^'IDArea']").click(doStuff);
function doStuff(){
var num=$("[id=^'IDArea']").eq(this);
$('#indicator'+num).toggleClass("icon-caret-up icon-caret-down");
$("[id=^'indicator']").not('#indicator'+num).removeClass("icon-caret-up").addClass("icon-caret-down");
}

Javascript toggle function my version

I've found this js toggle function yesterday. It worked perfectly but today... it just doesn't work. I have my news feed and i wanted that each news is in a new container.... the first is opened by default the others are closed. It worked but today when I open a div it just closes itself again. And if I close the first div wich is opened by default it doesn't open again...
JAVASCRIPT FILE
$(document).ready(function() {
$('#news').show();
$('a#sprozilec').click(function() {
if (!$('#news').is(':visible')) {
$('.prikaz').hide(400);
}
$('#news').slideToggle(400);
});
});
$(document).ready(function() {
$('#news2').hide();
$('a#sprozilec2').click(function() {
if (!$('#news2').is(':visible')) {
$('.prikaz').hide(400);
}
$('#news2').slideToggle(400);
});
});
NEWS FILE
New official video!
<div id="news" class="prikaz">
</div>
Bla Bla Bla!
<div id="news2" class="prikaz">
</div>

Rewrite your JS as,
$(document).ready(function()
{
$('#news').show();
$('a#sprozilec').click(function()
{
if (!$('#news').is(':visible'))
{
$('.prikaz').hide(400);
}
$('#news').slideToggle(400);
});
$('#news2').hide();
$('a#sprozilec2').click(function()
{
if (!$('#news2').is(':visible'))
{
$('.prikaz').hide(400);
}
$('#news2').slideToggle(400);
});
});
You just need one document.ready(). And that will do.

Enclose your code in single document.ready, because if you create multiple document.ready, both will be executed at same time. In your case execution sequence of your code matters!
$(document).ready(function(){
$('#news').show();
$('a#sprozilec').click(function() {
if (!$('#news').is(':visible')) {
$('.prikaz').hide(400);
}
$('#news').slideToggle(400);
});
$('#news2').hide();
$('a#sprozilec2').click(function() {
if (!$('#news2').is(':visible')) {
$('.prikaz').hide(400);
}
$('#news2').slideToggle(400);
});
);
Demo jsFiddle

Showing Ajax loader after website fully loaded

I want to show ajax loader when my website is fully loaded. i'm using the following codes but it's not working.
<div style="display:none" id="divloader"><img src="loading.gif" /></div>
$(function() {
$(".changepass").click(function() {
$("#divloader").show();
$(".block1").load("index.php", function(){ $("#divloader").hide(); });
return false;
});
});
I've fixed all typo error/ syntax error . But It's not working yet. Is there anyone who has working example ?

syntax error in your code
at this line $("#dvloader").show(); use $("#divloader").show();
<div style="display:none" id="divloader"><img src="loading.gif" /></div>
and
$(function() {
$(".changepass").click(function() {
$("#divloader").show();
$(".block1").load("views/index.php", function(){ $("#divloader").hide(); });
return false;
});
});

How can I show a loading image during AJAX request?

I am loading another page in to a div with the help of this jQuery code:
$('#maildiv').load('reports/mail_report.php');
The load is taking some time. Meanwhile I want to show a loading image. When the file message is loaded the loading image should be hidden.
How can I do this?
I tried with:
function mail() {
$("#mailimg").show();
$('#maildiv').load('reports/mail_report.php') {
$("#mailimg").fadeOut("10000");
$('#maildiv').fadeOut("10000");
}
}
<input type="button" class='button green' value="Mail Report" name="" id="" Onclick='mail();return false;'/>
<img id="mailimg" style='display:none;' src='img/loading.gif' width='20' height='20'>
<div id="maildiv" style="color:red;"> </div>

Use the .load() complete callback to hide the load image.
Another point is the loaded div maildiv, why do you want to hide it using $('#maildiv').fadeOut("10000"). I think you need to use show it using $('#maildiv').fadeIn("10000")
function mail() {
$("#mailimg").show();
$('#maildiv').load('reports/mail_report.php', function() {
$("#mailimg").fadeOut("10000");
$('#maildiv').fadeOut("10000");
})
}

This is generic and should solve it for this issue.
//Do what you have to before its starts
$('#whereitstobeloads').load('filethatstobeloaded', function() {
//What you want to do when its loaded
});

It looks like you've got the right idea - using a callback function of the load - however your syntax is incorrect. Try this:
function mail() {
$('#mailimg').show();
$('#maildiv').load(
'reports/mail_report.php'),
function() {
$('#mailimg').fadeOut("10000");
$('#maildiv').fadeOut("10000");
}
}
}

Try this:
function mail() {
$("#mailimg").css('display','block');
$('#maildiv').load('reports/mail_report.php', function(){
$('#mailimg').animate({
opacity: 0.0
}, 1000, 'linear', function(){
$('#maildiv').animate({
opacity: 1.0
}, 1000, 'linear');
});
});
}

Need Help for better practice Jquery codes

I am trying to make my jquery codes look better here. My functions are working correctly but I was wondering if anyone can make my codes less ugly. Thanks a lot!
HTML
<div class='image_layout'>
<a href='#'><img src=' a.jpg '/></a>
<br><p class='credits'>hahahah
<br>Agency: Agency1
<br>Picture ID: 5 </p>
</div>
jQuery
$('#image_layout').on('hover', 'img', function() {
$(this).parent().next().next().fadeIn('fast');
})
$('#image_layout').on('mouseout', 'img', function() {
$(this).parent().next().next().fadeOut('fast');
})​

You can pass two functions to jQuery hover - one for mousein, one for mouseout. You can make this change as long as you don't have dynamically added images. Your code would also be a lot simpler if the element you are fading has an ID or class:
$('#image_layout img').hover(
function () {
$(this).closest('.someClass').fadeIn('fast');
},
function () {
$(this).closest('.someClass').fadeOut('fast');
}
);

$('.image_layout').on('hover', 'img', function (e) {
if(e.type == 'mouseover') {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
} else {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
}
})
You could also have done:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
}, function() {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
});
If you're sure that nothing other than hovering the image will cause the element to fade, you could simply write:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast');
});

Look into Douglas Crockford's JS Style Guide. He'd make your code look something like (with improvements):
var obj = $('#image_layout img');
obj.mouseover( function(){
$(this).parent([selector]).next([selector]).fadeIn('fast');
});
obj.mouseout( function(){
$(this).parent([selector]).next([selector]).fadeOut('fast');
});
You don't need the on, just call the function directly.

I would use .eq as opposed to two next statements, additionally, hover takes two functions, the first being for the mouseenter event, and the second for mouseout
$('#image_layout').hover('hover', 'img', function () {
$(this).parent().eq(2).fadeIn('fast');
}, function () {
$(this).parent().eq(2).fadeOut('fast');
})
References
Take a look at eq here
Read over hover here