how to fade in items sequentially while using jquery templates - javascript

Hey guys I am trying to fade in a list of items sequentially while using jquery templates.
I've seen how to do this without the use of jquery templates but not sure about how to do so when using them.
Here's the effect I am going for:
http://demos.coolajax.net/jquery/sequential_fadein_fadeout/
Here's my template code:
$template.tmpl(formattedData).appendTo($el);
Thanks for any help!
Update:
I think something like the following is what I need to do...
$template.tmpl(formattedData).appendTo($el).delay(100*index).fadeIn(250);
The question is how do I get that index value?
Can I do something like this?
$template.tmpl(formattedData).appendTo($el).each(function(i){$.delay(100*i).fadeIn(250)});
UPDATE:
I was able to figure it out. Here's the answer
$template.tmpl(formattedData).appendTo($el).each(function(i){$(this).delay(200*i).fadeIn(250);});
Don't forget to set your display property to none in your CSS for your 'li' (already had that part right).
Thanks anyway to all the folks that tried to help out!

you should append with "display:none" style then animate each one.
In your code "each" doesn't iterate li tags, it tries to iterate li.parent tag(ul).
$(document).ready(function() {
for(var i=0; i < 10; i++) {
$("ul").append("<li style='display:none'>New element-"+i+"</li>")
}
$("ul li").each(function(index) {
$(this).delay(100*index).fadeIn(250);
$("li:even").css("background","#cfe9b6");
$("li:odd").css("background","#b0db86");
});
});​
DEMO

Related

Find all specific element in dom and add class on next element

Im trying to find all img in a page and if the next tag is div.txt add class test on this next element.
I've tried this but I dont know why it isnt working:
for(i = 0; i < $('.page img').length; i++){
$('.page').find('img:eq('+i+')').next('.txt').addClass('teste');
}
Some help would be appreciated.
You were missing $. No need to loop, use .each() like this:
$('.page img').each(function(){
$(this).next('.txt').addClass('teste');
});

Javascript: Referring to this element in if condition

I am making a script to make a submenu visible as a dropdown when the menu button is hovered (or onmouseover). I made the if condition refer to this.id="menutoggle1" and check if it's true or false.
If true, it should fire off a function with the statement
document.getElementById("submenu1").style.display="inherit";
It doesn't work, but I assume this has something to do with my if condition. I don't really understand conditions that well, but I hope someone can explain why this is wrong, and maybe even help me fix it.
This is my code;
function submenu_show()
{
if(this.id="menutoggle1" == true)
{
document.getElementById("submenu1").style.display="inherit";
}
}
I know another way that I can achieve the result I want, but then I need to write two functions to show and two functions to hide, for all the menu options that are supposed to have submenus, and it is just messy and ugh.
EDIT: I figured I couldn't make it work without dropping my idea completely, so I just went with the other alternative. I also realized that wasn't really that messy after all, when written properly (it is supposed to be used for several drop downs after all).
Here's the code I used eventally;
<div id="menubutton1" onmouseover="submenu1_show();" onmouseout="submenu1_hide();"></div>
<div id="submenu1" onmouseover="submenu1_show();" onmouseout="submenu1_hide();"></div>
function submenu1_show()
{document.getElementById("submenu1").style.display="inherit";}
function submenu1_hide()
{document.getElementById("submenu1").style.display="none";}
In the current code, this is merky. Its certainly not the element's ID. You could find the element in the function.
function fnName(){
var el = document.getElementById("...");
if(el.id === "something"){ ... }
}
If you want to get the function to do this for a particular ID, you could just add a param to the fnName function and pass that param do the doc.getElByID function.
why not use jQuery to do this for you? With a little bit of CSS and jQuery edits, you can utilize sliding effects and fading effects among other benefits. Look how easy a drop down is with jQuery:
$('nav ul li a').hover(
function() {
$('nav ul li ul').addClass('over');
},
function() {
$('nav ul li ul').removeClass('over');
}
);
Here is a working demo. I know it doesn't answer your question but I do hope this helps you out a little bit!

Finding an element in a javascript array and returning the position of the matched element

