Is there a way to make the jquery mobile List divider header be fixed at the top of the page until the next letter or list divider comes up and takes its place, like in the iPhone UITableView?
(http://jquerymobile.com/test/docs/lists/lists-divider.html, the list dividers dont stay at the top but rather scroll up and down with the page.)
I've already search on SO (http://stackoverflow.com/questions/7814088/how-to-make-jquery-mobile-list-dividers-fixed-at-top) but the link seems to be down..
Thanks for your help in advance.
There's a great plugin which does exactly this, and gives you custom events etc. The project is available on GitHub and there's also a showcase article about it.
You'd have to port this: stickySectionHeaders
Is this the same thing: https://github.com/jquery/jquery-mobile/blob/master/experiments/scrollview/lists-divider.html ?
Related
I am trying to replicate this UI structure.
Can anyone give some suggestions or point out some resources?
I specifically am having trouble connecting the search bar to the accompanying navbar.
Try giving some negative margin-top value to the search bar, it will shift a bit up and would overlap with the navbar, looking like the one you showed.
I got one really annoying bug, that I couldn't find an answer for. I have a menu slider that has a drop-down menu attached to each item. The slider itself is custom made, but the drop-downs functionality is provided by UI-Bootstrap.
Here is a simple fiddle, that I've made to get more about the problem:
https://jsfiddle.net/Lus92rqm/7/
If you can see in the CSS tab, I've added some comments about where I think the problem comes from and a possible solution that I ran into. So basically, all the thing is not working because of the overflow: hidden style attached to the .menu-slider-wrapper. I needed it though, because I want to hide all the items that are not in the visible area - the 570px width of this container.
I also tried to add position: fixed to the .dropdown-menu class and thought it was working perfectly, until I tried to scroll the page down... The shown menu is scrolling with the page which is not the behavior I'm searching for.
One more thing is that I definitely need a position: relative attached to .menu-slider class, because in that way I can move the slider from left to right and opposite - changing the left property of it.
Sooo, anyone with any ideas how I can manage to workout this thing?
Thanks! :)
You need to use dropdown-append-to-body, see the example on the docs page.
I am working on the layout of a blog, and the layout is now broken:
The right column is now sliding under the menu and I don't know what is causing this layout issue. I can't spot the trouble in the code. The page is generated out of a blogger template. It contains its own CSS.
Anyone sees the problem? The layout used to work fine. Thanks!
Simplest answer is the headers wrap (.bloginner-wrapper) is set to 'z-index:999'. Everything shouldnt be in wrapped divs, float your sidebar and content inside one responsive wrap.
I noticed two extra </div> in the code, but could not figure why these were generated. I had to restart the template modifications from scratch to solve the issue.
I'm creating a very specific website design that I hope will turn out like this: http://prntscr.com/298r2m Problem is, coding isn't one of my strong points.
What I've got so far is this: http://prntscr.com/29i0ed and as you can see, the content background is under the Navigation menu and below image. I was wondering how to change that so that it ONLY starts at the point where the posts begin like in the picture above?
Also, does anyone know how to add a top and bottom border to the content background, instead of it looking like it's been cut off? I use blogger.
Cheers!
If I did, you just have two elements to the image and the body of your blog and being elements with different colors, I hope it helped you
I'm using jquery mobile for a project which has a list-view and list-divider in it. I would like to make it so the list dividers stop scrolling when they get to the top of the page, and then keep scrolling again when another list divider bumps into it. For an example of what I mean, check out the iphone "contact's" app. Each letter (which is a list divider) stays at the top of the screen while you are still scrolling through contacts within that letter.
I've tried fixing the position but that obviously is not quite what I want. Is there a way to fix it only when it is at the top of the page? and then "un-fix" it as soon as a different list divider comes up below it?
The jQuery ScrollToFixed plugin is exactly what you are looking for. The examples will show you how to use the plugin.
Based on your description, I would say that the easiest way to accomplish this is to give each list divider a z-index greater than the one it overrides. That way you do not have to deal with minimum and maximum offsets, instead the overriding element will simply be layered on top of the previous one.