using jquery to switch content within divs using navigation

bamme

Senior Member
Hi all

I wondered if anyone knew where to find how to use the effect where you click a link, and the page itself doesn't change, it's simply the box of content that changes?

I think it can be done with jquery -- this is the framework im using for the site, but im not sure what it's termed as so I can't find anything :/
 
Thanks for that renniks :) Perfect. I noticed you can't leave the "..href" part of the a tag intact or you get navigated there after the content switches, so for degrading this nicely, I was simply going to link the buttons to seperate pages showing the otherwise changing div content. Would the easiest way to do this be : 1. to add a css class to a div wrapping the entire changeable content box and buttons used to change the content, with rules that make it hidden 2. write the same buttons but link them to the seperate pages using a regular
 
Thanks for that renniks :) Perfect. I noticed you can't leave the "..href" part of the a tag intact or you get navigated there after the content switches, so for degrading this nicely, I was simply going to link the buttons to seperate pages showing the otherwise changing div content. Would the easiest way to do this be : 1. to add a css class to a div wrapping the entire changeable content box and buttons used to change the content, with rules that make it hidden 2. write the same buttons but link them to the seperate pages using a regular link so this is visible instead to people without javascript 3. and then remove that hidden css class of the div wrapping the changeable content box and buttons used to change the content, using jquery?
 
That description is a little confusing but from what I think you want to do you can use the same set of buttons (links) whether javascript is enabled or not.

Just have the href attribute link to the page with the same content for non-javascript users to click through normally. Then for users with javascript make sure that you return false; at the end of the link click event to make sure the browser stops before thinking oh, I just clicked a link, let's go to that page.

Edit: Like so:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
        
            $("#changeLinks a").click(function() {
            
                $("#changeMe").html("Content from " + $(this).attr('href'));
                return false;
                
            });
            
        });
    </script>

</head>
<body>
    
    <div id="changeLinks">
        <a href="link_1_content_page">Link 1</a> |
        <a href="link_2_content_page">Link 2</a> |
        <a href="link_3_content_page">Link 3</a>
    </div>
    
    <div id="changeMe">
        Default Content
    </div>

</body>
</html>
 
Thanks Mark, although im not too familiar with javascript/jquery i have ages ago looked at return false I should have thought of that although i still wouldn't have been able to use it :)

Your code there looks quite diff to mine now.. Can i ask how i would incorporate what youve written there into my javascript here:

$(document).ready(function() {
$("#midweek").click(function() {
$("#servicesBox").html("<h4>Exclusive Use - Midweek</h4><p>You can access the venue anytime from 7am on the days your havereserved by using the secure code you will have been given. Allrefreshment facilities will be ready and waiting for you.</p><p>Catering will be delivered to you at your designated time, if you have pre-ordered it.</p><p>The venue is yours to use for the day. No one else will disturbyou. No phones, other than those you bring with you will interruptyour event.We can set up the room to your requirements aheadof your event or you can control how you would like it to be on the day.</p><p>No one will be hassling you to leave the venue at the end of the day, so relax and enjoy it.</p>");
});
$("#evening").click(function() {
$("#servicesBox").html("<h4>Exclusive Use - Evenings</h4><p>Use our venue in the evenings for:<ul><li>Training sessions</li><li>Networking events</li><li>Clubs and societies meetings</li><li>Sales events</li><li>...And much more.</li></ul></p><p>Subdued lighting, and background music is available as required.</p>");
});
$("#weekend").click(function() {
$("#servicesBox").html("<h4>Exclusive Use - Weekends</h4><p>Whether for social or working purposes our venue is perfectfor you on the weekend.</p><p>For work, our quality conferencing facilities are availableto you. For social events – use our venue for family gatherings,societies and groups, birthday celebrations. We have no licenseto sell alcohol but no objection to its consumption on the premises.Tell us your needs and we will design and event to match.</p><p>We can arrange: Catering, Florists, Balloons, Specialist lighting,Audio visual needs, Red carpets, Background music, and Limo deliveryand collection.</p><p> Please arrange to visit the venue if you would like view itand discuss your needs with us. </p>");
});
$("#multiple").click(function() {
$("#servicesBox").html("<h4>Exclusive Use - Multiple Bookings</h4><p>If you and your organisation would like to use our venue foryour regular events, then please arrange to meet with one ofour advisers who can organise events to meet your needs and identifyfor you the savings through discounted rates that can be madeavailable to you.</p><p>If you would like to set up a corporate membership account withus, please get in touch.</p>");
});





})