I'm plucking my brain away at this but was hoping someone could help after several failed attempts.
I have an HTML list like this:
<ul>
<li><span class="current"></span></li>
<li><span class="normal"></span></li>
</ul>
I'm trying to figure out a way to find the li element in this list which has the span with the class current with the number it is at in the ul. So, in this case, it would be 1.
I tried using different jquery functions but I seem to be getting nowhere. This is what it looks like right now:
var list = $('ul li');
$.each(list, function(key, value) {
if( $(this).find('.current') ) {
alert(key);
}
});
This just alerts 0, and 1, essentially meaning that it doesn't work. Does anyone have any idea what is wrong with what I'm doing?
It would be 0 not 1 (JavaScript is zero-indexed), but:
$('li:has(span.current)').index();
JS Fiddle demo, and a larger-table example.
Or you could use:
$('span.current').parent().index();
JS Fiddle demo, and a larger-table example.
Or:
$('span.current').closest('li').index();
JS Fiddle demo, and a larger-table example.
References:
closest().
:has() selector.
index().
parent().
jQuery selectors (never) return a falsey value. So something like:
$(this).find('.current')
Will always return true in an if statement. An easy way to check for existence is with the length property, which says how many elements are found from the selector.
if ($(this).find('.current').length > 0) {
Your code loops through each item in the list and shows its key.
What you want is more like:
$('mylist').find('.current').each(function(key, value)
{
alert(key);
}
This will loop only through the items with class 'current'.

LI in my jquery effects my menu

I have got a jquery for an image slider which can be seen here: http://jsfiddle.net/S4LGr/42/
And I have a classical horizontal menu with -ul- and -li- of course.
But this jquery, effects my menu and when I click on menu it doesnt work but it does the work of jquery, and changes the big div like I am clicking the litte thumbs which you can see in example.
How can I solve this?
When you say $('li').click(fn) you are literally saying in code, "hey jQuery, go find all li elements and whenever I click them, run fn."
You probably wanted to limit this to li elements which are children of <div id="links">, which is accomplished by using instead $('#links li').click(fn) instead.
You might also consider using instead <ul id="links" class="horizontal_scroll_menu"> rather than the div-which-does-nothing that you have now. Try to cut down on needless divs on the Internet, please.
Add more detail to the selector. $("ul.horizontal_scroll_menu li") should do the trick. See the implementation: http://jsfiddle.net/S4LGr/43/
var container = $('#detail'),
bigimages = container.find( "div");
bigimages.first().fadeIn("slow");
$('.horizontal_scroll_menu li').each( function ( idx ) {
$(this).click( function ( e ) {
bigimages.stop(true,true).hide().eq( idx).fadeIn("slow");
})
});​
try this?

jQuery toggle();

I am loading data dynamically by AJAX into a cluetip (http://plugins.learningjquery.com/cluetip/#).
I want to toggle the results from a link like so:
$(document).ready(function() {
$("#calendarLink").live("click",( function() {
$("#result").toggle();
}));
});
For some reason the above will not work. Can you suggest an alternative?
Couple of questions/points
Do you really need to use .live() You're using an ID selector, so there should only ever be one of these.
Also, you have an extra set of brakets. Probably not a problem, but you could remove them:
$(document).ready(function() {
$("#calendarLink").click( function() {
$("#result").toggle();
});
});
Perhaps the toggle() function isn't be used properly?
See here http://api.jquery.com/toggle/
I'm not sure if this is new functionality only for jQuery 1.4 but it appears the toggle function requires parameters.
The following code is correct (demo online - http://jsbin.com/ehate/edit):
$("#calendarLink").live("click", function(e){
$("#result").toggle();
});
You use $.live() only if #calendarLink will be added dynamically later. If it isn't, use a regular click:
$("#calendarLink").click(function(e){
$("#result").toggle();
});
If this is not working for you, be sure to check your #calendarLink and #result elements in your HTML. Make sure the ID values are correct. Mainly, be sure your casing is correct.
Two elements in the same page can't have the same id.
u used
$("#result").toggle();
'I want to toggle the results from a link ...'
So the result elements should have the same class , not id.
The code should be :
$(".result").toggle();
'#' changed into '.'

Categories