Retrieving an inline CSS style value - javascript

I have a div that is styled automatically by a template based on variable results pulled from another data source. The style value is set inline, like this:
<div class="view-empty message" style="display: block;">
There are no active Invoices to display.
</div>
I've been able to see this in the DOM and toggle visibility back and forth, but so far have been unable to use Jquery to retrieve the style value. What I want to do is search for the div based on the class (since the "view-empty message" class is unique) and return the value of the style attribute. So in this case I would like to return either "display: block" or "block". I've tried many different methods (such as .attr() and css. that I've seen around online ) and so far none have returned what I'm looking for. This is the latest one I'm using:
var displayValue = document.getElementsByClassName($(".view-empty message"))[0].style;
Any ideas? I appreciate the help.

Oh sh*t. Lightbulb. Your selector is wrong. Change:
$('.view-empty message').attr('style');
to
$('.view-empty.message').attr('style');
In your selector you're trying to get .view-empty message which looks for an HTML element named message inside of a container with a class of .view-empty. Instead, you need to specify a selector for an element that has TWO CLASSES $('.view-empty.message');
;]
-- Helpful but irrelevant now... --
You need to specify which attribute you are attempting to get the value for. Notice how I'm specifying the 'style' attribute in the .attr() method. This will retrieve the value of that attribute.
$('.view-empty.message').attr('style');
Per the documentation for the .attr() method, there isn't actually a method that takes no parameters. http://api.jquery.com/attr/.
When you invoke the method with one value, it returns the value of the attribute.
<div class='foo'></div>
$('.foo').attr('class'); // returns "foo"
When you invoke the method with two values, it sets an attribute on the element with the name of the first argument and a value equal to the second argument.
<div class='foo'></div>
$('.foo').attr('style', 'display: none;');
<div class='foo' style='display: none;'></div>

perhaps try $(".view-empty message").css('display')?
you can also set the display property with $(".view-empty message").css('display', 'none').
I assume you are not using the style='display:none' as a flag/state variable of some sort. if you are, maybe try putting the display property in a class and use jquery's .addClass() and .removeClass()?

Related

Change Class Name of a div in Jquery after find()

I have a brief quesiton about the nautre of jquery.
I tried to change the class name of an element using Jquery by using the argument below.
var classman=$('body').find('div')[2].className('anything')
body has several different divs and I picked the third one by
using .find('div')[2].
When I logged it, .find() argument spits out the whole html line
and I checked the type of it and console says it's "object"
So I was expecting I could access tot he element by typing like
classman.class
but neither the first approach nor the second approach didn't worked out. What should I do to change the second element and the change the class?
Thank you in advance.
I'm not a heavy user of Jquery but Just curious about it and wanted to know how to do it as a basic knowledge.
To add a class in jquery you can do this as follows:
$('body').find('div').addClass('name')
console.log($('body').find('div').attr('class'))
<body>
<div class="test">
</div>
</body>
To get the classes of an element we use attr ('class') in jquery.
In your example you said you wanted to take the second element, to do this use the method eq, (eq. (1))
Example:
$('body').find('div').eq(1) // Get second element

Using filter() to filter jquery based on parents