And my html here:

<div style="width: 100%; height:70px; margin-left:65px;" id="servicemenu">
<h3 class="abouthd"><a id="midweek">Midweek</a></h3>
<h3 class="abouthd"><a id="evening">Evening</a></h3>
<h3 class="abouthd"><a id="weekend">Weekend</a></h3>
<h3 class="abouthd"><a id="multiple">Multiple Bookings</a></h3>

</div>
<div id="servicesBox">
<h4>text thats going to be changed</h4>
</div>

(please ignore class=abouthd, this is for visual styling)
 
You'd just need to add href attributes to the links which go to the same content that you'll be placing using jQuery, and add return false; inside the click events. Like so:

Code:
        $(document).ready(function() {                          $("#midweek").click(function() {                   $("#servicesBox").html("<h4>Exclusive Use -  Midweek</h4><p>You can access the venue anytime from 7am on  the days your havereserved by using the secure code you will have been  given. Allrefreshment facilities will be ready and waiting for  you.</p><p>Catering will be delivered to you at your  designated time, if you have pre-ordered it.</p><p>The venue  is yours to use for the day. No one else will disturbyou. No phones,  other than those you bring with you will interruptyour event.We can set  up the room to your requirements aheadof your event or you can control  how you would like it to be on the day.</p><p>No one will be  hassling you to leave the venue at the end of the day, so relax and  enjoy it.</p>");                   return false;               });                              $("#evening").click(function() {                   $("#servicesBox").html("<h4>Exclusive Use -  Evenings</h4><p>Use our venue in the evenings  forul><li>Training sessions</li><li>Networking  events</li><li>Clubs and societies  meetings</li><li>Sales events</li><li>...And  much more.</li></ul></p><p>Subdued lighting, and  background music is available as required.</p>");                   return false;               });                              $("#weekend").click(function() {                   $("#servicesBox").html("<h4>Exclusive Use -  Weekends</h4><p>Whether for social or working purposes our  venue is perfectfor you on the weekend.</p><p>For work, our  quality conferencing facilities are availableto you. For social events –  use our venue for family gatherings,societies and groups, birthday  celebrations. We have no licenseto sell alcohol but no objection to its  consumption on the premises.Tell us your needs and we will design and  event to match.</p><p>We can arrange: Catering, Florists,  Balloons, Specialist lighting,Audio visual needs, Red carpets,  Background music, and Limo deliveryand collection.</p><p>  Please arrange to visit the venue if you would like view itand discuss  your needs with us. </p>");                   return false;               });                              $("#multiple").click(function() {                   $("#servicesBox").html("<h4>Exclusive Use -  Multiple Bookings</h4><p>If you and your organisation would  like to use our venue foryour regular events, then please arrange to  meet with one ofour advisers who can organise events to meet your needs  and identifyfor you the savings through discounted rates that can be  madeavailable to you.</p><p>If you would like to set up a  corporate membership account withus, please get in touch.</p>");                   return false;               });                          });
HTML:
    <div style="width: 100%; height:70px; margin-left:65px;" id="servicemenu">
       
           <h3 class="abouthd"><a href="link_to_midweek_infopage" id="midweek">Midweek</a></h3>
           <h3 class="abouthd"><a href="link_to_evening_infopage" id="evening">Evening</a></h3>
           <h3 class="abouthd"><a href="link_to_weekend_infopage" id="weekend">Weekend</a></h3>
           <h3 class="abouthd"><a href="link_to_multiple_infopage" id="multiple">Multiple Bookings</a></h3>
   
       </div>
       
       <div id="servicesBox">
           <h4>text thats going to be changed</h4>
       </div>
That will make it work, but you could make it better by utilising a couple of cool jQuery features.

