How do I make an iframe width/height as a variable? - javascript

I need to use a webpage as an Iframe, but the page has a button that expands a chat window. The problem is, how do I insert an Iframe without disableling the content that's behind it?
It's supposed to show just the button (from the other page) then, when it's clicked, the iframe should expand itself.the background is just for visual purposes

Related

Is it possible to add iframe button that opens modal popup form component from your site?

For example, on my site I have a button that opens a modal popup with form and I want to add a button to using an iframe to open this form on other sites
The content from iframe should be in full width and height of the screen with a transparent background, but it turns out that it overlaps the content of another site and takes away the ability to interact with content of another site

button click event from iframe

So I have this web application that our customers use. It is like xxx.mydomain.com. I have another web application that is like yyy.mydomain.com. So what I want to do is have a hidden div with iframe on xxx.mydomain.com whereby when a user clicks on a button on xxx.mydomain.com this "floating" div with iframe (which src is yyy.mydomain.com) will display over top of the screen of xxx.mydomain.com.
We are doing this versus opening a new window so that the user feels like they are the same experience. It will feel like the second program is part of the first program. So all of this is working fine.
So on the second program (yyy.domain.com displayed in iframe) I have a button that basically tells them to go back to the main program. I want to be able to capture this button click event and hide this "floating" div with iframe so the user then sees the screen of the main program.
How do I go about doing this? Any help would be appreciated.
If your second app is always in the iframe, you can call functions from the parent document using:
parent.myFunction();
You need to bind event over button but as it is iframe,trick is to select content of iframe then find button over it to hide parent of iframe.
code:
$('body iframe').contents().find('.backButton').bind('click',function(e) {
//lets parent of iframe is having parent class
$('.parent').hide();
});

Hide another page's button

I want to load another site's page (e.g: www.a.com/b.html) on my site's page. TO do that I use an iframe to do that. But in that page (b.html), there is a button that I need to hide. Is there any way to hide that button with javascript or jquery.
Is there any other way to get the content of that page and edit some and display on my page.
$().contents should allow you to access the elements within an iFrame
$('iframe').contents().find('#btnId');

To Grey Out the WHOLE Website when you click button inside Iframe contained in that website

I know how to grey out (adding grey color) to the whole website by a click of a button using css .
But here is an interesting scenario. I have a small IFrame embedded in the main website. Inside the Iframe I have a button. On-click the button I need to grey out the entire website. Currently I am only able to grey out the IFrame contents and not the entire website. If somebody can help me regarding this that would be great.
IFrame contents are on the same domain as the website but on different paths. For example if the website is xyz.com, the iframe contents displayed on that website are in xyz.com/cms.
Note: I only have access to the code sitting inside IFrame and not the outside bit. Hence I cannot code outside IFrame. Whatever I need to code I have to do it inside the IFrame.
Can't we do anything to window object to grey out the entire window?
I think setting the grey to when the iframe window has focus may work for you.
You didn't include any code so not sure if you're using jQuery, but try something like this.
while($(iframe).focus()){
$('document').addClass('grey-out');
}

How to make it so on page load I can scroll the page, not the embedded PDF object

I embedded a PDF object on to my page. Now when I load the page and scroll with the mouse wheel, it scrolls up and down inside the PDF, instead of the actual page. I have to first click in some whitespace on the page, and then I can scroll.
Do I need to create some other object that I can set focus to on page load?
Give the body of your page an id/name tag and set focus to that or if you're loading the pdf in an iframe just set focus to parent in the iframe

Categories