I use JQuery layout feature to build skeleton of my app.
Layout has north-panel i.e header which can be hidden so that content area has more space.
Since header panel also contains icon bar, I only want icon bar to be visible when header is hidden.
Is there a way to achieve this by setting any property while creating layout using UI Layout.
Here is the image of layout where on hiding header should still show icons but only hide blue bar at the top.
Regards,
Satya
If I understand you correctly, the markup you have would like something like this:
<div id="north-panel">
<div id="header">
<div id="icons"></div>
</div>
</div>
If this is the case, maybe the following may help:
Can you seperate the icons panel to be a direct child of the north-panel? If you can, you could just hide the header and the icons panel would still be visible.
<div id="north-panel">
<div id="header"></div>
<div id="icons"></div>
</div>
Otherwise, hiding an element without hiding its children is not possible (as far as I know). What you could try too, is to make the header have the same dimensions as the icons panel and hide anything else inside the header. This would somehow fake the effect you wanted.
Related
I have the following for a polymer web application. The whole page scrolls. I would like for the contents of and to scroll independently. foo has a longer view and bar is generally able to fit in the page with maybe a little vertical scrolling.
How do I make the two contents of vaadin-split-layout scroll independently vertically?
<app-drawer-layout fullbleed force-narrow>
<app-drawer slot="drawer">
<app-toolbar>
<div main-title>Models</div>
</app-toolbar>
<section>
<div style="margin-bottom:90px;width:100%;"></div>
</section>
</app-drawer>
<app-header-layout>
<app-header slot="header" fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<iron-icon id="logo" src="icon.svg"></iron-icon>
<div main-title>Spliter Sample</div>
</app-toolbar>
</app-header>
<section>
<vaadin-split-layout orientation="horizontal">
<foo></foo>
<bar></bar>
</vaadin-split-layout>
</section>
</app-header-layout>
</app-drawer-layout>
Thank you for any advice.
You can style the panels of a vaadin-split-layout as any other div as the panels are in the light DOM as you can see when inspecting their examples.
Thus give them an explicit height and an overflow:auto or overflow-y:auto; to enable scrolling. The style rules be placed in your usual CSS.
I'd like to place an icon inside a list-divider, but it seems that jQuery Mobile lets me apply data-icons to normal list items only and not to list items with data-role='list-divider' assigned.
Simply enough, I want the list-divider to display an info button for providing the user with more information about this category, which should look like so:
The point is, I'd like to place the info icon (with data-icon='info' or class='ui-icon-info') within the list-divider, while maintaining consistency in the overall style, i.e.:
The category is headed by a list-divider, and not by a list-item that is just styled to look like the list divider.
The icon is displayed on the right side, like the arrows in the list items below. The icon has to have the same style of appearance like the arrows, which means that it should not look like a button or have an extra frame around it.
The list-divider, or at least the icon, should be clickable, so the user is able to get the information about this category.
I'd preferably like to achieve this without any CSS customizations or JavaScript fiddling, using data-attributes only.
This is what I got (using jQuery Mobile 1.3.2):
List-item with data-icon:
<li data-theme='a' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Correct appearance of info-icon
Wrong appearance of category, because a normal list-item is used instead of a list-divider
Using a list-item with data-role='list-divider' assigned:
<li data-role='list-divider' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
No icon at all
Wrong title appearance and only text is hyperlinked instead of the whole list-item
List-divider with info-button inside:
<li data-role='list-divider'>Category: A<a href='#' data-role='button' data-icon='info' data-mini='true' data-iconpos='notext' data-inline='true' data-theme='a' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Info button has wrong appearance
The button has a border which I like to remove for consistency, so the icon is shown in its usual disc appearance. Removing data-role='button' doesn't help, because the button wouldn't be rendered at all and would therefore not show the icon.
The icon's position is not on the right side. I know it would be possible using data-iconpos='right', but I used this attribute for the icon-only (notext) layout already.
Category appearance is not pleasing, as the button increased its height. Even data-mini='true' didn't help.
I know there are a dozen of easy ways doing it the normal, less jQuery Mobile fixated way, but after 3 approaches, I'm eager to find out how this could be done with jQM.
This works, including the click, i just test it
<li data-role="list-divider">Test<div onclick='alert("Some info...");' class="ui-icon ui-icon-info" style="color:white;float:right"><div></li>
if the icon doesnt align with the rest of the icons add the below to the style
margin-right: -5px;
and change the pixels size to match the other icons
I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.
The page structure looks like this:
...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
<div>
<div style="overflow: hidden;">
<div id="mainContent" style="overflow: auto;">...</div>
</div>
</div>
</div>
<div id="paneRight" class="expanded">...</div>
...
Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.
Note: this issue has only been identified on an iPad running iOS7.
This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.
I am building a responsive design and would like to use jquery mobile to provide just a menu. I was looking towards nested listviews (I know they are deprecated in 1.3.0). What I am after is a nested set of links in the footer. When an item with children is clicked, the sub menu will slide in, otherwise just navigate to the link that was clicked if it has no children.
This fiddle shows what I am after http://jsfiddle.net/QfyZd/6/
I thought that I would get the desired effect by marking up the footer with:
data-role="footer" data-position="fixed"
My question is though, how do I ensure the listview only affects the footer rather than the entire page? Or am using the wrong components to achieve what i'm after?
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.