8 Replies Latest reply on Mar 12, 2010 12:33 AM by osgood_

    Inserting an html file into a div

    MJ2516

      I have an html file that includes jQuery script, CSS and image links (a rotating banner). I need to insert it into the wrapper template on the front of my site.

      Currently there is a rollover image where I need the banner to go;

       

      <!-- InstanceBeginEditable name="content" --><link rel="shortcut icon" href="favicon.ico" >

       

      <!--  start banner  -->

      <div id="promotional" padding="0"><a href="../programming/legislature.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cornerlegis','','../images/legis3hover.jpg',0)"><img src="../images/corner_legis3.jpg" name="cornerlegis" width="220" height="157" border="0" id="cornerlegis" /></a>

      <!-- end banner  -->

       

      <div id="newsfeature">

       

      This banner and it's  jQuery scripts are located in the root folder of the site.

       

      How can I get the banner ito this div location? I'm using Dreamweaver CS4.

      Thanks for your help.

        • 1. Re: Inserting an html file into a div
          M.R.Biesheuvel Level 3

          I wouldn't place a html file into a wrapper. It can be done from server side and an ajax call, but it's very risky, bad coding practice, and likely that some browsers will have display errors. Because of the included css and jquery most likely it will not work that simple.

           

          The second option is to use an iframe but that also comes with compromises to the layout (i don't like frames).

           

          There is a third option and that requires server side coding, you have to combine the header sections of the files and then write the body into the wrapper.

          • 2. Re: Inserting an html file into a div
            MJ2516 Level 1

            Thanks for your response.

            What compromises would there be with an iframe?

            • 3. Re: Inserting an html file into a div
              M.R.Biesheuvel Level 3

              Well for the layout you can end up with dirty not user friendly srollbars within your page and most often its very annoying when the back button behaves differently.

               

              Second, its not a good idea for SEO.

               

               

              M.R.Biesheuvel

              www.sportjegeestgezond.nl

              • 4. Re: Inserting an html file into a div
                osgood_ Level 8

                we210 wrote:

                 

                I have an html file that includes jQuery script, CSS and image links (a rotating banner). I need to insert it into the wrapper template on the front of my site.

                Currently there is a rollover image where I need the banner to go;

                 

                <!-- InstanceBeginEditable name="content" --><link rel="shortcut icon" href="favicon.ico" >

                 

                <!--  start banner  -->

                <div id="promotional" padding="0"><a href="../programming/legislature.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cornerlegis','','../images/legis3hover.jpg',0)"><img src="../images/corner_legis3.jpg" name="cornerlegis" width="220" height="157" border="0" id="cornerlegis" /></a>

                <!-- end banner  -->

                 

                <div id="newsfeature">

                 

                This banner and it's  jQuery scripts are located in the root folder of the site.

                 

                How can I get the banner ito this div location? I'm using Dreamweaver CS4.

                Thanks for your help.

                 

                Use an include file?

                 

                Create a new file and save it as banner.ssi

                 

                Insert all the code related only to the banner into the banner.ssi (it should contain nothing else, no <body>, meta, <title> tags etc.

                 

                Change the extention to the file name of the page into which you want the banner to be include to .shtml

                 

                So for instance if I want the banner to appear in a file called 'aboutus; instead of 'aboutus.html' it would become 'aboutus.shtml'

                 

                In the .shtml page place the below code between the <div></div> tags in which you want the banner to appear.

                 

                <div id="promotional">

                <!--#include virtual="banner.ssi"-->

                </div>

                 

                Finally link the jquery scripts to the .shtml page NOT the banner.ssi file.

                 

                The include should show in Design View and Live View in the Dreamweaver environment.

                 

                 

                Alternatively if you know a little bit about php you can use that:

                 

                <div id="promotional">

                <?php include("banner.php"); ?>

                </div>

                • 5. Re: Inserting an html file into a div
                  MJ2516 Level 1

                  The banner was to go on the home page, index.html, in the home page wrapper. Not on any other internal pages.

                  What's the difference between and html and shtml file? Would you recommend renaming a home page?

                  • 6. Re: Inserting an html file into a div
                    osgood_ Level 8

                    we210 wrote:

                     

                    The banner was to go on the home page, index.html, in the home page wrapper. Not on any other internal pages.

                    What's the difference between and html and shtml file? Would you recommend renaming a home page?

                    If its only to go on the one page then what's the problem with just putting the html code/jquery script in that page?

                     

                    Insert the html code for the banner in the applicable <div> Do this in code in view.

                     

                    Link the jquery script/s to the page by inserting a link in the head section of the page

                     

                    <script type="text/javascript" src="nameOfSrcipt.js"></script>

                     

                    Change src="nameOfScript.js" to the name of the jquery script that you want linked

                     

                    That's it.

                    • 7. Re: Inserting an html file into a div
                      MJ2516 Level 1

                      The jQuery scripts are separate, outside the html file. Both are at the root level of the site.

                      Should I insert the jQuery script file code into the html file?

                      thanks

                      • 8. Re: Inserting an html file into a div
                        osgood_ Level 8

                        we210 wrote:

                         

                        The jQuery scripts are separate, outside the html file. Both are at the root level of the site.

                        Should I insert the jQuery script file code into the html file?

                        thanks

                         

                         

                        The jquery script/s should be in a file ending with .js?

                         

                        If so just link the jquery file/s to your page like I advised in my last post.