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.
Related
There's a small challenge that has taken my sleep for a few days. I didn't get success in all my attempts. To be honest, I didn't even get close.
So, basically I need to animate the object (sun) so that it travels continuously along the path of the oval. When the sun is "in the sky" (that is, on the red part of the oval shown below) it should be visible, but it should not be visible when it is "below the horizon" (the light gray part of the oval below).
I've seen many solutions with perfectly round objects, but none with an oval/elliptical object.
I can't use a canvas here and it'll need to be responsive, but I can use CSS3 and some JavaScript plugin.
Here is a link with my "sandbox", if you wanted to use it.
http://codepen.io/caio/pen/pvKoJx
Only to view the dashed, you can create an object with these properties.
.path {
border: 3px dashed black;
border-radius: 100%;
height: 360px;
left: calc(50% - 295px);
position: absolute;
top: 165px;
width: 590px;
}
you should take a look to this Jquery plugin : https://github.com/CSS-Tricks/jQuery-Circulate-Plugin
I think this could do the job !
Edit : the demo don't work on css-tricks.com, you need to download it.
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 draw a line (using css, html or js) from the middle of the page to the right side?
This should work on a different screen resolutions.
The example provided in the picture.
Using a horizontal rule in css.
hr {
color: white;
background: blue;
width: 75%;
height: 5px;
margin-left:25%;
}
<body>
<hr />
<hr/>
</body>
Please see jsfiddle
http://jsfiddle.net/yvytty/jJRAt/
Maybe like this?
HTML
<div class="line"></div>
CSS
div.line {
width: 75%;
height: 1px;
margin-left: 25%;
background: red;
}
Demo
Try before buy
html:
<div id="lineID" class="line"></div>
css:
.line{
background:red;
height: 1px;
margin-left:50%;
}
javascript for more dynamic control:
//you can also put all the css in here
var scr=screen.width/2
var myLine = document.getElementById('lineID');
myLine.style.cssText= "width:"+scr+"px";
fiddle of course!
To my mind the best way to get a line from the middle to the right which scales correctly and is pure CSS is the following:
HTML
<div class="lineblock"></div>
CSS
.lineblock{
width: 50%; /*width can vary yours looks to be ~75% */
height: 20px; /* Random thickness I chose to make sure I saw it on the page */
float: right; /* Always forces to the right-hand side of the parent (so make sure
you're in the top level of the page or have no 'container' div
surrounding your line)*/
background: magenta; /*shows on anything*/
}
This method is both - a) Going to scale to all device screen sizes and be 50% of the viewport, and, b) be dumb enough to be IE 8 + safe (probably more but I only test to 8 it is used by about 10-12% of people internationally* and below that is almost nobody these days).
Sources:
HTML - Simple div
CSS - Experimentation
Browser Stats - Stat Counter's browser version usage for this month past.
Correct at time of writing.
Those of you who have seen google plus may know what Im taking about...
Essentially my problem is this. I would like to have a circle with radius for example of some number of pixels with text in the center. On mouseover, the outline of the circle expands by whatever it was plus 5. When I mouse out, the circle gradually shrinks back to its original size. If the text in the middle of the circle is clicked then an alert box of some sort pops up.
What is a good way to do this and how? Does it involve div tags?
Use CSS3 border-radius to create your circle and some JS to do the animations...or you could try to do them with CSS3 as well.
http://jsfiddle.net/DOSBeats/cE6Yb/
This version uses JS.
Here is the CSS code they use:
.eswd {
background: url("/images/experiments/nav_logo78.png") repeat scroll 0 -243px transparent;
}
.esw {
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
display: inline;
height: 15px;
margin-left: 5px;
overflow: hidden;
vertical-align: 6px;
width: 24px;
}
HTML:
<button g:pingback="/gen_204?atyp=i&ct=plusone&cad=S0" title="Recommend this page" g:undo="poS0" g:type="plusone" g:entity="http://anewyorkthing.com/" onmouseover="window.gbar&&gbar.pw&&gbar.pw.hvr(this,google.time())" onclick="window.gbar&&gbar.pw&&gbar.pw.clk(this)" class="esw eswd" style="" id="gbpwm_0"></button>
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.