Pop up problems with scroll - javascript

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.

Related

onclick button shows an unwanted message position

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.

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

jquery click button on another site

I am trying to make a Google Chrome app that automatically opens a YouTube site and clicks on the expand button, or any button.
I tried to use the following JavaScript:
$('#logo').click(); , .trigger('click');
But nothing happens.
Does anybody know how to do it?
Thanks
The thing you're clicking must be clickable. There is a link around the logo (id="logo-container") you need to click that, not the logo itself. Right click on the logo in chrome, select inspect element and then you'll see what the <a> tag is around the img.
Try this:
$('#logo-container').click();

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.

Can I jump to anchor / tab using OnClick?

I thought this one was easy but I'm banging my head on the jumping part. I have a page, on this page I have tabs, I want to click on the 'read' link so that it (1) opens the tab and (2) jumps to that part of the page so user can keep reading. My code:
<a onclick="$('a[href=#tab-read]').click();">Read</a>
Like I said, works just fine, opens the tab I need but doesn't actually make the jump to it? I still have to scroll down the page to get to the content area.
Try this out, you can force the window to go anchor tag, or change up the selector to go to the desired element :)
$(window).scrollTop($('a[href=#tab-read]').offset().top);

Categories

Resources