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.
Related
I am working on a simple HTML/JS/Jquery game where you are supposed to look for a hidden vegetable on the page.
I have an image placed on the screen randomly on page load but it is hidden. When the user clicks on the image I want it to appear.
I tried using Jquery hide/show. This works fine if the image starts visible however, it fires the onclick event nicely. If the image starts as hidden it deactivates the onclick event. I know I am clicking on the correct spot on the page but the event never fires.
I tried using $("#image").css("display", "none");however this also deactivates the onclick. Is there another means of hiding an element that does not deactivate it's events?
You could use $("#image").css("opacity", "0");
$(document).ready(function(){
$("#image").hide();
)};
when u return to show
$("#image").show();
or
$("#image").style("opacity", "0");
I Have a chrome extension, it click a button when the page is loaded.
$(document).ready(function(){
document.querySelectorAll("input[type='submit']")[0].click();
});
This works, the only problem is that the button is also on the next page. So it keeps pressing the button and the page keeps reloading, so it's in a loop.
How do I fix this?
One solution would be to refine your selector. Find an unique parent element for the page you're targeting and create a more specific selector.
Another solution would be to check the current page url or the referrer and see if it matches a certain pattern.
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/
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.
When the user clicks on an external iframe, all event listeners on my BODY tag stop working and I need to prompt the user to click outside to regain the "focus" on the body tag.
But knowing when the user clicks on an iframe is actually very hard.
I know of two ways to know when there is a click on an iframe:
1- Overlapping a transparent div on the iframe (with the downside that the user has to click twice to actually click the iframe).
2- A very rough workaround which is having an input autofocused all the time and detect when it loses focus. But it's just stupid to even consider implementing it.
Is there another way to know when the user "loses focus" of the main body by clicking on an external iframe?
This is super easy, but not necessarily effecient/ethical.
setTimeout(function(){
document.body.focus()
}, 100 );
I would in all honesty use option #2 with some jQuery.
$(el).focusout(function(){
$(this).focus();
})
The easiest method and the only one I'm aware of actually is to make an infinite loop that gets current focused element.id.
Then it's simply a matter of comparing that id with your iframes to know which has been clicked.
Note that you will only be able to know for sure the user clicked once in the iframe, but there is no way to count clicks afterwards. Also notes that iframes can focus themselves with this method will be indistinguishable from a click.