I see on jquery documentation that I can use .parent() to filter my matched elements based on the parent. But in the process, the final result I get is the set of parent elements, not the original set of elements. So I see that I can use filter to achieve what I want. But I found so few documentation about how to use filter to filter based on the parent.
For example, my html is:
<div id="social">
Facebook<br/>
Twitter<br/>
</div>
<div id="topsites">
Facebook<br/>
Stack Overflow<br/>
</div>
I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.
I suspect the code will be something like this:
$('a[href*="facebook"]').filter( ... ).click(function() {
});
But I have absolutely no idea what to put on the filter. "parent#social" ?
Another way to put it is to use filter function.
$('a[href*="facebook"]').filter(function(index) {
return ...
}
.click(function() {
});
I also don't know what code to put on the ... . Is it something like this.parent.id == "social" ? If possible, I prefer the first form, but if the solution can only be achieved by using the second form (filter function) then it's okay. Thank you very much.
.parent() doesn't filter, it traverses. It takes a jQuery object, that lists an array (of size [0, n) ), and generates a new jQuery object with each element's parent.
Getting a jQuery object with the list you're looking for is much simpler though...
CSS Selectors, which jQuery is based upon (with various extensions) are heirarchical by nature. That means selecting specific children of some parent(s) is quite trivial. a CSS selector to pick the element you want is:
#social a[href*="facebook"]
and if you use this inside a jQuery constructor, you'll get you object:
$('#social a[href*="facebook"]')
I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.
No need of filter here,
$('#social a[href*="facebook"]')
will do.

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).

add attribute to DOM element

I have a modal form that is generated using bootstrap 3. It doesn't look like there is a reliable way to determine when that form is being shown onscreen. I am attempting to create one. I attached two events to my DOM element that signal when it is shown and when it is hidden.
jq_modal_login_form = $('#modal-login-form')[0]
jq_modal_login_form.on('shown.bs.modal', function () {
jq_modal_login_form.active_onscreen = true;
});
jq_modal_login_form.on('hidden.bs.modal', function () {
jq_modal_login_form.active_onscreen = false;
});
I tried to give an attribute named active_onscreen to the DOM element above. When I look at the DOM element in the debugger later, the attribute is not present.
I should mention that I am VERY new to javascript. Is attribute even the right word to use here? It looks like attribute is a bit of a misnomer as well. It could be an attribute of the object but could also be an attribute of the object.attributes attribute, right? I assume the later is where styling ect., goes and is not what I want to change. Does anyone have some insight as to what I should be doing here?
In jQuery:
$('selector').attr('attribute_name', 'value');
However, you can should only use predefined attributes as creating custom attributes requires additional setup (see this question) that is not necessary in your case.
In your case, you may just want to add a active_onscreen class to the element. Classes are meant to be used to identify elements (and not just for CSS), so they are perfect for this applicaiton. You would use this to add a class to an element:
$('selector').addClass('active_onscreen').
When it is no longer active, you would use this to remove the class:
$('selector').removeClass('active_onscreen').
What you are doing here is adding a property of the DOM object - not an attribute of the element.
Adding an attribute does not necessarily make the property mirror it. Only built-in properties do this.
If you want to set an attribute, but not the property, you can use jQuery's .attr() method.
If you just want to see if a given modal is open, Bootstrap does that for you. You can check the bs.modal data attribute:
$("element").data('bs.modal').isShown;
or a class (but this method is prone to race conditions):
$('#myModal').hasClass('in');

Setting an attribute to the last position

Is it possible to set a new attribute to the last position of a html element using javascript/jQuery?
This would be helpfull for me in a case where the attribute order is important to decide whether the paragraph has changed or not.
Example:
<p attribute1="true" attribute2="true">
Now, i would like to add a third attribute so that the resulting paragraph would look like
<p attribute1="true" attribute2="true" attribute3="true">
No, it's not possible. Attributes are unordered in HTML and XHTML markup languages, so browsers are free to return them in whatever order they like, e.g. alphabetic, specified, etc.
You should rethink your approach, for instance using the .data() method to track changes:
$("#el").data("changeHistory", []);
// ...
$("#el").data("changeHistory").push(new Date().toString());
Optimally you should never be in a position where you need to read attributes in order (by index).
If you have an element like so <div id="container">, you can add an attribute using jQuery like so $('#container').attr('disabled', true);. Keep in mind this should add the attribute to the end of the element.
Another tip is if you are looking to modify a DOM element attribute such as style, consider looking at the jQuery API to see what methods are avialable before writing anything too crude. For example, if you wanted to add a style you could simply do $('#container').addClass('hover');

Categories

Resources