Develop Reference

jQuery slideDown on load

I am loading a a partialView using ASP.NET MVC in my jQuery code. The partialView contains some explanation about the item that is clicked in my click function, and I would like the explanation to slide down once the object is "loaded".
I have the following code:
$('.details').click(function(){
$('#details').load($(this).data('url'), { id: $(this).data('id')}).slideDown('slow');
//the slidedown part doesn't seem to work.
});
But the .slideDown() doesn't seem to work. How can I got about this? Should I use .animate() instead?
Thanks!
EDIT
I found some questions saying I might need to .hide() it first. This seems to work, however it seems the "element" is not completely loaded when it slides down as some of the text updates after finishing the .load().
Is there some way to run the .slideDown() once the load finishes?

It's just because $().load() is not immediate. There is a third parameter that is a callback than runs when load is complete, so, you need to await to slide down (not tested, sorry).
Can you try this?
$('#details').load($(this).data('url'), { id: $(this).data('id')}, function() { $(this).slideDown('slow'); });
and tell us if it works.

Replay jQuery function every 5 seconds

I want to replay my jquery function ChangeStats() every 5 seconds, it's currently doing sod all.
function ChangeStats() {
$('body').find('.admin-stats-big-figures-hidden').fadeIn(500);
setTimeout(function() {
$('body').find('.admin-stats-big-figures').fadeOut(500);
}, 500);
}
$(document).ready(function(){
setInterval(ChangeStats, 5000);
})();
Yes I have got the right class names.
No I haven't used underscores in my HTML.
I think it's something to do with my use of "find()", once the DOM has loaded and the function is set is it meant to traverse up the DOM tree instead of down?
EDIT:
Updated code, still not working.
HTML:
<span class="admin-stats-big-figures">%productCount%</span>
<span class="admin-stats-big-figures-hidden">hey</span>

Ok, I am going to go out on a limb and make several assumptions here; one is that you wish to cycle between two elements repeatedly, another is that you are using $(this) in the context of the window rather than a containing element. If either of these are incorrect then the following solution may not be suitable. However, let's give this a shot, eh?
1) You need to use setInterval rather than setTimeout to create a repeating call. You can of course "chain" your timeouts (ie: call the succeeding timeout from the code of the current timeout). This has some benefits in certain situations, but for now let's just assume you will use intervals rather than timeouts.
2) You call the find() jQuery method every time, which is a little unnecessary, especially if you will be repeating the actions so one idea would be to cache the lookup. If you are going to do that a custom object would be more suitable than separate global variables.
3) Some flexibility in terms of starting and stopping the animation could be provided. If we use a custom object as mentioned in (2) then that can easily be added.
4) You are using fadeIn and fadeOut, however if you wish the items to cycle then fadeToggle may be your best solution as it will simply allow you to do exactly that, toggle, without needing to check the current opacity state of the element.
5) Finally in my example I have provided a little extra "padding HTML" in order for the example to look good when run. Fading in jQuery will actually set the faded item to a CSS display of "none" which results in the content "jumping about" in this demo, so I have used some div's and a couple of HTML entity spaces to keep the formatting.
Ok, after all that here is the code..
// your custom animation object
var myAnim = {
// these will be cached variables used in the animation
elements : null,
interval : null,
// default values for fading and anim delays are set to allow them to be optional
delay : { fade: 500, anim: 200 },
// call the init() function in order to set the variables and trigger the animation
init : function(classNameOne, classNameTwo, fadeDelay, animDelay) {
this.elements = [$("."+classNameOne),$("."+classNameTwo)];
// if no fade and animation delays are provided (or if they are 0) the default ones are used
if (animDelay) this.delay.anim = animDelay;
if (fadeDelay) this.delay.fade= fadeDelay;
this.elements[0].fadeOut(function(){myAnim.start()});
},
// this is where the actual toggling happens, it uses the fadeToggle callback function to fade in/out one element once the previous fade has completed
update : function() {
this.elements[0].fadeToggle(this.delay.anim,function(el,delay){el.fadeToggle(delay)}(this.elements[1],this.delay.anim));
},
// the start() method allows you to (re)start the animation
start : function() {
if (this.interval) return; // do nothing if the animation is currently running
this.interval = setInterval(function(){myAnim.update()},this.delay.fade);
},
// and as you would expect the stop() stops it.
stop : function () {
if (!this.interval) return; // do nothing if the animation had already stopped
clearInterval(this.interval);
this.interval = null;
}
}
// this is the jQuery hook in order to run the animation the moment the document is ready
$(document).ready(
function(){
// the first two parameters are the two classnames of the elements
// the last two parameters are the delay between the animation repeating and the time taken for each animation (fade) to happen. The first one should always be bigger
myAnim.init("admin-stats-big-figures","admin-stats-big-figures-hidden",500,200);
}
);
OK, so now we need the HTML to compliment this (as I say I have added a little formatting):
<div><span class="admin-stats-big-figures">One</span> </div>
<div><span class="admin-stats-big-figures-hidden">Two</span> </div>
<hr/>
<input type="button" value="Start" onclick="myAnim.start()"/> | <input type="button" value="Stop" onclick="myAnim.stop()"/>
I have also provided buttons to stop/start the animation. You can see a working example at this JSFiddle - although the stop/start buttons are not working (presumably something specific to JSFiddle) they do work when in context though.

Here im gonna just replace your $(this). and maybe it'll work then.. also using callback.
function ChangeStats() {
$('body').find('.admin-stats-big-figures-hidden').fadeIn(500, function() {
$('body').find('.admin-stats-big-figures').fadeOut(500);
});
}
$(document).ready(function(){
setTimeout('ChangeStats()', 5000);
});

