JQuery :: Creating Elements And Setting Attributes With Namespace
Mar 7, 2011
I'm working on an app, which createsvisualizations based on SVG. I was using jQuery SVG by Keith Wood at first [URL], but at some point I've noticed that it's very inconvenient for some stuff and wrote my own functions to handle everything. One of the quirks when creating svg trees dynamically is that you have to create all elements and set attributes using the SVG namespace ("[URL]"), otherwise they aren't rendered correctly by browsers.
Here's an example of how you create a text element...
var svgns = "[URL]";
var newText = document.createElementNS(svgns,'text');
newText.setAttributeNS(null,"x","0");
newText.setAttributeNS(null,"y","0");
$(newText).text("some text");
$(svgGroup).append(newText);
There doesn't seem to be a way to do that more effectively using jQuery. For instance, you can't use attr to set multiple attributes, since it won't use setAttributeNS.
I am having an issue appending, setting attributes, text on the root node. Below is a sample of the code that performs this task (nLevel, nID, and sText are variables passed in by the containing function. XMLDOM is an XML DOMDocument object:
given a cell from a table... function Tbl_GetCell(tbl, row, col) { var theRow = tbl.getElementsByTagName("tr")[row]; return theRow.getElementsByTagName("td")[col]; }
I can set attributes like width, height, and align, but how can I set cell style info?
cell = GetCell(tbl,row,col) these work fine... cell.align = "center"; cell.height = 22; but this doesn't... cell.style = "font-weight: bold; text-decoration: blink"
I'm using window.open to open to display some info in a new window. The info displays correctly, but the resizeable, scrollbars, width, and height attributes don't seem to be setting correctly. The window isn't resizeable, and the width/height is way off.
Im developing a script for dynamically creating html table structure so that from the input that has been given to the function it will fetch the values one by one and will create the structure. My problem is i want to add attributes to the elements created. sample code attached.
here the element name will be get from the parameters passed to the function. i want to verify whether the line in bold is correct or not coz the id is not updated in output.
document.createElement('span') Because I'm trying to attach a stylesheet using jQuery. So far all I've found is the add() method, so I've put this together: $(document).ready(function() { $('head').add('link').attr('type', 'text/css', 'href', 'script/fancybox/jquery.fancybox-1.3.1.css', 'media', 'screen'); })
But the element will not get added, I presume it's meant to go before the ending '</head>' tag?
I have a main window in which there is a link opening popup. In newly opened window there are links that allow to insert some HTML with form elements ( button) in the parent window document. The problem is when user closes popup window the added button is inactive (action assigned to it doesnt work) What is more the problem exists in IE, in FF code works quite well.The code inserting new elements to parent window is below.[code]
I have form that asks a simple question: "How many XYZs do you want to create?" Then, for every XYZ, it should create several new labels/inputs in the form.
That is, every XYZ looks like this: <div id="xyz"> <label>Whatever</label> <input> blah blah blah </input </div>
I looked into .each() and .live(), but I can't wrap my mind around how to do this.
I'm working on my personal website [URL] and I'm trying to use Javascript to edit some of the height and size attributes of elements on the page, based on the user's window size. I've got the code that gets the window size working, and calculates what I want to set as the "boxSize" but the part that goes into the external CSS to change the values is not working. "boxSize" is a variable that holds just a number. I'm not sure if it's really stored as a number or a string, but I don't think that's supposed to affect anything.
I'm just putting in the relevant part of the code right where it's failing. I figured out (using alert() statements) that the script is definitely working right up until before the two lines given, and failing to get through them.
On my site, I have some click-able spans (will be referred to as toggle spans) that show or hide other spans (that contain the content I want on my site; will be referred to as content spans). The layout of these spans is like this:
I am trying to insert a row with values bases on input fields on submit. However when you submit, it is adding table rows to every table in the document. I have been struggling with this. I have tried using $(this), .parent(), .parents(), .closesest() etc.. [URL]
The cover group contains left & right bar images that repeat vertically as the page expands. The top is just a simple blue background (also content bg color)
Obviously content is the content of the page and both covergroup and content are within the subbody.
Is for the <subbody> tag to be the size of <content> + 5px on top (size of the <covertop>), and the left and right cover divs to expand to the size of subbody.
I guess since I'm using a footer (with image and text) letting the page expand as it wants is out, and I need javascript to make it work.
but not in this form: $(element).children("dl\:object").I don't care that it doesn't work in the second, because I only need one time access, since I replace these custom elements with valid html using javascript, as soon as the page loads (sort of like xfbml I guess).My concern is that it DOES work even in IE, which only returns a tagName of "object" from <dl:object>. (given the following html attribute: <html xmlns:dl>). So I'm suspicious. I've tried following the code that matches the selector, but I can't do it, it's too complex for me to follow in a reasonable time.
For example, set onmouseclick event function of all images on a page to do the same thing. I want it to be the "default" function, that it applies to all images I create later on with JS. Look at this code, it's just the concept:
Code: images.onmouseclick=function(){alert("an image was clicked")} //I know the "images" object doesn't exist a=document.createElement("img"); document.appendChild(a); // an alert box should open when this new image is clicked. // an alert box should open when any other image is clicked.
Is it possible with JavaScript to create new form elements on a webpage that has already loaded in the browser? For example, what I am hoping to do is have a text field for a name and a link that lets them add another text field for another name etc. I believe I can do this on a DIV but haven't looked at coding it yet. Any thoughts, pointers etc?
Code: <script type="text/javscript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> <!-- function doItAll(){ var a_p = ""; var d = new Date(); [Code]...
I'm trying to access the id of an image I create using .live().When creating the image I give it an id however, I am unable to retrieve that idea later using .attr()
I am probably going about this all wrong, but I'm not sure how to do this.Basically I need to create a unique variable name for each element that has the same class name and set each one to zero.I thought I could just concatenate the index value to a variable name to create unique names. Something like:
$('.toggle-trigger').each(function(){ var toggleTriggerIndex = $('.toggle-trigger').index(this); var t + toggleTriggerIndex = 0;
I am trying to "ajaxify" my site. Now I have one problem:
$("#posts").children().remove(); $("#tag-sidebar").children().remove(); $.each(data.Tags_Sidebar, function (indexInArray, valueOfElement) { var insert = $("<li>");
[Code]......
Now when I click one of those links (href1, href2, href3) generated, the click event won't execute! What's the problem? Also, is it right that I have to transfer the valueOfElement over, like I did? What does stopEventPropagation do? Prevent the href from being navigated to? That's what I am trying to do.
Using the Firebug console is there a way to log the content of the global namespace? I particularly want to recognise when something is added to it by my code. I could step through my whole code :( but I'm hoping there is an easier way.
