I have a very simple CSS opacity animation that animates some text in a UIWebView when the web view loads. It works great when the body of the HTML is small and quick to render, but for larger bodies, you'll find that the animation runs immediately when the content loads, but the UIWebView is not painted on to the view for another second or so, which means the user misses the animation completely.
So my question is, rather than have the fade animation occur on load, I want it to occur when the web view is actually drawn on to my view, and I don't think there are any Objective-C delegate methods that are called when the web view is drawn, so I'm not sure if this can be done on the Objective-C side.
Is there anyway I can call some Javascript (this way I can add the animation manually) immediately when the the web view is actually drawn on my device, rather than when webViewDidload?
Is there anyway I can call some Javascript (this way I can add the
animation manually) immediately when the the web view is actually
drawn on my device, rather than when webViewDidload
maybe you can inject your javascript after your uiwebview and your html content is loaded? webViewDidFinishLoad this delegate gets called when uiwebview and your html dom tree created.
does uiwebview didfinishload fire for you when page loads? if so, you could use that function in objectiveC to execute js command to start your CSS animation
Related
I to created a project for windows 8 in javascripts/html. Now I want change the background of body when I change page.
I tried to set the background body but when I navigate into the app and I use the backbutton the backgroud don't update correctly. The problem is that remains the last background of the previus page.
If you're setting the background through each page's CSS, it won't work because CSS is cumulative across WinJS page navigations. That is, because you're just doing DOM replacement and not actually navigating away from the main host page (default.html typically), then each time you hit a page control HTML file that loads another CSS file for the first time, that new CSS gets loaded on top of the old. However, going back to a page that references a CSS file that's already been loaded will not force a reload.
There are a few strategies for handling this, but if you're setting a style on body then it's easiest to set the background style from JavaScript within each page's processed or ready methods, and not rely on the CSS loading behavior.
You have probably only one body in all your app, so you have to change it to the right background every time youenter a page, included the first page.
I suggest you do it in the ready event of every page so that it will refresh also when you click on the backbutton.
I have a fancybox 2 .pdf loader working that loads into an iframe. Some PDFs take a little time to render before being sent and I wanted to use the spin.js spinner as a progress bar as the animation is loaded instead of the supplied .gif
i can start the animation up easily enough using the beforeShow event, but i can't see which event to trap when the object is returned from the server. i have tried all events in the documentation, but i can't see one that traps when the pdf is loaded.
you might need to stop the current event and tell it to execute the next function of hiding the spinner
not sure what the id of the spinner is but using jQuery you can
$('#spinner').stop(true,true).hide();
which should stop any current events and cut to the end so you can instantly start a new function on it
Is it possible to find out when a page of an EPUB Fixed Layout is being viewed with Javascript?
There is the DOMContentLoaded event, but the adjacent pages also fire this event when they are preloaded in iBooks, causing animations or sounds to start before the page being visible...
No, it's not.
This is a "feature" of iBooks. It preloads the pages, I suppose to make page turns faster later on. Unfortunately, there is no way to detect that a page is preloading as opposed to being actually viewed.
There's only one way to deal with this--force user interaction on each page (tapping something) to start the animations or sounds. You may even need to structure your JS so that the JS itself is not loaded until the user interaction occurs. Videos won't start playing without user interaction anyway.
I am using an Android WebView to show some HTML content (a String with HTML tags to be precise) generated at runtime. The content has basically an HTML <table ...> showing various stuff and the rows of this table are generated by my program. The HTML content is loaded in my WebView by calling the loadDataWithBaseUrl() method.
Now everytime I generate a new row, I create a new <tr></tr> and modify the HTML string to add the newly created row to the table.
Obviously I have to recall the loadDataWithBaseUrl() method to reload the HTML and show the latest row.
Now there are a few problems here:
First) Every time loadDataWithBaseUrl() is called, the WebView scrolls to the top of the page
Second) I want to scroll the WebView after it is loaded all the way to the bottom of the page so that the latest generated row is always shown.
Now the actual problem:
If I try to call WebView's pageDown(true) method after the page has finished loading, I will get a nasty animation and the user has to wait for the WebView finish scrolling to the bottom of the page.
As there seems to be no way whatsoever to disable this jumping up and down behavior, I resorted to JavaScript and I am scrolling the page all the way to the bottom after the page has loaded (calling a function on window.onload)
Now I am facing another problem! Still there is a flicker caused by the WebView reloading the page which results in scrolling all the way up and the JavaScript function scrolling the page immediately to the bottom.
I have spent countless hours in the past few days and still haven't figured out a way to achieve my desired results. Is there a way to solve this issue? (Workaround/different strategy maybe?) The culprit is obviously the innate behavior of the WebView that scrolls to the top when it finishes loading the page.
Can you try something like this:
if (_webView.getScrollY() + _webView.getHeight() > _webView.getContentHeight())
_webView.scrollTo(0, _webView.getContentHeight() - _webView.getHeight());
There are some threads running on how to make scrolling and page turns e-ink friendly:
http://github.com/aarddict/android/issues/28#issuecomment-3512595
http://www.mobileread.com/forums/showthread.php?p=1929476#post1929476
I do not know if i asked correctly in Question Title, but here i am going to describe in brief
I have an UIWebView and loading the content based on div and each div has unique id on loadRequest.
As though my content was too large so i break down into pieces and loading the remaining content once you tap on 'Read More'
This 'Read More' event fire on autoscroll which i am handling through javascript. so once that event is fired it just append data (for which i have another method) by using window.location.href = div1+div2(its just an example).
Now the main problem is when i scrollDown and wherver i get the 'Read More' message and it auto fire then it adds the data to the current div and show (User feel its an continue reading) but when
I scroll towards to up
It behaves weired because it just append the data to the div and scroll to setYScroll(updatedlocation);
updatedlocation is used for when we are adding the content to the div and it should scroll to the same position where the user was.
so lets start with an example, assume currently i am reading the div2 and when i scroll up'Read More' events fired and add div1 to div2 and then web view delegate shouldStartLoadWithRequest called.
so every time its update the content to div2 when you are scrolling up but first it takes me the previous s location of div1 and then take me to div2 location where i was currently reading.
so it feel like really weired, suddenly it takes me to somewhere for a while and take me to my current position within friction of second
I tried with this solution,
I thought to take the screen shot and create an imageView with that screenshot image of the current UIWebView and put on webview whenever 'Read More' event is happening. once the web view loading is done remove the imageView and display the webview.
but this is happening in the same way, the problem is every thing is happening under the webview delegate. i still could not figure out whats happening? The solution of this problem am i on right trackj or is there any better solution for that
I have a similar situation. What I do is have two UIWebViews on top of each other. When it is time to update one view, I grab the scroll position, load the new data in the hidden UIWebView, when the other UIWebView is done loading its data it sets its scroll position to the current scroll position of the first webview, then hides the first webview and unhides itself.
Its pretty seamless and works very well.
I suspect that the "jump" you experience depends on the fact that the web view is fully redrawn (and we all know that UIWebView is slow).
So, I see 2 options:
implement the "Read more" mechanics fully in javascript by means of Ajax;
instead of loading data into the view using loadRequest, make a NSConnection to that url and then update the web view by injecting in it the HTML you got from NSConnection through stringByEvaluatingJavaScriptFromString.
The second option is possibly nicer because it is fully SDK based, but you will readily see that it is far more complex than the first one. The two of them will work and I am pretty sure that will give you the kind of smooth behavior you are after.
If I understand your question correctly it sounds like you're trying to implement your own handling of the "infinite scroll" concept.
It might be worth your while to check out one of the many infinite scroll libraries that are already out there. If one doesn't fit your requirements perfectly you might find the inspiration you need to fix the one you have now.