I'm using Jquery mobile and doing some custom stuff.
The default collapsible object just seems to 'show' the hidden content instantly, which I find a bit user unfriendly. A few problems occur with this in that if the button is at the bottom of the screen, and the hidden content is off screen, then the user might not know that anything has even happened.
In my mind two things should happen.
The content should slideDown().
I should have the option to have the page scroll down so that the button finds itself at the top of the screen, in doing so guaranteeing the the previously hidden content is visible.
Any pointers in how I might go about doing either of these?
If I understood you correctly you are talking about a collapsible content block and when a user taps on the header it should scroll down a bit so that the body part is shown to the user.
You can do it by attaching a click event to the header that triggers a scrolling. In the code below I have done it as an animation. I also have adjusted the scroll position with -40px so that the user still sees some part of the elements that are on top of the header.
$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {
$('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500);
});
Related
The bug is described in detail here https://bugs.webkit.org/show_bug.cgi?id=134596
Relevant part is this:
Without Scrolling you should be able to click any of the radio buttons
Now scroll down the page
Trying to click any of the radio buttons on the left results in an
offset click. One of the radio buttons below your click will receive
the event.
Expected: The radio button I clicked on gets focus
Actual: The click event is offset the amount the iframe was scrolled.
Main difference is im not using an iframe, just a div, but the same problem.
If I remove either overflow:auto (but it wont let me scroll then) or -webkit-overflow-scrolling property the correct clicks happen. It looks like it was fixed in a nightly, but this has to work now and for backwards compatibility. Is there a hack to get this to work? My best idea so far is to just not have that -webkit-overflow-scrolling prop for iOS until it works, but that kinda sucks because momentum scrolling is what makes it feel much more like an app.
When you click on a JQuery UI slider that is disabled and the page has been scrolled down, the page goes back to the top.
This is happening because the slider widget is implemented with an anchor tag containing an Href of #.
This is my hack solution.
$(".ui-slider-disabled").on("click",
".ui-slider-handle",
function () {return false;});
It works well but, is there a native (API) way to stop this?
How about this (you may need to change the class, depending on how you set it up)
$(".ui-slider").click(function(e){
e.stopPropagation()
});
I'm trying to dynamically update the content of a page with jquery mobile ( $('#testpage').page('destroy').page(); ), and reset the scroll position ( $.mobile.silentScroll(0); ).
It works but for a few milliseconds, jquery shows the new content scrolled down at the old position. I wish to show the new content directly scrolled at the top of the page.
There must be a parameter in jquery that remembers the scroll position when you call $('#testpage').page('destroy').page();, and I wish to reset this parameter.
Maybe I'm having the wrong approach, and I should use 2 separated divs for the 2 pages.
The reason I'm doing this is because I want the hash in the url being the same for the 2 pages, and I don't want the user being able to go back to the previous page with the browser back action. If I can achieve this with 2 separated divs, that would be fine too.
Here is a jsfiddle to illustrate : http://jsfiddle.net/EKFSy/2/
I replaced $.mobile.silentScroll(0); with $.mobile.changePage( $('#testpage') , {allowSamePageTransition:true} ); and it worked.
Note that I also tried to play with $.mobile.urlHistory.getActive().lastScroll. It was not necessary in my case to set it to zero (because it seems changePage on the same page already reset the scroll position), but that might be a useful value to play with if you want to change the scroll positions in your history.
http://jsfiddle.net/EKFSy/3/
Would like to use a popup(jquery mobile) with content and make it fill the screen. Also with overlay.
Like this, scroll down to bottom, Overlay set to A button.
http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html
But I want the popup to fill almost the entire screen. This should act as a new page but be filled with ajax content, I will fix this later...
How can I do this?
jQuery Mobile will not size a popup or dialog larger than needed to contain the rendered content. If you really want to fill the page, go with a new page. Consider transitioning to a new page with a pop transition instead.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
You might also consider a dialog as it obscures the underlying page content
http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html
how can I animate only a part of an element?
I show/hide a div using jquery-ui's show method but I'd like to start/end the animation from/to a given height of the element.
My dev website can be seen here (link removed). When clicking on the 'Contact' button the contact page shows up or hides if it's already open. Since I couldn't find how to starts my animation from a given height I added a fixed button when it's closed, but when the contact button of the contact page overlaps the fixed button when it's closing...
Any help welcome!
looking for something like this??
http://jsfiddle.net/rlemon/F6Efp/8/
You can also add any fade or whatever effects. This is using a single button to animate both open and close. You could also attach a attribute to the button tag to define it's current state.