Styling a div based on the flex wrap property using javaScript - javascript

A created a function that renders buttons depending on how many data gotten from database.
I want to use js to set the style the button container differently,
especially setting property of of the button container to flex direction to column when it starts wrapping,
Since the website can have many buttons.
Is there a way to use javascript to check for the flexwrap property of the button container.
I tried this code but it is returning an empty string
Console.log (btnContainer.style.flexWrap)

try running btnContainer.style in the console directly, rather than console.log(). hope it will help you find a solution

This commend check only inline style like <div style="flex-wrap:wrap;"></div>. Now if you console.log(document.querySelector('div').style.flexWrap) you will get string with value "wrap".
The solution your problem is add style this element in html inline as I wrote above or in js like document.querySelector('div').style.flexWrap = wrap

Related

How can I modify CSS using NodeList?

I am just learning JS/CSS.
Here is the site I am playing with.
http://keysoft.keydesign-themes.com/demo1/
I want to change "text-align" attribute of a style ".pricing .pricing-row" to "left" using JavaScript.
When I change it in Chrome console (Styles) to "text-align:left" I see that it aligns rows to left but keeps buttons centered. That is what I want.
I tried in console: document.querySelectorAll('.pricing.pricing-row')but I can't understand how to select textAlign attribute from there. It shows a NodeList.
Also I have tried document.getElementsByClassName('pricing-row') but there are elements like div.pricing-row.button-container.
These elements are unnecessary because if I use them in a loop then buttons' alignments will be affected.
So my goal is to align only "pricing-rows" without affecting alignment of buttons or other parts.
Could you tell me please the most efficient way to accomplish this task?
I'm not sure how to do this in pure JS but it's possible with jQuery.
Basically your problem is that some of the 21 divs that have the class 'pricing-row' also have other classes, and you don't want to pick those. Well actually that helps you weed them out.
First off - in order to use jQuery in the webdev console do this:
$===jQuery // should prompt true
Now:
$("div[class='pricing-row'")
will pick only divs with this specific class. Then you can do whatever you want with them. in your case:
$("div[class='pricing-row'").css('text-align', 'left');
another option which is simply very useful to no is the jQuery not() method:
$(".pricing-low).not('.button-container .selector').css('text-align', 'left');
What happens here is that first all of the elements with the "pricing-low" class are selected, and then the not() method drops the ones that have the following extra classes. In the end the css manipulation works.

How to access CSS style of a DOM element with pure DOM functions (without jQuery)?

For some reason I can't access HTML element's display style's value.
Here's my JavaScript code:
var el = document.querySelector('#warning');
console.log(el.style.display)
My code returns "" empty string for #warning's displaystyle but it's actually "none".
I've the following HTML:
<div id="warning">
warning warning warning.
</div>
I've the following CSS:
#warning {
display: none;
}
Any ideas?
You are doing everything right for the most part, but what you are running into is a hangup for most people when they try this for the first time.
The style object in javascript is looking for this value to be inside the actual element (inline) and does not look for it in css code directly.
To access the style, the style has to exist in the dom. You could look into Window.getComputedStyle()
I hope this explains why you are reaching this roadblock.
If you know the element is an ID I'd suggest you use the getElementById(); function. Also AFAIK the style method gets inline styles only. I'd suggest using getComputedStyle();.
Code
var myDiv = document.getElementById("myDiv");
alert(getComputedStyle(myDiv).display);
Will output "none".
Example
http://jsfiddle.net/43jLLd5L/
Reading Material
Not directly related to your question but the answer has some good points.

jQCloud - how to clear it?

I'm using a script for showing a tag-cloud from here.
var word_list = getTags();
$("#example").jQCloud(word_list);
<div id='example'></div>
I'm loading the tags dynamically from different sources by clicking on a button. The first time it shows the the tags properly, but the next time it "adds them up" to the tags that are already there. I need to clear or refresh the tag-cloud somehow, I tried this:
$('#example').val('');
and there was no luck.
Is there a way to do it at all?
You may try using this:
$('#example').html("");
The .val method is primarily used to get or set the values of form elements such as input, select and textarea. It won't set the value of the div as you are trying to.
You can use jQuery empty() to remove all child nodes from your div and then call $("#example").jQCloud(word_list); again so that you can fill it up with new ones
Try:
$('#example').empty();

What is a simple way to make "null" not to render?

I have created a simple polymer element with no js that has attributes in it. When the attribute is not called it shows "null".
http://jsbin.com/wakal/1/
How do I tell the element not to show null?. If the attribute is left blank I do not want anything to show up?
Normally to use default values you need to use the script and initialize the properties there.
See http://www.polymer-project.org/docs/polymer/polymer.html#default-property-values
Alternatives are to use
{{propname?propname:'default value'}} or
{{propname||'default'}}

Get values from original css file using jQuery

I am running in to this situation. Basically my site has many templates of css and users can change the color dynamically using jQuery. Now, the way I did it was to use jQuery to modify the css property directly by selecting the classes. However, if users switch to a different template (also dynamically), I insert .css file in but it has NO effect what so ever. The reason is the css change style=".." for each elements take precedent. How to fix this issue? I am thinking of 2 ways:
Delete the style="..." at each elememts. But how to do this?
Get the values directly from within .css file and assign to each elements again as style="..."
Anyone can show me some light on either one? Thanks.
If you just want to remove the style attribute from a group of elements you can use:
$('p').removeAttr('style');
Just replace 'p' with all the elements you want to remove the inline CSS from, e.g:
$('input, div, h1').removeAttr('style');
Hope this helps.
Before you switch out the style from the original using jQuery, why don't you assign the original style value to data on that element, and then restore it using that value.
So, for instance, say you're changing the css font-family of an element with class "foo":
To apply new css:
var orig = $(".foo").css('font-family');
$(".foo").data('origFont', orig);
$(".foo").css('font-family', 'Arial');
To revert the css:
var orig = $(".foo").data('origFont');
$(".foo").css('font-family', orig);
Get rid of all inline CSS using this regex in your editor:
style="[^"]*"
i just had the same problem, but i think the best solution is to use the jquery add and remove class.
each template should have a class, then to change it, use the remove class and add the desired class

Categories