Removing a DIV, or loading another page into DIV

**DarkDove** · 09-15-2012, 05:03 AM

I am fairly new to javascript coding first of all.

My problem seems fairly simple but I can't get it to work, I have a page set up using frames, the "usual" setup, a links on left, banner up top and links on left open below the banner frame (of course).

One of the links goes to our forum, and in the forum has a banner/header (headerbar) up top that I would like to .remove using jQuery, or any other way of achieving this.

I have tried this in the index.html:

Code:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<frameset rows="25%, 75%" BORDER=0 RESIZE=O><frame src="/pages/topbanner.html" />
<frameset cols="10,90" BORDER=0 RESIZE=O>  <frame src="/pages/linksleft.html" />
<frame src="/pages/linksright.html" name="show" />
Sorry, your browser doesn't support iframes.
</iframe></frameset></frameset>
<script>
function removeforumban() {
$('.headerbar').remove();
}
var myForumBanTimer = setInterval(removeforumban,5000);
</script>
</html>

Is there something wrong with my script code, or will it not work in the frame because its not nested there itself?

Which has lead me to think I might need to load the forum page in a DIV, so I can nest the script in that page as well? if so, how would I do this?

DD

**djr33** · 09-15-2012, 05:18 AM

The only thing that jumps out at me (which may directly solve everything) is that you are referring to only elements on that page. You'd need to refer to the other frame (a different document) and that should help. I still don't know if you've tried that or if there might be other security restrictions, but that's a first step.

Can you give us a link to your page? Are the two pages on the same subdomain (or domain)? There may be security restrictions imposed by the browser to (generally) stop cross-domain scripting attacks-- but this gets in the way when you do a project like that.

Beyond that, I don't see an error in the JS, but let's see if someone else does. Note that you have a "5000" delay which would be 5 seconds, so be sure to give it that much time to test it, and also probably change that to a lot less when you actually use this.

But this may not be the best way of doing it anyway. Here are three other methods of removing the div:
1) Use Ajax (a method of using Javascript, also possible with jQuery) to bring the content of the page directly into the HTML and then it won't use frames at all. (The tradeoff here is that Ajax may not work on older browsers, while frames are outdated, so neither one is perfect, but Ajax is the current preference I'd say. It won't work at all on devices that don't have Javascript, or for search engines, but generally it will work for most visitors.) Ajax is a little tricky to use, but beyond that it will probably be the easiest problem with just Javascript.

2) Use a serverside method (for example, with PHP or ASP, etc.) to actually change what HTML is generated. There are a few approaches, such as using includes which would consist of bringing this content into the current page (and probably removing the div) or perhaps just keeping the frames and doing a conditional ("if") display of the div-- if the right conditions are met, don't show that part. Basically you'd find a way to just generate two versions of the same page but from one source-- that's what serverside coding is good for.

3) Use CSS. If you can find a way to attach a stylesheet to that page conditionally (here, a serverside language would help) or to bring that content in (eg, via Ajax) or otherwise modify that page, you can use a CSS rule to hide the div (display:none;) rather than anything involving Javascript. It would be simpler (except figuring out how to use CSS in the first place, without changing the other page as well), and it wouldn't rely on Javascript or have any kind of potential delay before the element is hidden.

Finally, if you actually want to remove the content from that page always (even when it is shown by itself), then there are several ways to approach it, either modifying the original HTML and/or serverside (PHP?) code, or by using CSS or Javascript. I don't think this is what you want to do, but if it is, then a lot is less complicated-- the simplest thing is probably just to add a new style on the CSS stylesheet (or a new stylesheet) with the display:none; property assigned to that div.

**DarkDove** · 09-15-2012, 05:35 AM

I am almost ashamed of showing the page, as I said, im fairly new to coding and webpage creation, the page is for an alliance called Family United on a game by kabam, I hope the domain name doesnt offend anyone here hehe.

The link is http://fukabam.com if you want to have a look.

The forum is on same domain just in another folder.

I am curious as how to use CSS file to achieve this, because I am considering making a .css file for the styles already, I do need some guidance with that though, any help is appreciated.

**DarkDove** · 09-15-2012, 05:17 PM

@djr33 could you help me understand how what you are saying in your firts paragraph, about directing it to the right parent page, how do I do that exactly?

I do know I could simply remove the headerbanner manually from the forum file itself, but just in case someone opens the forum in a separate tab (ctrl+click), I would really like it to only be removed on our own page.

**djr33** · 09-15-2012, 07:52 PM

That page seems to have some other serious problems (I'm using Firefox 15 on a Mac if that's relevant for testing purposes). For example, the top graphic is cut off partway across the page, and I'm not sure why.
(But don't worry about posting a problematic page here-- we're happy to help.)

First, my general advice is very simple: don't use frames or anything here. Just link to the forum.

If you'd like, you can also customize the skin/layout for the forum itself to integrate well with your site. That might take a significant amount of work, but it would be the best answer.

Frames are, for technical reasons, outdated and problematic, so if you can avoid them you should. (Sometimes they might be useful but not too often.)

Personally I'd recommend that you learn how to use PHP and PHP's includes, which are a great feature and would allow you to bring the content of those other pages directly into your main page as a sort of template, rather than using frames. It would be something new to learn, but it would also be a lot better as a result.

If you do need help with the Javascript still (if you want to continue with this same method) I think someone else will give you the code you need. I'm not sure of the exactly the best way to do it. (I know it's possible and I could figure it out, but I haven't used JS and frames for a long time.) It's also something you could look up on google to see if you can figure it out.

**DarkDove** · 09-16-2012, 01:13 PM

Code:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<frameset rows="25%, 75%" BORDER=0 RESIZE=O><frame src="/pages/topbanner.html" />
<frameset cols="10,90" BORDER=0 RESIZE=O>  <frame src="/pages/linksleft.html" />
<frame src="/pages/linksright.html" name="show" id="show" />
Sorry, your browser doesn't support iframes.
</iframe></frameset></frameset>
<script>
function removeforumban() {
$(".headerbar", window.parent.frames["show"].document).remove();
}
var myForumBanTimer = setInterval(removeforumban,5000);
</script>
</html>

Tried this, but it just wont work, any ideas? (the headerbar is actually a DIV)

**bernie1227** · 09-16-2012, 09:22 PM

If the header bar is a div, then shouldn't it be

Code:

function removeforumban() {
$("#headerbar", window.parent.frames["show"].document).remove();
}

?

**DarkDove** · 09-17-2012, 03:11 AM

Still wont work, is it because the headerbar is the class of the div? it has no name or id

**bernie1227** · 09-17-2012, 06:36 AM

first off, do you know your code works?

**DarkDove** · 09-17-2012, 12:19 PM

Well it should work, ive tried every possible work-around in that code snippet, im beginning to think its because the script is nested in the index.html, do I need to nest it in one of the actual other frames instead you think?

Because if you right click anywhere on my page and look at the source, it will only show the index file, meaning any scripts I put in the index file, wont "see" beyond whats in the index file, right?

I do know that if i remove the headerbar DIV it will work as I want it to, what I dont know is why its not working on that timer and why it doesnt target the proper frame and do as its told (im fairly new to JS)