Facebook Like button popup position - css

I have an issue regarding the popup position of facebook like button. When a user likes he will get a popup where he can type some text and confirm or decline the like. It's all perfectly clear.
Usually I put my like button plugin in the footer and I have no issue with that. User comes in, clicks like, popup appears, user scrolls a bit to see popup and all is well.
My problem arises from the fact I use parallax theme so when the user presses like page will increase its height to accommodate this popup and suddenly I can see the images from the parallax. This is ugly!
Please check the page here to see what I am talking about.
Is there a way to force this popup to open above the like button?

I didn't check it properly but why don't you try to make the position: relative where you put the fb like button and see your luck.

Related

iframe, allowing clicking but disable scrolling

This is a duplicate question of Disable all scrolling in an iframe, but allow clicking but I'm going to risk asking it again because that question was asked in 2014 and no solution was found (except that it can't be done). I'm desperately trying to find out if this can be done now. Therefore I would like to post this question again:
I'm trying to disable all forms of scrolling in my iframe, but still allow the user to click a button that appears in the iframe. I've successfully disabled all forms of scrolling (scroll bars, mouse wheel, etc) by using scrolling="no" and style="pointer-events: none;", however the later disables all forms of clicking to. Is it possible to prevent all forms of scrolling while still allowing the use to click within the iframe to inter-act with a button?
Unfortunately I don't have control over the iframe's content.
Possibly there is a way how to do this now after so many years? If so, I'd be very happy to hear about it. I checked all kinds of similar question of clicking and scrolling iframes but I did not find a solution yet.
Hmm... Honestly, I've never tried that.
But I imagine you could put a div over the suface of the iframe (as if it was a transparent overlay), and then when the user clicks the invisible div (that is on the iframe) then triggering a click event on the iframe?
If you happen to need the click's coordinates then make sure the div has got the exact same dimensions of the iframe (but with less z-index, so you make sure it's ON it) and then pass the div's click event coords to the iframe's click event you are gonna trigger.
Let me know if this works!
Regards.

navbar blocking textbox when refocusing and typing

On my website, and seeimingly on every page on the internet that I'm searching on this problem exists, and I am wondering if anyone has a solution to this.
If a website has a navbar at the top, then you click your cursor on a textbox, scroll down on the page so the textbox is out of view. Start typing and the page will scroll back to the tetbox that you are typing on, except the navbar will be blocking the actual text, there is no offset to account for that navbar height.
Here it is in action on w3schools.com for example:
https://www.w3schools.com/html/html_forms.asp
I have set my cursor to the "Last name:" field.
Now I scroll down so the field is out of view.
Now start typing again. You will see the website scroll back to the field so it can be in view at the top of the page. But note that the navbar at the top is blocking it.
This is prevalent all over the internet. w3schools for example and even facebook.
Has anyone every noticed and solved this issue? I don't even know where to start.

Console preview panel - how to reset size?

So the console preview panel at the bottom of the page remembers how big you had it last time you previewed. Usually this is great! But somehow mine is currently maximized, so the only thing that shows up is the Page dropdown at the top of the page (and anything in the console, if I switch between pages and the pages have things that log on load). The rest is just white console. Any idea how to get back the default view where the console is 20% of the bottom of the page? There is no visible dragging bar frame thing anywhere.
I can change my preview to console=0 to be able to use it, but I'd like a way to restore the default position of the panel.
Normally you should be able to hover on the top border of the console panel and resize it as you wish. An icon will appear, similar as in the image below:
Nonetheless, if you are doing your previews on a mobile device such as a tablet, then such thing is not possible to do. Therefore; a hacky way to do it would be to put the following code on the onAttach event handler of the page that is loading:
var splitPanel = widget.root.getElement().parentElement
.parentElement.parentElement.parentElement
.parentElement.parentElement.children[0].children[3];
splitPanel.style.height = "75px";
Nota bene: this is intended to ONLY work in preview

Pinterest: How to make the content within iframe fancybox window pinable?

On my website, I have a list of users. By clicking each one, a fancybox pop up window will show. Within the window, I use iframe to load a page with paintings from the user.
Is there any way to make the images in fancybox iframe pinable by clicking pinterest bookmark pin it button? Or do I have to add a pin it button to each HTML page?
Thanks,
Milo
The bookmarklet button works on the page that is currently loaded. Usually, if an iframe has changed even slightly from its original url, it is inaccessible to the parent page via javascript. The actual iframe itself has to initiate the appropriate messaging request systems.
If you can have the iframe send a message to the parent window that contains the desired images and then have the parent window add the image links to the page, that seems to be the only way to do it right now. Look into the postMessage() function.
As you asked if there is "any way" to do it, I would say yes. However, it is very ugly. Probably better to add pinit buttons to each image in the iframe. :)

Question about adding a new STATE in flex 4

I have built a web page with flex 4, I want the user to click the LOGIN button and have a popup window appear to enter login info. I have set this up so that there is a login state with the login box in it, the problem is that everything else disappears (menu bar, etc). Obviously this is because not all of my objects are viewable "IN ALL STATES", but do I really have to go back and change every little thing to show up in all states for this to happen, or is there a way for the login popup to just overlay on top of everything else temporarily.
Thanks.
Maybe PopUpManager can solve your problem? Here is documentation about it and here are a lot of useful samples.

Resources