The jQuery addClass function quits my script - javascript

Uhm, I've got this script but it does not work.
It's all about this line: document.getElementById('thetest').addClass('superspecial');
As soon as the class should be added (but it isn't) the whole script quits...
Does anybody know why?

Should be:
jQuery('#thetest').addClass('superspecial');
or
document.getElementById('thetest').className += ' superspecial';
document.getElementById doesn't return a jQuery element.
That's why you get has no method error.

I know this is a bit of an old post by now, but I ran into it myself and I used a method that wasn't named before to solve it.
Instead of using
document.getElementById("name").className+='superspecial';
I used
document.getElementById("name").classList.add('superspecial');
After some research it seems that this is a fairly new way to do it that isn't supported in a lot of browser versions other than the latest. Browser requirements to use this functionality are as described here:
https://www.w3schools.com/jsref/prop_element_classlist.asp
I don't know the exact difference between the two solutions, but it seems to me that getting the classList and adding to it with an existing function would be the preferable option. Especially as += is a general method of adding things to eachother that doesn't always have to work the way you expect it to.

Related

interact.js drag/drop referencing div

So, this is maybe just a question for interact.js users or I am missing something completely..
I was looking for a javascript library that provides me with drag/drop/scale/rotate and touch functionality for all those given functionalities. So, I stumbled upon interact.js, yet I seem to have a problem referencing elements while using the onDrop method:
I'll just take the code of the interact.js page, which I'm providing you here: http://jsfiddle.net/Zyy2N/2/
The part that is making problems is:
$(event.relatedTarget.id).hide();
which doesn't do anything, yet also doesn't throw any errors. More so:
$('#yes-drop').hide();
works, so does:
console.log(event.relatedTarget.id);
which returns the id as expected. Is this an error?
Solution: One should actually use the correct syntax if one wants code to run correctly...
$('#'+event.relatedTarget.id).hide();
This would actually be a correct and working solution :
http://jsfiddle.net/Zyy2N/3/
Sligthly better:
$(event.relatedTarget).hide();
http://jsfiddle.net/Zyy2N/8/

Take elements with class inside iframe

I have several iframes on the page. There are some elements with classname test inside of them. I need to set any style to them.
When I have only one iframe, I can use next construction:
$('#iframeId').contents().find('.test').css({background: '#f00'});
But I have several iframes, so it would be great not to set concrete iframe and use construction like:
$('.test').css({background: '#f00'});
But it doesn't work, of course.
I used native getElementsByClassName before, but it doesn't work in IE8, where defect appears.
It may be stupid question, but.. Is there any construction like:
$(getElementById('something')).css({background: '#f00'});
It would be very helpful. I mean, wrap JavaScript object with jQuery and then use jQuery methods with them.
Update: I solved this problem with next construction:
[].forEach.call(document.getElementById('something').querySelectorAll('.test'), function (el) {
el.style.backgroundColor = '#f00';
});
But it's still doesn't work for IE8.
You should try some thing like this
$("iframe").each(function(index){
$(this).contents().find('.test').css({background: '#f00'});
});
Hope this will help you.
You may be running into one of two issues:
1) You are generally not able to modify the contents of iFrames returned from external domains, though that may not be the case here. If your iframes are pointing within your domain you should be fine.
2) ie8 has know problems with the "innerHTML" property, which jQuery's .css may rely on. instead, try using DOM methods:
document.getElementById("yourIframe").contentWindow.document.body.getElementById("innerIframeElement").setAttribute("style", "background:'#f00';"

How to find a form element inside multiple frames using jquery

I am working on a website that currently uses the old style frames. I want to go through a replace some javascript DOM calls because I am running into cross-browser issues. This is what I would like to replace.
window.parent.frames['topdisplay'].document.FORMSV2DISPLAY.action = 'what ever action';
In the above code my problem is that the 'document.FORMSV2DISPLAY' part doesn't work in IE I have to replace that part with document.form(0) and then of course neither of those work correctly in Chrome or Safari.
I would like to use jquery to find the form named FORMSV2DISPLAY and then perform my usual actions and submits.
I have tried things like
$(this).find('FORMSV2DISPLAY').action
$(parent).find('FORMSV2DISPLAY').action
$('topdisplay').find('FORMSV2DISPLAY').action
none of these return the same thing as the javascript DOM calls I am trying to replace. I am very new to jquery and help or understanding is greatly appreciated.
to set the action:
$('#topdisplay').find('#FORMSV2DISPLAY').attr('action', 'whateveraction');

Trying to read styleSheets returns undefined

I've searched for an answer and no solution seems to fix this problem, so hopefully stating it specifically will help me find a solution.
I'm trying to read cssText of the first stylesheet using document.styleSheets[0].cssText, but it always returns undefined. I do have a stylesheet and it's visibly noticeable, but JavaScript doesn't seem to recognize it.
This did, however, work when I included the stylesheet within the page using <style>. I don't see why this would change when using <link>, though. Not only is it placed before the script, but it even returns undefined when using javascript:alert(document.styleSheets[0].cssText) in the omnibar after the page is fully loaded.
Thanks for any help.
Edit: This applies to any method with document.styleSheets[0], including those of which are supposed to work on multiple browsers and have worked for me prior to using <link>. For example: document.styleSheets[0].cssRules[0].selectorText
According to quirksmode.org, document.styleSheets[n].cssText is only supported in IE.
The form
document.styleSheets[n].cssRules[m].cssText
seems to be more widely supported, so you could just loop over that and build a string from the individual rules. (Although you have to replace cssRules with rules for IE).
I thing that this answer is out of time, but it could be useful for someone else.
The result can be "undefined" due 2 different reasons:
a) In some browsers, the property "cssRules" does not work (in accord with http://www.javascriptkit.com/domref/cssrule.shtml, only for supported in NS/ Firefox). For the other browser, you should use the property "rules", instead.
You can solve the problem using something like:
if (document.styleSheets[0].cssRules)
crossrule=document.styleSheets[0].cssRules[0]
else if (document.styleSheets[0].rules)
crossrule=document.styleSheets[0].rules[0]
to extract the rule and, afterwards, to extract the name of selector:
document.styleSheets[0].cssRules[0].selectorText
b) After the overpassing of the issue a), you may have another problem: The rules that starts with a #, like #import of #font-face, as considered as rules. However, their "selectorText" is undefined. So, you must have a way of skip them. I am working on it, right now. But I have not found yet a solution. Anyway, it is an help to know way it is happening.
Hope this helps

