Raphael canvas overrides css - javascript

I'm using Raphael to create a vector based map. The map is biggish so I'm using RaphaelZPD to allow zooming and panning while fitting the image in to a smaller frame. I've used html5 to create a div set as a table-cell with rounded corners and some inset box-shadows set in the css file. I've id'd my Raphael canvas the same as the div and while it loads nicely, shows all the graphics right, has all the animated elements working properly, stays within the boundaries etc. there's still a slight a problem. The SVG overrides the rounded corner and inset box-shadow attributes set in the css. So instead of rounded corners I get sharp corners. If I pan the map so that there is no Raphael produced graphics overlaying the corner, the rounded corner appears again. Same goes for the shadows.
So is there a way to make the js stay behind these effects? Or should I try to go around it by creating inversed rounded corners as absolute elements which stay on the top layer and just forget about the shadows?
I hope I was clear with my problem, got a good week of programming experience of any kind so bit shaky with my terminology still.
http://jsfiddle.net/cgnrh/4/ <- with practice images, also very messy
#map {
display: table-cell;
position: absolute;
margin-top: 104px;
margin-left: 350px;
border-radius: 0 2em 2em 0;
box-shadow: inset 3px 0 7px #777;
width: 550px;
height: 900px;
background: #FFFFFF;
}
var paper = Raphael('map');

I wrapped a div around your map div:
<div id="frame">
<div id="map">
</div>
</div>
Then I changed position from absolute to relative on #map and added styles for the frame:
#frame {
position: relative;
top: 104px;
left: 350px;
overflow:hidden;
border-radius: 0 2em 2em 0;
}
By applying the rounded corner to the wrapping div and hiding overflow, it creates the rounded corner on the map image. I believe you're assumption is correct that the Raphael SVG is rendering over the effects of the div on which is is painting, so you just have to constrain it with a surrounding div. Changing position from absolute to relative and using positioning on the wrapping div was necessary to get it to layout in the same place it was before. I don't think you're going to be able to achieve the inset box shadow.
http://jsfiddle.net/9w2ub/

Related

Datamaps hover pop up

I'm using datamaps to display the countries of the world, but have the graph centered. When I hover over a country, the pop up appears all the way to the left, accurate to where the country would be if I didn't center it. I believe the issue is the css:
#map {
margin: 0px auto;
width: 700px;
}
But I don't know how to center it in a different way.
Is there any way to change where the pop up appears? Thanks in advance!
(I tried to add a code snippet, but it was getting an error for some reason.)
Changing the position to be relative works. As Eric Hoose's example shows, the <div> is relative, so the hover still works.
#map {
margin: 0px auto;
width: 700px;
position: relative;
}
The hoverover popup is attached to the dom via the datamaps-hoverover class. By default, d3 sets this position: absolute, with top and left attributes being set dynamically based on where the mouse is. Since the position is absolute, it shouldn't matter that you have the map centered.
For example, I added your css (while renaming the id to match the example):
#container1 {
margin: 0px auto;
width: 700px;
}
to the jsbin that datamaps uses as an example here.
As you can see, the popup is still in the correct spot even though the map is centered.

Shade out sector of circular image using css and javascript

I have a simple circular image with an overlaying div of same dimensions and opacity of 0.4. I want to shade out only part of the image i.e. if I give it 100 degrees, I want it to show a circular section of the overlaying semi-transparent div of only 260 degrees. I have searched a lot but am not sure how to do this.
Here is the CSS for the overlaying div:
.shade {
position: absolute;
text-align: center;
width: 50px;
height: 50px;
border-radius: 100%;
background-color:#ffffff;
opacity: 0.4
}
This may help out a ton. It's for CSS3 Pie Charts, but maybe you can use some of these techniques to accomplish what you want with straight CSS.
http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

Scale div like an image

I am trying to scale content within a div based on it's width.
As an example, I have a div:
<div id="container"></div>
I have styling such as:
#container { margin: 0px auto; width: 810px; height: 800px; border: 1px solid #000; }
This presents me with a div 810px wide and 800px tall, nicely centered on screen with an outline.
Let's say I have a banner graphic at the top which should scale with the div, so I have it's width at 100%. Works great.
I have a background graphic for the container div itself set to scale with the width as well, working great.
What I need help with, is let's say I had a heading underneath the banner, but this font size needed to scale with everything else, based on the width of the container. How would I accomplish this?
I am also looking to add other elements such as buttons, which would need to scale.
At the end of the day, imagine and image with a width of 100%, and how it scales proportionately, perfectly. This is how I need the container div and all its children to act, like an image. I hope this makes sense.
I have looked at scaling text like in this link: http://jsfiddle.net/Aye4h/
This is the perfect behavior, but I need more than just text to scale.
Scaling is a complicated matter as some content is vector based or otherwise rendered on-demand, and some content is raster based (e.g., images). If you want to scale an entire element as if it was just an image, then have a look at transform: scale:
#scaled {
border: #f00 solid 5px;
background: #0ff;
height: 500px;
margin: -125px;
transform: scale(0.5);
width: 500px;
}
<h1>This is outside the scaled element</h1>
<div id="scaled">
<h2>Inside the scaled element</h2>
<p>An image:</p>
<p><img src="http://i.imgur.com/3A1Loxw.jpg"></p>
</div>
Keep in mind that the transform is applied after the image has been laid out on the page so all content around it will think it's still at its original size. You can work around this in many other ways, such as by using negative margin values (as I did in the example).

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.

How to create google plus circle with mouseover effect?

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>

Categories