Develop Reference

targeting a li with javascript without a ID

I have a mobile nav, that looks like this
<ul id="mobile-menu" class="menu>
<li class="normal-link">link-1</li>
<li class="dropdown-link">link-2
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="dropdown-link">link-3
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="normal-link">link-1</li>
</ul>
I cant change the html/wordpress generated code, but I can add css and javascript. So is there a way for me to get next to the dropdown-link's a image that will let the submenu free. if the image is pushed the image will change. if pushed again it will go back to the normal image and the dropdown dissappears again?
I am mostly looking for answer for the problem with of javascript on the dropdown link's but just so you know what i want to do with it.

This question is so very, very vague. But I guess you're looking for the nth-child() selector.
See the docs here for more information. Target your 'mobile-menu' ul, and use nth-child to select the li elements within.
My big question would be, why can't you change the HTML? If it's Wordpress, you can modify the template to change the HTML.

You question is not really clear but if you want to retrieve an element without using id, first you may use their classes
var myClass = document.getElementsByClassName("classname"); //returns a nodeList like array
myClass[0] //first element with "classname"
You may also use tag names
var divs = document.getElementsByTagName("div");
divs[2] //third "divs"
You may also use querySelectorAll, this works pretty much like CSS selector and also returns a nodeList
var qs = document.querySelectorAll(".class");
I hope this helps

You could add a class and use the Jquery class selector: $(".class-name") to target a specific <li>

How can I change the style properties of this element?

I'm trying to make a drop down menu for the mobile version of a website and can't seem to figure out what I'm doing wrong. I have the initial position where I want it (fixed in the upper right corner of the screen) but it does nothing when you click on the Menu tab.
Here's my JSFiddle
<div id="mobile-nav-wrapper">
<ul id="mobile-nav">
<li>Main Menu</li>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Register</li>
<li>FAQs</li>
<li>Facebook</li>
</ul>
<li>This Page</li>
<ul>
<li>Some Text</li>
<li>Who?</li>
</ul>
</ul>
<span id="mobile-nav-button" onclick="pullmenu('#mobile-nav-wrapper')">Menu</span
</div>

Your JavaScript function isn't a global. You have configured JSFiddle to wrap it in an onload handler. It isn't accessible outside the scope of that function.
Don't use intrinsic event attributes, they depend on globals. Bind your event handlers with JS instead.
span isn't an interactive element. It doesn't appear in the focus order so has serious accessibility implications when you depend on people interacting with it. Use a button instead. Apply CSS if you don't like the way it looks.
<button type="button" id="mobile-nav-button">Menu</button>
<script>
document.getElementById('mobile-nav-button').addEventListener('click', function (evt) {
pullmenu('#mobile-nav-wrapper');
});
function pullmenu(etc) { etc }
</script>

JavaScript
<script>
function pullmenu(menu) {
var x = document.getElementById(menu).style;
if (x.top == "-15em") {x.top="0";}
else {x.top="-15em";}
}
</script>
HTML :
<span id="mobile-nav-button" onclick="pullmenu('mobile-nav-wrapper')">Menu</span>
Example

Create a URL based on Selection in <ul> <li>

I am trying to build url based on a user selection from a multilevel list.
The user selects four options which in turn will create the url required for retrieval of a document.
Example:
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
So I would select the Report Name > Year > Month and this would build a url which equals the path to the file.
e.g. http://www.example.com/Report1/2010/Jan
Does anyone perhaps have any ideas as to how this can be done.

Here is an example of $(this) being used to get the value of what was clicked. I'm using JQuery in this example.
Had to add an id to the year value. You don't HAVE to do it this way, you can use the jquery selectors to get the proper value. It is just a lot easier.
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li id='2010'>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
The javascript looks like this:
$('#2010 li').click(function()
{
var year=$(this).parent().parent().attr('id');
var month=$(this).text();
console.log(month+' '+year);
//this will show you Jan and 2010 in the log. You can use this variable to append to a URL string.
});

Ok there are several options, I would suggest using javascript.
So, basically, you would check if an <li> was clicked and if it was, then add a certain value to string, the redirect the page using that built string. Here is an example of what I mean:
http://jsfiddle.net/35XDn/4/

JQuery Mobile UL List Still Not Working fro Dynamic List

Has anyone come up with any solution to the JQuery Mobile UL List View?
I'm currently using JQuery Mobile 1.1.2 Alpha, and the bug I am referring to is an old one:
jQuery Mobile proper way to initialize a listview
My list view looks like this:
<ul data-role="listview" id="store-info">
<li>My First Store</li>
<li>48 Big Oak Lane </li>
<li>Stamford</li>
<li>CT</li>
<li>06903</li>
</ul>
I have tried to use:
$( "#store-info" ).listview();
and also this:
$('#stores_main_view').trigger('create');
on the following
<div data-role="content" id="stores_main_view" class="content ui-content" role="main">
<ul data-role="listview" class="ui-listview">
<li>
<form class="product-form">
<ul data-role="listview" id="store-info">
<li>My First Store</li>
<li>48 Big Oak Lane </li>
<li>Stamford</li>
<li>CT</li>
<li>06903</li>
</ul>
</form>
</li>
</ul>
</div>
Both yield the same error when trying to create a list dynamically:
Uncaught TypeError: Cannot read property 'jQuery1710409190776059404' of undefined
Is there any good solution to this problem yet?

The jQuery mobile code (in the method _createSubPages, exactly the one you quoted in the comment) is expecting created controls to be in a .ui-page.
Simply adding the class on the page where the control resides before calling trigger('create') fixed the problem for me.
$('#page-id').addClass('ui-page')
It also works if you do a
$.mobile.loadPage('#page-id')
Hope this helps.

Try this:
$("#nav-panel").load("nav-panel.html", function () {
$(this).trigger("create");
});

Is my slide-to-anchor jQuery routine a correct use of JavaScript, or is there a better way?

I'm currently working on a project with a one page design that'll slide up and down between sections on an <a href> link...
Currently, i have it written as follows:
<ul>
<li>home</li>
<li>artist's materials</li>
<li>picture framing</li>
<li>gallery</li>
<li>contact us</li>
</ul>
...with the most relevant portion being the links:
<a href="javascript:void(0)" onClick="goToByScroll('contactus')">
Then in a .js file I have:
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
Is this ok? Or should this be done a different way?

A better approach would be to not use anchors in this case, you can simplify your markup and code like this:
<ul id="scrollMenu">
<li rel="top">home</li>
<li rel="artistsmaterials">artist's materials</li>
<li rel="pictureframing">picture framing</li>
<li rel="gallery">gallery</li>
<li rel="contactus">contact us</li>
</ul>
And then this script:
$(function() {
$("#scrollMenu li").click(function() {
$('html,body').animate({scrollTop: $("#"+$(this).attr("rel")).offset().top},'slow');
});
});
This adds a click handler to your <li> elements telling them to use their rel="" property to know where to scroll to. Just change your CSS around to point to the <li> elements instead of <a> and you're all set.