Must I specify endding tag with jquery.append()?

I am studying somebody else jquery script, and I noticed he is opening a tag without closing it, but it also seems that browsers does not care (Not yet tested with IE)
it is written :
$('#mydiv').append('<ul>')
But there is nowhere a
.append('</ul>')
The script does not close the list, but browsers do it automatically (I just did an 'inspect element' in the browser).
Is that a 'legal' behavior, or one should always close a tag in a javascript autogenerated content ?
To do it properly, you should be appending:
$('#mydiv').append('<ul></ul>')
Yes browsers will handle it (specifically the .innerHTML implementation handles it, not jQuery), at least the major ones, but why not be safe in all cases and use valid markup?
$('#mydiv').append('<ul>')
...still calls .innerHTML, not createElement, only in $('<ul>') is document.createElement() called. As I said originally, the browser handles it with .append(), not jQuery and not document.createElement (which doesn't take syntax like this anyway).
You can see test/play with what I mean here
Short answer: you should.
Long answer that lead to the short answer:
When you say .append('<ul>'),
or even .append('<ul></ul'), behind the scenes jQuery calls document.createElement and the browser knows what to do.
It's not like jQuery actually puts that string of HTML anywhere, but rather parses it and creates the necessary DOM elements
UPDATE-
As Nick pointed out, this might not always be the case. Relevant source: init
If you pass it just ul, it just calls createElement. If the html string is more complicated, it will go into buildFragment which is more complicated than that.
Based on this, I would say the best/fastest way to create a single element thru jQuery, is to do something like
$('<ul>').appendTo($target);
UPDATE 2-
So apparently jQuery only calls createElement in some methods, but append ends up calling clean which has a regex that closes tags. So either way, you're safe, jQuery saves you as usual.
Relevant source:
...
} else if ( typeof elem === "string" ) {
// Fix "XHTML"-style tags in all browsers
elem = elem.replace(rxhtmlTag, "<$1></$2>");
...
UPDATE 3- So it turns out jQuery doens't fix anything for you when you call append, and it just injects the string into a temporary div element. Seems like most browsers know how to deal with the HTML even if not closed properly, but to be save it's probably best to close it yourself! Or if you're feeling lazy, do something like .append($('<ul>')) which doesn't use innerHTML

Categories