jQuery UI menubar styling - jquery-ui

I am working on the jQuery UI menubar available here. I would like the menus to be displayed in the center of the bar and not in the left. How do I do that?
I tried to do it by padding, it works, but its not ideal thing to do as it is not appearing at the center if I use different devices.

Related

iOS scroll/touch messing with z-index of elements

I’m working on a page where we have no access to the platform code (think page builder).
I’ve used jquery to launch some tooltip targets when a trigger is clicked, and because of the limited platform access I use jquery to traverse up the DOM and bump the parent div’s z-index up high so the tooltip sits over the button.
On either second click or timeout the z-index goes back to 1 and tooltip goes away. All this works fine on desktop.
iOS however, shows the tooltip and if you scroll down it almost immediately drops the z-index down so it goes behind the buttons.
Has anyone encountered this annoying behaviour? And is there a workaround?
I’ve tried forcing !important on the tooltip, no luck. I also tried applying transform 3D 0, transform-z, with no luck.

electron frameless window auto maximize when drag to the top (windows 7)

a normal program, when mouse click and drag windows topbar to the top of screen, this program will auto fullscreen in windows 7+ system
but when I use electron without the frame, and use electron-drag package to control move it, then, what can I do, to let it auto fullscreen when drag to top, and drag left side cover left screen, drag right side...
thanks
electron-drag hasn't been updated for 2 years.
Why not just use electrons built in drag-able style <div style="-webkit-app-region: drag"> I Built a quick app, and added the style to a div, worked fine.
https://electronjs.org/docs/api/frameless-window#draggable-region
Note: -webkit-app-region: drag is known to have problems while the developer tools are open.
See this GitHub issue for more information including a workaround.
EDIT:
create a quick gist showing how to mimic the snapping of a frameless window without using the draggable style. https://gist.github.com/flapjack17/44a9fdd504b832714c24f899a11c0b42

JQuery Mobile: customize panel widget size

I'm using the panel widget of JQuery Mobile: http://demos.jquerymobile.com/1.4.1/panel/
It looks very nice on phones, but on tablet devices the panel is too small with respect to the screen size.
How can I scale the panel size and its content to the 50% of the screen?
I tried using transform:scale(1.5), but it has a lot of side effects, then I tried to customize the css according to the last part of the page http://demos.jquerymobile.com/1.4.1/panel/, but nothing changed.
Is there a simple way to modify the framework or to dynamically change the size of the elements without creating side effects?

Navigation Menu in Jquery Mobile

I'm a newbie with jquery mobile but I want to build a vertical navigation panel with its specific animation (no page changing).
A good example is here ( i don't want sencha touch, i need to do this with jquery mobile): http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
For example, if you select "User Interface", just the menu is updating (and a button back appear...)
Another good example is IOs, as the dropbox Ipad application (cf http://www.youtube.com/watch?v=qeqw5OroHzY)
How I can do that with jquery mobile ? I see panels, the 1.3 new feature, but it's not really the same thing ...
Thanks for your help
Try this: jQueryUI's .menu
Other than that, it's just a fancy <aside>

min-height or full screen fill with jquery mobile dialog box

I'm trying to figure out how to enforce a minimum height (for fullscreen effect) on a jquery-mobile dialog box, essentially I'm trying to cover over the backdrop entirely with the dialog box itself.
I'm using a header but no footer if that makes a difference.

Resources