var m = ele.matrix;
m.translate(10,10) // this line updates the 'e' and 'f' of the matrix. That too i can see the updated value only if i refresh the values in firebug
The element is not getting translated. Please let me know how to make the element obey the transformation when i change the matrix of the element.
full code:
<html>
<head>
<script src="raphael-min.js"></script>
<style>
#canvas_container {
width: 500px;
border: 1px solid #aaa;
}
</style>
</head>
<body><div id="canvas_container"></div></body>
<script>
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
text = paper.text(150,150,"Some Text");
text.transform("m1,0,0,1,5,0")
}
</script>
</html>
thanks
I think the transformation is working, but it is executing immediately, so you don't get to see it move. Try transforming after a timeout to see it:
setTimeout(function() {text.transform("m1,0,0,1,5,0")}, 2000);
Edit: Ok, I looked at this a little more and discovered some things that might help. You can follow along in this fiddle.
Using the matrix property of an element is not really documented (and I am wondering why Matrix is documented at all, because it seems like it is used internally, but not really intended for use by users of Raphael), and the only way I could figure out to apply it to the element was by getting the transform string for the matrix and applying it using element.transform(). One of the problems is that Matrix.toTransformString() seems to have a bug in that, if either x or y translation is 0, translation gets lost completely (I just reported this to Dmitry). I was able to get it to return a matrix string by passing in {isSimple: false} and it sort of works.
However, it is worth noting that using this method, all rotation and scaling seems to be relative to the origin, which is somewhat cumbersome (unless you are more well versed in matrix transformations than I am, which wouldn't be hard). Anyway, the fiddle runs a bunch of combinations of transformations on several elements. It is kind of sloppy, but I think it may give you some ideas on how to proceed with the matrix transformations (or if you are better off just using the element transformation functions [like translate, scale and rotate] directly).
Related
I'm trying to apply the zooming function on a chart I have on my website.
More or less, the actual code of the chart is the one I added in the following CodePen: https://codepen.io/leonardodaga/pen/eYNZdVV
This example works, but I'm trying to use a different xAxis type (not "time") and to format the xAxis ticks with a callback (now commented in the CodePen):
callback: function (value, index, values) {
return Math.floor(value).toFixed(0) + '.' + (((value - Math.floor(value)) * 12).toFixed(0));
},
Removing type: "time" the zoom ends to work.
Is there something wrong with what I'm doing?
It was my mistake, I was passing the data with a wrong format.
In codepen code above, X and Y data were passed using two different array (the first as labels). I should have passed the XY data as a single, two components array.
There is another codepen in my dashboard (Chart.js Linear Zoom example) that shows the way to beginners like me :-)
Callback for ticks was definitely not the problem.
This example is very skewed, but it shows my point well enough. The blue line has a large gap (so a bunch of extrapolated data) for the first ~2 weeks of Nov. I want to hover over point on the red line, and get the corresponding data for the blue line. I've found scale.getValueForPixel(value) but that only gets data for the exact point in the scale. I haven't been able to find a corresponding function for whatever the line is.
Is there any way for me to get the extrapolated data from any point on a line?
A simple to way to get this done is binding the canvas for onClick event, and use the following code, also here is a working fiddle -> http://jsfiddle.net/Lzo5g01n/4/
document.getElementById("myChart").addEventListener("click", function(e) {
var element = myChart.getElementAtEvent(e)[0];
if (element) {
alert(myChart.config.data.datasets[element._datasetIndex].data[element._index]);
}
});
Something like "OpenStreetMaps" works fine!
Everything is ok, Zoom and Marker works, small Code...
But when i add my own Url, the Tiles are get not loaded !
So i think there is something wrong with my Image Size ? Pixel ?
Leaflet Tutorial just say "add a Map Url"
Look in my Code there is a Notice with Examples,
i think this is not a "coding" Error, more like a File Error.
I hope somebody has a idea :-)
http://hizi.xyz/Map/
You are using http://www.hizi.xyz/Map/{z}/{x}/{y}.png as your base URL, but your tiles are actually at http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png.
At the zoom level you've initialized the map (11), you will not be able to see your custom tiles anyway, so you should set maxZoom: 5 in the map options. Also, your tiles only cover the northwestern quadrant of the map (from 0-85 degrees north and 0-180 degrees west), so you will either want to restrict panning within those bounds by setting the maxBounds option, or (if you actually want the map to be global) modify the directory structure by lowering the index for each of the {z} directories by 1. The following code should work to load your map as it is and prevent users from getting outside the boundaries of your map tiles:
var southWest = L.latLng(0, -180),
northEast = L.latLng(85, 0),
bounds = L.latLngBounds(southWest, northEast);
var map = L.map('map', {maxZoom: 5, maxBounds: bounds}).setView([42.5, -90], 3);
L.tileLayer('http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png').addTo(map);
If, for aesthetic reasons, you want to keep the map from wrapping at the world boundaries, you may also want to set noWrap: true in the tileLayer options, i.e.:
L.tileLayer('http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png', {noWrap: true}).addTo(map);
Here is an example fiddle that shows it working:
http://jsfiddle.net/nathansnider/6qeL29sm/
I have a row setup like so:
<div class="row">
<div class="small-12 small-push-12 large-6 columns">
<!-- Content -->
</div>
<div class="small-12 small-pull-12 large-6 columns">
<!-- Content -->
</div>
</div>
Basically, I want the second column to be pulled before the first column when the screen is small, but keep it at proper order for large screens.
What am I doing wrong here? The document reflows like it always does.
Also, I do realize I can just reverse the order in the HTML itself and it'll work, but just curious if it's possible to make it work this way.
Your question prompted me to look at Foundation’s SCSS source code to see how the grid was implemented since like you I was having trouble getting my columns to shift as I wanted. In the time spent finding an answer I’ve now forgotten what I’d needed to find out originally but having gained insight as to how the grid works I know it will now be much easier to use and I’ll feel more confident that my work is correct. I’ll try to provide some of that insight here.
The simple answer to your question is, No, you can’t make Foundation swap a block of columns in the way you’ve done it. [I’ll call them columns as opposed to grid columns that refer to Foundation’s (usually 12) base columns.] Assuming it might have worked I’d say that the code you wrote would be correct. The actual reason it fails to work is because *there are no 12 column push or pull classes defined in Foundation for small, medium, large or any media size range." Thus, when the media screen size is "small" (in your case) the push and pull classes are silently ignored by CSS and you end up with two columns on two rows in the original order.
The general rule is that you can’t push or pull columns from one row to another; you can only move them along the same row. After seeing that I reread your question which began, "I have a row setup like so…" But that’s not true since the intention is to produce two rows. That one can create multiple rows with one column(s) definition is, I think, just a side effect of how CSS floats work.
Here’s what happens (excuse me for anthropomorphizing the CSS attributes…it's just easier to talk about them as "doing something to something" and often seems to be the best way to clearly understand what's happening):
For every column you specify, it’s width is determined using the current grid column width (plus some "gutter" for spacing) multiplied by the specified number of grid columns from the class name used (large-6, small-2, etc.). Since they have been given the float attribute they are then lined up one against the next starting at the beginning of the row. If there is not enough room on one row to display all the columns the line of columns is split and continues on the "line" below, and so on; those that don't fit are moved to the next row (and so on). Without other classes specified each column will be displayed in this initial position. This is how multiple rows can be formed from one column(s) definition.
When you add push and pull classes the CSS right and left attributes are added to those described above. The offset determined by the specified push or pull class is used to calculate the relative shift which is used to reorder columns if necessary. But the left and right CSS attributes know nothing about where these column-blocks have come from or that there is any row but the one they work on. So each column is moved along the line where it was initially placed and if the amount of shift moves the column outside of the row boundary it will be placed (or partially placed) to the left or right of the row (and possibly out of sight). That’s the reason that your proposed process won't work in general though in your case, as mentioned above, you used a class that wasn't defined (small-push-12) and got a different effect. If you play around a bit with the lower numbered push and pull classes (1 through 11) you can see more clearly how the columns are pushed part way off a row. (the way it is currently done by Foundation, at least) and why I now think (since at first I thought it might be possible myself) that being able to create multiple rows in the base case is a beneficial "side effect" of how CSS happens to work.
For anyone wanting to improve their CSS understanding or who uses Foundation, I highly recommend taking some time to work through one or more of the features that Zurb has implemented in the framework. I find that the SCSS definitions are well designed and cleanly coded (though perhaps not to everyone’s liking since, IMHO, CSS coding opinions seem to be as inflammatory as Mac/Windows opinions and often evoke the same fervor when expressed).
Found the solution in a separate thread! Start with the order you want in the source for mobile, then use the push/pull classes to bend it around for the LARGER sizes. In other words, approach it from the opposite end.
Change order for Foundation small-12 column
Reduced test case here.
I'm trying to understand why this occurs.
If I have an <a> within an <h2> and set a line height on either the <body> or <h2> the link height is greater than the <h2>.
[Update to clarify] The issue is that .title a has a computed height of 58px, whereas its parent h2.title has a computed height of 50px. I expected them both to have the same computed height. [/update]
I've given them both bottom borders to better illustrate the problem.
[Update 2] I've read over the line-height spec to try and understand this.
From my reading of the spec it seems like an inline element a within a block-level element h2 ought to inherit the parent line-height. I've edited my example here with a larger line-height on the h2. Giving the a a display of inline-block obviously makes it fit, but it still doesn't line through as well as removing line-height altogether (thus using browser default line-height of 1.2).
This is probably not a problem as such, I'd just like to understand the behavior.
[Update 3] I've realised that if I change the line-height of the a to be greater than the h2 the overall height of the h2 box (pink in example above) does increase, so the a is inheriting the line-height from the h2. The confusing thing is that the link height (clickable area) and border-bottom position don't change, whereas the border-bottom on the h2 moves with the line-height.
I don't see your problem. In the link you provide there is absolutely nothing strange. You have a link in a h2. So the font-size of the link gets the font-size of h2. But the a is nowhere bigger than the h2.
It isn't an issue?
However add display:block; to your anchor and it will act more like you expect
you have a h2 containing a link.
the h2 and the link have a line height of 1 (as inherited) but the link has a explicit font size of 3em.
that means, the font size is bigger as the container, which might lead to different results in different browsers.
in Firefox (version 13) the result is, that you have an overflow to the top and the bottom of the parent container (h2).
have you tried removing the margins of the <H3> ? it has default margin to 0.5em in most browsers.
If this was the problem you can read about Reset CSS.
Edit:
you have 2 types of containers, a floted block element with strict fixed height;
and a inline witch has auto hate .. and default margins and spacings (imagin a link as part of a paragraph...).
To get the expected result you can add display:inline-block on the <a>.
So they both will be treated as boxes with fixed height.
http://dabblet.com/gist/5219955