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>');

Dynamic iframe contents returns source, not parsed code

First question, so please correct me if this is in the wrong format.
I need to retrieve html for two dynamic elements from a dynamically created iframe, the below code returns "undefined". But I'm probably missing something really obvious.
$("#frame0").contents().find(elementID).html();
I am loading a same domain page into an iframe, two elements in the iframe are created from its jquery, the rest is static content in the iframe. The iframe is created and appended on a button click. The iframe in page looks and loads perfectly.
Below is the relevant code from within my button click:
$("#frameWrapper").append($('<iframe id="frame0" src="' + url + '"/>'));
$("#frame0").bind("load",function(){
var html = $(this).contents().find('#content').html();
var data = $(this).contents().find(elementID).html();
var table = $(this).contents().find(elementID).parent().find("table").html();
console.log(html);
console.log(data);
console.log(table);
});
#frameWrapper is a dynamically added container in the current page.
#frame0 is the actual iframe.
Of the three console.logs in the above code, html always returns the source code which is not the same as the actual view in the iframe on the page, data and table are always undefined, they are the two dynamic elements.
If I remove .html() from the above code, then all three elements are found and returned in the console.log.
I have tried too many things to list, as many answers on here as I can find, including checking all the suggested ones while I was writing this. But some of the ideas include, using plain javascript and adding a timeout to ensure load has completed, always the same response.
EDIT: Added the basic iframe code:
<div id="content">
<div class="wrap">
<div id="elementID"></div>
<table class="table"></table>
</div>
</div>
#elementID and .table are empty in the source and are only populated via a jquery function on load.
EDIT2: jsfiddle obviously it's having issues with Cross-domain policy so it's not really a good example, but it is a start.

