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. :)
Related
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.
I have a web page, and when I am zooming, all the elements that are there in the page move.
How do I modify my CSS file in order to fix this issue?
When you zoom the page using: CTRL+ OR CTRL- your browser is changing the layout of your page.
The is no way in JS to capture this zoom event , the only thing you can do it to catch the resize event and "fix" your page layout there.
I have a long html page. At the bottom is an iframe with a long list of links. The links open new pages in the iframe.
When links are clicked inside the iframe, the parent page (as expected) jumps to the top and I have to scroll way back down to get back to the iframe and its newly loaded page.
Here's one hurdle. The iframe contents is hosted on another server outside my control. The admins there have graciously added a call to a js file hosted on our server from the iframe src, but I still can't crack this.
Do I need to calculate the distance of each link from its window top and also the iframe's distance from it's window top and do a bunch of math and then scroll back to that position after the new page loads?
Suggestions?
I have a Flex HTML component that is displaying content from a remote URL and a button in the Flex application that reloads the content. However, it takes a few seconds for the IFrame's content to refresh. During this time, there is no obvious feedback to the user that any action is underway.
I would like to clear the contents of the IFrame, so there is immediate feedback after clicking refresh, and then load the remote URL again. Is there a way to do this?
I've tried setting the HTMLText property to "" and setting the IFrame location to "about:blank", and neither of these have the desired immediate effect. (on it's own, setting the location to about:blank immediately clears the IFrame, but if it is followed by resetting the location to the original URL, the immediate clearing doesn't occur. Is this something to do with the IFrame caching the original page?)
One approach is to remove the component from the display list and add a new instantiated component back in its place.
This will assure fully initialized state.
One other way you could get around would be having a blank iframe or loading screen ready with the same size and same position, while the contents are being loaded, hide the content iframe, and show the blank iframe or loading screen. This could be much easier to achieve a more flexible result.
I am working on a project where I am simply loading same directory content into an iFrame. No external pages.
I have Colorbox within the iFrame content which is working beautifully.
My question is: I have some "parent" buttons which I would like to make them close any of the iFrame Colorbox popups. The project is an "information point" system with some buttons in the parent that show at all times, but whenever I click the buttons the iFrame Colorbox stays open.
A lot of the pages I have found talk from the opposite way, controlling the parent from within a Colorbox iFrame...
I'm going to guess that this may not be achievable from a security point of view...
many thanks everyone :)
You might be able to do something like this:
$('.cboxIframe')[0].contentWindow().$.colorbox.close();
I ended up using jQuery the other way round so the child controls the parent and hides the parent controls and when the ColorBox control is closed it "shows" the parent controls.