I have a bubble which comes up when I click on an icon just below it. But if the icon appears at the end of the page, then when I click it, the popup goes below the page. I want to avoid this by detecting the end of the page and this case making the popup come on top.
I tried using $(window).height() to detect the height and then check the current position of the popup and change it accordingly if its at window end. But is there a better approach to it?
I remember having this problem and solved it with scrollIntoView function https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
Try the following:
document.getElementById('pop-up').scrollHeight
Related
I have a web page in
http://enlaces.webcindario.com/paraprobar02.htm
that everything works fine. But when I press the CHECK ANSWER button shows the message at the top of the page. Also when you go to that page in a touchscreen device the message appears close to that same CHECK ANSWER button or to other CHECK ANSWER buttons.
I would like the message appears like in this other page of mine:
http://enlaces.webcindario.com/addition.htm
Thanks :-)
Why use + scrollX? Isnt the popUp absolute? Either make popUp fixed with negative scrollX or just remove scrollX completely: absolute will already change position when you scroll.
I have embedded a ecwid store in my webage via iframe.
Whenever I load the page, ecwid automatically scrolls to the iframe, instead of the top of the page.
As seen here (ecwid: how to force the scroll position), ecwid's solution for this is to add the following DIV inside the {body} tag:
<div id="ecwid_product_browser_scroller"></div>
I've made a fiddle to try to make it work, but it won't happen. I do know that people have used the same code to force the bar not to scroll down, so I must be doing something wrong.
Here's the fiddle: fiddle
Notice that the store is forcing the bar to scroll down. I would like it to stay at the top so customers actually see the banner.
UPDATE:
Still don't know why the DIV does not work here fiddle. What am I missing?
We did manage to make it work inside the new fiddle but it does not work in my website
I think u want to do this
add jquery as i have done
http://jsfiddle.net/v3g20qxd/7/
I have added the pageYOffset and scrollBy in this
This is what i'm trying to create CodePen example
The idea is that the popup should work exactly like the Pinterest Link
The problems i have are:
When u close the pop-up, the page always jumps to the top. It should stay where it was
The popup is fixed, how can i make it that you can move it like on Pinterest? I would like to have some spacing on the top and when u scroll u actually move the up
If u have any chance to view this on mobile, please do. I want to make the site responsive. If u view the pop-up in the mobile version, it isn't smooth. That means when u scroll and move you finger from the touch screen, the scroll stops immediately. So it feels like you need to push the content down with you finger. It doesn't flow so u could swipe and it would stop slowly
I try to figure this out for days already and can't get it. Any help is welcome :) tnx!
Instead of using anchor tag for the close button like this :
<div class="close">close</div>
Do this instead :
<span class="close">Close</span>
Don't forget to add cursor:pointer style for .close class.
Your problem will be solved.
Right now, the image that triggers popup disappears when you click close button on firefox just in case if you haven't checked on it yet. So, better not use anchor tag for the close button. My suggestion would be Never use anchor tag for close button.
Hope this helps.
I need to prevent browser from snapping to previous scroll position when the user pushed a back button like this:
<a href="javascript:history.go(-1)"
onClick="javascript:history.go(-1)" title="< GO BACK"></a>
after pushing that button the browser will return to the previous scroll position on this page
i want to stop that behavior and just load the top of the page.
Hope someone know a proper solution.
-exemple-
open a page scroll down go to a new page and hit the back button the page will auto scroll down to the place you scrolled before!
I'm fairly certain the behavior you're describing is is best classified as one of those things considered to be a user preference. (One of those things that you're not meant to tamper with)
#mrtsherman came up with a hack/workaround for this, but unless it's seriously breaking your webapp's usability, I think you should let the browser behave as the user would normally expect it to behave (and scroll to the position they were in when they left the page). Be sure to upvote mrtsherman for his sweet nugget of js if you use it.
I have the same problem and I haven't find yet the correct solution,
but I can give you a very good workaround for this problem.
Just scroll to the top before load the next page.
When the user click back, the browser will scroll to the top.
Example:
First Page:Next
Second Page:Back
Note that href="page1.htm" loads only if user select open in new window/tab
Excuse my English. I hope this helps.
I found a better solution!
Put the following code on every page:
<script>
setTimeout('window.scrollTo(0, 0);', 1);
</script>
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);