The application I am developing consists of several major sections. To this end, I have a global toolbar for the entire application and a toolbar that is specific to the particular section of the application.
Here is a gist that demonstrates what the view for an individual application might look like:
https://gist.github.com/mattjonesorg/33b2bbcb0b0c81feb5ca
(Paste the gist into the polymer designer for a quick view)
I have the main application's toolbar as a core-scroll-header-panel. The submenu is in the content. The problem is that the submenu is scrolling under the core-scroll-header panel, which I can easily see as by design, but I'm hoping somebody has a tip for allowing me to keep both the main core-scroll-header-panel and the toolbar locked at the top of the screen. I've tried nesting a core-header-panel in the section, but that did the same thing.
My actual application is in Dart, but I'd be happy with a Javascript answer.
Thanks in advance,
Matt
You have the submenu core-toolbar nested in the scroll region (the <section id="section2" content>). If you want it to stay, put it before that scroll region:
<core-toolbar id="core_toolbar" class="tall">
...
<div id="div1" class="bottom indent">Title</div>
</core-toolbar>
<core-toolbar id="core_toolbar1">
<core-icon-button icon="menu" id="core_icon_button3"></core-icon-button>
<div id="div2" flex>Submenu Toolbar</div>
</core-toolbar>
<section id="section2" content>
<p id="p">Hello, World</p>
...
If you want the both to stay put on scrolling:
<core-scroll-header-panel fixed>
If you want just the submenu to stick:
<core-scroll-header-panel>
If you want the header to condense and have them both stick:
<core-scroll-header-panel condenses keepCondensedHeader>
Related
I am trying to use iron-selector so that I can then dynamically change the main element on my webpage using iron-pages. The code is as follows:
<iron-selector selected='{{choice}}' attr-for-selected='option'>
<div option='home'>Homepage</a>
<div option='list'>List</a>
<div option='delete'>Delete items</a>
</iron-selector>
<h1>Your choice: {{choice}}</h1>
Nothing happens, the divs aren't clickable. I don't get any errors in the console.
I am delving into the confusing world of web accessibility and trying to retrofit my HTML code to have better accessibility with things such as aria-labels etc.
Trying to tab through my webpage app-header, I am not able to select the page title... Should I be able to, or am I worrying about nothing?
The burger menu and the search bar icon are able to be tabbed. I'm just wondering whether the text should be? Because it is not being read out either.
FYI: I am using ChromeVOX as a screen reader
<app-header class="topHeader" fixed shadow slot="header"> <!-- effects="waterfall" not needed as nothing scrolls behind header bar -->
<app-toolbar>
<paper-icon-button id="toggleDrawer" icon="menu" on-click="toggleMenu" title="Expand menu" aria-title="Expand menu"></paper-icon-button>
<div main-title>App Header Goes Here</div>
<search-bar></search-bar> <!-- This is an external element being called in -->
</app-toolbar>
</app-header>
Does clicking on it do anything (navigate to another page, open up a new set of options using DOM manipulation, etc) that isn't behaviour duplicated by some other control?
If so, then it should be possible to tab to it.
If not, that isn't needed.
(If it does nothing, then it is counter productive to allow it to be focused).
Using Polymer 1 I'm trying to figure out a way to dinamically switch pages inside a paper-dialog and inside each page to have a paper-dialog-scrollable element.
Here's the short version of what I'm trying to do:
<paper-dialog with-backdrop>
<iron-pages selected="0">
<div>
<paper-dialog-scrollable>
Long content 1 goes in here...
</paper-dialog-scrollable>
</div>
<div>
<paper-dialog-scrollable>
Long content 2 goes in here...
</paper-dialog-scrollable>
</div>
</iron-pages>
</paper-dialog>
The issue is that the paper-dialog-scrollable, when the window is resized, goes over the paper-dialog edges and no scrollbars get shown.
I've looked a the code for paper-dialog-scrollable and it has a "dialogElement" property that is by default "this.parentNode". I've also tried to change that from the code with each page change but I cannot get it to work. Here's the "code":
this.querySelector('iron-pages').selectedItem.querySelector('paper-dialog-scrollable').dialogElement = this.querySelector('paper-dialog');
The last attempt I made was to trigger the refit and notifyResize on the dialog just under the above snippet of code, using the following:
this.querySelector('paper-dialog').notifyResize();
this.querySelector('paper-dialog').refit();
Maybe someone has ran into this issue and found a solution to this!?
Any hints or ideas would be appreciated!
jquery mobile newbie -- I inherited this project.
I have quite a few 'pages' in my jquery mobile app. On each page I have a nav panel. Each page is set up much like this:
<div data-role="page" id="help_manual" data-theme="d">
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
<div data-role="controlgroup" data-corners="false">
Home
User main menu
</div>
</div>
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel_help_manual"
data-iconpos="notext">Menu</a> <!-- this is the button that actually brings up the above panel-->
<h3>User Manual</h3>
</div>
<div data-role="content">
BLAH BLAH CONTENT
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
Back to main menu
</div>
</div>
This all works well and good.
Then you make another page. ... Then another... Then another... Suddenly you've got a few dozen pages all with their own 'menus'. They all work, but there is a LOT of redundant code, given all the menus are identical.
Now I want to make a change to all of the menus.... and instead of modifying one 'navigation panel' I have to make the change a few dozen error-prone times.
I have tried simply taking the 'panel' code and moving it outside the 'page' div... but that results in, effectively, a 'new' 'page' when the button is clicked. Other attempts at moving the various parts of this code around are similarly broken.
An include could remove the 'list' from the 'core' of the control group... unfortunately, that still leaves a lot of redundant code and I've got one fun tweak: This page needs to be able to work offline. The purpose of this app is to be able to go offline, collect data 'in the field', and come back and upload it. So a SSI isn't an good option.
Help?
Here is a JsFiddle with multiple pages and the panel written only once.
You should write your panel once outside the page. (If you have one file per page, just write the panel outside the index page as a sibling of the page) :
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
...
</div>
<div data-role="page" id="help_manual" data-theme="d">
...
</div>
Doing so and as it becomes an external panel. You should then initialise it manually.
$('#navpanel_help_manual').panel();
The panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.
I'm working on a website based on the Foundation library. I'm creating an About "page" on my website by using a modal, and attempting to equalize the three different panes inside of the modal, like so:
<div id="aboutPage" class="reveal-modal" data-reveal>
<h1>About</h1>
<div class="row" data-equalizer>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>About This Site</h2>
<p>This site is intended to provide a resource for people learning to program in Swift.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>What's Coming Up</h2>
<p>We're working on smoothing over some glitches with the brand new Issue tracking systems. We also have some exciting updates planned involving this site's mobile version.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>Using the Help Menu</h2>
<p>The Help menu quickly lets you contact Support to address issues which may present themselves as you program in Swift. If a representative is not available when you submit your question, we will address your issue as soon as possible. You will
receive a notification badge when the issue has been resolved.</p>
</div>
</div>
<a class="close-reveal-modal" id="x">×</a>
</div>
However, when I viewed the modal, the panels were not equalized. This was also true on several other modals on which I attempted to do the same thing. Despite that, I was able to successfully equalize the panels outside of the modal. Is this a bug/feature related to the modal, and if so, is there any way around it?
Once you have your Reveal Modal opened you will need to recalculate the height of the Equalizer panels.
// Once the Reveal Modal has been opened . . .
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
// Force Foundation to recalculate the Equalizer panel heights
Foundation.libs.equalizer.reflow();
});
Here is a working example in codepen.
I hope that helps.
In Foundation 6, I was having the same issue. Here is the solution that ultimately worked for me.
<script>
$(document).foundation();
$('.reveal').on('open.zf.reveal', function() {
//force equalizer to fire AFTER modal has finished opening
Foundation.reInit('equalizer');
});
</script>