I have notification drop down just like that of facebook. when clicked on link, this drop down is shown, which is positioned as absolute. problem is, when the drop down is opened, the page is getting scrolled to top. Unfortunately I cant paste code as its huge. can you guess what could be the problem.
Ok here is what I have. http://jsfiddle.net/testtracker/uuQf3/1/
first scroll down then click on black link, and see that, it scrolls up first then shows notification drop down.
As above said, anchor tag with # href attribute will take you to the top of page, the solution to this is
catch the onclick event and do this
$('a').click(function(e){
e.preventDefault();
//OR
return false;
});
this will restrict its default behavior.
or you can directly write it in your anchor element like this
link
Problem here is that your link is trying to find an anchor tag called #. This doesnt exist, so it scrolls to the top of the page. What you need is to tell the event handler to not do the default action of loading the href="#".
The solution is to add e.preventDefault() to your event handler.
See demo here:
http://jsfiddle.net/ksokhan/uuQf3/2/
Related
I'm clicking on a link that opens a new window with a PDF document. I switch to the new Window, which I verified that I was on by getting the URL. The window has a toolbar at the top which is visible for a few seconds when the window opens, and then hides itself unless you move the mouse again. I'm trying to click on the Download button, but anything I try gives an error that the CSS Selector can't find the element. I'm suspecting it's because of the nature of the animated toolbar, but I'm not sure. At first I was just trying a regular click:
element(by.id('download').click;
And that was not working. So I tried navigating the mouse to click on it:
browser.driver.actions().mouseMove(element(by.id('download'))).perform();
element(by.id('download')).click();
I've also tried selecting by css:
element(by.css('#download').click();
All give me -Failed: No element found using locator.
Could someone please tell me if what I'm doing is possible, and if so, how I might be able to accomplish it?
screencapture
Element
This is more of a workaround than a solution, but what works for me with elements that are for some reason not visible (covered with other elements or working only on hover) is to just inject a script. Like:
browser.executeScript(
"document.querySelector('[id=\"download\"]').click()"
);
I have a wordpress site and i used a template to do it. So when i'm on mobile it has a mobile menu i managed to make it fixed to stay at the top when i scroll down, but the problem is. When i'm on a certain place at the site and i wanna open the menu with the "three line" icon it's opening the menu but takes me to the top of the page as well. And when i wanna close the menu with the X button it takes me to the top of the page as well, so basically the menu is unusable. I know it's a Jquery problem, but i can't find which file contain the codes for it and even how to fix it.
My website is: www.autoberles-szombathely.hu
So i wanna make the open menu button and close menu button to only open and close the menu and don't take me to the top of the page.
you can use:
$(selector).click(function(event) {
event.preventDefault();
//other stuff you might want to do on event
});
For the record you should not remove the href entirely, it should always exist to prevent unexpected behavior. If you don't want the href to be be acted on then just use that preventDefault() method, easy and keeps everything running smoothly.
Your menu has the following structure in a mobile viewport:
<i class="fa fa-bars"></i>
The # will cause the page to jump to the top, see here for a detailed answer why.
You have two possibilies to prevent this behavoir:
Add an event handler to this link and use event.preventDefault()
For jQuery
$('.menu-toggle').on('click', function(event){
event.preventDefault();
});
VanillaJs
document.getElementsByClassname('menu-toggle').addEventListener('click', function(event){
event.preventDefault()
});
Remove the attribute href completly (See here). When using this solution you have to use a css-reset or add e.g. cursor:pointer to these links again, because the standard browser css is not applied anymore.
I wanted to know which event is triggered when I go on a page and press TAB which results in going through the links.
I want to whenever someone uses the tab to go through the page <a> tags it will force the hover event on the link, or will do any other code for instance, the element is visibility:hidden but when the user is using the tab, the browser is actually going through the hidden <a> tag and therefore cause it to be visibility:visible.
To stop the browser from "tabbing" to your hidden links, you can try setting a negative tab index on the links: How to ignore HTML element from tabindex?
The "event" that occurs when a link is tabbed over is the "focus" event, styled via the pseudo-class :focus.
I have some internal link which shows different content.
Everytime I click the internal links the browser scrolls to a position.
What I need to do is to force it to scroll to the top.
For example:
Click Here
It will show a certain div which is fine but I also need it to scroll to the top.
Is this possible?
Not sure of the exact methods right now, but something like this should work:
$('a').on('click', function(e) {
e.preventDefault();
// do your js stuff
$(window).scrollTop(0);
});
Do your links have JS code associated to the click event? Maybe you're stoping it's propagation and that is why they don't scroll your page.
If your link has an href value of "#" and you don't stop the propagation of the event (either by returning FALSE from your handler method or by using the stopPropagation method), then you should be set...
Sorry, the link doesn't work (if it was meant to be a link).
A little clarification--Are you trying to get the window to scroll the div to the top of the view, or have the window remain scrolled to the top of the viewport?
A link or code sample would be helpful...
If you're just trying to link to the top of the page,
Back to Top
should do the trick.
I have a div which is half way down the page. After I click a button, I load an image in that div. What happens is, that the page scrolls all the way up. How to avoid this ?
you have to edit your click event. the simplest thing would be to return false. you could also preventDefault f.e. if you are using jquery.