onclick button shows an unwanted message position - javascript

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.

Related

how to disable auto 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

Pop up problems with scroll

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.

Flip direction of popup when page end reaches

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

How to disable page scroll when opening dialog box?

I'm having significant trouble with a jquery dialog box that opens in response to a .hover() command, and closes upon leaving the hover (which of course takes two functions).
When the dialog box opens a little bit out of the page, the entire page scrolls up; I want to disable this but I can't figure out how.
I have tried:
using event.preventDefault()
putting the ui-dialog css as 'position: relative'
setting the scroll bar back where it was (but this looks terrible)
Any other ideas?
Edit: Here is the code in jsfiddle: http://jsfiddle.net/TzUf3/1
Make sure the popup has its position fixed, then set the body to overflow:hidden;
When the dialogue is closed remove the overflow attribute.

Prevent scrolling to input box when Javascript Focus is used

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);

Categories

Resources