Solved

Change content of multiple divs with link

Posted on 2009-07-15
10
415 Views
Last Modified: 2012-06-21
I have been searching this site and the internet for some time trying to find a solution. If anyone can point me to an answer that already exists, please direct me there and I will save your time.

The problem I am having is that I need to change the content displayed in multiple divs on mouseclick of a link contained in another div. I've included the html and css below to give you a base to begin with.

What you should see is a top section with links running horizontally accross the top (id=menu).
Below that section is a left div running vertically (lcontainer), this contains 2 divs (lccont1, lccont12) creating essentially 2 boxes (lccont1c, lccont1c2) with headers (lccont1h, lccont1h2). lccont1h should show the name of the link clicked. lccont1c should show the contents of an external html file, contained in a folder we'll call "external," related to the clicking of the link clicked. lccont1h2 will have the static content "Supporting Documents," but lccont1c2 will link to another external html file related to the link clicked. To the right of the lccontainer is rccontainer, and this is a div for the main page content. rccontainer will change dependent upon the link clicked.
Essentially, I need to be able to change the contains of 4 divs with a single link being clicked, all calling to separate external html files or replacing text.This needs to be able to happen for as many links as I want to put in my list in 'menu.'

I'm unsure where to go. I've looked for solutions using Javascript, AJAX, jQuery, JSON, etc, but have yet to get things right. I figured it would be best to start fresh.
Any help is surely appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxmenu.css">

    <link rel="stylesheet" type="text/css" href="external/externalhtml.css">

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

	/***********************************************

	* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

	* This notice MUST stay intact for legal use

	* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

	***********************************************/

    </script>

  </head>

  <body>

    <div id="wrapper">

      <div id="header">      </div>

      <div id="menu">

        <ul id="headertabs" class="menu red">

          <li><a href="external/Stuff 1.css" rel="stylesheet">Stuff 1</a></li>

          <li><a href="external/Stuff 2.css" rel="stylesheet">Stuff 2</a></li>

          <li><a href="external/Stuff 3.css" rel="stylesheet">Stuff 3</a></li>

        </ul>

      </div>

      <div id="container">

        <div id="lcontainer">

          <div id="lccont1">

            <div id="lccont1h">

	<!-- Link Name -->

            </div>

            <div id="lccont1c">

             	<!-- Links to Critical Content -->

            </div>

          </div>

          <div id="lccont12">

            <div id="lccont1h2">

             Supporting Documents

            </div>

            <div id="lccont1c2">

             	<!-- Links to supporting documents -->

            </div>

          </div>

        </div>

        <div id="rcontainer">

          <div id="headerdivcontainer">

          </div>

        </div>

      </div>

      <div id="subcont">

      </div>

    </div>

  </body>

</html>

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

/* CSS Document */
 

body {

background-color:#00254C;

}
 

#wrapper {

margin-right:auto;

margin-left:auto;

width:760px;

}
 

#header {

height:200px;

width:760px;

}
 

#container

{

position:relative;

margin:0;

padding:0;

width:760px;

height:800px;

top:-42px;

font-family:arial, sans-serif, helvectiva;

font-size:12px;

font-weight:bold;

}
 

#lcontainer {

width:150px;

height:800px;

background-color:#2E7E9F;

margin:0;

padding:0;

}
 

#lccont1 {

position:relative;

top:10px;

left:9px;

width:130px;

height:120px;

border:1px solid #000;

background-color:#fff;

margin:0;

padding:0;

}
 

#lccont1h {

position:relative;

height:15px;

border-bottom:1px solid #000;

font-weight: bold;

font-family:verdana,helvetica,arial,sans-serif;

font-size:10px;

text-align:center;

line-height:1.4em;

background-color:#000;

color:#fff;

padding:0;

margin:0;

}
 

#lccont1c {

position:relative;

padding:.2em;

font-weight: bold;

font-family:verdana,helvetica,arial,sans-serif;

font-size:10px;

text-align:center;

line-height:1.4em;

margin:0;

}
 

#lccont12 {

position:relative;

top:20px;

left:9px;

width:130px;

height:120px;

border:1px solid #000;

background-color:#fff;

padding:0;

margin:0;

}
 

#lccont1h2 {

position:relative;

height:15px;

