Question

So I am building a website for a guy and he wants to take a page that I already made that is basically an order calculator and make it available on every page of the site in a pop-up div element. So I put together a simple iFrame that would load the page into its own box and everything would work properly, but he doesn’t like the way it looks, and I admit, iFrames look a bit sloppy if they don’t take up the whole page and they cause centering issues.

So I thought I would just put it into it’s own div and just load the page via jQuery into the div, but the problem arises with the stylesheets. Both the location page and the loaded calculator page have essential CSS elements that they must use and they conflict with each other, so is there any way to make the css imports that are inside the div with the loaded page only apply to elements within that div without renaming everything?

Thanks for your help.

CODE:

function po()
{
    $("#calculator").load("/calculator/");
    $("#calculator").fadeIn();
    $("#modalbackground").fadeIn();
    $("#closeCalc").fadeIn();
}

Any other solutions would be gladly accepted!

Answer 1

Maybe you could put a border less iframe into a div

<div style='width:100px; height:100px;'>
    <iframe style='width:100%; height:100%; border:0;'></iframe>
</div>

The iframe should take the entire width of the div