Raphael setting the attr of an element - javascript

I am using raphaeljs add need to set attributes on an element, however the attributes name and value are saved in variables
var attr_name='fill';
var attr_value='#343434';
but the following does not work
exampleelement.attr({attr_name: attr_value});
however if I type in the actual name in the attr field it works
exampleelement.attr({'fill': attr_value});
I have tried wrapping it in quotes and double quotes but this has no effect.
Please can anyone suggest anything?
It is not really an option to manually type them in as this code runs in a loop and each time it could be a different attribute it is setting.

Try this -
exampleelement.attr(attr_name, attr_value);
jQuery Docs - .attr()

Correct syntax is
exampleelement.attr(key, val);

what I found is:
exampleelement.attr({fill:'#343434'});
or
exampleelement.attr('fill': '#343434');
both are same.
Note: There is --> {} <-- in first one.

Related

jQuery .find() not working correctly

I'm trying to allow some text of <p> (the comment) to be editable when the user clicks on 'Edit'.
function editComment(commentid,replyid){
$('#comment'+commentid).find('.comment-text').attr("contenteditable='true'");
}
However this is giving me an error (undefined) and I'm not sure why, as .comment-text is a child of #comment88? I'm probably missing something really simple
Your HTML DOM and jQuery looks fine and legit, however the attr function would cause a trouble. I would suggest that you apply the style using this,
$('#comment'+commentid).find('.comment-text').attr("contenteditable", true);
This will apply the attribute to your element.
Description: When you use attr() function to add or update the attribute value, you pass two parameters. One as a key and second as the value for that attribute (key). If you pass only one, it will return that attribute's value. This is the problem that gets raised in your case, the find function is working, but in the final function, instead of applying that attribute it returns the value (false IMO).

Getting the type of a control using Javascript and JQuery

I am trying to use JQuery to get the type of control and following is the code that I am using.
$('#selCity').attr('type')
where selCity is of type select. When I try the above code it returns as undefined but when I use the alternative code with Javascript, it returns the correct type.
Please look into this fiddle to understand it clearly: http://jsfiddle.net/Ye8e9/
Could someone advice on how I can acheive this correctly using JQuery? Is this an issue with JQuery or am I making a mistake?
Use
$('#selCity').prop('type')
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. In addition, .attr() should not be used on
plain objects, arrays, the window, or the document. To retrieve and
change DOM properties, use the .prop() method.
Reference
DEMO
if you mean the type of tag, the use this
$("#selCity").get(0).tagName
See your demo here
Use nodeName to get 'type of Tag'. '.type' refers to attribute 'type' which select doesn't have.
document.getElementById('selCity').nodeName
you are getting undefined because there is not type attribute in select.
try this one
$('#selCity')[0].tagName;

Image Zoom effect using Cloud Zoom jQuery plugin

I am trying to apply cloud zoom on a single image as in the below Fiddle
http://jsfiddle.net/7HDbz/
But it does not seems to be working. Someone have a look at this.
Here is another fiddle with working effects
http://jsfiddle.net/tuHuZ/1/
The original plugin usage is here.... http://www.professorcloud.com/mainsite/cloud-zoom.htm
Problems with your first fiddle (the non-working one) include:
No space between the src and class attribute on your <a> tag
Using ' single quotes instead of " double-quotes for constructing the <a> tag
Use of prop where attr should be used. The former is only for properties where the value is irrelevant, such as disabled.
General Tip: Use variable names that make sense -- e.g. use src for the image source instead of x (which could mean anything, and in fact suggests a number)
General Tip: You should avoid having multiple $(this) calls. Instead, set a local variable $this as shown
Here's the working corrected version: http://jsfiddle.net/6dR2k/ .

Changing an ID using JQuery

I'm trying to change the ID of an element here:
http://moemonty.com/chirp/CHIRP-JSON-test.html
By using this line:
$('.databaseID').attr('id', 'test');
I would like to change the id of this line to test, so I can proceed to put in a pre-fix via a string and a variable from JSON data. But for now, I just wanted to see if I could replace it with test at this line:
<li class="databaseID" id="np-44701">
Thanks in advance.
Yes, you can change the ID of an element with $().attr(). The code you give will work, but you should ensure that you only change one element:
$('li.databaseID:first').attr('id','test');
On the other hand, I'd urge you to think this through so you're sure that you really need to change the id of an element. I can't quite imagine the circumstance where it would be necessary.

Stick ID to the HTML element (using js) instead of id-attribute?

First post on stackoverflow. Hope everything is right!
I'm thinking of attaching an ID value to the HTML element itself via JavaScript, instead of using the HTML id attribute.
For instance, say that JavaScript variable htmlElement is a div. So htmlElement.cssName would tell us its CSS class.
Now, how about doing
htmlElement.idProperty = "someValue"
in JavaScript instead of doing <div id="someValue">? Then I can use the idProperty in say event handlers.
this.idProperty
That simple!
Is there something wrong in doing so?
EDIT: Thanks for yor answers! Very helpful and instructive. I wish I could check green on all of them!
no, you can do it the way you like it, if you are dynamically creating this item you should use this method, if you are doing this inside html I recommend you to just put the name of the id in html too.
However a small note. Use element.id instead of idProperty.
element.id = 'my-id';
You can use the createAttribute method to add an id to the element like this:
id = document.createAttribute('id');
id.value = "someValue";
htmlElement.setAttributeNode(id);
What you're doing there is adding a runtime property (in your case, called idProperty) to an HTMLElement object instance. You can get away with doing that in your JavaScript code (the Prototype library does it all the time). Makes me uncomfortable, but it does work on all major browsers.
If you want to be able to specify these in HTML markup as well, though, I'd use attributes instead. You can create attributes with any names you want, although to be careful I'd use names like data-xyz (e.g., use a data- prefix) as that's the HTML5 standard way of using your own attributes. Then you use getAttribute to get the value and setAttribute to set/update the value.

Categories

Resources