I have a page with several grid panels. The grid panels contain specific output objects.
I want to darken a panel while the javascript is building the display objects (mostly Plotly charts, DataTable objects, and a D3-generated map, etc.) then brighten the panel when the processing is complete. The goal is to let users know that processing is going on.
I have tried an overlay (based on https://www.w3schools.com/howto/howto_css_overlay.asp), but this approach doesn't darken the panel or preserve the contents of the panel when the overlay is switched off.
I'd appreciate any ideas about how to 1) darken a panel during processing, 2) write display objects under the overlay, and 3) remove the overlay while preserving the display objects.
Sorry for the rambling question. If there is another approach (changing the cursor??) I'd appreciate hearing about this too.
TIA AB
Related
I have an issue with one thing.
I have a map of world and I want to add functionality when a user clicks on one of the list elements (you can see 3 lists with different places on the image, for example, Paris Air Show) it would show me on the map. As you can see on image example
Is it possible to do? It should work on different devices, but I have no idea how to create that.
Thanks a lot for your help.
Here is a good solution, which works for me.
So I've created a map with areas and on those areas, I put coordinates of places and this map is attached to the image. Then I calculate a place using map.getBoundingClientRect()
I'm using the wookmark plugin for jquery to display a list of products in a tile view. Also, I have this "tiles" comming in an ajax calling (endless scrooling).
When I'm getting a new page I'm recalling the container in order to apply to the "new page" the pluggin.
The problems I'm facing with this plugins are: if the number of tiles are not enought to fill the container, the plugin will put align to center (imagine a row that has space for 4 tiles but only has 2, the pluggin will put this two in center)
Also, sometimes when fetching a new page, the tiles are reorder.
Someone knows how to force always the tiles to be align left (the free space will be on the right side of the container) and how to "turn off" the ordering?
Thanks
I'm working on an app that displays a large image just about the same way as Google Maps. As the user drags the map, more images are loaded so that when a new part of the map is visible, the corresponding images are already in place.
By the way, this is a Javascript project.
I'm thinking of representing each tile as a square div with the image loaded as a background image.
My question: how exactly can I calculate what divs are showing, and when the tiles are moved, how do I tell when a new row of divs have become visible?
Thanks!
About calculating what divs are showing: learn the algorithm for intersecting two rectangles (the stackoverflow question Algorithm to detect intersection of two rectangles? is a good starting point). With that, the divs that are showing are the ones whose intersection with the "view window" is non-empty.
About telling when a new row of divs have become visible: you will probably need a updateInterface() method anyway. Use this method to keep track of the divs showing, and when divs that weren't showing before enter the view window, fire a event handler of sorts.
About implementation: you should probably have the view window be itself a div with overflow: hidden and position: relative. Having a relative position attribute in CSS means that a child with absolute position top 0, left 0 will be at the top-left edge of the container (the view area, in your case).
About efficiency: depending on how fast your "determine which divs are showing" algorithm ends up being, you can try handling the intersection detection only when the user stops dragging, not on the mouse move. You should also preload the areas immediately around your current view window, so that if the user doesn't drag too far away, they will already be loaded.
Some further reference:
Tile5: Tiling Interfaces
gTile: Javascript tile based game engine
Experiments in rendering a Tiled Map in javascript/html…
There's no reason to implement this yourself, really, unless it's just a fun project. There are several open source libraries that handle online mapping.
To answer your question, you need to have an orthophoto-type image (an image aligned with the coordinate space) and then a mapping from pixel coordinates (i.e. the screen) to world coordinates. If it's not map images, just arbitrary large images then, again, you need to create a mapping between the pixel coordinates of the source image at various zoom levels and the view-port's coordinates.
If you read Google Map's SDK documentation you will see explanations of these terms. It's also a good idea to explore one of the aforementioned existing libraries, read its documentation and see how it's done.
But, again, if this is real work, don't implement it yourself. There's no reason to.
I have a multi-layered image in Photoshop that I would like to use on the web. The aim is to have a number of buttons to show/hide the various layers.
My initial thought was to export each layer as a transparent GIF PNG, stack the images using CSS and use Javascript to toggle the visibility of each layer.
Is there a better way to achieve this? I am particularly interested to hear of any software or Javascript libraries to simplify this process.
Many thanks.
Edit:
To clarify, the image in question is a map with various outlines and shaded areas to overlay, so I will only need basic control of layer opacity.
I would stack each layer into one large image. In your front-end code create a frame the size of the layer with your stacked image as the background.
Create the buttons and use jquery to trigger a background shift relative to the button that is pushed. It will appear the image is changing, but it is just shifting the background. This will save on consecutive image loads, making the UI appear quick and seamless.
You could try to use the ::before and ::after and -webkit-mask-image property to help you create you multi layered image.
Or just stack png with absolute position and your png needs to be in 24bit mod, by the way.
Slippy maps are web widgets which allow the user pan around a two dimensional plane by grabbing and dragging it. This control was made popular by Google maps, and can be seen on many modern mapping systems today. It's obvious as you watch them load that they are actually a grid of images which are loaded as-needed as the user pans. My question is; how are those images aligned, moved, and dynamically loaded in HTML/JS/CSS? Are they divs with background images? Are they loaded into a parent div with overflow:hidden? What strategies do they use to keep from leaking memory as the user pans around. Are there any third party libraries that make it easier to build them. I'm not interested in geographic maps persay, just the interface that's commonly used to display them. Thanks!
Normally a grid of image elements are moved around, and as some move off the end of the viewer and become hidden they are moved to the opposite side of the grid and the src attributes changed to point to the new map tile.
All these, as you say, will be loaded into a parent element with overflow:hidden;
In terms of examples you can look at the open source Open Layers implementation:
http://openlayers.org/