First of all, having the contents of the box hard coded into the script itself is a little cumbersome. Having it in two places (script and static page) is also a bit of a hassle. What we can do is use ajax to load the information from the static page into the content box instead.

Lets say our static page with the midweek info is called midweek_infopage.htm. To load the content of that page into our div it's as simple as calling

Code:
$("#servicesBox").load('midweek_infopage.htm');
and the entire contents of that page get automagically loaded in.

Great, you say, but your static page will probably have other content around the specific information you want. It'll be a whole other page of your site presumably, with headers, and navigation, and so on. Handily the jQuery load() function allows you to select which specific items you want to fetch from the target page. So in midweek_infopage.htm, lets say you wrap the information you need to load into your box in a div called info:

HTML:
   <!-- Other page content here, header, nav, etc. -->
   
   <div id="info">
   <h4>Exclusive Use - Midweek</h4><p>You can access the  venue anytime from 7am on the days your have reserved by using the secure  code you will have been given. All refreshment facilities will be ready  and waiting for you.</p><p>Catering will be delivered to you  at your designated time, if you have pre-ordered  it.</p><p>The venue is yours to use for the day. No one else  will disturbyou. No phones, other than those you bring with you will  interrupt your event.We can set up the room to your requirements ahead of  your event or you can control how you would like it to be on the  day.</p><p>No one will be hassling you to leave the venue at  the end of the day, so relax and enjoy it.</p>
   </div>
   
   <!-- More page content here -->
To fetch just the contents of that div from midweek_infopage.htm we can use:

Code:
$("#servicesBox").load('midweek_infopage.htm #info');
And hey presto, in it goes. So now when you want to update the content you'll only have to update your static page instead of fumbling around with quoted strings within the script too.

The next thing we can do is to make your code a little more elegant. Instead of giving an id to every individual link and making a click event for each, we can just target all the links using your #servicemenu div, and let jQuery work out what information it needs to fetch using the $(this) object. It's a little complex to explain in words but hopefully the code will let you see what's happening here:

Code:
        $(document).ready(function() {                          $("#servicemenu a").click(function() { /* When the user clicks any link in #servicemenu: */                   $("#servicesBox").load($(this).attr('href') + ' #info');  /* Load the #info div from the page in the 'href' attribute of the link  that was just clicked into our box                */                   return false;               });                          });
HTML:
    <div style="width: 100%; height:70px; margin-left:65px;" id="servicemenu">
       
           <h3 class="abouthd"><a href="midweek_infopage.htm">Midweek</a></h3>
           <h3 class="abouthd"><a href="evening_infopage.htm">Evening</a></h3>
           <h3 class="abouthd"><a href="weekend_infopage.htm">Weekend</a></h3>
           <h3 class="abouthd"><a href="multiple_infopage.htm">Multiple Bookings</a></h3>
   
       </div>
       
       <div id="servicesBox">
           <h4>text thats going to be changed</h4>
       </div>
 
if i want to make a link inside the the page midweek the go to evening how can i set the link?

HTML:
 <!-- Other page content here, header, nav, etc. -->
   
   <div id="info">
   <h4>Exclusive Use - Midweek</h4><p>You can access the  venue anytime from 7am on the days your have reserved by using the secure  code you will have been given. All refreshment facilities will be ready  and waiting for you.</p><p>Catering will be delivered to you  at your designated time, if you have pre-ordered  it.</p><p>The venue is yours to use for the day. No one else  will disturbyou. No phones, other than those you bring with you will  interrupt your event.We can set up the room to your requirements ahead of  your event or you can control how you would like it to be on the  day.</p><p>No one will be hassling you to leave the venue at  the end of the day, so relax and enjoy it.</p>
   </div>
   
   <!-- More page content here -->
 
I'm not sure what you're asking, can you rephrase your question please.
 
I want to make a new link inside one of my pages
and change the "info" div not all the page.

how can i set the link?
 
you may be best starting your own thread effir and giving us a link the whole page, the bit you've cut out is of no use
 
Yeah, I can't really get to grips with what you're asking until I see the whole thing.

You can add a new link to a page by adding an <a href="linkhere">display text/image here</a> tag

Change the info div...? How..? :S
 
Back
Top