CODEWITHSUNDEEP
javascriptphpjqueryhtmlcloning
Jamie Sexton
Jamie Sexton

Reputation: 157

Clone an entire div container on another page

I have a div container which holds several other divs and other content, which collectively, makes up my slideout sidenav menu.

I would like to call that entire div from another page. I have tried some suggested jquery methods, but so far, have had no luck.

This is a shortened version of what the section looks like...

<!--Opening div for menu container-->
<div id="menuContainer">

  <div>
    <div>
      <span class="menu">
        <a href="#" onclick="CollapsiblePanel_1.open();">SECTION TITLE
          <p class="subMenuOpenBtn">Open&nbsp; &#9660;</p>
        </a></span></div>
      <div id="CollapsiblePanel_1" class="CollapsiblePanel">
        <div class="tab">
          <div class="subMenu">
          <ul>
            <a href="#"><li>Option 1</li></a>
            <a href="#"><li>Option 2</li></a>
            <a href="#"><li>Option 3</li></a>
            <a href="#"><li>Option 4</li></a>
            <a href="#"><li>Option 5</li></a>
          </ul>
          <div class="subMenuCloseBtn">
            <span><a href="#" onclick="CollapsiblePanel_news.close();">Close&nbsp; &#9650;</a>
            </span>
         </div>
</div><!--Closing div for menu container-->

I want to save that entire bit of code on it's own page called 'SlideOutPage' (I'm not entirely sure if tat page should be saved in an html, php, or other type page)

Then... on my index.php page, I want to create a new div or 'container', and somehow call that section of code into it.

Upvotes: 1

Views: 2555

Answers (2)

Aman Dhanda
Aman Dhanda

Reputation: 438

Difference between various methods

The best way to do it is using PHP because its a backend scripting language and wont be visible to visitor. If someone visits the webpage, it looks normal to him/her.

Through JQuery, it will be visible in source code. So, in some way visitor can know that its fetching the div from another file.

<!-- external file `menu.html`
Opening div for menu container-->
<div id="menuContainer">

  <div>
    <div>
      <span class="menu">
        <a href="#" onclick="CollapsiblePanel_1.open();">SECTION TITLE
          <p class="subMenuOpenBtn">Open&nbsp; &#9660;</p>
        </a></span></div>
      <div id="CollapsiblePanel_1" class="CollapsiblePanel">
        <div class="tab">
          <div class="subMenu">
          <ul>
            <a href="#"><li>Option 1</li></a>
            <a href="#"><li>Option 2</li></a>
            <a href="#"><li>Option 3</li></a>
            <a href="#"><li>Option 4</li></a>
            <a href="#"><li>Option 5</li></a>
          </ul>
          <div class="subMenuCloseBtn">
            <span><a href="#" onclick="CollapsiblePanel_news.close();">Close&nbsp; &#9650;</a>
            </span>
         </div>
</div><!--Closing div for menu container-->

Through PHP

include 'menu.html'; or require 'menu.html'

<div id="wrapper">
    <?php include 'menu.html'; ?>
</div>

or,

<div id="wrapper">
    <?php require 'menu.html'; ?>
</div>

The file in which this code is called should be .php.

You can also use include_once 'menu.html' or require_once 'menu.html'. In this your file will be called only one time in a page. If there is another occurrence of same file, then it won't be included.

Through JQuery

<div id="wrapper"></div>
<script>
    $(function() {
        $("#wrapper").load("menu.html");
    }
</script>

Upvotes: 0

Andrew
Andrew

Reputation: 776

This is possible through Javascript/jQuery, yes. Save that into a new file, then use jQuery's .load() function like so.

<div id="wrapper">
    Loading, please wait...
</div>

JS:

<script>
$(function() {
    $("#wrapper").load("myfile.html");
}
</script>

HOWEVER, I would suggest doing this with PHP instead. You can just include the file with a PHP include or require statement.

<?php
    include "myfile.php";
?>

Upvotes: 2

Related Questions