border-bottom:1px solid #000;

font-weight: bold;

font-family:verdana,helvetica,arial,sans-serif;

font-size:10px;

text-align:center;

line-height:1.4em;

background-color:#000;

color:#fff;

padding:0;

margin:0;

}
 

#lccont1c2 {

position:relative;

padding:.2em;

font-weight: bold;

font-family:verdana,helvetica,arial,sans-serif;

font-size:10px;

text-align:center;

line-height:1.4em;

margin:0;

}
 

#rcontainer {

position:relative;

float:right;

top:-800px;

width:610px;

height:800px;

background-color:#fff;

margin:0;

padding:0;

}
 

#headerdivcontainer {

float:right;

top:-800px;

width:600px;

height:800px;

background-color:#fff;

margin:0;

padding:0;

}
 

#subcont {

float:bottom;

position:absolute;

display:block;

top:996px;

width:760px;

height:30px;

border-bottom:1px solid #00254C;

font-weight: bold;

font-family:verdana,helvetica,arial,sans-serif;

font-size:10px;

text-align:center;

line-height:1.4em;

background-color:#2E7E9F;

color:#fff;

padding:0;

margin:0;

}
 

ul.menu {

list-style-type:none;

width:760px;

position:relative;

display:block;

height:30px;

font-size:10px;

background:url(bg2.png) repeat-x top left;

font-family:verdana,helvetica,arial,sans-serif;

padding:0;

margin:0px;

z-index:1;

top:-42px;

}
 

ul.menu li {

display:block;

float:left;

font-weight:bold;

}
 

ul.menu li a {

float:left;

color:#fff;

text-decoration:none;

height:20px;

padding:9px 12px 0;

font-weight:bold;

}
 

ul.menu li a:hover,.current {

color:#99D9EA;

background:url(bg2.png) repeat-x top left;

font-weight:bold;

}
 

ul.menu .current a {

color:#99D9EA;

font-weight:bold;

}
 
 

/*RED*/
 

ul.menu.red {

display:block;

background-color:#00254C;

}
 

ul.menu.red li a:hover, .menu.red li.current {

background-color:#99D9EA;

}

Open in new window

0
Comment
Question by:jrhundsr
  • 5
  • 4
10 Comments
 
LVL 12

Assisted Solution

by:Barry Jones
Barry Jones earned 20 total points
ID: 24867270
In order to retrieve external content from the server, and to then use that content within your web page, without doing a page reload, then AJAX is your best (only?) bet.  Building native AJAX is (IMHO) not worth the effort to get things right cross-browser, when the common frameworks such as Prototype, JQuery or YUI will wrap up this functionality for you.

I can help you with code for either Prototype.js or YUI ajax calls.  If JQuery is what you are interested in using, then perhaps someone else can offer advice/code..
0
 
LVL 4

Assisted Solution

by:jackmcleod
jackmcleod earned 480 total points
ID: 24934918
Using JQuery, you can bind the link click on document load then do all you want. For example, you can change the content of a div using:
$('#Iccont1h').html('link name');
In the same function you can add:
$('#Iccont1h2').load('./external/page.php');

It'd look something like this:



$(document).ready(function() {

   $('#linkid').bind('click', function()

      {

        $('#Iccont1h').html($('#linkid').html());

        $('#Iccont1h2').load($('#linkid').attr('href'));

      })

});

Open in new window

0
 

Author Comment

by:jrhundsr
ID: 24974266
@ The Foot
I believe jQuery will be the lightest and easiest in the long run, but if you have the time to play with it go ahead. Thanks for the response.

@ jackmcleod
I believe we are on the right track, but the line: $('#Iccont1h').html($('#linkid').html());
creates a hyperlink to the external file in my div rather than showing the content of the external file.

Also, I cannot seem to get anything to load into the other divs.

Perhaps I am too novice with this and need some concrete assistance that I can plug in and make it go?
Thanks for the response.
0
 
LVL 4

Assisted Solution

by:jackmcleod
jackmcleod earned 480 total points
ID: 24975889
Hi, i dont have much time right now but try this (added return false so when you click the link it is not followed), it should at least not follow links outside the page. I also have trouble understanding exactly what you are trying to accomplish, is it to change the style of the whole page on link click or to load other content?
<script>

