I have a page (pageA) that contains tabbed panes, the content of each pane is represented by a DIV element and it has a unique ID e.g id="tab1"
<div id="tab1">Contents of tab</div>
I have another page (pageB) that has an A element that links to a specific tab
Tab 2
On IE7 pageA with the tabs on will only scroll if I open the link in a new window from pageB
Has anyone come across this issue and knows how to fix it?
I've noticed that the url that is being constructed by the anchor in IE7 is not valid:
<a href='#skipNav'>Skip</a> -> <url>/#/skipNav
so the easiest solution is to place a full url with # in the anchor. This will prevent IE7 to construct it from scratch (url should be server side generated in order to avoid Dev/Test/Qa/Prd transformation problems):
<a href='<url>/#skipNav'>Sip</a>
EDIT:
if the error still occurs try adding a random query string. It's a dirty solution but what is not dirty in IE7
EDIT:
here's a great example of another approach: window.location = #anchor doesn't work in IE
In a nutshell:
Back to top
Related
Heyo,
so I've got a main_menu with some sub_menu's. The main_menu li a[href]'s link to the different pages and the sub_menu li a[href]'s link to specific locations inside each page with the <a name="..."> attribute (f.e. from http://example.com/page to http://example.com/page#1). Now sinse this is a Website with a custom CMS, I can't change every single <a href="..."> attribute of all the li a's or else i will make the menu unable to eddit for people with less knowlage. So I redirect every of the sub_menu li a's to the correct anchor name attribute link.
Now once I clicked on one of the sub_menu li a's I will get redirected to the correct page and the correct anchor name attribute link. But I don't get exaktly to the point were the <a name="..."> is located. The Viewport is allways above or below the element.
For some reason this doesn't happen in Chrome thoe. In Firefox, Edge and Internet Explorer I get this weird bug.
So I tried to refresh (not reload) the page and after that it works. So I decided to create a little script with jQuery that makes the page refresh after every .load() and this is what I came up with:
$(window).load(function () {
$('html').load();
});
Now I'm not sure if this is the right approach to my Issue or if my Script is just not correct. But it doesn't work for me. What have I done wrong?
So you are causing li a with no href to change page with the anchor and having to reload to get the anchor positioning right? Have I understood that correctly?
Firstly I'd suggest that they should be href as they aren't the anchor, they're the link..?
With that aside, from what you've given (which probably should be more info generally), I'd guess that the position the viewport is at is where the element was before the page changed during loading and moved the element higher/lower. Chrome is probably timing the anchor positioning later than the other browsers (i.e. after more things are loaded/rendered).
I'd check this by temporarily disabling anything loading on the page that's causing DOM changes and moving the elements around during load. If that's the issue then you'll need to decide how best to handle that based on what is loading.
Hope this helps.
The situation is: on the website I have tab system implemented with iframes. There is an <ul> that contains <li>'s. Each <li> contains one <iframe>.
Like this:
<ul>
<li>
<iframe></iframe>
</li>
...
</ul>
On one of the pages, a jQuery dialog is opened when certain event happens.
The problem is: if tab (<iframe>) is not activated (parent <li> element has display:none) and jQuery dialog is initiated, then when user returns to this tab, the dialog is located in wrong position. It's top and left attributes is set to 0. It happens in FireFox but not in Chrome.
The only solution I found is to initiate redrawing of dialog when user switches to this page, by calling some universal function inside iframe when it's activated if this function exists on this page. But I think this solution is bad and I hope there is a better way to solve this.
Appreciate any help and sorry for my English.
I have an iFrame within a parent page the length of the content varies from page to page in the iFrame so I would like to have the page jump back up to the top in certain situations.
This works fine in IE where breadCrumb is the id of a div in the parent window.
<script>
window.parent.location = "#breadCrumb";
</script>
It jumps the page to the right spot and the url is the parentwindowurl.aspx#breadCrumb
However in Chrome and Firefox this does not work it changes the page to the url iFrameurl#breadCrumb which replaces the parent page and has no breadCrumb div.
Does anyone know how I can get this to work in Chrome and Firefox?
Or is there a better alternative I should be using?
Try this one
window.parent.location.href = "#breadCrumb";
Assuming you want it to the very top, it's easy
https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop
window.parent.scrollTop(0);
sorry it might actually be
window.parent.document.body.scrollTop(0);
if not, please let me know the error
The location hash is normally used to scroll to an anchor tag with a matching name attribute, so you would need to have a tag like:
<a name="breadCrumb"></a>
in the parent frame in order to have the browser scroll to that content with a location hash.
I'm not familiar with this behavior on div tags; that might be an IE-specific feature.
Using the latest version of Chrome on Mac OS 10.7.
I assume it is some clever javascript that is enabling the folks at this webpage:
http://www.chairworks.com/
...to close my (the parent) page which opened their (chairworks.com) page in the first place.
I did not open them with javascript, but with an <a> tag with the target="_blank" attribute.
If I disable javascript, then the behavior stops.
www.chairworks.com
I would expect the page at chairworks.com/ to simply open in another tab/window... but what I find is that as soon as the new browser tab opens, it closes, and then my page (the parent tab/window) gets redirected to the chairworks.com page.
Kinda rude.
Can someone point me to what code enables them to do that? And how do I prevent it? (Assuming I want a link to behave as expected, such as in my demo page.)
I believe the proper thing to do is set corresponding link type attribute so the browser doesn't provide the target window with and opener reference.
Link
You can read more about link types here: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
This is the script they are using:
setTimeout('redirect_page()',0);
function redirect_page(){if (window.opener) { window.opener.location.href = '/home.html'; window.close(); } else { location.href = '/home.html'; }}
As to how to circumvent it (just an idea):
Create your own blank page, with it's source set to about:blank. When it loads (or after a time-out) you could write some code to that window that will then open the offending link.
Then the offending link just closes your buffer-page. F*ck 'm!! Power to the user!
Edit: looks like you could also name your page home.html hehe, but that is not such a workable solution..
Final Edit: SIMPLE LOGIC people...
www.chairworks.com
works for everyone, no javascript needed.
See this working jsfiddle example.
As #GitaarLAB explained, the targeted website is using the window.opener property to get access to your page. Using some Javascript yourself, and an about:blank page in the middle, can help you cut their access to your page. It would be like:
http://www.chairworks.com/
Some notes:
I'm leaving the href property there for users without JS enabled (guess what! the targeted website won't have JS neither! ;), or the web crawlers like search engines' (only those who don't care about JS stuff, though)
Before redirecting to the targeted website, you cut the back-link by resetting the window.opener attribute of the new window.
And after opening the targeted website, there's a return false; to prevent the normal the browser to use the href and target attributes.
I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains.
The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.
Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href="#" and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.
If you are dealing with the problem in Javascript simply use this code:
ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)
or
<script language="javascript">
function totop() {
scroll(0,0);
}
</script>
and in your html for iframe, add an onload attribute as below:
<iframe name="iframe" onload="totop()">
Got this 2nd solution from another forum, and changed to the 1st one to suit my requirement as I am creating the iframe element and setting its properties in javascript and not in html. It worked for chrome as well as IE. FF didn't have the problem in the first place.