Jump to content

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

multiLady

By multiLady
in HTML/XHTML

Recommended Posts

multiLady Newbie

multiLady

Posted
Posted

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
chibineku Dedicated Member

chibineku

Posted
Posted

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
multiLady Newbie

multiLady

Posted
  • Author
Posted
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
chibineku Dedicated Member

chibineku

Posted
Posted

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

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
multiLady Newbie

multiLady

Posted
  • Author
Posted
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
multiLady Newbie

multiLady

Posted
  • Author
Posted
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?
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...