dcsimg


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 3 of 3

Thread: Changing page container div with ajax

  1. #1
    Join Date
    Dec 2007
    Posts
    4

    Changing page container div with ajax

    I'm trying to learn AJAX while developing our company website. Right now, I've managed to use a template to create an outline that has the company header, and then two placeholder <div>'s, one for a menu, and one for the info. The outline page is index.html.

    I use AJAX requests to place menu.html inside the menu div, and content.html inside the info div, which is working pretty well. I've encountered two problems with this so far:

    a) I can't find a way that works in both firefox and IE to load both the menu.html and content.html at once when the page loads. I used body onload to load the menu <div> and then a seperate request to load the info <div>. This loads both divs in IE, but not in firefox.

    b) I use onclick events inside elements in the menu div to load different html fragments into the content divs. Whenever someone inside either the menu div or content divs is too long, it exceeds to page container div, which is set to height=100%. The easiest way to demonstrate this error, is when the user switches to a really low resolution. Is there any way to fix this so that the page container div contains the entire menu and info divs?

    The link to my page is here: http://www.vampsworld.com/sii/index.html

    And the code is below:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="title" content="Systems Integration Incorporated" />
    <meta name="robots" content="index,follow" />
    <meta name="description" content="Systems Integration Incorporated offers state of the art telecommunications solutions that enable you to provide superior service to your customers through customer satisfaction, timeliness, and accuracy of performance. " />
    <meta name="abstract" content="With a proven track record and solid reputation for integrating the newest technologies while protecting legacy systems and networks, SII serves both commercial organizations as well as customers in the state, local, and federal government." />
    <meta name="keywords" content="SII I3 Call Center Help Desk VoIP Voice over Internet Protocol IP Communications Systems Integration" />
    <meta name="author" content="Warren Thompson" />
    <meta name="publisher" content="Warren Thompson" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />
    <link rel="shortcut icon" href="http://developdaly.com/images/favicon.ico" />
    <title>Systems Integration Incorporated</title>
    <script type="text/javascript" src="./javascript/getHTTPObject.js"></script>
    </head>

    <body onload="makerequest('menu.html','menu');">

    <div id="page">

    <div id="header">
    <h1>Systems Integration <br> Incorporated</h1>
    </div>

    <div id="content">
    <div id="menu"></div>
    <div id="info"></div>
    <script type="text/javascript">makerequest('content.htm','info');</script>
    </div>

    <div id="footer">
    </div>

    </div>

    </body>

    </html>


    content.htm
    <div class="post_top"></div>

    <div class="post">

    <h4 style="text-align:center;">Future proof VoIP Customer Service Solutions</h4>
    <img style="border-bottom:0px;padding-bottom:0px;margin-bottom:0px;" src="images/front-top1.jpg" width="465" height="137" alt="image" />
    <img style="border-top:0px;padding-top:0px;margin-top:-5px;" src="images/front-bottom2a.jpg" width="465" height="326" alt="image" />
    <!--<img style="border-top:0px;padding-top:0px;margin-top:-5px;" src="images/front-bottom2b.jpg" width="540" height="44" alt="image" />-->
    <img src="images/customerDemo2.gif" alt="Request a Customer Demo" />
    </div>

    <div class="post_btm"></div>

    </div>



    menu.html
    <div id="nav_top"></div>

    <h3 onclick="makerequest('content.htm','info');return false;">Home</h3>
    <ul>
    <li><a href="" onclick="makerequest('content2.htm','info');return false;">About SII</a></li>
    <li><a href="" onclick="makerequest('content.htm','info');return false;">SII's Vision</a></li>
    <li><a href="">Awards</a></li>
    <li><a href="">Customers</a></li>
    <li><a href="">Contract Vehicles</a></li>
    <li><a href="">Management</a></li>
    <li><a href="">Office Locations</a></li>
    <li><a href="">Vendors and Partners</a></li>
    </ul>

    <h3>Contact Center Management</h3>
    <ul>
    <li><a href="index.html">Contact Processing and Mangement System (CPMS)</a></li>
    <li><a href="index.html">ReadiServ 311 Non-Emergency</a></li>
    <li><a href="index.html">ReadiTel Emergency Management</a></li>
    <li><a href="index.html">Child Support Service Center</a>
    </ul>

    <h3>Professional Services</h3>
    <ul>
    <li><a href="index.html">Help Desk Support</a></li>
    <li><a href="index.html">Computer Telephony Integration</a></li>
    <li><a href="index.html">Network Support Services</a></li>
    </ul>

    <h3>IP-PBX Systems</h3>
    <ul>
    <li><a href="index.html">Voicemail Replacement</a></li>
    </ul>

    <h3>Careers</h3>
    <ul>
    <li><a href="index.html">Benefits</a></li>
    <li><a href="index.html">Career Postings</a></li>
    <li><a href="index.html">Submit Resume</a></li>
    </ul>

    <h3>Employees</h3>
    <ul>
    <li><a href="index.html">Deltek Login</a></li>
    <li><a href="index.html">Outlook Web Access (Server 3)</a></li>
    <li><a href="index.html">Outlook Web Access (Server 5)</a></li>
    <li><a href="index.html">Proposal Author Guide</a></li>
    </ul>

    <div id="nav_btm"></div>





    style.css

    /* Revival.1 */


    * {
    padding:0;
    margin:0;
    }

    html, body {
    height: 100%;
    }

    body {
    text-align: left;
    margin:0 auto;
    padding:0;
    color:#000;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    font-size:10px;
    font-family:Verdana, Tahoma, Arial, sans-serif;
    background:#fff;
    background:#f0f6df;
    }

    #page {
    width:810px;
    margin:0 auto;
    height:100%;
    }

    #header {
    width:810px;
    height:120px;
    margin: 0 auto;
    background: url('images/headersii.gif') no-repeat;
    padding:0px;

    }

    #content {
    padding:5px 20px 0 20px;
    background:url('images/content_bg.gif') repeat-y;
    height:100%;
    }

    /**************************** menu ****************************/

    #nav_top {
    background:url('images/nav_topsii.gif') no-repeat;
    width:225px;
    height:28px;
    }

    #nav_btm {
    background:url('images/nav_btmsii.gif') no-repeat;
    width:225px;
    height:28px;
    }

    #menu {
    float:left;
    width: 225px;
    color:#000;
    background:url('images/nav_midsii.gif') repeat-y;
    }

    #menu ul {
    list-style:none;
    width:218px;
    font-size:12px;
    padding:0 0 0 3px;
    }

    #menu li {
    list-style-type: none;
    background:transparent url('images/bullet.gif') no-repeat 12px 6px;
    margin-bottom:4px;
    border-bottom:1px solid #c8e5c7;
    padding:0;
    }

    #menu li:hover {
    background:#c8e5c7;
    margin-bottom:4px;
    }

    #menu a {
    display:block;
    padding:0 0 0 20px;
    color:#fff;
    text-decoration: none;
    }

    #menu a:hover {
    display:block;
    padding:0 0 0 20px;
    color:#333;
    text-decoration: none;
    background:fff;
    }

    /**************************** content ****************************/

    #info {
    background:url('images/content_mid.gif') repeat-y;
    width:533px;
    float:right;
    }

    .post_top {
    background:url('images/content_top.gif') no-repeat;
    width:533px;
    height:31px;
    }

    .post_btm {
    background:url('images/content_btm.gif') no-repeat;
    width:533px;
    height:31px;
    }

    .post {
    padding:0 25px 15px 25px;
    }

    img {
    border:1px solid #fff;
    padding:5px;
    margin:3px;

    }

    a{
    color:#fff;
    text-decoration:none;
    }

    a:hover{
    color:#000;
    text-decoration:none;
    }

    h1{
    color:#fff;
    font-weight:normal;
    font-size:24px;
    padding: 25px 0 10px 120px;
    }

    h2 a{
    position:absolute;
    top:32px;
    color:#666;
    font-size:16px;
    margin:0 0 0 575px;
    text-decoration:none;
    }

    h2 a:hover{
    color:#999;
    }

    h3{
    color:#fff;
    font-size:12px;
    font-weight:bold;
    padding: 5px 0 5px 10px
    }

    h4{
    color:#fff;
    font-size:20px;
    font-weight:normal;
    }

    h5{
    color:#8d8d8d;
    font-size:10px;
    font-weight:normal;
    padding:5px;
    }

    h3 img{
    float:left;
    }

    /**************************** lists ****************************/

    ul {
    list-style:none;
    padding:0 0 0 3px;
    }

    li {
    list-style-type: none;
    background:transparent url('images/bullet.gif') no-repeat 12px 6px;
    padding: 0 0 0 20px;
    }

    #menu a {
    display:block;
    padding:0 0 0 20px;
    color:#fff;
    text-decoration: none;
    background:f0f6df;
    }

    #menu a:hover {
    display:block;
    padding:0 0 0 20px;
    color:#333;
    text-decoration: none;
    background:fff;
    }


    /**************************** footer ****************************/

    #footer{
    text-align:center;
    padding:40px;
    background:url('images/bottom.gif') no-repeat;
    height:42px;
    }

    #footer a {
    color:#000;
    }

    #footer a:hover {
    color:#fff;
    }

  2. #2
    Join Date
    Nov 2007
    Posts
    11
    How about this for the first problem (a):

    <body onload='initialize()'>
    ...
    <script Language="javascript">
    <!--

    function initialize()
    {
    makerequest('menu.html','menu');
    makerequest('content.htm','info');
    }
    //-->
    </script>

  3. #3
    Join Date
    Dec 2007
    Posts
    4

    Tried initialize()

    That was one of the first things I tried. I'm more worried about the internal divs straying outside the parent container than the loading issue...I can afford to alienate the firefox crowd for now.

Similar Threads

  1. Replies: 0
    Last Post: 08-30-2007, 03:51 PM
  2. AJAX call at Page Onload (https)
    By AjaxNewBie in forum AJAX
    Replies: 0
    Last Post: 06-14-2007, 04:25 AM
  3. AJAX response contains original page!?!
    By Java_Maniac in forum AJAX
    Replies: 1
    Last Post: 12-29-2006, 06:29 AM
  4. Ajax - Cant pass value from jsp page to js
    By vitalstrike82 in forum AJAX
    Replies: 1
    Last Post: 10-12-2006, 03:09 AM
  5. Changing Content in Container
    By evlich in forum Java
    Replies: 1
    Last Post: 06-26-2005, 01:01 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center