We Keep Coding

How exactly to use ResizeSensor?

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;

I am trying to use JS/JQuery to automatically perform multiple find and replace actions on text in a website

I’m having issues with multiple replacements, I am wanting to replace the three words of a company name throughout the website with the company colours, I really don’t want to go through and manually add a span for each of the three words individually although I know this would work, is there anyway of doing this with code? BTW I’m a novice at JS/JQuery, etc.
I have had a go I can get one to work but when I try to do more than one only the last one works, it seems as though the last one cancels out the others.
I am happy enough with the CSS as this can easily be changed later.
Here is my code. - http://codepen.io/TechieBloke/pen/dMmNRB
var text = $('div').text().replace(/dummy/g, "<span class=artblack>dummy</span>");
$('div').html(text);
var text = $('div').text().replace(/Ipsum/g, "<span class='artgrey'>Ipsum</span>");
$('div').html(text);
var text = $('div').text().replace(/Lorem/g, "<span class='artred'>Lorem</span>");
$('div').html(text);
And here is the accompanying CSS
.artblack {
color: orange;
font: 15px arial, sans-serif;
}
.artgrey {
color: blue;
font: 15px arial, sans-serif;
}
.artred {
color: red;
font: 15px arial, sans-serif;
}

You modify the html each time, but then go back to text to use as source for the next change; just be more consistent and use html() instead:
$('div').html().replace()

JavaScript not showing red cross

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

changing text font through css for specific text in d3

I am using the d3 framework and I am trying to specify the font the following element using css (I want to use a custom font, that is why I am using css).
var anchorNode = svg.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
anchorNode.append("svg:circle");
anchorNode.append("svg:text").text("test");
I tried using
text {
font: 2px Arial;
pointer-events: none;
}
but this does not work for this specific text. I am assuming it is because the text is appended to the node. What would be the correct syntax to access the text in css?

Do you have a link to the rendered HTML or a jsfiddle?
It looks like your appending a class called anchorNode. You could possibly updating the CSS font for that class:
.anchorNode {
font-family: "Times New Roman", Times, serif;
font-size: 2px;
}

How to make a HTML heading look like a link

I have this line of HTML which basically opens a popup window on the same page. This works fine - however, because the HTML uses a heading, it isnt obvious that you can click on it. Does anyone know how I can make the heading look like a link?
Here is the line:
<h3 class="link" onclick="displayPopup(\'' + id+ '\');">' + CLICK HERE!! + '</h3>

HTML is the presentation of semantical structure.
If you define a <h3> it IS a heading, not a link.
If you define a <a> it IS a link, not a heading.
Do not misuse those!
It could have drastical negativ affect on SEO and usability.
If you want to style an entity, you'd use CSS.
A link has an underlined text on hover etc,..:
.link { cursor: pointer; color: blue; }
.link:hover { text-decoration: underline; }

Just a simple row of CSS
.link { cursor:pointer; }

You could add this to your css to change pointer and underline the text.
.link {
cursor: pointer;
text-decoration: underline;
}

Give the class "link" a hover-effect like so:
h3.link:hover {
color: #339933;
text-decoraction: underline;
cursor: pointer;
}
(you may or may not want to have "link" only work on h3`s, that depends on your case)
I do, however, suggest that instead of using a heading and make it look like a link, you might instead want to use a link and make it look more like a heading.
I cannot quite explain why, but I feel that this is the more proper action to take here, judging from the function you want the element to perform.