jQuery is designed to be used in HTML pages with JavaScript.
SVG uses the same DOM Level 2 as HTML but is XML-based and specifies ECMAScript.
What problems could result from using jQuery with SVG? Would it be preferable to embed such SVG as an element in an HTML document?
Note, I'm not referring to the "jQuery SVG" drawing library which provides for manipulation of an SVG element in an HTML document as a graphics port using jQuery syntax. What I want is to use jQuery selectors and event management on SVG elements, with the SVG root maybe being inside HTML or maybe not.
Trying it out, selectors seem to work but other things don't. The $( function() { } ) idiom to initialize the page doesn't work because SVG only passes an SVGLoad event to the top <svg> element. $('svg').bind('SVGLoad', function(){}) does work, though.
Dynamically adding elements with .append puts them in the DOM such that they don't get rendered, at least on Firefox. The phantom elements remain invisible even after the document is re-rendered including an element dynamically added without jQuery. $().attr(key, value) may change an attribute but not update the onscreen display.
It all seems unfortunately broken. More features work once it's embedded in an XHTML document. But defects such as the above remain and it's probably better to use another framework. Maybe give jQuery SVG another look…
Related
As a part of Automation testing, I want to hover over this node. which has a complex source code. You can find the code here
. Can someone please say the code which can hover using the syntax .hover(Selector(?)) using TestCafe.
Thanks in advance!
For now, you can select nodes in svg only if it's inserted into the HTML document via the <svg> tag. TestCafe does not support selecting elements in an svg that is imported from a separate document via the <object> tag.
There are multiple ways to select an element in TestCafe using Selector. To do that, you need to identify the element's distinguishing features. These might include the element's id, class, attributes, position in the DOM tree or relation to other elements. Then you need to create a Selector based on one of these features.
For more information on TestCafe selectors see our documentation.
I am building a image slider with custom html elements.
It is supported by the most of browsers but there is also an library for those that doesn't "document-register-element.js"
It works as expected.
The question i have is, is this is valid?
For example i have this custom element in HTML
<cp-slider></cp-slides>
In the javascript it is registered as an HTML Element
document.registerElement('cp-slider', {prototype: proto});
Here https://validator.w3.org/
it shows is as an error. But it doesn't check the JS of the file.
So should i avoid custom DOM elements?
Or in the "real validation (by google perhaps for SEO)" it wont be an issue?
Thank you!
It's bound to show an error in the validation site because it is likely only checking the standard HTML syntax. You shouldn't necessarily avoid custom DOM elements, they're very useful in some cases. The framework AngularJS allows you to smoothly define such custom elements (known as directives). This may or may not affect your SEO, depending on what is hidden. Google supposedly can infer some details, but you'll have to see what happens in your particular case.
Basically what i want to do is grab all CSS that is referenced in an external stylesheet e.g <link rel="stylesheet" href="css/General.css"> and append it to any existing styling for each HTML element in my page. (make all CSS inline)
The reason for this is because i need to call .html() to grab a div and send to server to be made into a PDF. The downside with this tool is that it only recognises inline CSS.
Are there any ways to do this?
Edit: the question that was linked to mine as a "possible duplicate" spoke only of putting everything in the <style> tag. while that may be useful, im mainly concerned with loading into the style="" html atribute
In the past I've used window.getComputedStyle(element); for this purpose. It will return a map of all styles applied to the element, which you can then loop across and apply as an inline style. I wouldn't apply them to the actual DOM if you can avoid it (just create a document fragment / concat it in the style of the string you're sending up). It will be a performance nightmare to actually apply that many inline styles to an element.
Using computed styles still might not be enough, as there are vendor prefixed styles in the user agent stylesheet. If you send up markup from Firefox to PhantomJS(webkit), you will obviously not get the same looking element.
Is it possible to not load an element in the DOM of an HTML page with CSS or Javascript ?
I have a <div> that I want to load only when the resolution is a smartphone one.
Just to do a display: none; while I don't want it doesn't work because a script (iScroll) is linked to the <div>.
I really have to not load it in the DOM (or to delete it from the DOM when I load my page).
I believe that I can do it using removeChild(). But is there a way in CSS ?
I think you are missing some details but if you are trying to prevent a image from loading there is a dirt way of doing this. If you only use the image as a 'background-image' in the css and set the "display: none" the image will only load if you change the "display"
No. Css does not interact with the DOM, and your page must load before the DOM exists.
You can remove an element as follows:
var itemToRemove = document.getElementById("itemToRemove");
document.body.removeChild(itemToRemove);
If your element is nested deeper in the DOM, you'll need to Walk the DOM:
http://javascript.about.com/od/byexample/a/dom-walknodes-example.htm
I suppose, theoretically, you could prevent an element from loading with some voodoo ajax, but i wouldn't recommend that.
Additionally, the JQuery remove() method is a popular alternative to the DOM method above, as it can be called on the element itself.
No, if the content exists in the file/resource you're requesting you have to receive it and then (as you say) manipulate it out of the DOM. CSS can only alter its appearance.
What is the proper way to create a new client element through javascript in an asp.net page? Also, is it possible to move already created elements inside of the new element without causing too much havoc? Either straight javascript or jquery will work. Thanks.
I would recommend using jquery, because it abstracts out the browser inconsistencies. In jquery, you would use something like:
$('<div>').appendTo('#parent'); // parent is the id of the outer element
to create a new div element. You can use appendTo to add this element inside another dom element. Refer jquery documentation at http://docs.jquery.com/Main_Page