I am experimenting with a map interface where the entire window is filled with the (Google) map, and my app chrome (don't know what else to call it -- the menues, controls, etc.) are floating or fade away when not required. I have put up an experimental interface.
When the entire page has loaded, the top menu fades out, but dissolves back into view if the mouse cursor moves to the top edge of the window. the legend tabs widget is collapsible and movable.
Now, here is the problem -- for a horizontal swath of the window approximately aligned with the tabs widget, the map is unclickable. You can witness the cursor over the map change from a hand where the map is accessible to an arrow where the map is not accessible. In that band, none of the markers are clickable, nor is the map draggable.
In the web page, the hierarchy is like so
<div id="map">map</div>
<header></header>
<div id="tabs"></div>
<footer></footer>
I have the #map z-index set to -1. If I don't do that, then the header starts fading out and fading in on mouseover erratically. The header behaves fine with map z-index set to -1.
If I move the map div after header, then it obscures the header. In other words, the following doesn't work
<header></header>
<div id="map">map</div>
<div id="tabs"></div>
<footer></footer>
As is, why am I not able to click on a portion of the map? It is as if #tabs is obscuring #map, however, #tabs is only about 300px wide, so it shouldn't affect the rest of the map.
The reason why this is not working is because on your current design the tabs div is positioned relative to the map. This means that the tabs div is overlapping the map area and you can't click it.
If you change the position of the tabs div from relative to absolute then it should work. With absolute positioning you can place the tabs div anywhere on the page based on the x and y coordinates.
You can find out more about CSS positioning here.
Related
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
As stated in the title. When you start tabbing it doesn't respect the fact that there is a nav overlay at the bottom of the screen. So certain links and buttons that are hidden behind the overlay will be tabbed to without being in view of the user.
Is there a way for me to override this functionality and force tabbed items into view?
Trying to intercept tab etc. and adjust the scroll position yourself is one possibility as you have stated but that could potentially lead to unexpected behaviour.
A better way to handle this is to adjust your layout to account for the overlay at the bottom.
In essence all of your main content would sit in a container (this may be the <main> element if your overlay at the bottom is an <aside> otherwise just use a <div>).
Make that container the page height minus the height of the overlay.
That way no content will ever be behind the overlay (which technically is no longer an overlay as nothing goes behind it).
The beauty of this is when you get to the very bottom of the page everything will be visible, with an overlay you may end up with something partially obscured if you don't give it enough margin / padding at the bottom.
I have found two things:
DocumentOrShadowRoot.activeElement this would one way we could capture the currently focused button or link.
Element.scrollIntoView() this would be how we force the focused element to the center of the viewport.
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 need to have a page with a responsive layout that has the following elements (see picture):
Legend:
"folds" for the menu means that it just becomes a small button, which unfolds the menu again on click);
When the left menu folds, the content and canvas div need to slide to the left side of the page. When it unfolds, they get pushed to the right again;
The bottom menu 2 is folded by default (you can only see a button). If you click it, then the small menu opens (above the other elements);
The content div is scrollable;
The elements both in content and canvas should be selectable;
Right now I have the following code:
<div id="background">
<div id="menu></div>
<div id="content"></div>
<div id="canvas"></div>
<div>
The position of background is "relative", the menu and canvas are set as "fixed".
The problem right now is that something (background div) is covering all the other elements, so I can't select the elements inside the content div and the canvas div.
I tried setting z-index correctly (lowest for the background, highest for the canvas) – didn't work.
I don't understand what the problem is.
Can somebody help me, please? Maybe you can just tell me from scratch how I should arrange those elements in CSS, so that I get the arrangement I need?
Thank you!
It seems that you have forgotten to set the position attribute for the content div? z-index only works on elements with fixed, absolute or relative position. (the default is static position, so the z-index is not working)
No idea why the other elements are covered. Maybe posting the css as well would help.
I have applied the following tutorial in a JavaScript script:
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/
It works like a charm in most cases. Whenever I scroll the entire website, everything goes well, hovering over the shapes works perfect.
But whenever I make a div inside the website scrollable with the shape in it, the visible shapes do stay in place (with visible shapes I mean what you're actually seeing), together with the picture, but whenever I hover, I have to hover lower whenever I scroll down, as can be seen on:
http://i45.tinypic.com/28cn7ur.png
(notice the position of the scrollbar and the position of my mouse relative to the blue shape above it)
The div in the center is positioned relative, and within this div I have a canvas-wrapper div (also position relative) and therein the canvas itself.
What is causing this problem?
I was using kinetic version 3.8.2, upgrading to version 3.10.4 fixed the problem.