I am building an autoresponder for my own website. I thought to put it inside an iframe to decouple it's style from the theme style (i'm on wordpress), but this gives me two collateral effects.
The first one is that the iframe is not much friendly with the responsiveness, and I'm trying to address it's behaviour to always show the content of the autoresponder.
the second one is that the form inside the iframe has a "thank you" page after the submit, but with the iframe the thank you page will open inside the iframe.
There is a way to open the thank you page on the host page? Am I doing this the right way? there is maybe a better way to insert a piece of web page in a way that stay indipendent from the theme around it?
I wouldn't use an iframe to de-couple styling to be honest, they can prove far more trouble than they are worth.
I would just override any theme styles I didn't want with CSS targeted at the component. It sounds a lot more involved than it actually would be and you'd have better control over the responsive layout of the component.
Related
I want to build pages that have a header bar with pages from other sites in an iframe or DIV below it. I want to replace the CSS of the site below it with my own CSS (override it in some way; for example I may reference a blog page below it but want to change the look via CSS). Please note these pages would only be pages whereby I would be allowed to do this based on the licensing of the site.
Is this possible?
No, not really. Certainly not cross-domain. The whole point of iframes is that their content is insulated from the parent page. See How to apply CSS to iframe? for a thorough discussion of the issue.
So I seem to have found myself in a bit of pickle. In order to keep a header flash element from reloading every time someone goes to a different page, I encapsulated all my site's content in an iframe. Unfortunately, some of the iframe's include thickbox, which opens an iframe of it's own. The iframe that thickbox opens, requires it be opened on the topmost page, so that the fixed attribute allows the iframe to remain static in the viewport. Because we're already nested into an iframe, this isn't possible.
This is the most promising lead I have so far:
http://blog.codepyro.com/2010/01/thickbox-inside-of-thickbox-iframe.html
Unfortunately, that only replaces the iframe that the thickbox is being opened from, with the content of the thickbox.
I also just came across this, but I'm not sure how I would go about retooling it to suit my needs:
open iframe fancybox from within an iframe so that it opens in the parent
Here is a link to what I'm working on:
http://www.lalalandmusicfestival.com/site/
The problem area is on the Talent page.
I think if there was a way to force the link to target the "top" or "parent" page with javascript, it may be possible, but I haven't found anything that's been of any use to me yet.
Thanks in advance for your help!
I'm using Lightbox2 to display a node within a Lightbox iframe popup (using rel="lightframe" within a link).
Is there a way to pipe CSS into this iframe so I can style the contents the way I want them?
(I actually don't understand why using a rule like iframe body {font-size:1em} doesn't work, but that's just me being stupid... :-/)
I'm guessing I need to run a JavaScript function after the Lightbox has loaded that will add the CSS. Will that work?
To begin with styling an iframe is a little headache, or at-least that is what my designer told me ;)
The easiest solution would be to add the styles directly in the template of the node type that you are trying to display in lightbox. This would work if you lightbox is the only place where you are displaying that node.
This is a working solution but not an elegant one. Would appreciate if somebody can come with a more elegant solution.
I have one web page in ASP.NET and I want that page to be disabled until the whole page loading process gets completed.
One way is to activate a lightbox without content that will dim the whole page and then on the body onload event hide that lightbox.
Lightbox is a like having a modal window above the original window, and is used to preview pictures and other content. It could easy be modified to do what you want. Just activate a lightbox with no content and then hide the lightbox when the document is loaded.
This is a strange requirement and I would be interested in finding out your reason for doing this. Is there a problem or error that is ocurring. Perhaps you think the best way to prevent the error is to freeze the UI until the page loads.
I think that you should edit your question and describe what the underlying issue is. There might be a better way to improve your page.
I've seen this done with a simple overlay before.
Basically an iframe and a div that covers the page and has a high z-index is output at the beginning of page render. This is styled so it greys the page out and it also makes everything non-clickable. Then, once the page is loaded, a simple bit of javascript can be used to remove the div and iframe (or just set their styles to make them disappear).
I've also seen people attempt this issue by manually iterating over all controls on the page in JavaScript and disabling them. This is a horrible way to attempt it :)
The jQuery BlockUI plugin is another good option with lots of customization options.
On my website I have a page with a standard background. I want this page to load in an iframe without the background from the original page in another section of my site. Is this possible? What is the syntax for this if it is possible.
just make sure the iframe is big enough in order to hide the background.
Are you trying to hijack the address? If so, you should use redirects and not iframes.