I have a long html page. At the bottom is an iframe with a long list of links. The links open new pages in the iframe.
When links are clicked inside the iframe, the parent page (as expected) jumps to the top and I have to scroll way back down to get back to the iframe and its newly loaded page.
Here's one hurdle. The iframe contents is hosted on another server outside my control. The admins there have graciously added a call to a js file hosted on our server from the iframe src, but I still can't crack this.
Do I need to calculate the distance of each link from its window top and also the iframe's distance from it's window top and do a bunch of math and then scroll back to that position after the new page loads?
Suggestions?
Related
I've got a list of items which I load from an API, so when my page loads I send an AJAX request, update my scope with the data and my list HTML list is populated.
Now, there is no issue when I load the page directly, but when using UI router the following happens:
Navigating to page directly (reloading the browser) - everything works fine, the list is populated and I can scroll.
Navigate to the page via another state (using ui-sref), the list loads via AJAX, the HTML is updated. However I'm unable to scroll if the list breaks the window height.
I've currently got html, body { height: 100%; }, but changing any of these has no effect. Do I need to re-calutate the window height? Why would this only happen when I navigate to the page/state from another?
Can I force UI Router to re-calculate window height on each state load or similar?
On my website, I have a list of users. By clicking each one, a fancybox pop up window will show. Within the window, I use iframe to load a page with paintings from the user.
Is there any way to make the images in fancybox iframe pinable by clicking pinterest bookmark pin it button? Or do I have to add a pin it button to each HTML page?
Thanks,
Milo
The bookmarklet button works on the page that is currently loaded. Usually, if an iframe has changed even slightly from its original url, it is inaccessible to the parent page via javascript. The actual iframe itself has to initiate the appropriate messaging request systems.
If you can have the iframe send a message to the parent window that contains the desired images and then have the parent window add the image links to the page, that seems to be the only way to do it right now. Look into the postMessage() function.
As you asked if there is "any way" to do it, I would say yes. However, it is very ugly. Probably better to add pinit buttons to each image in the iframe. :)
I have a Flex HTML component that is displaying content from a remote URL and a button in the Flex application that reloads the content. However, it takes a few seconds for the IFrame's content to refresh. During this time, there is no obvious feedback to the user that any action is underway.
I would like to clear the contents of the IFrame, so there is immediate feedback after clicking refresh, and then load the remote URL again. Is there a way to do this?
I've tried setting the HTMLText property to "" and setting the IFrame location to "about:blank", and neither of these have the desired immediate effect. (on it's own, setting the location to about:blank immediately clears the IFrame, but if it is followed by resetting the location to the original URL, the immediate clearing doesn't occur. Is this something to do with the IFrame caching the original page?)
One approach is to remove the component from the display list and add a new instantiated component back in its place.
This will assure fully initialized state.
One other way you could get around would be having a blank iframe or loading screen ready with the same size and same position, while the contents are being loaded, hide the content iframe, and show the blank iframe or loading screen. This could be much easier to achieve a more flexible result.
I have a list of links that are on the left side of my page that extend further down than my iframe on the right side of my page. how can I have it so that when I click a link and the iframe reloads that the window also resets to the top of the page?
EDIT: I tried doing an anchor but this wouldn't work because the content is in an iframe.
<a target="_blank|_self|_parent|_top|framename">
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame
_top will make the job for you
http://www.w3schools.com/tags/att_a_target.asp
i have a master page with three sections, left pane + 2 right panes (one top header and one main screen area)
i want to have the main screen area dynamically fill a url based on a link click from the top header pane.
so in the header if i have three links - assume i have three pages (one.aspx, two.aspx, three.aspx) and i want to click a one, two, three link in the header pane of the master and have the content load in the main area of each associated child page in the main areas.
any idea?
The point of ASP .NET master pages are to do exactly what you are wanting without needing to fill areas of the page.
What I would suggest doing is moving the content that does not change per page (e.g. left pane and the top header/right pane) into the master page. and create a contentplaceholder for your main screen.
Then create your one.aspx, two.aspx, three.aspx pages and have them use your new master page. Now, when you edit the pages, the only area you will edit will be the content for the main screen area.
Any changes you make on the master page will be immediately reflected on all three pages without having to update each one.
If you had a different goal in mind please let me know. I'll do what I can to help.
When you created your pages you should have selected the MasterPage.
On each page you fill the content areas of your MasterPage.
So if you want to link to your pages you can put the links in each page's Head ContentPlaceHolder. So you link to 'one.aspx', 'two.aspx' and 'three.aspx' directly.
Each page will load it's MasterPage contents when it's requested. So it works like includes not frames (forget frames).
Just create your master page with your layout divs and use the to leave a place holder inside your content tab.
Next create a new page that uses your master page as its base and inside the automatically generated tag put your specific content for that page.
Create a new page inheriting the master page for each content page you want the header links to point to.
Hey presto no need for frames or script.
I'm not sure I completely follow your intent, but if I do get it, it sounds to me like what you want is a floating frame.