$(document).ready(function() {

   $('a').bind('click', function()

      {

        $('#lccont1h').html($(this).html());

        $('#lccont1h2').load($(this).attr('href'));

        return false;

      })

});

</script>

Open in new window

0
 

Author Comment

by:jrhundsr
ID: 24980600
@ jackmcleod

We are getting on the right track, since the name appears a div and the content appears in a div.

What I have are 4 containers (div) I need to load external content to.
The main content (in an external html #1) is to be displayed in the "headerdivcontainer" on click of the link. I would also like the "home" page (In this case "Stuff 1") to autoload on initial page load.
I would like the link text, such as "Stuff 1" or "Stuff 2," to appear in the "lccont1h" div.
I would like supporting content (in an external html #2) to be displayed in the "lccont1c" div.
I would like more content (in an external html #3) to be displayed in the "lccont1c2" div.

So I have 4 divs changing content based on a single call. The external html files #1, #2, #3 and the link title will be called for the link "Stuff 1" and displayed. The external html files #4, #5, #6 and the link title will be called for the link "Stuff 2" and so forth.

Does this make more sense? Please let me know and I can try to explain further. Thank you for your help.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Accepted Solution

by:
jackmcleod earned 480 total points
ID: 24981078
In that case, unless i'm missing something in your code, you need to create each link separately (i think its better that way because when you modify or add something to the page you don't get weird bugs, and putting id's everywhere lets you manipulate css better ), which means they all have to have a unique id.


<script>

$(document).ready(function() {

   $('#lccont1h').html($('#idofhomelink').html());

   $('#lccont1c').load($('#idofhomelink').attr('href'));

   $('#lccont1c2').load('url of c2 to load with homepage');
 

   $('#idofhomelink').bind('click', function()

   {

        $('#lccont1h').html($('#idofhomelink').html());

        $('#lccont1c').load($('#idofhomelink').attr('href'));

        $('#lccont1c2').load('url of c2 to load with homepage');

        return false;

   });
 

   $('#idofsecondlink').bind('click', function()

   {

        $('#lccont1h').html($('#idofsecondlink').html());

        $('#lccont1c').load($('#idofsecondlink').attr('href'));

        $('#lccont1c2').load('url of c2 to load second link');

        return false;

   });

});

</script>

Open in new window

0
 

Author Comment

by:jrhundsr
ID: 24982431
@ jackmcleod

I am so close to what I want now.
I've attached the code.
I get the content I want in all 3 content divs. Where my problem lies now is that I do not want a link to appear in "lccont1h." What I would like is just the title of the link. How can I make that happen?
I've attached my code.
Thank you so much, because I finally feel like this will happen.
$(document).ready(function() {

	$('#lccont1h').html($('#li1').html());

        $('#lccont1c').load('external/sl1.css');

	$('#lccont1c2').load('external/sd1.css');

	$('#headerdivcontainer').load('external/cont1.css');

 

   $('#li1').bind('click', function()

   {

	$('#lccont1h').html($('#li1').html());

        $('#lccont1c').load('external/sl1.css');

	$('#lccont1c2').load('external/sd1.css');

	$('#headerdivcontainer').load('external/cont1.css');

        return false;

   });

 

   $('#li2').bind('click', function()

   {

        $('#lccont1h').html($('#li2').html());

        $('#lccont1c').load('external/sl2.css');

	$('#lccont1c2').load('external/sd2.css');

	$('#headerdivcontainer').load('external/cont2.css');

        return false;

   });

});

Open in new window

0
 

Author Comment

by:jrhundsr
ID: 24984901
I can achieve the effect I want by adding this line of code to each function, but it isn't the ideal way to handle it. It would be great to automate it based on the html.

$('#lcontainer-sub1-heading').text('Home');

replacing home with each link name manually.
0
 
LVL 4

Assisted Solution

by:jackmcleod
jackmcleod earned 480 total points
ID: 24985262
try to replace with the following code... if it doesnt work, please post a part of the html with the id:)
//im just adding an 'a' to li1, you have to do it for li2 and so on

$('#lccont1h').html($('#li1 a').html());

Open in new window

0
 

Author Closing Comment

by:jrhundsr
ID: 31604014
Thank you for all of your help, the solution works perfectly!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now