Use this:
$("#frameWrapper").on("load", "#frame0", function () {
var html = $(this).contents().find('#content').html();
var data = $(this).contents().find(elementID).html();
var table = $(this).contents().find(elementID).parent().find("table").html();
console.log(html);
console.log(data);
console.log(table);
});
...instead of $("#frame0").bind("load",function(){...
This is called delegated events and should be used since the iframe is dynamically generated.
I don't have a working code to test for your issue, therefore the above is my guess to resolve your problem.

Javascript / CSS issue on displaying site

I'm playing around with building a template I've purchased onto our CMS to see how it displays, and am largely there, but I cannot get the text to correctly display.
This is the template I am using.
Our CMS is custom, and is running here. While based on bootstrap2 in the code, I'm also looking to get it updated to bootstrap3 as part of this.
It is running here: style demo site
Problem at the moment is none of the text is showing, and I can't figure out what is preventing this?

The script needs an id on the body. I tested it on a local copy. That does the trick!.
<body id="cbp-so-scroller">
Otherwise this.el is null in cbpScroller.js
// Slide effect on sections
new cbpScroller( document.getElementById( 'cbp-so-scroller' ) );

You've got this error:
Uncaught TypeError: Cannot call method 'querySelectorAll' of null
Basically means you've not got the required element in the DOM for this function to fire. I think it's having a trickle-down effect with your content (your content loads via JS?)
I had a look at your code and it looks like this is the offending line:
this.sections = Array.prototype.slice.call( this.el.querySelectorAll( '.cbp-so-section' ) );
Do you have the .cbp-so-section element available? If you either remove this line, or put the right element into the DOM, you should fix the issue

How do I append the src attributes to a set of images after they have loaded?

Here is my scenario:
I am having a page with pagination and enhanced with infinite-scroll
The page has a list of items, where each item looks like this in smarty
<div id="link-{index}">
<div align="left"><a href={$url}></div><div alight="right"><img src="" id="{$url}"></div>
</div> <script>imager({$url});</script>
I am using a service to dynamically grab image src for a given URL and append it to the image by defining imager(x){ document.getElementById(x).src = service(x).image; }
Now this works, as in shows correct images along side URLs as long as normal pagination is used. Doesn't work for page 2 onwards with infinite scroll as it uses JQuery and that parses out the imager JS script for each item.
I am stuck with trying to create a callback function for infinite scroll that will do what imager does but after a page is loaded but I am unable to get it to work.
Any tips will be appreciated. Thank you

In the callback for when a new page is loaded, you can do something like this:
$('img:not([src])').each(function() {
$(this).attr('src', service($(this).attr('id')).image);
});
This assumes that the only images without a source are those that were just loaded by the infinite scroller. If the widget provides parameters to the callback that tells it which parts of the DOM were just paged in, you may be able to use that to narrow down further; the second argument to a jQuery selector is the context to search.

Injecting javascript and HTML using AJAX

First of all I would like to say that while this is the first time i post here these boards have helped me much.
With that said, I have got a strange issue regarding AJAX and scripts.
You see, in my web application i used custome JS context menus. Now each of them menus is implemented with specific features depending on the object and if the object exists.
E.x : if we got an upper menu place holder but no upper menu the context menu will have one option which is "add menu".
But say we already have the upper menu the context menu will have different options such as "edit menu" etc...
so far so good, however, say we have an upper menu place holder and no menu and then we added the menu (still no refresh on the page) i need to generate a new context menu and inject it right? so i do just that along with the new menu i just built.
all that code goes into the SAME div where the old context menu script and upper menu place holder were so basicaly they are overwriten.
Now the menu itself is in HTML so it overrides the current code the JS however acts wierd and will show now 2 context menus the old one and the new one even though i overwrite it's code.
I need to some how get rid of the old context menu script without refreshing the page.
Any ideas?
P.S
all the JS are dynamicaly generated if that makes any difference (i dont think it does.)

Well after some head breaking i figured it out..
(the problem not the solution yet) this is the ajax function right?
$.ajax({
type: "GET",
url: "../../../Tier1/EditZone/Generate.aspx?Item=contentholder&Script=true",
dataType: "html",
success: function (data) {
$('#CPH_Body_1_content_holder').html(data);
}
});
now they function uses a page with an event handler, that event handler reutnrs the data as followed response.write(answer) it just hit me that when you use response.write it sends the code after it's been compiled and ran in our case at page Generate.aspx.
so the script will run but not in the page i intended it to run and because of that i cannot overwrite it... how silly of me.
what i think ill do it return the data as an actualy string and then and only then inject the code into the container div.
ill let you folks know if that works out.
cheers and thanks for the advice these forums rock.

No matter what anyone says, do not use EVAL. It's evil and will give you memory issues if used more than a few times on a page.
See my soluition here: trying to call js code that is passed back from ajax call
Basically, create a div with the ID of "codeHolder" and voila. You'll basically want to pass your HTML and JS back to the AJAX receiver (separated by a separator), parse it on the JS side, display the HTML and put the JS Code in your javascriptCode variable.
//Somehow, get your HTML Code and JS Code into strings
var javascriptCode="function test(){.....}";
var htmlCode="<html>....</html>";
//HTML /////////////////////////////////////////
//Locate our HTML holder Div
var wndw=document.getElementById("display");
//Update visible HTML
wndw.innerHTML = htmlCode;
//Javascript ///////////////////////////////////
//Create a JSON Object to hold the new JS Code
var JSONCode=document.createElement("script");
JSONCode.setAttribute("type","text/javascript");
//Feed the JS Code string to the JSON Object
JSONCode.text=javascriptCode;
//Locate our code holder Div
var cell=document.getElementById("codeHolder");
//Remove all previous JS Code
if ( cell.hasChildNodes() )
while ( cell.childNodes.length >= 1 )
cell.removeChild( cell.firstChild );
//Add our new JS Code
cell.appendChild(JSONCode);
//Test Call///////////////////////////////////////
test();
This code will replace all previous JS code you might have put there with the new JS Code String.

Thanks for the replies.
Dutchie - that's exactly what I did. now the thing is the HTML is properly overwritten (I didn't use append I overwrote the entire div) and yes the javascript just keeps on caching...
I tried to disable browser cache and still the problem persists i get multiple context menu per item the more I ran the ajax function...
Jan,
My AJAX function builds a div tag and script tags and places them into another container div tag in the page.
What's suppose to happen is that every time the AJAX runs the code inside the container div is overwritten and you get an updated version.
the div inside the container div is overwritten yet the script tags somehow are cached into the memory and now each time the out jQuery function calls the context menu i get multiple menus...
I don't think code is needed but I will post it tomorrow.
Any ideas?