How to dynamic loade pages and using IScroll - jquery-mobile

I am using IScroll to help position a footer in the bottom of the screen on my PhoneGap application, but I have a problem I have struggling with for a few nights, so I hope some of you might be able to help.
To be able to persist my header and footer through the application I have been using something similar to this.
Usually I would bind on my PageCreated event, but since this is not execute I can't do that. I have tried after the page is received and I have called jQuery('#mobilePage').trigger('create'); to call setTimeout(function(){ myScroll.refresh(); },0);.
The issue is that the height isn't generated correctly. Half of the time some of the content is hidden beneath the footer.
My theory is that trigger('create') takes som time to call, and I therefore call myScroll.refresh() too early.
My question is there if there is a way to bind up on the trigger('create') event so I can create a callback and execute the scroll update?

in iscroll code, check for
checkDOMChanges
and make it true. then iscroll will handle setting up of the refresh whenever dom changes

try this jsfiddle link I think it will help you

Related

jQueryUI Scroll Issue with IFrame

There is already a similar question asked but there is no response(Draggable JQuery UI scroll issue when using within iframe).
I want scroll to work for the draggable object in IFrame. Please suggest.
Here is the jsFiddle - http://fiddle.jshell.net/Msd7v/29/
Have a look at this http://fiddle.jshell.net/vryz2t1o/1/, I managed to make it work when you are scrolling down. You need to try to figure out scrolling up and you are done.

Customize Scrolling for Onsen Page (Pull to refresh)

I have a ons-page element that I want to customize the scrolling for. There are a few things I'd like to achieve, but mostly I want to understand what's going on.
By default, the page has -webkit-overflow-scrolling: touch. This is undesirable for two reasons:
The area "behind" the page shown during overflow is just plain white
I have no hooks to take action on over scroll. I'd like to add pull to refresh mechanics.
I've tried working with iScroll, but the behavior I'm seeing is that if I declare my scrollable element to be inside of the page, it calculates the full element height as the visible height. If I declare my scrollable element to be the page, I can move the page around, but not the content within the page.
I'm guessing some of this is related to "using native scrolling where it can", but I don't really understand how that's implemented, so I'm not really sure.
Any ideas?
Onsen UI doesn't support pull-to refresh as default.
How about using this library?
https://github.com/mgcrea/angular-pull-to-refresh
This is a library for angularJS.
P.S
Now Onsen UI support pull-to-refresh. http://onsen.io/reference/ons-pull-hook.html

Swapping table td on drag

I am trying to swap two TD elements in table on Drag&Drop. I found this plugin Swappable and it works in some way. But when I drag some element the cursor change position to some specific value. I do not want changing cursor position. But when I rework this plugin it stops work.
Does anyone have experience with it or know about any other plugin?
Thanks,
Zbynek
Usually I use the jQuery sortable. It does pretty much want you want. You can use it in a table too.
Then I do my stuff (including ajax updates) in a function setted in the receive event
Did you try the JQuery Sortable() option?
See http://jqueryui.com/sortable/#display-grid

jquery accordion with dynamic content

My initial page has an empty div. An ajax transaction fills it with suitable h3/div content. If I call .accordion() before there's any content, it has no effect. If I call it after the first content is loaded, the first content looks good. Calling it a second time, however, does not work. Do I really need to destroy and redo?
At the moment you have to destroy and re-create the whole thing using the official stable release. There is already a feature request for it, scheduled for 1.next: http://bugs.jqueryui.com/ticket/4672
If you have a read above, mrfr0g says he built a custom accordion based on jQuery UI 1.8.2, give that a try.
give the inner DIV of each tab an id
and use document.getElementById("content1").innerHTML = "HelloEveyOne345443333334422" to dynamically change the content of each tab

How make jQuery UI Dialog be draggable outside of viewpoint too?

For now, it's only draggable within viewpoint.
You can't do this, it's part of the page/frame it's in. If this were allowed, you'd see advertisements outside the frame as well :)
If you want to drag it outside of the scrolled view in the page, that's the default behavior, you can test it here.
Nick Craver, I think you did not understand me. If you set up a simple div element to be draggable, you could drag it beyond the viewpoint. But that just doesn't work you use the dialog. What ads are you talking about?

Resources