Get the div of current scroll offset of UIWebView - html

I have two different HTML files, two different UIWebViews & a UISegmentControl. On segmentChanged, I had displayed the WebView by loading a HTML file.
Both HTML files contains common sections only the section content is changed. Now I want to implement the functionality that, when user reads section 1.1 of first WebView & clicks Segment for loading second WebView, then the second WebView needs to scroll upto the section 1.1 which he reads in first WebView and viceversa. Also there are n number of sections.
I used following javacript but it needs the parameter of current div id. But on scroll, how can I get the current visible div id. I had given the id for each div.
function pointInView(id)
{
var divid = document.getElementById(id);
divid.scrollIntoView(true);
return false;
}
Anyone please help me.

I think jquery might be able to come to your rescue.
Could you use jQuery, since it's cross-browser compatible?
http://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen
Check out answer form BenM

You don't really need a db entry for that. Just catch the click event via something like
$('.action').click(function(){
document.location = yourSecondFIleLocation+'?offset = ' + $('selectorDiv').detOffsetFromParentDiv(); //or get the scroll offset from the page.
});
and catch it on the second page either with php or jQuery to scroll to it.
Heck that is even achievable if you put in your code the paragraph marks and link correctly to them.

I searched a lot to get the div id from current scroll offsetbut didn't get the solution for it. So I go with the other option that, stored the start & end offsets of each section in both files. So I had created one look-up table in database & stored the start & end offsets of each section in both files.
ex. When user scrolls the first webview to section 1.1 & clicks the switch to open the second webview, then I scrolled the second webview to the section 1.1 in the second file.

Please try below,
To scroll any scroll view at any position we set the content offset of the scroll view.
To solve your problem we have two solutions,
In your case when user is viewing the first Web view, save the content offset of the first web view in any variable like below
CGFloat offset = webView1.scrollView.contentOffset.y; Then when you
open the second web view then provide this offset value to second
web view scroll offset.
Set
webView1.scrollView.contentOffset=webView2.scrollView.contentOffset
or vice versa according to your need
I hope this will help you.

Related

Form layers for fields in Access

A very simple problem to which I cannot find a solution:
I have a form with 2 (will be more in future) pages. So far I have completed the first page (Main) and now I'm about to do the second page. However, some fields are showing up on both pages.
How do I "anchor" the fields to a specific page so they don't show elsewhere?
Just make sure you have pages of even height, and set for the form AutoSize to True.
Also, hide the vertical scrollbar and implement your own paging control.
1) Go to Design View
2) Cut out the fields (ctrl+X) which are in wrong place
3) Go to sheet property and manually select the desired page location
4) Insert the fields there (ctrl+V)
For some reason it didn't work for me in any other way (ie. I couldn't select my page with a simple click on the page itself, I had to select it through properties).

Problems on Page Load ASP.NET

When you go to this page http://tuckertrans.com/ComputerInventory.aspx my navbar displays vertical until the grid loads. My grid also takes 2-3 seconds to load. Im just grabbing the list from the database, assigning that list to the grid's datasource, and finally binding the data. Whats taking so long for the page to load? This causes my navbar orientation to be wrong until it loads. Any way to speed this up?
Dim li As List(Of ComputerInfo) = Process.Get_Computers()
Me.gvComputers.DataSource = li
Me.gvComputers.EditIndex = -1
Me.gvComputers.DataBind()
my navbar displays vertical until the grid loads
Client browser receives CSS files later than ComputerInventory.aspx. It is normal in web page.
However, in your case, your web page has too many data. As the result, it makes every thing slow.
Ideally, you want to use Pagination with Ajax. In addition, you only want to retrieve data that you want to display. For example, retrieving 10 rows from database using skip and take.

Dynamically changing component reference

