My goal is run a javascript function every time the size of an expanding textarea element changes, and from other questions I found this: http://marcj.github.io/css-element-queries/
I downloaded it and put the css-element-queries folder on the server, and included it in the header:
<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>
Then in a javascript file that I'm using below, I have
ResizeSensor(document.getElementById('the_id'), function(){
console.log("resized");
the_function();
});
But it doesn't do anything and gives an error:
Uncaught TypeError: Cannot read property 'length' of null
at forEachElement (ResizeSensor.js:46)
at ResizeSensor (ResizeSensor.js:201)
I'm not sure if ElementQueries are the correct solution for your issue.
Element Queries are used to apply specific CSS, if an element has reached a specific size.
E.g. the following is your HTML:
<div class="widget-name">
<h2>Element responsiveness FTW!</h2>
</div>
and your define a CSS rule like that:
.widget-name h2 {
font-size: 12px;
}
.widget-name[min-width~="400px"] h2 {
font-size: 18px;
}
.widget-name[min-width~="600px"] h2 {
padding: 55px;
text-align: center;
font-size: 24px;
}
.widget-name[min-width~="700px"] h2 {
font-size: 34px;
color: red;
}
Now Element Queries do the following: If the container widget-name has the size of 700px or less the rule .widget-name[min-width~="700px"] h2 is applied. if the size of the container widget-name is 600 or less the rule .widget-name[min-width~="600px"] h2 is applied.
I hope this answer explained it a little bit.
You can use this library instead: https://github.com/sdecima/javascript-detect-element-resize
it's what the others are based on.
I had this issue when i was using sticky-sidebar plugin, finally i found the solution:
after import ResizeSensor.js you should use it like this:
import ResizeSensor from "resize-sensor";
window.ResizeSensor = ResizeSensor;
Related
I am trying to dynamically render a Styled Component. In the past, this was easy to do because all the style declarations would be done within the component itself. However, now I am trying to keep a separation of concerns. Therefore, I have stored the CSS in an external file. This works fine and does the job, however, now I am trying to dynamically color the font based on props. I am not sure how to do that and have been looking all over.
Here is my component that needs the dynamic font color.
<Styled.HeroHeadline as="h4">
{parse(el.header)}
</Styled.HeroHeadline>
And here is the styles file that I am declaring the css:
export const HeroHeadline = styled(Heading)`
p,
div,
span,
h4,
h3 {
display: block;
color: {dynamicProp}
#media (min-width: 992px) {
font-size: var(--font-size-h1);
letter-spacing: var(--letter-spacing-100);
line-height: var(--line-height-h1);
margin: 0;
text-align: center;
}
}
`
Anyone have any input? I would greatly appreciate it. Thanks!
I tried to add find a way to store the prop as a value in the external css file, but wasn't sure how to do so.
I also have searched to see if anyone asked this before but found nothing on the same topic.
See the CSSStyleDeclaration interface.
It's possible to do, for example:
element.style.backgroundColor = "red"
Hi guys so i am getting back search results using javascript and i am struggling to make a Red cross appear on the right hand side.
So when the user searchs through my db and the result appears i would like an X to appear to the right of it.So example :
Search result 1 X
I have made the X in CSS:
#markx {
color: Red;
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 2em;
font-weight: bold;
text-align: center;
width: 40px;
height: 40px;
border-radius: 5px;
}
My code:
$(".result li").click(function(){
var text= $(this).text();
$('.selectedStuff').append('<li>' + text +' (selected)<span id="markx">×</span></li>');
});
For some reason those its no appearing like i want it to in javascript. In css its fine, but obviously i want the X to appear alongside every search request that i make so later on the user can cancel that request.
In my opinion, you are overthinking this by using JS to get your dynamic X. You can achieve this in a much lighter way with CSS specificity and pseudo-selectors.
Use this:
.selectedStuff > div{
width:300px;
}
.selectedStuff > div:after{
content:" x ";
font-family: Arial;
color: red;
position:relative;
float:right;
right:-20px;
}
In the same fashion I added the width to the .selectedStuff class through the CSS, you can do that for all the other properties as well instead of hardcoding them inside the jQuery. This makes your code more maintainable.
The X is a simple letter X but if you want something better looking, use the fontAwesome library and add it as an web font icon.
Here is a DEMO
P.S. I noticed in your JS you meant to produce a series of LIs but the code rendered DIVs instead when I ran it in CODEPEN. If yours produces LIs, just replace the > div my CSS above for > li
I do not understand why internal css does not overwrite the external css created by google ...
This external css need to create the Google search bar (in my case, only serves to create a results page-SERP)
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
<style type="text/css">
.gs-result .gs-title, .gs-result .gs-title * {
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
display: none;
}
.gsc-table-result {
font-family: 'PT Sans', Arial,sans-serif;
font-size: 14px;
width: 100%;
}
</style>
<script type="text/javascript">
google.setOnLoadCallback(googlata);
google.load('search', '1');
// other js-code that works ;)
</script>
</head>
why ???
thanks!
EDIT
the result page is created by google cse and is added in my div.. this the code created:
<div id="cse"> //my div
<div class="gsc-control-cse gsc-control-cse-it"> //here there is a google code... i show you only parents beacause the code is too long
<div class="gsc-control-wrapper-cse" dir="ltr" style="visibility: visible;">
</div>
Here there is a part of my code:
http://jsfiddle.net/2rg86vm6/1/
is only a part so doesn't work ;)
The answer to "Why isn't my CSS being applied?" is almost always that some other style definition is overriding it. When this happens, it can be frustrating, but don't despair: There are only 2 things you need to know:
Understand selector strength and CSS specificity.
Know how to use your browser's developer tools.
CSS Specificity and selector strength
The "selector" is the part of your style definition that targets (or "selects") your element. It's the code that comes before the curly braces in your CSS:
.gs-results {
color: #008000;
text-decoration: none;
display: none;
}
The above snippet represents a single CSS rule. The selector for the above rule is .gs-results.
Selector strength is important when you have two rules that match a single element and the styles conflict:
.a { color: blue; }
p { color: red; }
<p class="a">Am I red or am I blue?</p>
In the above example, the text is blue because a class selector has a higher specificity than an element selector. If you wanted to force the text red, you could strengthen your p selector by adding the class to it:
.a { color: blue; }
p.a { color: red; }
<p class="a">Am I red or am I blue?</p>
Now the text will be red because a selector consisting of element and class has a higher specificity than just a class selector. We can make in blue again, by increasing the specificity of the first selector. For example, specifying an ancestor class:
.x .a { color: blue; }
p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Further reading:
CSS Standard: Calculating specificity The algorithm is actually quite simple.
CSS Specificity calculator
Finding conflicting selectors
Understanding specificity is vital, but only helpful if you know the style rule that is overriding your own. Fortunately, every browser comes with excellent developer tools that make discovering applied rules a breeze.
In any browser, right click the element whose styles are not being applied as you expected, and choose "Inspect Element". This will open the developer tools with the DOM inspector open and the clicked element selected. You may have to manually select a parent or child element of the one that is selected. Once you have the correct element selected, look at the rules that are being applied. You should see yours in the list with the style properties in strikethrough:
If your particular element has a lot of style rules applied and you are having trouble finding the CSS property you care about, try the "Computed" tab. Additionally, Chrome let's you filter the styles displayed by entering the property you are interested in where it says "Filter...". IE let's you filter the computed tab.
Now that you have identified what rule is overriding your styles, you can see how you need to strengthen your selector. This should not be a difficult thing. We will get our text back to red by borrowing from the other rule's selector:
.x .a { color: blue; }
.x p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Why not just use !important?
Stephanie Rewis's tweet says it best:
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
It causes maintenance headaches. If this is code you will ever need to maintain, you will hate yourself later for using !important. If other devs need to maintain it, they will hate you.
Use !important on your code, altough I would not encourage you to do that permanently, use it just for testing (better way is to strenghten your selector):
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000 !important;
text-decoration: none !important;
display: none !important;
}
A little warning: I'm just starting out with css and js/html.
I'm trying to get a wrapper to wrap around a text box. As I understand it, divs without explicit dimensions wrap their content (height/width: auto). I'm using jquery to wrap an element element with a wrapper for a label. I'd like it to wrap the entire input box (as I believe it should considering the input box is within the div), but it doesn't seem to be as simple as wanting...
For some reason, I can't get the properties of my wrapper to change after setting them - even using the Chrome JS console. So even going in and manually setting the height of the wrapper div to 40 doesn't change anything.
Here's the fiddle everyone so far has been asking for - there's not much more to this question. I just want the div to wrap the input, which it isn't.
http://jsfiddle.net/5vBz4/
As far as I know, my input styles aren't conflicting, either:
input.floatlabel {
font-family: Helvetica;
font-weight: 100;
font-size: 15px;
height: 40px;
width: 40%;
text-align: center;
}
This is what I have so far, and the result.
As I understand it, you want:
.wrapper {
display: block;
}
Fiddle
I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/