Is there a way to have the graticules labels move when you move the map so the grid is always labeled in the current view? I have the following code however, the labels stay at the center of the map.
#10mgraticules10 {
text-name:"[display]";
text-placement-type: simple;
text-face-name:#serif_italic;
text-horizontal-alignment: middle;
text-vertical-alignment: middle;
}
Is there a way to have the graticules labels move when you move the map so the grid is always labeled in the current view?
This isn't possible, by design: TileMill's map view is powered by tiles, which are stitched together into a final image. These tiles are images and are not affected by anything beyond basic positioning by your browser.
Related
I want to create a click event that will have two photos on opposite corners of the screen move towards each other, once they collide, they move back in the direction they came from.
I am having trouble placing an image on the top right corner. I tried using "float: right" but when I tried that, my function does not work.
To place the images on the top right corner you should use absolute positioning:
.class {
position: absolute;
right: 0;
}
Also do you really need javascript to animate this?
It would be better and more performatic to do it with some CSS. Checkout this fiddle I made: https://jsfiddle.net/jv5et9L0/
In the fiddle I use absolute positioning to put the elements where I want, and then, through Javascript, I add apply the transform() property on my CSS. The animation occurs because I have set the transition property on the .item class.
I have two div on html page having id container1 and container2 i have created svg for each div and each svg contain circle, Now i want to connect two circle
Is it possible to connect two circle from two svg file on same page (cx,cy of both circle should genrate automatically)
My code snnipet..
Html
<div id="container1 " style="width:900px;height:800px;border:solid;"></div>
<div id="container2 " style="width:900px;height:100px;border:solid; margin-top: 25px;"></div>
created svg for container1 ,container2 using below code
var svg = d3.select("#"+id).append("svg")
.attr("width", $("#"+id).css("width"))
.attr("height",$("#"+id).css("height"));
and draw circle for each container using force layout
Now I want to connect these two circle using line
How is it possible ???
For your general question "how is it possible?", here is a general approach to get you started:
Super-impose a third, mostly transparent SVG over the whole page using absolute positioning. Draw the line inside this SVG.
Use .getScreenCTM() (get screen cumulative transformation matrix) to calculate the position of each circle on the page.
Use the same function to figure out the transformation from the screen to your overlay SVG, and multiply one screen CTM by the inverse of the other to get the net transformation so you can figure the start and end coordinates of your lines from the coordinates of your circles.
Add a listener to the web page as a whole for any re-layout events, and re-do the calculations above as necessary.
If all of that sounds too confusing, you might want to come up with an alternate web page design that puts all the graphics in one SVG. Or one which allows for a different way to indicate that elements are connected (same colour, or hover over one causes highlight on the other).
P.S. You might be able to use .getTransformToElement() to replace steps 2 and 3, but you'll want to test that out thoroughly. I've never tried using it to find the transformation between elements in different SVGs on the same web page.
I've been trying to create a couple of typical layout examples using Singularity, and I have a question about grid-span and floats.
I've created a sample scss stylesheet and html layout. Here's the complete example on Sassmeister.
http://sassmeister.com/gist/a7ca98b7520b12bd6241
My question is whether the containing content div <div id="content"> is necessary? I'm having to use it with a clearfix mixin in order to 'pull' the div down and keep the footer below the content section and aside.
Is there another way to achieve this layout with Singularity, without having to use the surrounding clearfix div? Is there an option for grid-span in the main section that will either not use a float, or self clear this section?
To understand your problem you have to learn how floats and clearing work.
0.
When you float an element, it is removed from the flow. It's vertical height does not count when calculating the height of the container.
1.
The intended usage of floats is to add images to a long sheet of text. The text would wrap around the floated image and increase its overall height and stretching the container vertically, just like an object submerged into water increases the height of water surface.
Before:
After:
2.
If the floated image is located very close to the bottom of the text, it will pop it's bottom out of the bottom of the container, just like an iceberg exposing it's top from the water.
3.
Now imagine that your text is comprised of paragraphs and each paragraph starts with a title. When there's an image floated at the bottom of a paragraph, the image would stretch into the next paragraph, pushing the next paragraph's title aside.
4.
If you don't want that to happen, you apply clearing to paragraph titles:
h2 { clear: both; }
This basically tells the titles: don't let floated images push you aside, let them push you down instead.
5.
But web pages have become more than formatted text, and HTML/CSS didn't provide any means of formatting layouts. So we started using floats for layouts. It's ugly, it's like using wallpaper to sew your clothes, but we have no better option (until Flexbox becomes a thing, and it seems to already).
What happens when you float all content in a container? There will be no flow left, no text to stretch the container vertically, and it's height will be zero (plus border and padding):
6.
You already know that in order to make containers regain their height (wrap around the floated content) we have to apply a clearfix to the container. But what a clearfix actually is?
When you apply a clearfix to a container, you use :after in CSS to create an additional element within the container, after all it's content. Then you apply clearing to the little mother fcuker:
.container:after {
content: '';
display: block;
clear: both;
}
7.
Now back to your question! What's the alternative of using the clearfix?
You've probably have guessed already.
If you've got got content below the floated element, simply apply clear: both to the next element below the floated one! Just like we did in #4 for paragraph titles.
In your case:
footer { clear: both; }
And here's a demo: http://sassmeister.com/gist/df8af8a3c7f8d3df2796
If I add this style (.style("opacity", .2) to a rectangle the gridlines appear in front of the rectangle, in this example http://bl.ocks.org/bunkat/1962173. Is there a way to bring shape to front or send gridline back?
The elements in an SVG are displayed in the order in which they are added to the DOM. That is, anything you want displayed on top of everything else should be added last. In your case, you need to add the rectangle after adding the grid lines.
Here's a jsfiddle to play with dom order and opacity:
http://jsfiddle.net/laurieskelly/9jr65/
If you back the shapes with identical shapes of the background color, the grid lines will not show through.
Simpler solution: do the shapes really need to be transparent?
I'm building a strategy game in the browser since 2 years back. Its already actively played by a small crowed of people so it is a working game.
Our problem is that its resource hungry. Basically you want opera or chrome. IE9 is more or less unplayable and firefox can be quite slow on some maps.
The game is a tile based top down game using 64x64pixel DIVs for the map.
We are currently in the end phase and we are focusing on optimizations. One of the things that eat resources is our animated water. We have 32 different tiles of water split into 15 frames each. So 480 64x64 images in one .gif file that is 1.1 mb.
Here is a link to the water: http://www.warbarons.com/beta5/terrain/water/water2.gif
Our game uses Fog of War to hide enemy units and castles that you cant see just like any RTS game. So on top of the .gif there is usually a layer with a transparent PNG.
It seems like this solution is quite demanding on the browser. When I scroll the map to show water in FireFox CPU goes up to 25% while its around 4-5% when no water is in sight.
I've been googling for a few days now trying to get an idea of a better technique. I've found two other way of doing this, either with a canvas tag which is iterating over a spreadsheet or using CSS to loop over a spreadsheet.
The problem I see with those two options is that all water tiles must remain in sync. If one starts playing before another one the waves wont be in sync which will break the seamless look.
I wonder if anyone have an idea to solve this? I know that having multiple gif animations will result in the out of sync problem.
Is there some cleaver way to use canvas to do this? Is it even possible to mix canvas with divs or would that require that we change the whole map engine?
Any help would be greatly appreciated.
Bit of a novice work around and a longshot, but:
For preparation, make a sprite-sheet of all of the different types of water tiles, with the first frame on the left, with a new row for each type, descending down.
Create a <div> with an 'overflow' attribute of 'hidden' behind the canvas
Make the background of the canvas transparent
Inside of the div, you can use <div>s for the water tiles and adjust their 'margin' attributes to match the position of the map
Give them all a class designation 'water', as well as a class to match the type of water tile (like 'dockleft', 'beachtop', etc.)
In your <style> element, make a class rule '.water'
Give the rule the 'background-image' attribute, linking to whatever and wherever your sprite-sheet is
For each type of water tile, create a class rule that corresponds to each tile-type and give them a matching y position for the sprite-sheet
Create a new <style> element with an id, one that will contain the background-position of all of the frames
Create a javascript variable to conatin the x position of all of the backgrounds
Inside your game loop, decrement the variable by 64 for whenever you want the sprite to change (until it equals 960, then set it 0)
When the variable changes, set the contents of the new <style> element to the new CSS rule for its 'background-position-x' using the variable
Meh. A little much, I know, but better than looping through an array and gobbling up system resources, changing each element individually (at least I assume so). Here's a simplified code sample:
<script type="text/javascript">
var pos = 0; // background-position-x variable
function loop() {
document.getElementById('changeMe').innerHTML = ".water{background-position-x:" + pos + "px;}"; //changes the contents of the <style> with the id 'changeMe'
//changes the <style> with id 'Change'
pos -= (pos == 960) ? -960 : 64; //assuming your sprite-sheet is oriented horizontally
setTimeout('loop();', 100);
}
</script>
<style type="text/css">
/* Remains unchanged */
.water {
width: 64px;
height: 64px;
background-image: url('spriteSheet.png');
}
.dockleft{
background-position-y: 420px;
/* If all of your sprites are on one sheet, you can set the
'background-position-y' attribute for each type of water tile and
give the 'water' class one sprite-sheet url for all of the types */
}
</style>
<style id="changeMe" type="text/css">
/* Changed by 'loop()' */
</style>
<body onload="loop();">
<div class="water dockleft"></div>
</body>