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/
Related
I have a page where I've added anchor IDs at various points, and at the top of the page I created links to jump to the IDs. When I first load the page the link doesn't work, and I've determined that it's because it hasn't loaded the portion of the page that contains the section ID that it should jump to. Only after I manually scroll through the portion of the page with the ID and then scroll back to the top does the link work properly.
Is there a way to either force the page to be loaded in its entirety (not just the initially visible region of the screen) when it is first opened, so that it recognizes the IDs without needing to physically scroll to them first? Alternatively, is there a better way to handle this? I'd just like to be able to skip to the ID tags as soon as the page is loaded.
Thanks in advance for any help with this.
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);
});
I'm having an issue whereby I navigate around my site but when I return to the first (initial) page of the website, the DOM doubles up. I.E there are two div data-role pages with the same ID.
It's because as you navigate around your site, for some reason, JQM always keeps the first initial page in the DOM, but then when you return to it, it doubles up (and consequently your handlers on elements don't work because they are inside the hidden data-role="page" element and the new ones have no handlers..
Have I done something wrong here or is this a common problem one needs to work around in JQM? Thanks
I also don't understand why JQM holds onto the initial page... I thoguht it was supposed to hold on to the last
Please look at this issue: https://github.com/jquery/jquery-mobile/issues/2258
The first page will never be removed
So use
a href='#id' // jump to #id, which is already in DOM
but NOT
a href='index.html#id' // jump to 'create' a new one
I have a page that's like a discussion where you can make posts and reply to those posts. When there are more than 2 replies, I show the two most recent ones and hide the rest by default. There's a button that will let you expand/collapse the extra replies that uses jQuery's slideToggle function. It's operating on an unordered list of tables, where each table contains the comment along with the user's name and some other info.
Here's the problem: While the tables are actually sliding up or down, the first table in the list looks like its width has been set to auto, so it shrinks. Once it's done sliding, the formatting looks fine; it's just during the actual sliding that this happens. I'm assuming it's being set to 'display:block' or something during the slide but I don't know that for sure.
Is there a way to control what the display type is during the animation?
//this is what happens when you click the 'View all X replies' or 'Hide replies' button
$(".expandOverflow").click(function()
{
$(".overflowlist" + overflowListTarget).slideToggle(16000/*, function(){$(this).css('display', 'inline');}*/);
});
I have an issue with the Prototype Modalbox Dialog not fully displaying in the user's browser, depending upon the user's screen resolution. For example, part of the content in the Modalbox is cut off by the browser viewport, and there's no way for the user to view it.
I believe it has something to do with the sequence of the content and Modalbox being loaded. For example, the Modalbox Dialog is generated, THEN the content is loaded -- this ultimately results in the Dialog not being centered in the user's browser viewport.
I am wondering if anyone else has ran into this issue? If so, what are you programmatically doing to make sure that the Dialog display optimally?
I remember having this issue. Usually it happens when ModalBox doesn't know the width/height of the content that it's loading. These steps help (no need to apply all of them, try and see what works best for you):
1) Wrap the content that will be shown in ModalBox in a DIV and set the height/width CSS properties for it.
2) Make sure that if there are images in the ModalBox content, that they have the width height also set.
3) Preload the content before you even display the ModalBox.
4) Use ModalBox callbacks (onShow if I remember correctly), and call the function to recenter it.