September 14, 201412 yr I have a load() script on a page, it's purpose is to load a HTML file within a Div, that it is doing except when it does load the HTML in the DIV it also removes the <body> background style & changes the font on my navigation ?
September 15, 201412 yr An example of some kind would help immensely. Upload to a test folder somewhere, create something on Codepen or similar, attach a zip file or just post the code for the pages in question. The probable cause is conflicts in the CSS arising from the page that is being loaded into the div but without seeing it it is difficult to give a definitive answer.
September 16, 201412 yr The problem is as nfc suggested, the HTML page you are loading is a full HTML page, including stylesheet declarations and so on. Therefore your default css is being overridden. Ideally, your AJAX page (tutorialpage_WIP.html) should contain only the content you want to load in to the div, for example a paragraph or some text. Take a look here for an example: http://www.tutorialspoint.com/jquery/ajax-load.htm
September 16, 201412 yr Author The problem is as nfc suggested, the HTML page you are loading is a full HTML page, including stylesheet declarations and so on. Therefore your default css is being overridden. Ideally, your AJAX page (tutorialpage_WIP.html) should contain only the content you want to load in to the div, for example a paragraph or some text. Take a look here for an example: http://www.tutorialspoint.com/jquery/ajax-load.htm If I wanted to load a paragraph and some text I would have done so, that is not my intention. My intention is to load an HTML file !
September 16, 201412 yr If I wanted to load a paragraph and some text I would have done so, that is not my intention. My intention is to load an HTML file ! Wouldn't you use an Iframe for this then, ajaxing in an entire page seems odd.
September 16, 201412 yr Author The div won't be visible at all times, an event will call the div. I want to stay away from iFrames. JQuery appears more solid !
September 16, 201412 yr But the page needs to be in an iframe to do this, that is the whole purpose of using an Iframe. You can use jquery to change the src of the iframe after an event. Edited September 16, 201412 yr by rbrtsmith
September 16, 201411 yr Author Then how come the HTML page is loading in the Div and I'm not using an iFrame ? Edited September 16, 201411 yr by CreativeSheep
September 16, 201411 yr A HTML file doesn't have to consist of a full HTML page complete with a head and body with associated linked stylesheets and scripts. It can consist of just a div with nested divs within it or text objects, images and such. What you are doing here is splicing a file into the body element. It functions pretty much in the same way as you would include a header.php or footer.php in a CMS like Wordpress. These includes only contain the required elements to create the head section and header of the page and the elements to create the footer and close the page. If you want to display entire pages complete with the head and body section use an iframe or frameset. If you wish to use the JQuery load() or include method as you are load the CSS and scripts for the file in the head of the parent page and place the page elements within a container div called, for example, id="ramen-tut-container". Then in the head of the parent page use the CSS: #ramen-tut-container {background:#b7b7b7;}
September 17, 201411 yr Author A HTML file doesn't have to consist of a full HTML page complete with a head and body with associated linked stylesheets and scripts. It can consist of just a div with nested divs within it or text objects, images and such. What you are doing here is splicing a file into the body element. It functions pretty much in the same way as you would include a header.php or footer.php in a CMS like Wordpress. These includes only contain the required elements to create the head section and header of the page and the elements to create the footer and close the page. If you want to display entire pages complete with the head and body section use an iframe or frameset. If you wish to use the JQuery load() or include method as you are load the CSS and scripts for the file in the head of the parent page and place the page elements within a container div called, for example, id="ramen-tut-container". Then in the head of the parent page use the CSS: #ramen-tut-container {background:#b7b7b7;} Thanks for the info. I decided to use an iframe. Edited September 17, 201411 yr by CreativeSheep
Create an account or sign in to comment