We Keep Coding

How to scroll to bottom of the ul?

I have developed one application using PhoneGap. In my application I have displayed a number of elements in a listview using ui li. Here I want to scroll to the last element in list. For that i have used following code,
$('#dates li').last().addClass('active-li').focus();
$('#dates li').last().focus();
I have used this one also,
$('#dates').scrollTop($('#dates li:nth-child(14)').position().top);;
extra class is adding but focus is not working.

Add the tabindex attribute:
<li tabindex="1"></li>
http://jsfiddle.net/DerekL/GEsmb/
Because you can not focus on li. It's not a text field or button or something like that.

You can use this code:
$(document).ready(function(){
$('body').scrollTop($('ul li').last().position().top + $('ul li').last().height());
});
Fiddle: http://jsfiddle.net/praveenscience/GEsmb/1/

Try scrollTop:
$('#dates').scrollTop($('#dates').height())
or:
$('#dates').scrollTop($('#dates')[0].scrollHeight);
if your list has lots of content.

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!

Jquery find next (specified) element not working

I am trying to find the next div using Jquery. Here is the code:
$('.menu-item').hover(function() {
$(this).stop(true, true).addClass("menu-item-hover", 300);
$(this).next('div').stop(true, true).fadeIn(300);
}, function() {
$(this).stop(true, true).removeClass("menu-item-hover", 300);
$(this).next('div').stop(true, true).fadeOut(300);
});
<div class="menu-item"><h1>Media</h1></div>
<div id="tooltip-media">Sights and sounds from Cambodia</div>
<div class="menu-item"><h1>About</h1></div>
<div id="tooltip-about">Who in the world is the Phillips Family?</div>
Simple. The toolip-* divs are hidden in css. I want the next one in the code to show on hover of the menu-item. I have checked other questions and none of them work for my case. I am using both Jquery and Jquery UI. Thanks for any help.

try this
$(this).parent().next('div').stop(true, true).fadeIn(300);
in your example , you are trying to find next div but it is not sibiling of menu item.
that only it did not work. traverse to parent and find next div it will work.
parent() , next()

First of all, .next() only grabs the immediate next sibling, it won't search through all sibilings. In order to do that, you would need to invoke .nextAll('div'). But even this function would not help you here, because that <div> nodes you are looking for are not contained by the same parent element.
You should go like
$( this ).parent().next( 'div[id^=tooltip]' ).stop( true, true ).fadeOut( 300 );
Reference: .next(), .nextAll()

how to fade in items sequentially while using jquery templates

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

jQuery CSS Selector combined with "this"

I'm trying to figure out if something like this would be possible. We are given that HTML structure
<a href='#' class='anyLink'>
<!-- here goes some content-->
<div class='childElement'><!-- here goes some content--></div>
</a>
I am not able to use ID's because there are many links and it's not defined how many more are to come. So my question is, do you guys know a way where I can do something like this :
$('a').on("click",function(e){
$(this +"div").val(); // for example.
});
I want to select a children element of that anchor that has been clicked or want to get the value of the children element. I also don't have any ID's of the children elements and I am trying to select things via CSS Selectors as td:nth-child(4).
Could anybody tell me if this is possible ?

try
$('a').on("click",function(e){
$("div",this).text(); // for example.
});

$('a').on("click",function(e){
$(this).children("div").eq(0).html();
});

You are looking for a function called .children().
But you can also try something like this:
$('a').on('click', function( e ) {
$('div', this).val(); // Each div child of this element
$(this).children('div'); // Each div child of this element
});