www.webdeveloper.com
Results 1 to 10 of 10

Thread: How do I change the contents of a <div> with a click(link)?

  1. #1
    Join Date
    Nov 2012
    Posts
    7

    How do I change the contents of a <div> with a click(link)?

    I'm attaching an image of what the main content part of my website looks like. How do I change the content in the white box by clicking the links on the right? JQuery? AJAX? How do I do it?
    Meaning how do I change the contents of #contentBox by clicking on the links from .sideBar?
    Screen Shot 2012-11-20 at 5.01.32 PM.jpg

    Here's my code:
    Code:
            <div id="content">
            
            <ul class="sideBar">
            <li><a href="missionStatement.html">Mission Statement</a></li>
            <li><a href="history.html">History</a></li>
            <li><a href="facilities.html">Facilities</a></li>
            <li><a href="schedule.html">Schedule</a></li>
            <li><a href="oneYearProgram.html">Academic Tracks</a></li>
                    <ul class="subMenu">
                    <li><a href="oneYear.html">One Year Program</a></li></ul>
            </ul>
            
                <div id="contentBox">
                <h1>Academic Tracks</h1>
                <img src="../mainContent/ravBina.png"/>
                <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    I can tell you that one of the JQuery ajax methods will likely work well for you, but it's hard to give an example until we know how the content that you want to load will be stored(separate html files, database, etc)?

  3. #3
    Join Date
    Nov 2012
    Posts
    7
    How should I store them? I just want it to be a little more dynamic than loading to another html file when just that box is changed.
    I saw online ways to call a div and fill it into the div on the page but I couldn't get any of it to work.

  4. #4
    Join Date
    Oct 2012
    Posts
    55
    Ajax, I know little of it but it is use for changing content on a page/content on a section of a page without refreshing the page.

    Sadly I may have to learn about it one day.

    Dan

  5. #5
    Join Date
    Jul 2009
    Posts
    184
    Here is one way you could load div's of content into your page with JQuery's .load() method. The content div's can just be stored in a separate html file for editing like this:
    movies.html:
    Code:
    <div id="movie-1">
    	<h2>This is Movie 1</h2>
    	<p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
    </div>
    
    
    <div id="movie-2">
    	<h2>This is Movie 2</h2>
    	<p>This is a paragraph of textual information about <b>movie 2</b> that will blow your mind.</p>
    </div>
    
    
    <div id="movie-3">
    	<h2>This is Movie 3</h2>
    	<p>This is a paragraph of textual information about <b>movie 3</b> that will blow your mind.</p>
    </div>
    Then your index.html page could load these into a #content div using a basic menu like so:

    index.html:
    Code:
    <!DOCTYPE>
    <html>
    	<head>
    		<title>Simple AJAX Test</title>
    		<link rel="stylesheet" type="text/css" href="style.css">
    		<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
    	</head>
    	
    	<body>
    		
    		<section id="container">
    			
    			<header>
    				<h1>Header</h1>
    				<nav id="menu">
    					<ul>
    						<li><a href="movie-1">Movie 1</a></li>
    						<li><a href="movie-2">Movie 2</a></li>
    						<li><a href="movie-3">Movie 3</a></li>
    					</ul>
    				</nav>
    			</header>
    
    
    			<section id="content">
    		
    				<div id="movie-1">
    					<h2>This is Movie 1</h2>
    					<p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
    				</div>
    		
    			</section>
    			
    			<footer>
    				<p>Copyright &#169; 2012 Ben HartLenn</p> 
    				<p>All Rights Reserved</p>
    			<footer>
    			
    		</section>
    		
    		<script type="text/javascript" charset="utf-8">
    			$(document).ready(function(){
    				
    				$('#menu ul li a').click(function(){
    					$('#content').load('movies.html #' + $(this).attr('href'));
    					return false;
    				});
    				
    			});
    		</script>
    		
    	</body>
    	
    </html>

  6. #6
    Join Date
    Nov 2012
    Posts
    7
    thanks a lot. I'm gonna try that.
    Is there a way to make it fade in and out so it looks a little more dynamic?

    Thanks!

  7. #7
    Join Date
    Nov 2012
    Posts
    7
    I tried it and it's working. One more thing in addition to the fading. Is there a way to make it that after changing the contents of the div, clicking the back button would go back to the last div?



    thanks again!

  8. #8
    Join Date
    Jul 2009
    Posts
    184
    I think there's a way, but I don't have time to test it out right now.

    Generally speaking you would just add a hidden(shown on menu item click) back link to your html somewhere like:

    html:
    Code:
    <a id="back" href="#">Back</a>
    Then hide the #back button at first, because when the page first loads there won't be anywhere to go back to right.

    css:

    Code:
    #back { display: none; }
    Then you would have to modify the script at the bottom to display the back button when you click a menu item, change the back buttons href value, and add a click event to it similar to the menu item .click() event. It would look something like this:

    Code:
    <script type="text/javascript" charset="utf-8">
    			$(document).ready(function(){
    				var c = 1; // counter for back button display
    
    
    				$('#menu ul li a').click(function(){
    
    
    					$('#content').load('movies.html #' + $(this).attr('href')); // load new div
    
    
                                            if(c == 1)
                                            {
                                            $('#back').fadeIn(); // display back button
                                            c++; // increment var c so back button doesn't try to show every time menu item is clicked
    					}                                        
    
                                            $('#back').attr('href', $(this).attr('href')); // change href of back button
    
                                            return false;
    				});
    
                                    $('#back').click(function(){
                                            $('#content').load('movies.html #' + $(this).attr('href'));
                                    });
    				
    			});
    </script>
    This is a completely untested idea, but I think something like this could work out for you.

  9. #9
    Join Date
    Jul 2009
    Posts
    184
    I read that again when I wasn't rushing and tired, and I totally messed up a very crucial part of the JQuery script. In my original example the back button would just have the currently viewed movie url in it, not the last viewed movie url. Ugh My bad.

    Should be more like this:
    Code:
    <script type="text/javascript" charset="utf-8">
    	$(document).ready(function(){
    		var vis = false;
    		var lastUrl;
    		$('#menu ul li a').click(function(){
    			lastUrl = $('#content .movie').attr('id');
    
    			if(!vis)
                            {
                               $('#back').fadeIn(); 
                               vis = true; 
    			}
    			
    		        $('#back').attr('href', lastUrl);
    			
    			$('#content').load('movies.html #' + $(this).attr('href'));
    
    
    			return false;
    		});
    		
    		$('#back').click(function(){
    			lastUrl = $('#content .movie').attr('id');
    			
              	        $('#content').load('movies.html #' + $(this).attr('href'));
    
    
    			$(this).attr('href', lastUrl);
    
    
    			return false;
                    });
    		
    	});
    </script>
    Then, going with my example, you would just need to add the .movie class to your content divs like:
    Code:
    <div class="movie" id="movie-2">...
    Keep in mind this is a simple back button, that will go back and forth between last view movie, and the currently viewed movie. If you want to actually make the back button go through a history of viewed movies, I recommend that you do some research on "ajax hash history".
    Last edited by WestWeb; 11-25-2012 at 04:51 PM.

  10. #10
    Join Date
    Oct 2012
    Posts
    39
    It changes the div contents like you wanted. Its not vertical but you said that making it wouldn't be a problem. Same script
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">

    #tablist{
    padding: 3px 0;
    margin:0;
    font: bold 12px Verdana;
    }

    #tablist li{
    list-style: none;
    margin: 0;
    width:150px;
    }

    #tablist li a{
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    display:block;
    }

    #tablist li a:link, #tablist li a:visited{
    color: #FFF;
    }

    #tablist li a.current{
    background: lightyellow;
    }

    #tabcontentcontainer{
    width: 400px;
    /* Insert Optional Height definition here to give all the content a unified height */
    padding: 5px;
    border: 1px solid black;
    }

    .tabcontent{
    display:none;
    }

    a.tab {
    background:black;
    }

    a.tab:active{
    background:red;
    }
    </style>

    <script type="text/javascript">

    /***********************************************
    * Tab Content script- 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
    ***********************************************/

    //Set tab to intially be selected when page loads:
    //[which tab (1=first tab), ID of tab content to display]:
    var initialtab=[1, "sc1"]

    ////////Stop editting////////////////
    I am Creating Website for Businesses and Brands to build up online presence.

Thread Information

Users Browsing this Thread

There are currently 3 users browsing this thread. (0 members and 3 guests)

Tags for this Thread

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



Recent Articles