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.
Related
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
I'd like to append some data to the HTML element, so I've used the following code:
$("#bookListDiv").append(data.HTMLString);
and everything has working, but then I'd like to add a fadein animation while displaying this element, so I've modified it to:
$(data.HTMLString).hide().appendTo("#bookListDiv").fadeIn(1000);
Animation is working on Chrome but on Firefox I see the following error in console:
TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.
I'm using jquery 1.8.2.
Could you advise me what can be wrong? I supposed something with data, but in the first approach everything is working correctly.
You will also get this if you call getComputedStyleon <html>. It should be common sense, but I had a recursive function that was bubbling up from inner elements with this function and giving the error when it ended up at the document root.
I've found the solution by adding the delay before fadeIn function.
Code after changes:
$(data.HTMLString).hide().appendTo("#bookListDiv").delay(100).fadeIn(1000);
As I've noticed the number in delay is should be adjusted to the size of data, in my case for 7KB json data it is working, but I've started from 1000.
This problem was wontfixed in jQuery: http://bugs.jquery.com/ticket/12462.
The workaround is to wrap your HTML in a single element before giving it to jQuery.
Try making sure you're using correct markup syntax as well.
I'm using AngularJS to dynamically change the disabled button state while at the same time hiding/showing a button... this made Firefox freakout with the "Window.getComputedStyle does not implement interface Element" error (but Safari/Chrome/IE).
In my case the real issue was that the markup I was working with did not have matching opening/closing tags: <button ng-disabled="!x">Click</div>
Once corrected: <button ng-disabled="!x">Click</button> things were fine.
Strangely, both previous answers were partial solutions though: wrapping a $timeout around my hiding/showing as the first-posted answer suggested worked (but the delay had to be a substantial amount) and wrapping the element in an additional element worked as well but was not the implementation I needed (and created other issues).
I've tried but simply cannot get a code sample working to reproduce this issue.
I've set up the CLeditor on a site I'm working on. Currently I'm setting it up so that as you type and edit within the editor, you can see a live preview of the results just above it, a lot like what you get when typing a StackOverflow question, though much more basic.
It works by simply copying the inner HTML of the iframe contents to another place on the page. However I've run into an annoying issue. When I use the alignment buttons (left, center, right), it adds the attribute align="right", for example, to the selected text. While it works in the editor, it does not work on the page itself, probably because that attribute is pretty much obsolete.
...
I actually figured out how to get around this issue while typing this question. Still, I'll post this question with my solution. Plus I have a relevant question to add to this.
Originally I tried applying the following CSS to the page:
div[align="right"] {
text-align:right!important;
}
This worked for initially loading the data onto the page, but while dynamically changing alignment in the editor, the live preview was not reflecting the changes. I thought at first that this was because the styles were applied at load time only.
Well, that was a brain fart because I know better than that. The real problem was that I was selecting a DIV element and the align attribute isn't necessarily applied to a DIV. Changing div[align="right"] to *[align="right"] works perfectly.
However, even though I found a workaround for this specific issue, I still can't figure out how the cleditor builds the HTML output for the iframe. Where does the align attribute come from in the code and how does it know to put it (and all of the other elements/attributes) into the HTML? If I had a way of manipulating this, I could simply tell it to use inline CSS for the alignment rather than the deprecated align HTML attribute. Please note that I do not wish to enable the cleditor's built-in "useCSS" feature.
Thanks for any information you can share, and please do not downvote this question just because I already solved the initial problem. I want this to be able to help others if they run into the same issue. (I'll also post my answer as an answer).
Applying the following CSS to the live-preview of the page works perfectly:
*[align="right"] {
text-align:right!important;
}
Don't forget to do the same for left and center as well.
I am trying to build a script with javascript and jquery that has one element react when the mouse is hovered over another element. I've had some great help getting to this point but I think I'm messing something up here. I have it working in one direction but not the other. In the direction it is working, there is text inside an anchor element. In the direction it's not working there is an image inside the anchor. That may be messing me up, not sure. I've posted a simplified version of it all here: http://jsfiddle.net/vZAYY/14/
It seems like the javascript isn't finding the li element (it returns -1)
One other thing that is odd is that on the full site (which I'm running locally) neither works, though to build the js fiddle I just copied the code directly. It's on a site with drupal and there the script is returning -1 from hovers on both elements.
Any suggestions?
Your code is a bit of a mess but if something returns -1 it has to be the index() function. Can't say for sure but your problem could be here:
var x = $(this).parent().parent().parent("li").index();
$(".mainNavigation ul li:eq(" + x + ")").addClass("active");
I'm not sure parent().parent().parent('li').index() is the best idea. I mean, index() takes a context that you can specify. It's a good idea to cache your selectors beforehand.
In the second line instead of :eq I would use eq() which will be faster and more predictable.
I've got few divs on my website - on the load I want some of them to be hidden, some shown. I am hiding the ones I don't want like this:
$(".divToHide").hide();
It works well in Chrome, Firefox, IE8 an Opera... It doesn't in IE6 (I haven't tested on previous version yet...) - when I load the page all the divs are hidden properly. When I click a link that makes one of them visible it appears correctly. The problems shows when I click on a different link that's supposed to hide the first div and show another. The text of the first div is hidden, but the image stays and obstructs the newly shown div. I'm pretty sure it's a bug - when I zoom in or out of the page the divs that were supposed to be hidden disappear suddenly - they're only visible when I load the page.
Is there a way around it?
EDIT: I'm using jQuery v1.3.2
EDIT: Unfortunately the solution of using addClass to add css class that states display: none doesn't really work - it seemed like it did at first, but the problem is still there.
UPDATE: The js file I wrote can be found here, while the html here. The problem I have is that when you go from one portfolio to the other, the image of the first one stays there obstructing the next, even though it should be hidden (text underneath changes correctly). Wrong disappears when you try to zoom in/out of the page.
I used to hide all portfolios using $("#divId").hide(), but as was pointed out below, I now use $(".classToHide").hide().
UPDATE: The problem is solved on IE8 - I forgot to include the standards mode declaration... However, on IE6 it's still the problem.
You're hiding multiple div's by using an ID selector?
Try giving those div's a class "divToHide" and then use:
$(".divToHide").hide();
Maybe IE8 handles duplicate id's in another way than those other browsers..
Just a thought: you're not using an old (pre-IE8) version of jQuery, are you?
Edit: No, grycz is using the current version.
Edit: simplified to use toggleClass()
You could try doing it manually, like toggling a css class called "hidden." It might look something like this:
function myToggle(element_id)
{
mydiv = $('#' + element_id);
mydiv.toggleClass("hidden");;
}
And your css file would have:
.hidden
{
display:none;
}
I haven't tested this, but this is the kind of workaround I imagine you'd want to think about if this is, indeed, a bug in jQuery/IE8.
Are you sure that hide() function call is even getting called on the page load? Try putting an alert('hi') right before that function call, and see if that happens in IE8.
try
$("#divToHide").css('display:none');