Fading in a div after a delay

I'm new to javascript so I'm struggling with the basics...
I'm using this delay to bring in a div but i want to fade the div in as part of this function (not just have the box appear)
function show() {
AB = document.getElementById('div_with_text');
AB.style.display = 'inline';
}
setTimeout("show()", 3000);
Can any one help with this?
I've tried adding things like:
$(function(){
$('#div_with_text').fadeIn('slow');
});
but I don't know the language well enough to get it to work...
Any help would be much appreciated!

Is your DIV hidden in the first place? If not, that is your problem. Your are trying to open an already opened door.
Your code is also incorrect, even if you hide the DIV, this will not work. It should have been setTimeout(show, 3000);
With the JavaScript code (setTimeout) you have provided, 3 seconds after the page loads, you are trying to display the DIV. Did you notice that the DIV was already there and never 'appeared' after 3 seconds as you expected?
Example - http://jsfiddle.net/BLPTq/2/ - just click run and see.
To make it work, hide the DIV first and then call the setTimeout or the jQuery method. Example - http://jsfiddle.net/zeXyG/ - just click run and see. Check the CSS display:none;
OR, if you don't want to hide it with CSS, just call hide() before calling fadeIn()
$('#div_with_text').hide().fadeIn('slow');
Example - http://jsfiddle.net/zeXyG/1/
As per your comment below. Add delay() to the call like shown below
$('#div_with_text').hide(); // this or use css to hide the div
$('#div_with_text').delay(2000).fadeIn('slow');
2 seconds after the page loads, this will hide the div and then fade in slowly. Look at this example carefully.

The fadeIn method will only work if you load the jQuery library on your page. Without that, the method will not work since it isn't part of native Javascript.
Once you have loaded jQuery, that method will work as your syntax is correct.

jQuery selector :not(:animated)

We're trying to make sure our JavaScript menu, which loads content, doesn't get overrun with commands before the content in question loads and is unfurled via .show('blind', 500), because then the animations run many times over, and it doesn't look so great. So I've got about six selectors that look like this:
("#center_content:not(:animated)")
And it doesn't seem to be having any effect. Trying only :animated has the expected effect (it never works, because it doesn't start animated), and trying :not(div) also has this effect (because #center_content is a div). For some reason, :not(:animated) seems not to be changing the results, because even when I trigger the selector while the div in question is visibly animated, the code runs. I know I've had success with this sort of thing before, but the difference here eludes me.
$("#center_content:not(:animated)").hide("blind", 500, function () {
var selector_str = 'button[value="' + url + '"]';
//alert(selector_str);
var button = $(selector_str);
//inspectProperties(button);
$("#center_content:not(:animated)").load(url, CenterContentCallback);
if (button) {
$("#navigation .active").removeClass("active");
button.addClass("active");
LoadSubNav(button);
}
});
I hope this provides sufficient context. I feel like the second selector is overkill (since it would only be run if the first selector succeeded), but I don't see how that would cause it to behave in this way.
Here's the snippet that seemed to be working in the other context:
function clearMenus(callback) {
$('[id$="_wrapper"]:visible:not(:animated)').hide("blind", 500, function() {
$('[id^="edit_"]:visible:not(:animated)').hide("slide", 200, function() {
callback();
});
});
}
Here, the animations queue instead of interrupt each other, but it occurs to me that the selector still doesn't seem to be working - the animations and associated loading events shouldn't be running at all, because the selectors should fail. While the queueing is nice behavior for animations to display, it made me realize that I seem to have never gotten this selector to work. Am I missing something?

Sometimes it's helpful to use .stop() and stop the current animation before you start the new animation.
$("#center_content").stop().hide("blind", 500, function () {});
Really depends on how it behaves within your environment. Remember that .stop() will stop the animation as it was (eg. halfway through hiding or fading)

I don't know if I understand it correctly, but if you want to make sure the user doesn't trigger the menu animation again while it's currently animating(causing it to queue animations and look retarded, this works and should help. I use an if-statement. And before any mouseover/off animation I add .stop(false, true).
$('whatever').click(function(){
//if center_content is not currently animated, do this:
if ($("#center_content").not(":animated")) {
$(this).hide(etc. etc. etc.)
}
//else if center_content IS currently animated, do nothing.
else {
return false;}
});
another example i found elsewhere:
if($("#someElement").is(":animated")) {
...
}
if($("#someElement:animated").length) {
...
}
// etc
then you can do:
$("#showBtn").attr("disabled", $("#someElement").is(":animated"));

Open links in div container in JQuery Mobile

i have a multi-column layout where "#content-primary" is the div i want the actual content loaded, and "#content-secondary" holds a generated listview of links(effectively a navigation menu).
I'm using this code to change the page, pretty much following the JQM Docs, however the browser is following the links to entirely new pages, instead of loading the content from them into the "#content-primary" div. There's obviously something I'm missing.
$(function(){
$('#menu a').click(function() {
$.mobile.changePage($(this).attr('href'), {
pageContainer: $("#content-primary")
} );
});
});
Using Django on the backend, but it probably isn't relevant.

I finally found an answer here. JQuery Mobile's changePage() and loadPage() methods do too much post-processing and triggers a lot of events that really makes implementing your own dynamic loading more complicated than it should be.
The good old fashioned #("div#primary-content").load(); works, but I'm still struggling to apply JQM styles to it.

interestingly, this contradicts with this:
$.mobile.changePage() can be called
externally and accepts the following
arguments (to, transition, back,
changeHash).
And when tested this works: $.mobile.changePage("index.html", "slideup"); but this does not:
$.mobile.changePage("index.html", { transition: "slideup" });
Perhaps documentation is not quite right?

Update to the new beta 1 release