CODEWITHSUNDEEP
jquery
tonyf
tonyf

Reputation: 35567

How to append a DIV Banner Block to a HTML Page using jQuery

I am using jQuery 1.3.2 and I was wondering if the following is achievable and if so, how can it be done.

Basically, I have an iframe src page that displays a report to a user. Now because it's in an iframe, there is no banner on that page but I do allow the user to detach the iframe into a new browser window using window.open, so that they can see more info.

My question is, as I am opening the iframe page into a new browser, I need to manipulate the html and append, at body part of the page, a div section, that contains a banner.

Basically, in this div, I have my company's banner (logo and name), I just need a means of attaching this to the top of the page when a user detaches the page from the iframe.

Upvotes: 1

Views: 744

Answers (1)

Qwerty
Qwerty

Reputation: 1742

The cleaner way would be having class in html or body tag, which you switch after 'detaching' iframe. While page is in iframe class is for example 'in-iframe'.

And you have CSS like:

.in-iframe #banner, .in-iframe #footer {
    display: none;
}

So the banner will be actually always on the page, but sometimes it will be hidden.

IFrame html (note link with anchor for iframe):

<iframe src="/report/xxx/#hidebanner"></iframe>
<a href="/report/xxx/" target="_blank">open report in separate window</a>

Report page html:

...
<html>
...
<body>
<script> if (location.hash == '#hidebanner') { $('body').addClass('in-iframe'); } </script>
...

Upvotes: 2

Related Questions