I have a table with cell ids of "quest_row1", "quest_row2", etc. I want to change the background color of a cell to a hex value that I am returning via AJAX call to server.
picked_answer = $(this).val();
x = parseInt($("input#q_num").val());
$.post("CCRN/submit_answer.php", {num : x, answer:picked_answer}, function(data)
{
alert(data+x);
$("#quest_row" + x).css({'background-color' : '#' + data});
});
x gets the correct value, say 10. data is returned from AJAX call is correct, say AABBCC. The color does not change but I get no errors. This code does run as the alert box shows the correct values for the data and x. Please help identify my issue!
First check if the css style is added to the element via firebug or what ever console your using. In firebug when you inspect it, it should show as element.style{...}
It may also be that your adding it to the tr which might not work as i know styling tables does not always work as expected. Try adding the style to the td instead and see if this helps.
Related
I would like to deliberately set an scss variable with a string as a property value which will be read as invalid and therefore will have no effect on my ui. E.g.
$invalid: "thiswontwork";
.my-element { background: $invalid; }
This value will just be considered as invalid and ignored.
I know that my variable would throw an error if it were used in a function like "lighten()".
Is there any other scenario where adding a string like "thiswontwork" as my property value could cause an issue?
There are multiple scenarios. For example, I would like to mention three:
color
content
display
As with background, the same error comes for color.
With respect to content, there won't be any error with CSS syntax but you can visibly see it's messed up.
With display, the set of enumerated values is what you need to use. Here it might throw an error, invalid value for display.
I am working on a website with different categories going to each one of those should change the color of all anchor-elements.
I know I can use style binding like this:
:style="{ color: theColor }"
But then I would have to attach to every link element manually, which seems counterintuitive.
Right now I am getting the color from the store in computed.
<script>
computed: {
theColor() {
return this.$store.state.theColor;
}
}
</script>
And the color itself is hex that I can change from the backend in netlify. So Hardcoding this into seperate classes is not an option.
From intuition I would just iterate through all a elements and give them the color from the store. But how do I do this with vue?
I found a solution using inside and then changing css variables inside :root.
See answer: https://stackoverflow.com/a/50651616/7458669
Let's say for example I'm going through my stylesheet but I can't remember what element a certain CSS selector affects.
Is there any method, tool, or anything that I could do/use to find out what exactly it is affecting?
Thanks!
I just opened up a random bootstrap template site and did what you where asking for.
Open up your chrome browser (I prefer this as I feel this is easy to debug both Jquery and css) and Press F12, you will get a developer window as in the image.
Switch to the console tab.
Use Jquery selector to select all
the intended elements (you can use the same css selector here too
but just place them inside $('')) Eg: $('.tab-content') I am trying to find out all the elements with the class tab-content
The result is all the elements
of that selector.
NOTE: This appraoch woud require you to have Jquery loaded into your page. Else the script will throw an error saying $ is not defind.
In addition to using your browser's development tools, there are two easy ways to do it that should work in almost any browser (no matter how bad the developer environment).
Visually
Temporarily set a border or background color for the selector, like:
border: 1px solid red;
Or:
background: red;
This makes it very easy to find the affected elements.
Programmatically
On the JavaScript console, use:
// Replace with something that prints the relevant details
var stringify = function(element) { return element.innerHTML; };
// Iterate over all affected elements and print relevant info
var affectedElements = document.querySelectorAll('.your .selector');
var len = affectedElements.length;
console.log('Elements affected: ' + len);
for (var i = 0; i < len; i++) {
var affectedElement = affectedElements[i];
console.log(
'Element ' + (i+1) + ':\n' +
stringify(affectedElement) + '\n\n');
}
The inspection of elements feature of the browser is meant for the purpose you want.
1.Open up the index file in any browser(preferably Mozilla Developer edition),
2.Right click and Inspect element,
3.Then open the compiled stylesheet. Find out the style element you want to check the effect of.
4. Go back to inspection, remove/add CSS properties and see the effect in real time.
The other way is to use Adobe brackets. It's live preview feature will highlight the section that involves the code snippet, you point your cursor to.
Where can I find the aspNetDisabled class default properties system color values? A ddl/select control background property is not "grayed" out when ddl.Enabled=false. For aesthetic purposes I want it to look similar to other disabled controls.
I can change the background of a DDL in the css with:
Select.aspNetDisabled
{
background-color:ScrollBar;
}
Setting all background colors to the same value like this:
.aspNetDisabled
{
background-color:ScrollBar;
}
[surprisingly but makes sense now] is not a solution. Radio buttons and checkboxes have more than its "input area" grayed since the background for them consists of more than an input area. A rb becomes a grayed out square with a grayed out circle. I have tried ever possible SYSTEM COLOR that is available in VS2010 style builder color picker and none of them match. I can view the source and get the color there, but a hard coded value will not necessarily be identical on different machines. I like the default functionality of the aspNetDisabled class and only need to override the background for ddl's.
The aspNetDisabled deafult grayed out system color is "ButtonFace [in .css and buttonface from source]! I wrote a Javascript function to get the background color of a disabled TextBox. I tried the same code yesterday, but failed because of browser specific Javascript functions.
Chrome did not like the property string I was passing to currentStyle[] - received an undefined property error:
var txtBx = $get('<%=txtBx.ClientID %>');
var prop = "background-color"; //also tried backColor and many other variations
strValue = txtBx.currentStyle[prop];
alert("strValue" + strValue);
The getComputedStyle method worked, but of course that is not what I wanted. I ran the same Javascript using ie and was able to get the currentStyle[prop] value.
aspNetDisabled is simply a variable for a class/.css. It would be nice to be able to see its values. I searched the Framework and the "net" yesterday for any related .css files/classes and for the string "aspNetDisabled". The only matches I encountered were aspNetDisabled in WebControls.cs and a WebAdminStyle.css under the 4.0 dir. I also tried to use the debugger, but could not find the style properties for "txtBX" as I expanded each layer.
I guess writing Javascript a function to loop through all properties for each type of "disabled" control would accomplish that. There is probably a way to write a .net class to find all properties and their values of a .css class too.
It is unclear to me why the background color of a DDL does not get modified when disabled...
I hope this helps someone!
I am working with the Mojo SDK and I'am trying to add a background image to a div but havn't been able to find a way to do it.
Obviously I have tried doing it the normal CSS-way but it doesn't seem to work with Mojo.
Here is the latest thing I tried:
var t=document.getElementById("kblayoutdiv");
t.parentNode.removeChild(t);
var t=document.getElementsByTagName("BODY")[0];
var div=document.createElement("div");
div.style.position="fixed";
div.id="kblayoutdiv";
div.style.display="block";
div.style.top="80%";
div.style.left="92%";
div.style.width="16px";
div.style.height = "11px";
div.style.background = url('/usr/palm/frameworks/mojo/keyb_en-us.png');
div.style.zIndex = "255";
t.appendChild(div);
window.kblayout="en";
I have tried several solutions to get the background image to show.
The rest is working fine. It is just the background iamge that won't show no matter what.
So if anyone can show me the piece of code to add the background image I'd be real happy :)
div.style.background = url('/usr/palm/frameworks/mojo/keyb_en-us.png');
You have to quote strings in JavaScript
div.style.background = "url('/usr/palm/frameworks/mojo/keyb_en-us.png')";
Obviously, the URI has to be correct as well.
That said, as a rule of thumb, it is almost always better to predefine all your styles in an external stylesheet and generate elements that match the selectors (e.g. by setting .className).