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?
Related
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?
I have a page which contains an iframe. The iframe can take user's input (via button click or menu selection) and display content accordingly.
What I need is, when a user manipulates the iframe, the browser push each set of iframe parameters into history; and when the user click at back button, the iframe will reload its content using the saved parameters from the previous history entry. I have a piece of code doing the reloading as shown below.
The strange thing is, when I make multiple settings on the iframe (hence multiple state entries added to history), and then click at back, it'll work like this,
Say that I have state 4, 3, 2 in history and I'm now at state 5
the first click restore to state 4 (the "----state changed----" logging message is printed
the second click reloads the iframe with default content. The "----state changed----" is not printed; the reloading code is not called.
the third click restore to state 3
the fourth click is like the 2nd click
the 5th click restore to state 2
So after each click that successfully restore the state, it takes two clicks to trigger the popstate event (I tried statechanged event, too, with same result) and restore to another previous state.
Anyone know what's going on here? Thanks in advance.
History.Adapter.bind(window, "popstate",
function (event) {
console.log("----state changed------", History.getState());
console.log("----state data------",History.getState().data.state);
//code to do reload an iframe to its proper state
});
So I stumbled on this same issue. The situation we had was using history.pushState() to update the URL and then after that changing the src attribute of an <iframe>. By changing the src of the <iframe>, we are implicitly telling the browser to add to its history that the iframe had changed. Thus...
When we pressed back the first time, window.history's popstate is
triggered on the <iframe>'s src attribute and is reverted back to it's previous state.
Pressing back a second time triggers the popstate event for the state you originally pushed onto the stack
Our solution involved that when we decided to update the URL and push the state onto the stack, when we wanted to update the <iframe>, we used jQuery to replace the <iframe> list so...
$("#iFrameID").replaceWith(('<iframe id="iFrameID" src="' + location + '"></iframe>'
By doing this, we removed the side effect of the browser history getting polluted with our update to the <iframe> tag.
I had the same problem.Instead of navigating the user to the previous page on the website, the back button navigated the user to the previous page inside the iframe. This code below will help you to solve your problem:
iframe.contentWindow.location.replace(href)
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 website developed using Drupal. What I want is to create a link which launches a modal window with a custom content create form, then when the form submits and the child window closes, a view or a display of a view in the parent must be refreshed.
I have tried using an excellent module like automodal and ajax_views_refresh but I can't get to set it right.
Any clues?
Figured out how to do this not so long ago, and while looking for a method to Preview content from the Modal Frame, came across your post. Hope this isn't to late to help.
Open parent.js under modules/modalframe/js
and insert location.reload(); around line 250 within this if statement:
if ($.isFunction(self.options.onSubmit)) {
self.options.onSubmit(args, statusMessages);
}
Now, when you click "Save" the child window closes and triggers a parent page refresh.