I'm working on jQuery mobile. I have an overlay which pops out on tap of a button in the header. The overlay appears close to the button.
<div data-role="header" data-position="fixed" data-theme="a" data-tap-toggle="false">
<h1>Photos</h1>
<a href="#photomenu" data-icon="gear" data-iconpos="notext"
data-rel="popup" data-transition="slidedown"></a>
</div>
But on orientation change the overlay appears at the center.
How to retain the position of the overlay on orientation change? Any help is appreciated.
By default, popups open centered vertically and horizontally over the thing you clicked (the origin) which is good for popups used as tooltips or menus. The framework also applies some basic collision detection rules to ensure that the popup will appear on-screen so the ultimate position may not always be centered over the origin.
For situations like a dialog or lightbox where the popup should appear centered within the window instead of over the origin, add the data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of position-to in addition to origin and window. For example, if you add data-position-to="#myElement" the popup will be positioned over the element with the id myElement.
Position to window
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
I have also made you a live jsfiddle example: http://jsfiddle.net/Gajotres/8xCYB/
Related
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.
In my html, I have the below link to show popup dialog.
<h2 class="modest-size-chart">
<a data-role="none" data-rel="popup" href="#sample_length_size_chart_popup" class="btn_size_chart">Size Chart</a>
</h2>
<div data-role="popup" id="sample_length_size_chart_popup" data-overlay-theme="b">
...
</div>
After click "Size Chart" from the page, popup dialog with id "sample_length_size_chart_popup" is shown. The default position of the dialog is in the center of the mobile screen.
When scrolling up/down the page, the popup will be moved up/down together with page. It's expected.
However, at some times (especially, the popup dialog is hidden and shown again), the popup dialog will be flickered and re-positioned at the center of the screen.
I don't want the re-position, it should be in the same position related to the page. Any suggestions?
Set popup position to be relative to a specific element, adding:
data-position-to="#fixedElement"
to <div data-role="popup" ... >. This way the popup should always open near #fixedElement. You must use a :visible element, positioned according to your needs.
i have currently started broadcasting on cam website. have fear of getting recorded so wanted to get dmca button on the webpage where cam get broadcasted. the website i use only allows html for users. so i have tried below codes.
<a style="display:scroll;position:fixed;top:100px;left:100px;" href="#" title="Back to Top"><img src="source to button "/></a>
this code is working good apart from a problem that when the webpage is scrolled down the button also comes down. this leave cam area clear.
Is there any way to fix the button to specific place?
position:fixed; fixes the element's position relative to the viewport. If you want to fix its position within the container you'll need to use position: absolute;, ensuring that the ancestor you're wishing to position it to has its own positioning (which can be set to relative).
Change position to absolute:
<a style="display:scroll;position:absolute;top:100px;left:100px;" href="#" title="Back to Top"><img src="source to button "/></a>
position:absolute will keep the element fixed in relation to the ancestor or first positioned element.
position:fixed will keep element in relation to the browser window/viewport. That is what keeping it moving along with the window scrolling.
You may read it in detail here: http://www.w3schools.com/cssref/pr_class_position.asp
I'm writing a javascript game and I'm having a bit of trouble trying to get my game work with the requestFullscreen feature. My game exists of a menu with a button (html5 button) to start the gameloop. But when I go in fullscreen, the menu goes to fullscreen, but the button that can start the gameloop, disappears. I was wondering if it's possible to still have html5 buttons on screen while being in canvas fullscreen mode.
Thanks in advance
Requesting full screen mode will make the element (and its children) full-screen. Anything else will be hidden.
As the canvas element can't have children you need to wrap it and the elements you want to see in a parent container, ie. a div element.
<div id="cover">
<canvas ... ></canvas>
<button ... >My button</button>
</div>
Now you can request full-screen mode on cover.
Note however: the full-screen API isn't final and do behave different from browser to browser. You may need to add specific CSS for each element for full-screen mode versus non-full-screen mode.
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.