I have many different elements floating around a page at different speeds. When an element leaves the right hand side of the page, it should start to float in the left hand side. This is easy, if the element.x is bigger than canvas.width, element.x = -100. This sets it a little further out so it doesn't look jumpy. But now here is the problem, how do I do it if the element leaves the left hand side of the page? We cant say if element.x < canvas.width because some elements will naturally be on the outside of the canvas floating back in.
Thanks for your help
There are a few ways to go about this.
One is to only "move" the element to the other side if it is completely offscreen (if there is zero intersection). Then moving it means that you always intersect the screen by only one pixel.
Another is to check "where it was coming from" by keeping track of its last location or knowing its trajectory (you probably know this if you're animating). If it is coming from the left and going to the right and you're on the right side, its leaving the screen and you have to move it. But if its coming from the left and going to the right and you're on the left side of the screen, you know its entering and its OK.
Related
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I have a rectangle and its background image is a screenshot of a form.
I have placed many Gauge Panels on this rectangle where check marks need to be.
Based on certain logic, the Gauge Panel will be visible or not.
The problem is that if all Gauge Panels on the left side are hidden, it moves all the Gauge Panels on the right side.
Here's a screenshot during design mode:
And here's when I run it:
I'm assuming it has moved because there was no visible "Yes" check mark.
How should I go about making sure these panels are FIXED inside the rectangle?
EDIT -
I tried putting the items inside rectangles and I'm running into the same problem:
Place your gauges inside fixed rectangles so even when they're not visible, their container rectangles will still take up space in your report on the left side and not interfere with the checks on the right hand side.
My general rule of thumb when trying to do fixed layouts in SSRS is use a lot of rectangles, as they are rendered as absolute DIVs and therefore bend to your whim a bit more in terms of heights, widths, and positioning.
I need to put more than one (3) HTML5 Canvas side by side. Left and right will be 200px wide. Center will fill the rest of the space. All three need to fill the screen vertically.
What I'm doing is building a drawing program. Left and right will be drawing tools. Center will be the drawing area. I think I need a canvas specifically for the drawing area in order to zoom, pan, scroll the drawing without the image overlapping the tool windows. Essentially I'm using the center canvas as a clipping range. I don't know if this is the best way to do this or not.
What I've tried is putting 3 <canvas>es on the screen, but they just overlap. I put 3 in <div>s, but they just stack.
Thoughts?
As per the comments, <canvas> isn’t a void tag, so you need to write </canvas>.
You can also use that to provide helpful text in case somebody’s browsing in something not-quite-modern:
<canvas id="one">
Hey, your browser doesn’t support the Canvas API!
You should upgrade if you want to use this.
</canvas>
When I re-size the container that a Google Map sits inside, is there any way to keep the map in the exact same position regardless of the change?
When I move the left edge of the map container, the map moves right or left, but when I move the right edge of the map container, the map doesn't move at all. Is there any way to reverse this so that if I moved the left edge, the map wouldn't move at all?
This is very similar to what Google is doing with their Results panel on the left side (maps.google.com). The problem is, when I use CSS/JS to re-size everything and re-center (using the setCenter method and calculating what the new center should be), the map flickers occasionally - not all the time, but about 15-20% of the time. I can't for the life of me figure out how to get it to work without flickering. I was wondering if there's any method of anchoring the map on the right-hand side?
Open to other ideas as well if anyone can give provide any hints.
Maybe try to position map in container absolutely with right property specified?
<div id="container" style="position:relative">
<div id="map" style="position:absolute; top:0; right:0"></div>
</div>
Although result depends on overall layout, it may work.
I have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...