We Keep Coding

Arrows on top of a set of html tables?

I have a set of html tables (generated dynamically in my ReactJS code).
An example is bellow:
I want to draw arcs between some of the cells (specifically cells which have the same number). One idea is to create a transparent SVG and draw arrows in the SVG file. But the thing I am confused about is, how to specify start and end points of the arc (so that they align with the right cells). Anyone ideas for me?

Answer linked to my comment : I had kind of the same need to draw a graph that I needed to have full control on for a school project (you can see the result here)
I was using angular at the time, if you never have played with it, the ng-repeat attribute of the tag is just a for loop outputting the current dom element.
<div class="route"
ng-repeat="route in routes"
style="
left: {{ route.source.x }}px;
top: {{ route.source.y }}px;
width: {{ route.distance }}px;
transform: rotate({{ getAngle(route) }}rad);
-webkit-transform: rotate({{ getAngle(route) }}rad);"
>▶</div>
The getAngle function is really simple:
Math.atan2((route.dest.y - route.source.y), (route.dest.x - route.source.x))
And here is the CSS of the route class:
.route {
height: 12px;
margin-top: -10px;
padding-bottom: -2px;
text-align: right;
border-bottom: 1px solid black;
-webkit-transform-origin: 0 0px;
transform-origin: 0 0px;
}
You'll probably have to fiddle a bit with the CSS to center everything, but here is the idea.

Creating a colored margin without changing DOM, because border affects the markup like padding

I was trying to see if there was a way to do something like changing the color of margins in CSS, without changing the DOM, but i am unsure as to how to figure it out. Margin itself takes only things like "auto|inherit|number (px|$|vs|vh)" so i did not know if it was a combination of a few things.
How would i accomplish such a thing?
My bet seems to be on actually doing DOM manipulation.
Is my goal achievable with CSS alone?
My reasoning is that i am doing some scaling for a visual demo, and want to add a black border, similar to that of IPads and other Tablets. The issues i noticed is that adding a border which scales everything a little more (not what i wanted).
The reason why i am tagging javascript is because there might be a trick within javascript, outside the scope of css that would resolve the issue (while not changing DOM around).
Is this possible? Had anyone ever tried this?

You can create colored borders without using any extra dom elements... You have a couple of different options -- probably more.
Using box shadow:
.foo {
width: 250px;
height: 250px;
background: green;
box-shadow: 0 0 0 10px black;
}
Using a linear gradient on a pseudo-element:
.bar {
margin-top: 50px;
width: 250px;
height: 250px;
background: orange;
}
.bar:before {
content: '';
position: absolute;
width: 250px;
height: 50px;
background: linear-gradient(90deg, #000, #000)
}
DEMO
Hopefully I'm not misunderstanding what you're after...

how to make one text hide another text.

I am implementing facebook's comments box and what i want is that the comments which i grab thru GET and render to template should be invisible to human but visible to search engines.
as experiment, i did this: http://jsfiddle.net/4D8hh/
how can i make first hide the second? but the second should stay crawlable.
z-index seems to be wrong choice here, with what else can i do it?is it possible?

Use display:none for anything you want to have on the page, but not have visible to the user. The content will be there... it just won't "show" on the page.

just put
background:white;
and that should be it
but qoura has some other wonderful idea please take a look here it works for them it should work for you . :)
https://plus.google.com/106413090159067280619/posts/KDSVtgHiuie

May I raise my concern here. Google don't appreciate people are trying to get a better search ranking by hiding text. And it probably won't work at all. Seen from a user perspective, why don't you want the comments to be visible?
Anyway, if you really wanna go down this road, start using:
http://schema.org/Comment
And then you can take the elements out of context with position absolute:
position: absolute;
left: -9999em;
Or like Twitter Bootsrap, .sr-only:
.sr-only
{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}

Trouble making a facebook like div with triangle on top

on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}

The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.

Javascript/CSS/PHP Hoverbox with various locations on mouseover

I'm trying to get various locations to appear on a image with mouseovers. So basically I have an image and when you hover over a link nearby a hoverbox appears at the location specified in CSS on the image. However I'm trying to get it to happen with multiple links without creating code for each CSS box.
I have something like 50 links and and when I hover over one I want to be able to pull from a db or text file to grab the location where it should create a hover on the image. My original thought was using PHP to help pull in the information from a file, put it into an array and then having the CSS update on the fly. This seems doable if the user just clicks the link as then I can tell CSS what place in the array to look for the location. I am unsure how I could get this to work with mouseovers if at all possible.
The CSS code is very basic at the moment as shown below.
#box {
position: absolute;
top: 100px;
left: 200px;
background-color: #ffffff;}
Let me know if anything doesn't make sense or if I'm just forgetting something.
Thank you!

Ok, so what you're trying to do is called a CSS sprite. Here's what you want (my example is orthogonal to your code, but teaches the principle):
.link {
width: 50px;
heigh: 50px;
float: left;
text-indent: -9000px;
background-color: transparent;
background-image: url(path/to/sprite.png);
background-repeat: no-repeat;
}
.link#one {
background-position: 0px 0px; /* This one is top left on the image. */
}
.link#two {
background-position: 0px 50px; /* This one is 50px from top and 0px from left on the image. */
}
You can see where to go from here (and you don't need to use .link#one. I just used it for example purposes. You could just use #one, or even a class .one.
Practice with this and you'll get how it works soon enough. Here's some sample HTML:
<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>
Just through all that together, and make your image a 100px tall by 50px wide .png file with 50px x 50px for each link.