Adding Pages Without Offsite Hosting (Dynamic DIVS)

DataMine
by DataMine · 2 posts
10 years ago in Layouts
Posted 10 years ago · Author
This basic code will allow you to add pages to your profile without needing to create html files that are hosted offsite saving you time, money and headaches. It is designed to be small and simple so it doesn't use anything fancy or any offsite code. For a slightly more advanced way, see this thread: viewtopic.php?f=115&t=9033

This logic of the code is as follows:

The content of the pages is held in divs that are hidden to the user:
Code
<div id="hidden" style="visibility:hidden">
 <div id="box1">
  <p>This is box 1 contents</p>
 </div>
 <div id="box2">
  <p>This is box 2 contents</p>
 </div>
 <div id="box3">
  <p>This is box 3 contents</p>
 </div>
 <div id="box4">
  <p>This is box 4 contents</p>
 </div>
</div>


When a user clicks on one of the links, it copies the content of one of the hidden pages and places it in the visible page:
Code
<div id="navigation">
<ul>
   <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box1').innerHTML">Page 1</span></li>
   <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box2').innerHTML">Page 2</span></li>
   <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box3').innerHTML">Page 3</span></li>
   <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box4').innerHTML">Page 4</span></li>
   <li class="last"><span onClick="document.getElementById('display').innerHTML = ''">Clear</span></li>
</ul>
</div>



Modification

To add more pages, create more divs inside of the hidden div:
Code
<div id="hidden" style="visibility:hidden">
 <div id="box1">
  <p>This is box 1 contents</p>
 </div>
 <div id="box2">
  <p>This is box 2 contents</p>
 </div>
 <div id="box3">
  <p>This is box 3 contents</p>
 </div>
 <div id="box4">
  <p>This is box 4 contents</p>
 </div>
</div>


Then add links to those pages i the navigation div:
Code
<div id="navigation">
<ul>
   <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box1').innerHTML">Page 1</span></li>
   <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box2').innerHTML">Page 2</span></li>
   <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box3').innerHTML">Page 3</span></li>
   <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box4').innerHTML">Page 4</span></li>
   <li class="last"><span onClick="document.getElementById('display').innerHTML = ''">Clear</span></li>
</ul>
</div>



If you need more help on how to use this code or modify it to suit your needs, feel free to contact me.


------------------------------------------------------------------

Full Code
Code
<html>
   <head>
      <title>Simple Javascript Navigation Menu</title>
      <style type="text/css">      
         #display {
            border: 1px solid #000000;
            width: 500px;
            height: 190px;
            background-color: #666666;
            margin: 0px auto;
            text-align: center;
         }
         
         #navigation {
            width: 500px;
            height: 20px;
            margin: 0px auto;
            text-align: center;
         }
         
         #navigation ul {
            margin: 0px auto;
         }
               
         #navigation ul li {
            display: inline;
            border-right: 1px solid #000000;
         }
         
         #navigation span {
            padding: 0px 5px;
         }
         
         #navigation span:hover {
            text-decoration: underline;
            cursor: pointer
         }
         
         .last {
            border-right: 0px none #000000 !important;
         }
      </style>
   </head>
   <body>
      <div id="display">
         <p></p>
      </div>
      <br/>
      <div id="navigation">
         <ul>
            <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box1').innerHTML">Page 1</span></li>
            <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box2').innerHTML">Page 2</span></li>
            <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box3').innerHTML">Page 3</span></li>
            <li><span onClick="document.getElementById('display').innerHTML = document.getElementById('box4').innerHTML">Page 4</span></li>
            <li class="last"><span onClick="document.getElementById('display').innerHTML = ''">Clear</span></li>
         </ul>
      </div>
      <br/>
      <div id="hidden" style="visibility:hidden">
         <div id="box1">
            <p>This is box 1 contents</p>
         </div>
         <div id="box2">
            <p>This is box 2 contents</p>
         </div>
         <div id="box3">
            <p>This is box 3 contents</p>
         </div>
         <div id="box4">
            <p>This is box 4 contents</p>
         </div>
      </div>
   </body>
</html>
Posted 4 years ago
Thank you so so much! This code is very easy to just slap on a page and be done with it. It saves a lot of time and energy and you don't need to do as much work as i've been used to. Just going through all these great codes that this site uses has made be become a great programmer and i'm really bettering myself and my work. Next week i'll post a bunch of new triggers i've been making with brand new meshes for cheap. Thank you for all this team's hard work into making such a great site for us all.

-- Mon Nov 11, 2019 6:09 am --

Thank you so much once again.

Create an account or sign in to comment

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

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

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

REGISTER A NEW ACCOUNT
Select a forum Protection     Help & Support     Introductions     Mafia News     IMVU News General Discussion     IMVU Lounge        IMVU Series / Roleplaying        Social Games     Mafia Market     Mafia Tools        Premium IMVU Tools        Off Topic Tools     Off Topic     Contests Creator Corner     Graphics Design        Photoshop        GIMP     Basic Creator Help     Catalog And Product Showcase     3D Meshing        3Ds Max        Sketchup        Blender Gangsters with Connections     White Hat Activities        Google Hacking        Trackers Programming Corner     Coding        Python        .Net (C#, VB, etc)        Flash        JAVA        Autoit        Batch        HTML & CSS        Javascript        PHP        Other        IMVU Homepage Codes           General           About me Panel           Messages Panel           Special Someone Panel           Visitors Panel           New Products Panel           Rankings Panel           Wishlist Panel           My Badges Panel           Outfits Panel           Url Panel           Groups Panel           Slideshow Panel           My Room Panel           Sandbox panel           Layouts     Help & Requests Free Credits     Approved Methods     Submit Methods Free Money     Approved Methods     Submit Methods Adult Corner     Get Mafia AP Here     AP Lounge        AP Social Games        Casual Dating Tips     IMVU Slave Market & Escorts