I've to rewrite an existing web application and port it to extjs components.
This is a bigger application and I have to do it in steps, I can't rewrite the whole application at once, the implementation of MVC will come later. At the moment the application has two frames, left frame with navigation menu
and links with href & target starting actions in main, right frame.
As first step I have to replace the self written navigation menu with extjs solution.
My problem is, the menu is quite big and has a lot of submenus and left frame is rather thin. As effect the menus are rendered partially under the right frame or shift outside the window on the left.
This screenshot shows the first problem:
This screenshot shows the second problem:
My question: is there a possibility to render the menus wider then left frame (over the frame)? Perhaps some layout container below the menu could be useful?
I would like to avoid the shift to the left and the cover through the main frame on the right.
Regards,
Annie
I haven't found a possibility to utilize a ExtJS menu in narrow frame, but the tree component (Ext.tree.Panel) fits quite good and is a nice replacement. It looks like left navigation on the sencha api page. The question is closed for me.
Regads, Anie
Related
In an AIR application I have a menu bar (menubar) which when too many items are added it will attempt to display the menu upward instead of downward even though there is much less real estate above the menubar.
I would like to tell the menubar to always display items "down" and if needed add a scrollbar.
I have searched and cannot find any properties or methods to do this. Does anyone have a solution?
The only other StackOverflow solution which is applicable points to a dead link.
I am Trying to find out the "correct"(best practice) way of creating toggleable sidebar with bootstrap 4. Gone through the examples on the internet and not so sure if those were so good...so If someone can send me related resource links ,it would be great so that I can analyze it.
-I am from android platform so I'm a newbie when it comes to web development but I'm trying to achieve that kind of sidebar like on this side: link -notice: sidebar doesn't change its width(stretching) while changeing the size of a browser -until a point when it jumps over to icons width.
Bootstrap does not have an "official" sidebar implementation so nothing is "correct" here. As long as it works cross-browser/cross-device, anything is good to go.
Regarding the sidebar implementation itself, there are various options:
opens above the content,
pushes the content to the opposite side
squeezes the content
The above options and the array of animation possibilities for:
the sidebar itself,
the menu item containers,
the menu names/labels
and the menu icons...,
...make any attempt at providing an example prone to subjective preference and would render your question off-topic.
Other possible features are
auto-open above certain width,
auto-close below certain width,
reordering of elements,
three-state (full, min and off).
But on topic, the only objective answer to your question is: there is none (official).
As a starter, you might want to take a look at this simple sidebar. It works prefectly fine with v4. Just import the simple-sidebar.css and adjust the calls to match your project's elements.
In the end, the sidebar is all about two containers and applying a class (plus, ideally, some aria- attributes for screen readers). What you put in those containers and how you adjust the contents to look in each element state is all about your own (or the designer's, or the client's) personal preference.
I am trying to learn polymer by building my own mobile app. Can anyone point me in the right direction on how to create introduction pages like the "What's New" part of the android app "Today Calender" by Jack Underwood. Is there a way to do that with Polymer's built in elements? It's basically 3 pages you can swipe through. The page follows your finger if you release your finger past a certain point it will gently snap to the next page.
The swipe-pages custom element does exactly this. Swipe to navigate between pages, the pages start moving the moment you drag them horizontally, but only change pages if you drag past a set threshold.
Update:
This package is for Polymer 0.5 and does not yet work on Polymer 1.0
I made three CodePens while I was learning jQuery, so the code is a bit crude.
The first one works on a loop which allows for infinite scrolling.
The second one doesn't work in a loop.
The third one uses vertical slides, but you might wish to employ the bubble navigator. How they work is quite intuitive, but if you need any clarification feel free to shout out.
Here are all the CodePens:
Swiping in a loop
Swiping without a
loop
Side navigation
A common problem I run into when building responsive websites is how to make a multi-level nav menu (3 or more levels) that works well for touch devices. I've seen a lot of plugins and techniques, but most of them fall flat because they don't allow a 2nd-level page to act as both a link to a page AND a parent of children in a sub-sub-menu. Some techniques address this by having an arrow icon that exposes the children menu items while clicking on the parent page name goes to the actual page... but on mobile devices these icons are usually very small targets and hence hard to use. Are there any other solutions to this problem (either jquery or javascript plugins, or straight-up CSS/JS code)?
I have a 'starting point' of sorts that I use for responsive web projects like this. I'm not sure if it's exactly what you need, but it allows for multi-level dropdown menus in desktop view. In mobile view, jQuery automatically creates an off-canvas menu.
Code:
https://github.com/kthornbloom/Responsive_Template
Demo:
http://rwd.kthornbloom.com/
Hope it helps!
Have you checked out any of the documentation surrounding touch-start events? I feel like you're going to get the best ux from this method. In your position, I'd be using tap to toggle classes onto your menu that would set the display to block (for example). Once your menu is open, you could then bind another touch event to the sub-level objects.
After our discussion in comments, it seems there isn't a straight forward way to get what you want due to the fact that we don't know what the user want after the submenu has been opened. There is no way for us to tell if they want to go to a link by clicking on the item again or collapse the submenu.
From this point, you have 2 options
Create a collapse once the menu is open and the user will know to use that to collapse the menu. If you think the size on most sites are small then make it bigger, however I don't think this will be an issue because it is so common.
Create a close button or something close to that for the entire menu. So when you click an item, it will expand, and if you click the same item again, it will go to the link. However there is collapsing the submenu until you click on the overall close button for the entire menu. This is only for tablets/phones as on desktop this should be a hover behaviour. This is similar to how the menu behaves on a tablet for http://www.lexus.ca. We actually have the menu closing if you click on the top most item again, you can see this behaviour on the phone or tablet. This is another option for you if the top level navs does not lead to pages.
Found a great write-up for a solution: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
I am using twitter bootstrap and has a very long page that I divide into multiple sections.
I'd like to implement a Section Indicator on top left of the screen that always shows where the reader is currently reading, like the screenshot below:
I managed to get the layout correctly as shown here:
However, I've got some problems that I've been working for a few weeks but still can't solved:
How to mark the current section dynamically as the user scroll
How to animate the movement of the arrow from the source to the next (or directly to the destination if the reader click a farther away rather than scrolling)
I've tried with the simpler version from getbootstrap.com/components but still to no avail... Please help... this is very stressful as I'm particularly weak in javascript and css :(
EDIT:
To summarize the answer:
Take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
For a single-page website have a look at the One Page Navigation Plugin http://trevordavis.net/blog/jquery-one-page-navigation-plugin. It assigns a css-class to the current menu item upon clicking and as the user scrolls down the page.