Creating a “Google Analytics” Like Site Overlay

StackOverflow https://stackoverflow.com/questions/1445462

Question

I am trying to create a site which uses similar technology to that of Google Analytics Site Overlay, but will be framing my own site. I may decide later to change the type of overlay (or eliminate it entirely), so using overlay instead of directly modifying the source pages is the only option I am considering. For now, I am also testing a static bar positioned at the top (such as Google Analytics uses as well), which will use an iframe below to serve the source page.

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Test Overlay</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
    margin: 0;
    padding: 40px 0 0 0;
    overflow: hidden;
    font: 83%/1.4 Arial, Helvetica, Sans-Serif;
}
#bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 900px;
    height: 30px;
    padding: 5px 0;
    line-height: 1;
    background: #333;
    color: #fff;
    text-size: 1.2em;
}
#bar a {
    padding: 0 5px;
    color: #fff;
}
#frame {
    width: 100%;
    height: 100%;
    z-index: 10;
}
#overlay_example
{
    position: absolute;
    left: 275px;
    top: 275px;
    font-size: 14px;
}
</style>
</head>
<body>
<div id="content">
    <div id="bar">
        <a href="http://mytestsite.com" title="overlay example">Test Site</a>
    </div>
    <div>
        <iframe scrolling="auto" id="frame" src="http://www.google.com/search?hl=en&q=CSS+iframe+overlay" frameborder="0" ></iframe>
    </div>

    <div id="overlay_example">* Overlay Data *</div>
</div>
</body>
</html>

However, the main problem I have is that on my target web site (Google search in this test case), when pages scroll longer than the viewable screen area, as I scroll down, the overlay text stays static in place. Is there anyway to change the CSS so that the overlay text stays put next to what I want it to overlay in the target site? In the case of Google search results for example, if I were to overlay text next to the Google logo, the overlay text would always remain next to the Google logo, so that when I scrolled down far enough that the logo was no longer in view, the overlay text was also no longer in view. This works just like Google Analytics in that I want the overlay text to anchor right to the text it overlays.

Please let me know if I can answer any questions about how I'd like it to work.

Thanks!

Was it helpful?

Solution

Due to browser security restrictions I don't think you can edit the contents of an iframe from outside that iframe. You would have to be doing the styling from within the iframe with css or javascript.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top