We Keep Coding

JavaScript DIV Editing Destroys Functionality of Other Elements

So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?

The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).

Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');

Issue in making appear the div in the foreach loop

Here is my Fiddle
Where i have
<div id="mulitplefileuploader" class="fileuploader">Upload</div>
<div id="status"></div>
in the html. In the Body i have the script that was in the fiddle and i have $(".fileuploader").uploadFile(settings); in the document.ready. All this will have only on file upload div,
If i am using a for loop say 5 times. It is not working I mean the div itself not appearing. As the for loop may have any count i can run the div in the for loop. But I should not have the same script in my html page (Because of few restrictions).
What shall i do to achieve my result. Allowing multiple div according to the html.
I tried here in this fiddle but it didn't succeed. How can i do this.
Note : All the upload should work, the js don't know how many loop will appear in the html
Update To run the code Here is the chop and you shall try it here in the display at html mode.

#reply to your comment: alright i see. If you take a look into the source code of the plugin, it has the missing .each to iterate all the retrieved selectors. so you can simply add one for it
$(".fileuploader").each(function(){ $(this).uploadFile(settings); });
http://jsfiddle.net/L08p1upt/4/

getElementsByClassName not finding uls

I am unable to get my code working correctly in Chrome however when I paste my code into JSFIDDLE it works correctly. I am trying to get all ul tags in the document using getElementsByClassName and then all lis within the one of the uls. When I use getElementsByClassName("ul") it is finding none in Chrome, however if I remove either one of the two divs before the uls getElementsByClassName("ul") finds all of them so the divs seem to be what is breaking the JS.
I was unable to reproduce the problem in JSFIDDLE as the code worked correctly there but here it is: http://jsfiddle.net/zTP9H/
var sElements = document.getElementsByClassName("HeaderWrapWide");
var catOne = document.getElementsByTagName("ul");
alert("number of ul: " + catOne.length);
var liTags = catOne[3].getElementsByTagName("li");
alert("number of li: " + liTags.length);
Thanks
Alex

are you sure you are running this javascript AFTER the html is added to the page? jsfiddle probably renders html/scripts in a different way to your webpage and hence that is why it works there. If your javascript is in the head part of your HTML you could well have this behaviour - try using jquery on document ready function http://api.jquery.com/ready/ or move your JS to the bottom of the page
I cant see anything wrong with your code

I guess you have the above JS code within your head tag. So wrap it with Immediate function invocation
(function () {
//ToDos
})();
JSfiddle

If you want to execute the code in the <head></head>
like you have it, then try wrapping your code in a
function like this if you don't want to use jQuery.
Also, this doesn't work in IE so check caniuse.com/#search=DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
your code here.
})

Jquery toggle mobile menu (remove href javascript)

I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.
The current website is a Wordpress website so the menu structure is generated by WP.
Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.
I use this javascript for adding the spans with the desired icon. I've managed so far.
http://jsfiddle.net/9Dvrr/9/
But there are still 2 problems i can't seem to figure out.
Remove the href from the "a" when the "li" has a "ul" child.
This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why
I'm stuggeling with this for a while now and was wondering if someone could help me with this.

In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.
As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.
http://jsfiddle.net/wzzGG/

Your first problem can be solved with the following:
$.each($('#menu-mobiel li'), function(i, value) {
var $this = $(this);
if ($this.has('ul').length > 0) {
$this.children('a').attr('href','javascript:');
}
Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?

jQuery select list removes all options

I have a <select> list, which has been populated with several options, but want to remove those options to start again.
I am using jQuery and have tried the following:
$("#selectId").length = 0;
But this seems to have no effect.
Part of my problem is that I am using Firebug to debug the JavaScript, but the debugger does not break at the breakpoint, so I cannot see what is going on. Should it break when the JavaScript is within the <head> of my HTML file?

this would do:
$('#selectId').html('');

This works too.
$("#selectId option").remove();

$("#selectId").empty(); works for me.
The $("#selectId option").remove(); removed the select from the DOM.
Currently using jQuery JavaScript Library v1.7.1

The fastest way to accomplish this:
$("#selectId").empty();
Here are some tests:
http://jsperf.com/find-remove-vs-empty
I take no credit for these tests.
See this stack overflow question: How do you remove all the options of a select box and then add one option and select it with jQuery?

$("#selectId").options.length = 0;
That won't actually work as written because it's using a jQuery selector. It'd work if you used a straight DOM getElementById on the select list, though. Either AKX's or d.'s responses will set you right.

If without jquery:
javascript SELECT remove()

Try This for Multiple Select Drop Down.
$('#FeatureId').multiselect("deselectAll", false).multiselect("refresh");