location.hash in an iframe scrolls the parent window - javascript

I have a page with an iframe. Inside the iframe is code (that I can't change) that sets location.hash to the id of an element in the iframe window.
This has the unwanted effect of scrolling my outermost browser window so that the top of the window touches the top of the iframe. This is quite annoying as I have a toolbar above the iframe that is vital to my app.
Is there any way of preventing the setting of location.hash affecting the scroll position of the main window?
Will preventDefault help me out here?
EDIT: It looks like this isn't really possible in the way I described it.

If preventDefault doesn't do what you want it to, you could do is dynamically move the location of the <a name='iframehash'> so that it's always at the top of the screen. That way, when the call to move to whatever hash it's going to gets called, nothing will actually move.
But if preventDefault() works, it's a much better solution.

You can use:
event.preventDefault()
This will stop the default action of the element it is applied to.
https://developer.mozilla.org/en/DOM/event.preventDefault

Related

How to prevent hashchange scroll in JavaScript?

I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?

How to force an iframe's parent page to scroll to top automatically when the user navigates in the iframe?

* Please note: cross-domain scenario *
I have an iframe which has no scrollbar, but much more taller than the browser window, so the vertical scrolling is done by the browser's main vertical scrollbar. However there is a disturbing feature of this: When the navigation done in scrolled down state the scroll is not reset to top in the parent.
I would like to reset this scroll to the init top state automatically when page navigation occurs in the iframe.
Thanks in advance.
If your iframe has a cross domain issue (pointing to somewhere other than your website) You can't:
error : Permission denied to access property 'document'
But if not, you can do it using this code. add this to scripts in page:
var myframe = window.frames[0].window;
myframe.onscroll = function(){if(myframe.scrollY == myframe.scrollMaxY){window.scrollTo(0,0);}};
//Thanks Diodeus!
Or you can select it by getElementById or other similars and give the reference to myframe variable. This triggers an event when you scroll down in the iframe and then scrolls the whole document up.
You can hook an onload event to the iframe. It is one of the few hooks you can get in a cross-domain scenario.
document.getElementById("some_iframe").onload = function (){ window.scrollTo(0,0); }

Prevent scrolling to input box when Javascript Focus is used

I would like the cursor to be automatically placed in a textbox when my page loads. However, I do not want the page to scroll down to this textbox (I would prefer that it remains out of view at the bottom of the page). This probably sounds odd, but I do have a need for it!
I make the cursor appear using this code:
<script>document.getElementById('textbox1').focus()</script>
Is anyone able to modify this code such that scrolling will not occur?
The window object supports a scrollTo() method try adding it after focus()
document.getElementById('textbox1').focus(); window.scrollTo(0,0);

Resizing iframe when document changes size

I have a web page with an application running in an iframe (same domain). The iframe's height is set on load based on the iframed document's height. The problem is when the iframed document's size is changed (by expanding an accordion, menu etc). Are there any events fired when this occurs, that I can use to resize the iframe element accordingly?
I have tried to bind to the resize event on the window object in the iframe, but as the window isn't resized when the document content changes, the event doesn't fire. What I need is some kind of resize-event on the document object, but as far as I know, there is no such thing. Is there another way to detect changes in the document's height?
I'd appreciate a general solution, as I don't know the content of the iframe exactly, but I can include generic scripts in it.
There are resize events fired for the iframe window. You can listen to them (in the iframe itself) and than trigger some function in the parent window to propagate new size and update the iframe size in the parent window.
Have you tried using the scroll event and attaching it to the contentWindow of the iFrame?
Otherwise I would rather suggest you hook directly into the accordion rather than relying on catching scroll events that may or may not happen.
Because scroll will only fire once the user actually scrolled the slider, not when the accordion expands..
But you could simply call a method on the parent when the user expands the accordion passing it the new size of the accordion.
I found a possible, but not ideal solution, and it doesn't work in all browsers:
By binding to the body element's DOMSubtreeModified in the iframe, I can find the iframe element in parent or top and change it's height.
$('body').bind('DOMSubtreeModified', function(){
top.document.getElementById('appFrame').height = $(document).height();
});
Here's an overview of the browser support for this event:
http://www.quirksmode.org/dom/events/
If you are using jQuery ui then you can use event change and call function
setHeight
http://jqueryui.com/demos/accordion/
function setHeight() {
parent.document.getElementById('the-iframe-id').height = document['body'].offsetHeight;
}

how to make popup windows always on top?

I want to have a javascript/jQuery popup window (child page) that is always in front of the parent page, something like facebook's current picture viewing feature.
it would be closed by the user clicking on the close button.
I have tried as below:
mywindow = window.open ("DownloadForm.aspx", "mywindow","location=1,status=1,scrollbars=1, width=350,height=150");
mywindow.moveTo(350, 350);
this code successfully opened a child page in front of the parent page, but there is jQuery code ( $(#test).click() ) on the parent page which causes the parent page to always be in front.
I tried putting the window.open() code after $(#test).click(), but it didn't solve the problem.
The $(#test).click() is necessary, therefore I need to have a workaround.
I appreciate any help, thank you in advance.
myWindow.focus()
Many modern browsers prevent this from working, but it's the only way.
use following javascript code in the page you are opening in popup
<body onblur="self.focus();">
Im sure you cannot control the order of the window. Instead of a popup (which is often and usually blocked by browsers) why not investigate using a lightbox javascript plugin. They are usually free, stylish and work well.
Just set it from the modal css. The z-index is normally set to 1. Just change it to 9999. That is the purpose of the z-index, to set the popup top level.
If not using bootstrap popup, then you need to use css to set it. Browsers are not guaranteed to place nice with .focus() on a window.

Categories

Resources