I have markup like this on somepage.html:
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
<h1>somecontent</h1>
</div>
And links like this on another page (let's call it someotherpage.html):
<a href='somepage.html#hashtag1'>first content div</a>
<a href='somepage.html#hashtag2'>second content div</a>
<a href='somepage.html#hashtag3'>third content div</a>
However when I click on one of these links I don't see the expected behaviour - the page loads as normal but the scrollTop of the window doesn't match these divs. I've tried changing the IDs as they had hyphens in the to start with, this didn't make any difference - I've also tried changing what element the ID is on, i.e changed the <h1> to have the ID, then changed the <h1> to an anchor, but no luck.
When I'm already on the page, if I edit the hasthag and hit enter, it works as expected - changing the scrolltop of the window to the element with the ID of the hashtag without refreshing the page - but it doesn't work on the first hit.
Am I missing something obvious here?
EDIT:
Using FF 9.0.1 on Mac OSX
Turned JS off using web developer toolbar
changing or removing CSS doesn't seem to make any difference
UPDATE:
This works fine if I enable javascript - which is exactly when it doesn't need to work.
I have this as a catch for users with no javascript / disabled js. WTF, firefox?
Given your specific example, it seems to me that the scrollTop only changes when the page is already long enough to require scrolling.
When all the content is in view, the scrollTop position remains at the top of the document however when the page requires some scrolling, the scrollTop scrolls as far as the document can already scroll.
If scrolling to the required ID does not exceed the total possible scroll position, then the element in question will apear at the top of the page, otherwise the document will only scroll to it's maximum (based on its content).
Hashtags don't work with ids. You have to put a tags like this: <a name="foo"></a>. Then you can link to them using go to foo. Same goes for linking between multiple pages.
Related
I need to switch to element that is coded as <div class="error-wrapper">.
It contains text which coded as <span class="error-content">Some text here.</span>
It can be closed by clicking x button which coded as <span class="glyphicons glyphicons-remove">.
I've figured the xpaths for each element.
So I need to find the error-wrapper element somehow, click close button and switch to other elements on the webpage.
I've tried Page Should Contain, Element Should Be Visible, Page Should Contain Element, ...
The problem is the test is failing with error: "Window with last index is same as the current window."
How can I switch to this "window" and switch back to main window? It's not an alert or a popup or a window.
Screenshot of HTML
Maybe the HTML has iframe,
If it has, you can use Select Frame keyword in SeleniumLibrary.
HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document
If we're not lucky, try this one Wait Until Page Contains Element or maybe you can optimize the xpaths more.
I am unsure what is going. I have two footers. One footer is a sidebar, and my other footer is a regular footer on the bottom of the page. My anchor tag in my bottom footer, that links to my about page, takes me to the bottom of the page instead of starting at the top, and my anchor tag in my sidebar footer takes me to the middle of the page! Other Anchor Links are taking me also to the middle or random parts of the pages when loaded.
I am not using anything special with the anchor. I don't think...
Here is my anchor for both footers:
<a href="/about" class="a-color">
<small>About</small>
</a>
My pages are loaded with ng-view. I am not using $anchorScroll
ngView retains the scroll position when you navigate from one page to another. once view loaded then can use $anchorScroll to change viewport or can add autoscroll="true" to ng-view element
<div class="ng-view" autoscroll="true"></div>
Use this code. It will always takes page to top on window load.
$(window).load(function(){
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
});
Seemingly, your browser has an issue. 1. Which browser you are facing this on? 2. Did you try on any other browser? 3. Is this code running fine on any other machine?4. Did you clear cache/cookies and tried again?
Workaround:
Definitely not the perfect solution but as a workaround, try the below code and see if this works out for you:
<a href="/about#top" class="a-color">
<small>About</small>
</a>
as per my understanding you don't want page to reload after user clicks on any link on your page, you only want some area should get refreshed right ?
In that case you can use templates, configure route according to states and by click on link you can change template by $state.go.
I always see websites that has a link that says #top or #bottom that takes you to the top or bottom of the page. Can someone please tell me how I can use it on my website. I already tried saying <a href="#top"> or <a href="#bottom"> but it did not work.
This depends on what exactly you would like to be treated as top and bottom. To link to the very start of the page, you can use the URL #, as in Start of page. To link to some specific element near the start, assign an id attribute to it, e.g. <h1 id="top">Main heading</h1>, and use that attribute value in a link, e.g. Start of page.
The bottom is a bit more tricky, since there is no predefined URL for it, and although you can use the id technique, the URL will refer to the start of the element. You could deal with this using an empty element at the very end of document body:
Last piece of real content.
<div id="bottom"></div>
</body>
</html>
Then you would use e.g. End of page.
However, normally links to start of page are worse than useless, and links to end of page are no better. Every browser provides a simple way of getting to the start or to the end of any page.
Hashing with an id will take you to the equivalent element with the id on the page.
So if you have a div like so:
<div id="top"></div>
and an anchor as such:
Go to top div
Clicking the anchor will take you to that divs place in the DOM.
Quite simple if a user is at the bottom of the page show them
Go to the top
Or if they are at the top of the page show them
Go to bottom
Right...
I am working on a client's website and so far most of it is working well.. until today...
The URL: http://www.chris-loweth.co.uk/shoaib-hassan-photography/site_demo_1/
When the page displays it is jumping to a H1 on the page that is half way down the page...
There are a few <a href="#"> links for dummy content but these shouldn't be working like scroll anchors... and there's definitely not an anchor in the div that the browser seems to be scrolling down to...
Spent hours on this and wondered if some fresh eyes might help...
I've tried to validate the markup but as this is a test site some of the div IDs duplicate so validation fails.
Thank you guys n gals!
I don't think it's jumping to the H1. I think it's this line near the top of your tools.js file that is doing it:
$('input[type="text"]:first').focus();
It is scrolling to put this in view, and depending on your browser size, this could well put the H1 above at the top of the window.
The problem is caused by this line in the javascript file:
// Set focus to event title on page load
$('input[type="text"]:first').focus();
The first input field is way down on the page. Setting the focus to it is causing the browser to scroll to the input field instead of remaining at the top of the page.
I've read various posts on this subject and think I understand the usual points of failure. I find that my two product thumbnail images, under the "This Click'n'Pick Set Consists Of The Following 2 Products" heading, are clickable, but do not take me to the named <div> element further down the page. Instead, they cause navigation to http://www.premierrange.co.uk/#bundle_product_anchor_448, for example. I see this both in Chrome (18.0.1025.33 beta) and Firefox (10.0.1) on Linux.
http://www.premierrange.co.uk/index.php?main_page=clicknpick&groups_id=2&chosen_0=243&chosen_1=448
So for example there's an anchor targeting '#bundle_product_anchor_243':
<a href="#bundle_product_anchor_243" title="Click here to jump to the 70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
<img src="http://www.premierrange.co.uk/thumbnailer.php?filename=images/H77-700.jpg&height=100" alt="70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
</a>
This targets the <div> further down the page:
<div class="productSeparator" id="bundle_product_anchor_243">
<h1>Product number 1 in this bundle of 2 products</h1>
</div>
I've also tried making the <h1> inside the target <div> be the target instead, in case the target must be an inline element rather than a div, but nothing seems to work.
The <div> containing the badly behaving <a> is completely closed by the time the <div> containing the target element appears in the document. I don't think there's a problem with the target element not being defined at the point in time the <a> is parsed by the browser.
Manually adding "#bundle_product_anchor_448" to the URL does work.
I am aware that the page fails HTML validation on a large number of points, due to a large number of factors that I'm not going to be able to address easily. I'd have thought this basic 'jump to a named element' functionality should work regardless. The page is completely functional other than this little navigation quirk.
Anyone got any clues?
Try removing <base href="http://www.premierrange.co.uk/"></base> from the page header.
The <base> tag specifies the base URL or target for all relative URLs (the ones that don't say http://www.example.com/...) on your page. Without it, your link should function as intended though you may have to fix other links to accommodate this change.
While using the <base> tag in your application, the best approach would be to just use absolute URL's before the hash, with the absolute URL pointing to the same page you're in.
So, assuming that you are on the 'http://example.com/products/curved-glass' page, instead of
<a href="#bundle_product_anchor_243">...
you would need to include the absolute current URL before the hash:
<a href="http://example.com/products/curved-glass#bundle_product_anchor_243">...
Finding out the current URL is a trivial task in most of the environments, and this method also avoids the removal of your <base> tag, action which might have negative consequences in other areas of your application.