This seems simple enough but I can't quite think of how to actually do it...
In IBM Web Content Management (WCM) version 7 I have a Presentation Template (PT) which calls a Menu Component to display some content items.
I also have some (static) links on the sidebar which I want to basically just change the menu component that is being used, and that's it.
So for example...
In the PT:
[Component name="Main Page"]
When I click on a link, I want the exact same PT to be displayed except I want it to use:
[Component name="Next Page"]
Basically, Main Page and Next Page are showing the same content items, they just have different filters on them (so they appear to be different pages). The "Main Page" shows "everything" and then if you click on a link it's suppose to only show a subset of that.
I can't quite figure out how to connect the link to the PT to change it. I've thought about using JavaScript or JSP to simply rewrite the HTML, but even then I'm not sure how I set it up to say that: "if the link has been clicked, rewrite the HTML" because I'm not sure what to even point the link to, or pass through the link.
I thought about creating different content items with different PTs to link to, but there are about a dozen links (and therefore a dozen different Menu Components that I want to use), so I thought it might be better in the long run to just use 1 dynamic PT (in case the number of links grows).
It is only that one component that needs to be changed in order to display how I need for every link though.
Any ideas how to go about doing this?
So this is how I resolved this:
I created a component reference element in the content items called "menuComp" and then I set that to point to the appropriate Menu Component for each particular page.
In the presentation template, I removed the component reference and changed it to an [Element] tag which used key="menuComp".

Do AJAX calls make DOM heavier in size?

I have a 3 column structure for my site.
Links are shown at Left hand side layout.
User clicks a link, and I trigger an AJAX call to load middle column of layout. I load a complete template file in the middle column.
My question -
When user clicks another link, I make another AJAX call to load middle column.
After each sub sequent ajax call, does my DOM gets heavier in size, as I am loading different htmls in middle column, without refreshing whole page ?
No. If you are replacing the data with new data then the old data is discarded.
Well, yes your DOM as you say is technically bigger and you are dynamically injecting HTML. However, this should not be an issue, and certainly not on the client. Size is only of concern if you are downloading the whole page.

How can I track changes in content on an HTML page after page has loaded

I'm wracking my brain on this one.
After an HTML document loads in a browser, I want to be able to monitor
the page in case any content on it changes for any reason.
Is there a Javascript function with which I can track 'what has
changed' on the webpage. This should be irrespective of the type of content on the HTML page.
I have two examples for you to ponder on:
Ex1:
Say in an HTML document there are two select boxes s1 and s2.
The items list in s2 depends on selections in s1 (page is not
refreshed — that is, s2 is loaded through Ajax or something).
So after the HTML page loads I need to get a notification whenever s2
is populated...
Ex2:
Say, in an HTML page, there's a link, Onclicking which a light pop-up
div is created with some text.
How can I capture the content of this dynamic pop-up?
In all this discussion, I'm not taking into account any particular
format of HTML...the HTML content can be anything...I just need
to keep tracking if any content changes after the page loads...
Ideally I need to achieve this using JavaScript (client-side
scripting).
How can I achieve this?
You can keep track of changes in a textbox using onkeyup. This will tell you every time someone makes a change in a given textbox.
This could potentially fire alot of events. However, using onblur won't necessarily tell you about changes in the textbox and onchange's browser coverage is spotty at best.
If you are using AJAX, you could setup the response function to handle a home grown "event listening" system. So after the response does what it needs to do, it could call any methods that were registered with it, passing in the response text when necessary.
So from your examples above, in Ex1, when the AJAX returns from S1, it would load S2, then call a method saying S2 had changed. In Ex2, when the new AJAX returns the DIV's contents, after loading it into the DIV, it call a different method (or possibly the same depending on what your trying to do) and alerts it that the DIV has new contents.
You could set your "watcher" script as a timer, running a diff function on the current document.body.innerHTML and a stored version captured on load. Depending on how fast the diff will run will give you an idea on what timer interval to use.
This may not capture changes in form elements, but for those, it's easier to loop through all form elements in every form on the page.
Here's someone's diff function I found on Google: http://snowtide.com/jsdifflib