Listexpander not working - javascript

my website the list expander is not working. I think it might be because I changed the CSS, but I cannot figure out how to make it work.
Sorry the url is [http://hpcommtoolkit.com/Communication_tools.html][2] not the original.
[2]: http://hpcommtoolkit.com/Communication_tools.html

What list needs to be expanded? What code do you use for it?

Not sure what list you are referring to, however there is a fault in your HTML at line 405 with the style tag on the table which you should probably clean up:
style="BACKGROUND-IMAGE: url<img src="//images/afbottomgraphic.jpg"
The second double quote is ending the style tag prematurely. Background-image should be given a url in the form of url(path-to-file).
EDIT: Ok, I see your expandable sections in the new URL. They work correctly in Firefox, but IE8 is generating the following error: "Object doesn't support this property or method listexpander.js, line 69 character 3".
Looking at that line of code, the first thing I can see is that the variable "li" should have a "var" declaration on it to avoid it interfering with any global vars. I would also recommend running listexpander.js through jslint (http://www.jslint.com/) since the syntax has a few oddly positioned semi-colons.

Related

term.js placement always end of body

I am new to javascript and have problems placing this element.
I can open terminals and write to them no problem. However everytime I create one it is just appended to my body at the very end.
according to this example:
https://gist.github.com/steinwaywhw/9920493
I could set a parent during the open method but I use this and it just still appends to the end of the body.
This is the method I use:
term.open($("#myterm").find("div")[0])
I might be overlooking really simple but I cannot seem to find it :/
There is a bug with term.js and jquery selectors, please test with getElementById like :
<div id="term"></div>
term.open(document.getElementById("term"));
it work for me.
Pascal

HTML 5 dataset issue

Can anyone tell me why the following line of code throws and error
$('#id').dataset.assoc
and these two do not?
$('#id').data("assoc")
$('#id').dataset.file_id
Is it something to do with the word assoc?
As mentioned in the comments by adeneo and Banana, the first and the last should not work. Attempted both in a jsFiddle and both threw errors. This is because .dataset is not within jQuery. You must have code internally or externally adding dataset to that jQuery object.
the following are similar syntax but should work (where with only the details you gave, your code shouldn't work):
document.getElementById("id").dataset.assoc
$("#id")[0].dataset.assoc
This is due to data-* attributes in HTML5.

JavaScript innerHTML links iOS browser

I am struggling to get links to become clickable when using JavaScript innerhtml, or even jQuery html or append.
I have tried following this jquery .html() VS innerHTML() and asking a number of questions, but it seems all suggestions have no worked.
How can I put a link using this?
innerHTML("<a href='http://www.google.com'>google.com</a>");
and onclick
innerHTML("<a href='#' onclick='loadlink('http://www.google.com');'>google.com</a>");
I have tried to do it both ways, and it just is not working.
.html() is a utility function provided by jQuery, so if you are using a jQuery wrapper to set the value then you need to use it
var el = jQuery('#myelementid');
el.html("<a href='http://www.google.com'>google.com</a>");
.innerHTML is a property of the dom object, so if you have a dom element reference then you need to use it. Note: It is not a function it is a property
var el = document.getElementById('myelementid');
el.innerHTML = "<a href='http://www.google.com'>google.com</a>";
The issue was z-index it seems that you can't have a z-index:-1 as it will not allow you to click anything in that div, removing it fixed my issue, so the issue was not JavaScript at all but rather CSS. It is interesting and a good note, not to sometimes second-guess yourself when you know that your code is not wrong, but to strip it back and look at the CSS and other parts of your site.
It took three days for me to stop thinking about the JavaScript. How I came about this, was because iOS could not debug the issue; I went to Chrome and coded the part in question, and it worked fine, once I added the same styling and CSS it stopped working, removed a few divs and it worked again, so the only thing to look at was the css, i could not see anything wrong, but then I thought, wait a second what does z-index do? it moved the div in front of another div, -1 could mean that it is behind the body, and there for it can be seen, but not click.
It was the only thinking I could come up with and it fixed the issue.

Cannot set breakpoint on a particular line of IE

I am experimenting TinyMCE editor to set its content on click of an hyperlink. For this I used their own demo page and tried adding a link their. But clicking on link did not set the content of the editor. So I went on debugging it in IE9. I tried putting breakpoint on the line, but surprised - I was able to toggle breakpoint everywhere, except that line.
snapshot here: http://s15.postimage.org/a7ntjabfv/Tiny_MCE_Debug.png
Why is this happening?
Actually, now that you mentioned it...I figured what happened.
The line where you're trying to set the breakpoint looks like invalid html, so IE behaves correctly.
In your example, html attributes (like the onclick you have) are delimited by double quotes ("). But you also have another string delimited by " inside the attributes, which leads to a syntax error. To get around this, you must delimit your strings by single quotes: ' . So the solution that you found is correct.

Regex behaving differently in IE6/IE7

My HTML is something like this :
<select>
<option>ABC (123)</option>
<option>XYZ (789)</option>
</select>
What I'm trying to do is: using JQuery and a regex, I replace the "(" with <span>( here's my JQuery line:
$(this).html($(this).html().replace(/\(/g,"<span>("));
It's working as intended in Firefox, chrome and safari, but (as usual) not behaving correctly on IE6/IE7 (the text after "(" just get removed)
Any thoughts ?
PS: I'm doing it this way because I need "(number") to be in a different color, and <span> in a <option> is not valid.
I don't think it's the regex breaking. The below works fine in IE7:
alert("(test".replace(/\(/g,"<span>("));
What's probably happening is that IE6/7 have no clue how to render a span inside an option and just fails to display anything.
You're saying that span in an option is not valid, and yet that's exactly what you're trying to add. Invalid code isn't prettier just because it happens to be valid at load-time, if you know you're going to mess it upp later. So really, if that's your only concern, do add this span declaratively in your HTML, rather than injecting it later.
But if you want to fix this, I think it might help if you rewrite the regex to cover the entire tag. In a lot of cases, IE doesn't let you just change the HTML to whatever, but will use its own internal representation to fix up the code, according to its own preferences. When you write a table, for instance, IE will always internally infer a tbody, even if there isn't any in the code. In the same manner, if you inject a <span> and there's no </span>, IE might insert one by itself. To get around this, make sure you inject the code in its entirety in one go:
$(this).html($(this).html().replace(/\((.*?)\)/g,"<span>($1)</span>"));
I don't have IE7 but in IE6 the following
javascript:"<select><option>ABC (123)</option><option>XYZ (789)</option></select>".replace(/\(/g,"<strong>(")
yields
<select><option>ABC <strong>(123)</option><option>XYZ <strong>(789)</option></select>
And gets correctly displayed (aside that <strong> has no effect). Also works fine when using <span> instead of <strong>

Categories