I realize that VML is deprecated as of IE9, but I need compatibility with older versions. I have been looking at highcharts, and how they make their otherwise SVG-based charts work with IE 6.0+, and the answer is VML.
As I have been able to render some examples in IE8 with the help of Highcharts, I have also been able to extract some source code examples to play with. This specific chart is the one I am trying to understand and recreate. I do not care about animations, tool tip texts or highlighting. I basically want to understand how i can draw polygons that include curves, and in this case, as a part of a half donut-shaped pie chart.
The code below represents an example that has three slices of a pie chart, inside a frame-shape. I have been playing around with the numbers, but I cannot figure out exactly what the following values represent:
path = "
wr1120,933,4670,4483,0,2600,1170,2248
at2058,1870,3733,3545,2081,2510,500,2510 x e"
They obviously represent some kind of coordinates, angles or distances, but after both playing around with them, and searching for documentation, I couldn't come to an understanding.
But, this I found out (values named wr1-8 and at1-8):
-wr seems to represent the outer circle, while at represents the inner cut-out (hole in the donut)
values wr1-2 and at1-2 seems to represent some kind of mask of the total circle.
values wr3-4 and at3-4 seems to represent some kind of arch rotation, or something else arch related. all numbers 1-4 are equal in all slices
values 5-6 and 7-8 on both at and wr seems to represent continual coordinates, where the next slice starts where the previous stopped. However, I cannot find a pattern when I change the numbers. I cannot find the system.
So what does these values actually represent? Or better yet, where can i find documentation that explains this?
Below is the complete code of a three sliced half donut pie chart example:
<!doctype html public '-//W3C//DTD html 4.0 Transitional//EN'><%# Language=VBScript%>
<html xmlns:v='urn:schemas-microsoft-com:vml'>
<STYLE>v\:* {behavior:url(#default#VML);}}</STYLE>
<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px;
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible;
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML);
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round"
coordsize = "10,10" filled = "t" fillcolor = "#00FF00" stroked = "t"
strokecolor = "white" strokeweight = ".75pt"
path = " wr1120,933,4670,4483,0,2600,1170,2248
at2058,1870,3733,3545,2081,2510,500,2510 x e"><fill style="DISPLAY:
inline-block; BEHAVIOR: url(#default#VML)"
xmlns="urn:schemas-microsoft-com:vml" type = "solid" opacity = "1">
</fill></shape>
<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px;
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible;
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML);
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round"
coordsize = "10,10" filled = "t" fillcolor = "#dddf00" stroked = "t"
strokecolor = "white" strokeweight = ".75pt" path = "
wr1120,933,4670,4483,1170,2248,2509,975
at2058,1870,3733,3545,2713,1890,2081,2510 x e">
<fill style="DISPLAY: inline-block; BEHAVIOR: url(#default#VML)"
xmlns="urn:schemas-microsoft-com:vml" type = "solid" opacity = "0.5">
</fill></shape>
<shape style="POSITION: absolute; MARGIN-TOP: 0px; WIDTH: 1px;
DISPLAY: inline-block; HEIGHT: 1px; VISIBILITY: visible;
MARGIN-LEFT: 0px; TOP: 0px; BEHAVIOR: url(#default#VML);
LEFT: 0px" xmlns="urn:schemas-microsoft-com:vml" stroke-linejoin="round"
coordsize = "10,10" filled = "t" fillcolor = "#ed561b" stroked = "t"
strokecolor = "white" strokeweight = ".75pt"
path = " wr1120,933,4670,4483,2509,975,2579,961
at2058,1870,3733,3545,2746,1883,2713,1890 x e">
</shape>
wr means "clockwise arch"
at means "arch to"
The 8 numbers represent 4 (x, y)-paired coordinates in both cases. The two first pairs represent the upper left, and lower right coordinates of the bounding box of an elipse. To put it simple, it is the coordinates on the canvas where you press the mouse, and where you release the mouse while drawing a circle shape in MS Paint.
The two last pairs represent coordinates, which gives vectors from the center of the circle, to the given coordinate. The angles produced will be the starting and ending angle of the given slice.
the angles only decides the cutting point inbetween the bounding circle, and the vector. In other words, the angles only gives a point, not a side. Both the inner and the outer circle needs matching vector angles, to give a nice presentation, where the lines that seperates the sides of the donut slices, would all cross in the center of the donut hole.
For more info about all possible commands for the path, see:
http://www.w3.org/TR/1998/NOTE-VML-19980513#_Toc416858391
I would suggest creating in SVG first, then converting to VML, if that's possible for you. I recently figured out how to do so.
Essentially it involves using this stylesheet: http://www.cs.sjsu.edu/faculty/pollett/masters/Semesters/Fall03/JulieNabong/translator.xsl
You also need Notepad++ and its XML Tools plugin.
1 - Open up the SVG file in Notepad++
2 - Go to Plugins --> XML Tools --> XSL Transformations
3 - Select the translator.xsl stylesheet
4 - Click on "Transform"
Here's the thesis' demo page:
http://www.cs.sjsu.edu/faculty/pollett/masters/Semesters/Fall03/JulieNabong/index.shtml?display.html
Related
I have really bad situation. I have my custom div which I m showing under page. The only issue I have at moment that it's not working on iPad. The overlay covers the popup even after I have proper z-index to both element.
This issue only facing with iPad safari. On other browser it's working fine. I found one solution where I need to shift my popup next to or near by overlay div which is not possible for me due to binding context of knockout.js
The issue snap
here as you can see the attached image the opened calender is behind the overlay gray div.
Below is the html structure where the higlited is the calender container & at last overlay div.
Let me know if some can suggest me some good idea to deal with this.
It seems like if your fixed element is inside an other fixed element that has lower z-index than overlay it will stay behind it even if the element itself has a higher z-index. So you have to find that higher fixed element and change it's z-index to something higher.
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 4;
}
.lower {
position: fixed;
z-index: 2
}
.popup {
position: fixed;
border: 1px solid black;
background: white;
height: 200px;
width: 200px;
z-index: 100;
}
<div class="lower">
<div class="popup"></div>
</div>
<div class="overlay"></div>
It's also happen for me in Safari, simply I solve it by remove overflow:hidden from parent div.
See the following link: http://www.howru.nl/preken/new/test3.html
For some reason I keep getting space at the right of the three main buttons.
To better identity this on this forum, I've enabled the border of the relevant table temporary.
The issue is inside the following class I reckon:
.button
{
display: block;
width: 350px;
height: 135px;
margin-left: 7px;
margin-right: 7px;
margin-top: 10px;
margin-bottom: 20px;
text-decoration: none;
background-position: top;
color: #FFFFFF;
}
The specified width is the actual width of the background image.
The full CSS sheet can be found at http://www.howru.nl/preken/new/styles.css
Right column (text) should float at the right, as is the case currently. Left column (buttons) should float at the left (as is currently the case), and the center picture should float in the center. Strange thing is the left column takes more space in the table, while none have a fixed width.
Ideally I don't want to specify a width of a column twice (for the TD and for the content, in case of a BG image on the display-block'd content); in the proposed solutions below the display-block'd has a width specified (width of the background image) and the parent TD element as well... That is what I don't like and for which I started this post. Because I still don't understand why the TD's aren't equally sharing the available table space:
Now column 1 (left) seems to take the most, while it doesn't need so much, the second takes a little less, and the right column takes only what was specified for the inner width, whilst the left (1st) column has the same (width specified for the content instead of the TD) and does not stick to that width apparantly, while the right TD does...)
Both in IE as Opera I get this; any idea what I am missing??!
Goal is to understand what is happening, and why. So I'm not looking for a cheap fix - as one can thing of 100 'ugly' ways to do this.
here are the changes i have made. Try this. Btw you should use % instead of px
.top {
vertical-align: top;
width: 350px;
}
removed float from .blkright
.blkright {
}
.title {
font-size: 14px;
font-weight: bold;
letter-spacing: -1px;
padding-bottom: 5px;
text-align: center;
}
.column {
margin-left: 12px;
overflow: hidden;
width: 325px;
}
Change right table .top .column width in the to change this space to right of buttons
.column {
overflow: hidden;
padding: 5px 5px 25px;
width: 290px;
(originally width was 250px) because it is trying to fit the width: 100% you have set
you can also remove the 250px , since the right column is the only column you've set a width on
I am not ultimately sure how you want the rest (e.g. the text paragraph) aligned then, but here is my approach.
First, give each body-column a class or an id. You assign these classes to the three <td>s respectively.
.content-left {
float: left;
}
.content-mid {
float: left;
}
.content-right {
display: table-row;
}
Although this solution takes a bit more effort than IanO.S.'s, this solution is also more dynamic. If your button or image sizes change someday you don't have to hack into your code, find and edit your pixel-widths.
Add declaration of width on the first table cell
.top:first{
width: 364px;
}
and you wont see any spaces anymore
I'm trying to nest an image in a div and make it draggable on the X axis within this div.
Here's a jsFiddle to illustrate my point
I'd like the blue box to stop dragging once the user reaches its left/right edges, he shouldn't be able to see any of the red wrapper anymore.
Imagine the blue box is a very wide image, I want to be able to drag it from its left side to its right side without exceeding its width. It means you can't drag it to the right when you reached its left edge, and you can't drag it to the left when you reached its right side.
In a nutshell, when you reach the edges of the image, you can't drag it any more.
How can I set that kind of behavior ?
I tried playing with containment but I couldn't achieve what I wanted.
Thanks for your help.
HTML :
<div id="wrapper">
<p id="timeline"><img src="" alt="Timeline" width="2000" height="400"/></p>
</div>
CSS :
#wrapper {
width: 800px;
height: 400px;
background-color : red;
overflow: hidden;
cursor: w-resize;
}
#timeline {
width: 2000px;
height: 400px;
margin: 0 auto;
background-color: blue;
}
JS :
$("#timeline").draggable({
axis: "x"
});
You were correct to use the containment option but you'll want to pass in array of coordinates to constrain the draggable.
Per the jQuery UI docs the containment option can take an Array in format [x1, y1, x2, y2]. In your case the y values are irrelevant because you are already constraining the draggable to the x axis, so you can simply pass in 0.
For the x values 0 will work for x1 since the image is already starting on the right edge. For x2 you'll need to use:
(width of parent - width of image)
So
(800 - 2000) = -1200
Therefore you can pass the following in for the containment option:
containment: [-1200, 0, 0, 0]
Live Example - http://jsfiddle.net/LMXLj/
I have a button image I'm using as a background image for some links.
The background image has rounded corners.
I want to use a css drop shadow instead of putting the drop shadow in the image
The problem is, the drop shadow appears to be drawn around the element. Although I kind of expected to see the drop shadow color through the transparent parts of the background image, I'm seeing the background color instead (see this jsfiddle).
My actual goal is a little more complex, but if I can satify my first three bullet points then I can nail this task. Specifically, what I want to do is use two nested elements with background images of the right and left parts of a button image (rounded corners) so that I can use the same css to wrap a 'button' around text of any length. Since the backgrounds overlap in a css 'sliding doors' style, a png alpha drop shadow shows a 2x dark section where the images overlap. Soo.. I thought I'd use a css shadow, but as you can see in the jsFiddle, there are problems with that too.
Any ideas?
Box-shadows don't show through transparent backgrounds. A more simple test case would be:
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: transparent;
box-shadow: 0 0 10px #000;
}
The output expected would be a nice blurred black square right? Well... no, it's a white square with a dropshadow. http://jsfiddle.net/UjhrW/
To achieve what you want to do you will need separate markup for the dropshadow, fill it with white, and then set the spill of the shadow so it looks like a blurry square...
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}
http://jsfiddle.net/Etmty/
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}
<div class="box"></div>
I'm trying to come up with my own star image that's slightly smaller and different style than the one provided in the gem/plugin, but Ajaxful_rating doesn't have an easy way to do this. Here's what I've figured out so far:
The stars.png in the public folder is three 25x25 pixel tiles stacked vertically, ordered empty star, normal star, and hover star.
I'm assuming as long as you keep the above constraints, you should be fine without modifying any other files.
But what if you want to change the image size of the stars to larger or smaller?
I've found where you can change the height in the stylesheets/ajaxful_rating.css
.ajaxful-rating{
position: relative;
/*width: 125px; this is setted dynamically */
height: 25px;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
background-position: left top;
}
.ajaxful-rating li{ display: inline; }
.ajaxful-rating a,
.ajaxful-rating span,
.ajaxful-rating .show-value{
position: absolute;
top: 0;
left: 0;
text-indent: -1000em;
height: 25px;
line-height: 25px;
outline: none;
overflow: hidden;
border: none;
}
You just need to change every place that says "25px" above to whatever height your new star image is. This works fine but doesn't display the horizontal part correctly. Anyone know where I would look to set the horizontal part as well? (I'm assuming it's in an .rb file somewhere based upon how many stars you specified in your ajaxful_rating setup)
Nevermind, I'm stupid.
In the lib/axr/stars_builder.rb, find the following:
def ratings_tag
......
#css_builder.rule('.ajaxful-rating', :width => (rateable.class.max_stars * 25))
....
end
Change the 25 to your new width.