Jump to content

Loading External Html Into A <div> - Take A Look And Please Help If You Can, It Is A Simple Example


multiLady
 Share

Recommended Posts

Hi everybody,here is what I wanted to do:I have one <div> with buttons and another one where I want to load external pages ( those pages are at the same folder - I do not need to load from other servers for now...)When I googled to see what method people use to do that - to load external pages into a div so they can avoid reloading the whole page - my conclusion was that I should start learning about Ajax , am I right?My knowledge of all this is still a on a very beginnings ( html, css, javascript and everything else ) so I am working on simple examples hoping to finish them with the clean code , putting out everything that doesn't belong there so it can be as clean and simple as possible.So, I found the Ajax code - copied that code to <head> (<script type >) and try to use it for what I want:when I click button1 the external1.html loads into the right div. Same for external2.html.And it works, BUT : external1.html and e xternal2.html has their own css which seems not to be working for explorer.In firefox it works fine.Do you know is there a way so I can keep their original css look IN EXPLORER after they are loaded into a div?And if you have a time take a look at that Ajax code <script type >Is there something I can leave out, something I don't need for this example?My goal is to have a most possible clean and simple code.Here are the links:simpleExampleThese are the external pages I load :external1external2Thanks for all your help.MultiLadyP.S.: Sorry if I made a mistakes in English, it is not my language but I hope you understood what I asked.

Link to comment
Share on other sites

I never use them, but if you load the document into an iframe, it will probably support the document's own style sheet.

Link to comment
Share on other sites

I never use them, but if you load the document into an iframe, it will probably support the document's own style sheet.
Thanks for the answer - when I was trying to find the solutions I found so many topics with debates about "to use or not to use Iframes". I think, but I am still the beginner, that Iframes are not bad at all since they work well in all browsers - my example will probably work with them nicely.However, I think I understood some of those reasons against them - I will need to know how to make some pages, very soon, that have some things which are not good with Iframes.Not yet but one opportunity came along so ...I would appreciate if I can get any help with this simple example NOT using Iframes.
Link to comment
Share on other sites

Are the styles that are not being applied correctly external or inline style sheets?

Link to comment
Share on other sites

have you tried using <object> instead, as long as the external pages are on the same domain, IE will not have a problem with displaying it, because of security reasons.example<object type="text/html" data="myexternalpage.htm"></object>

Edited by dsonesuk
Link to comment
Share on other sites

Good question! and after experimenting you can't change data attribute, in javascript DOM, But you can change the div content to add and change the whole <object> element.<script type="text/javascript">/*<![CDATA[*//*---->*/function changethis(){datalink="../newexternalpage.htm";a = document.getElementById("objectcontainer");a.innerHTML="<object id=\"test\" data=\""+datalink+"\" width=\"800\" height=\"100\"></object>";}window.onload=changethis;/*--*//*]]>*/</script> <div id="objectcontainer"><object id="test" data="oldexternalpage.htm" width="800" height="100"></object></div>

Link to comment
Share on other sites

Are the styles that are not being applied correctly external or inline style sheets?
The styles are Internal style sheet (in the head section) - I didn't know till now that inline have higher priority.Thank you very much for the tip - I wrote the styles as inline and IT WORKS ( I'll post the example with both cases later , am in a hurry now...)
Link to comment
Share on other sites

The styles are Internal style sheet (in the head section) - I didn't know till now that inline have higher priority.Thank you very much for the tip - I wrote the styles as inline and IT WORKS ( I'll post the example with both cases later , am in a hurry now...)
HERE IT IS, AN EXAMPLE WITH BOTH CASES:example2Buttons 1 and 2 loads ( into a middle div ) external pages who has Internal style sheet ,and buttons 3 and 4 loads ( into a right div ) external pages with Inline style sheet.So the right <div> is the one where you can see the original style of external pages - IT WORKS NOW !!!!! :-)Here are external pages if someone would like to take look to source code:external1.htmlexternal1INLINE.htmlexternal2.htmlexternal2INLINE.htmlCheck out how strange things happen with the middle <div> in Firefox when clicking buttons 3 and 4 after 1 or two - style of the middle one changes.OK, so one problem solved.About the Ajax code I copied - since I just copied it , I understand all in all what does it do, but I did not have time to carefully study it yet, to fully understand it.So if anyone with more knowledge and skills has a spare time - could you please check if there is something I can leave out, something I don't need for this example? Edited by multiLady
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...