Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Click link to load Div - not working

    Hello Again,

    After much help and support i have decided that the best way to do what i want (if i can get it working is like the below).

    The idea is to click a link and content will load into a div from another div on another page in the same webspace. I can make a test page as directed by the guidance i recieved but there are some features that wont work properly or are not what i am after. For example in the test case the link to load the div is inside the div i want to update. In my case i want to click on the algebra link in the blue horizontal menu and then the main menu updates. I wont lie i have not got the skills to adapt this script on my own.

    here is the test page

    http://www.bushcottages.co.uk/loaddata.htm

    the main page i would like it to work on as its not working correctly is

    http://www.bushcottages.co.uk/new.htm

    test code is

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Click This Link To Load My Favor</title>
    
    <script type="text/javascript" src="java/jquery-1.5.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function()
     {
      $("#loadData").click(function()
       {
        $(this).text("...One Moment Please...");
         $("#container").append('<div id="favoriteMovies"></div>')
                        .children("#favoriteMovies").hide()
                        .load("theOtherPage.htm ul#favoriteMovies", function()
                         {
                          $("#loadData").remove();
                          $("#favoriteMovies").slideDown("slow");
                         });
       return false;
       });
    });
    
    </script>
    
    <style type="text/css">
    
    #container
    {
    	width: 300px;
    	height: 200px;
    	font-family: georgia;
    	font-weight: bold;
    	border-style: solid;
    	border-width: 2px;
    	border-color: #000066;
    }
    
    </style>
    
    </head>
    
    <body>
    <div id="container">
    <li><a href="#" id="loadData">Click This Link To Load My Favorite Movies</a></li>
    </div>
    </body>
    
    </html>
    code for main page is

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-gb">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Mathematics Learning Zone</title>
    <meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
    	<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">
    	<meta name="author" content="Peter Devlin">
    
    <script type="text/javascript" src="java/jquery-1.5.min.js"></script>
    
    <script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script>
    			<script type="text/javascript">
    			<!--
    			$(document).ready(function() {
    				if (document.getElementById('news')) {
    					var options = {
    						newsList: "#news",
    						tickerRate: 20,
    						loopDelay: 6000,
    						startDelay: 10,
    						placeHolder1: "_"
    					}
    					$().newsTicker(options);
    				}
    			});
    			-->
    			</script>
    			
    <script type="text/javascript">
    
    $(document).ready(function() {
    
    	//Default Action
    	$(".tab_content").hide(); //Hide all content
    	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
    	$(".tab_content:first").show(); //Show first tab content
    	
    	//On Click Event
    	$("ul.tabs li").click(function() {
    		$("ul.tabs li").removeClass("active"); //Remove any "active" class
    		$(this).addClass("active"); //Add "active" class to selected tab
    		$(".tab_content").hide(); //Hide all tab content
    		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    		$(activeTab).fadeIn(); //Fade in the active content
    		return false;
    	});
    
    });
    </script>
    
    <script type="text/javascript">
    var newwindow;
    function poptastic(url)
    {
    	newwindow=window.open(url,'brainteasersolution.htm','height=400,width=400,left=40%,top=20%');
    	if (window.focus) {newwindow.focus()}
    }
    </script>
    
    <script type="text/javascript">
    $(document).ready(function()
     {
      $("#number").click(function()
       {
        $(this).text("...One Moment Please...");
         $("#container").append('<div id="Algebra"></div>')
                        .children("#Algebra").hide()
                        .load("Algebra.htm ul#algebra", function()
                         {
                          $("#number").remove();
                          $("#Algebra").slideDown("slow");
                         });
       return false;
       });
    });
    
    </script>
    
    <style type="text/css">
    
    *
    {
    border: 0;
    margin: 0;
    padding-top:0;
    }
    #topmargin
    {
    width:900px;
    height:5px;
    margin:auto;
    }
    
    #banner
    {
    	width: 900px;
    	height: 70px;
    	background-image: url('banner.png');
    	margin: auto;
    	margin-bottom: 5px;
    	background-color: #000066;
    }
    
    #horizontalmenu
    {
    	width: 900px;
    	height: 25px;
    	margin: auto;
    	margin-bottom: 5px;
    	background-color: #000066;
    }
    
    #horizontalmenu ul
    {
    list-style-type: none;
    margin: 0px;
    padding: 2px 0px 0px 0px;
    }
    
    	#horizontalmenu ul li
    	{
    	float: left;
    	display: block;
    	text-align: center;
    	width: 300px;
    	}
    
    		#horizontalmenu ul li a 
    		{
    		text-decoration: none;
    		font-family: georgia;
    		font-size: 1em;
    		color: #fafafa;
    		}
    
    		#horizontalmenu ul li a:hover
    		{
    		font-family: georgia;
    		font-size: 1em;
    		padding: 5px 40px 5px;
    		color: #000000;
    		background-color: #ffffff;
    		}
    
    #mainpage
    {
    	width: 900px;
    	margin: auto;
    }
    
    #one
    {
    	float: left;
    	width: 150px;
    	margin-right: 5px;
    }
    
    #two
    {
    	float: left;
    	width: 590px;
    	margin-right: 5px;
    }
    
    #three
    {
    	float: left;
    	width: 150px
    }
    
    #verticalmenu
    {
    	float: left;
    	width: 150px;
    }
    
    	#verticaltopmenu
    	{
    	float: left;
    	width: 150px;
    	height: 23px;
    	background-color: #000066;
    	}
    
    	#verticalmainmenu
    	{
    	float: left;
    	width: 146px;
    	height: 372px;
    	text-decoration: none;
    	border-style: solid;
    	border-width: 2px;
    	border-color: #000066;
    	padding-top: 2px;
    	padding-bottom: 2px;
    	}
    
    		#verticalmainmenu ul
    		{
    		text-decoration: none;
    		list-style: none;
    		padding: 0px;
    		margin: 0px;
    		color: black;
    		}
    
    			#verticalmainmenu ul li 
    			{
    			list-style: none;
    			text-decoration: none;
    			display: block;
    			padding: 0px;
    			text-align: left;
    			font-family: georgia;
    			font-size: .8em;
    			color: black;
    			}
    
    				#verticalmainmenu ul li a 
    				{
    				padding: 0px 0px 0px 5px;
    				text-decoration: none;
    				text-align: left;
    				color: black;
    				}
    
    				#verticalmainmenu a:hover 
    				{
    				background-color: white;
    				color: #000066;
    				}
    
    #tickercontainer
    {
    	float: left;
    	width: 586px;
    	height: 21px;
    	margin-bottom: 5px;
    	border-color: #000066;
    	border-style: solid;
    	border-width: 2px;
    }
    
    	#tickersidetitle
    	{
    	float: left;
    	width: 125px;
    	height: 21px;
    	background-color: #000066;
    	}
    
    	#tickercontent
    	{
    	float: left;
    	width: 461px;
    	height: 21px;
    	padding: 0px;
    	}
    
    		ul#news
    		{
    		margin: 0px;
    		height: 21px;
    		padding: 0px 0px 0px 0px;
    		}
    	
    			ul#news li
    			{
    			list-style: none;
    			font-family: georgia;
    			font-size: 14px;
    			font-weight: bold;
    			color: #004400;
    			margin: 0px;
    			padding: 0px 0px 0px 10px;
    			}
     
    				ul#news li a:link, ul#news li a:hover
    				{
    				color: #004400; 
    				text-decoration: none; 
    				}
    
    #contentwindow
    {
    float: left;
    width: 590px;
    }
    
    	ul.tabs
    	{
    	width: 590px;						/*--Set width of container--*/
    	height: 23px;						/*--Set height of tabs--*/
    	margin: 0px;
    	padding: 0px;
    	float: left;
    	list-style: none;
    	border-bottom: 2px solid #000066;	/*--Set line at bottom of ul--*/
    	}
    
    		ul.tabs li
    		{
    		float: left;
    		margin-right: 1px; 				/*adjusts gap between tabs*/
    		height: 23px;					/*--Subtract 1px from the height of the unordered list--*/
    		line-height: 23px; 				/*--Vertically aligns the text within the tab--*/
    		margin-bottom: -2px;
    		background: #000066;
    		border-color: #000066;
    		border-style: solid;
    		border: 2px;
    		}
    		
    			ul.tabs li a
    			{
    			text-decoration: none;
    			color: #FFFFFF;	
    			font-family: georgia;
    			font-size: 14px;
    			display: block;
    			padding: 0 20px;
    			}
    			
    			ul.tabs li.active a
    			{
    			color:#000000;
    			border-color: #000066;
    			border-style: solid;
    			border: 2px;
    			}
    			
    			ul.tabs li a:hover
    			{
    			background-color: #330099;
    			border: 0px;
    			}
    						
    			ul.tabs li.active, ul.tabs li.active a:hover		/*--Makes sure that the active tab does not listen to the hover properties--*/
    			{ 
    			color: #000000;
    			background: #FFFFFF;
    			border-color: #000066;
    			border-style: solid;
    			border: 2px 2px 2px 0px;
    			border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/
    			}
    
    .tab_container {
    	border: 2px solid #000066;
    	border-top: none;
    	overflow: hidden;
    	clear: both;
    	float: left; 
    	width: 586px;
    	height: 346px;
    	background: #FFFFFF;
    }
    .tab_content {
    	padding: 20px;
    	font-size: 1.2em;
    }
    
    #testsmenu
    {
    	float: left;
    	width: 150px;
    	margin-bottom: 5px;
    }
    
    	#teststopmenu
    	{
    	width: 150px;
    	height: 23px;
    	background-color: #000066;
    	}
    
    	#testsmainmenu
    	{
    	float: left;
    	width: 146px;
    	height: 70px;
    	border-style: solid;
    	border-width: 2px;
    	border-color: #000066;
    	}
    		#testsmainmenu ul 
    		{
    		float: left;
    		margin-top: 2px;
    		margin-bottom: 2px;
    		width: 146px;
    		padding: 0px;
    		}
    
    			#testsmainmenu ul li 
    			{
    			font-family: georgia;
    			font-size: 0.8em;
    			list-style-image: url('test.png');
    			margin-left: 30px;
    			padding: 0px;
    			text-align: left;
    			}
    
    				#testsmainmenu ul li a 
    				{
    				padding: 0px;
    				text-decoration: none;
    				text-align: left;
    				color: black;
    				}
    
    				#testsmainmenu ul li a:hover 
    				{
    				background-color: white;
    				color: #000066;
    				}
    #downloadsmenu
    {
    float: left;
    width: 150px;
    margin-bottom: 5px;
    }
    
    	#downloadstopmenu
    	{
    	width: 150px;
    	height: 23px;
    	background-color: #000066;
    	}
    
    	#downloadsmainmenu
    	{
    	float: left;
    	width: 146px;
    	height: 70px;
    	border-style: solid;
    	border-width: 2px;
    	border-color: #000066;
    	}
    
    		#downloadsmainmenu ul 
    		{
    		float: left;
    		margin-top: 2px;
    		margin-bottom: 2px;
    		width: 146px;
    		padding: 0px;
    		}
    
    			#downloadsmainmenu ul li 
    			{
    			font-family: georgia;
    			font-size: 0.8em;
    			list-style-image: url('download.png');
    			margin-left: 30px;
    			padding: 0px;
    			text-align: left;
    			}
    
    				#downloadsmainmenu ul li a 
    				{
    				padding: 0px 0px 0px 5px;
    				text-decoration: none;
    				text-align: left;
    				color: black;
    				}
    
    					#downloadsmainmenu ul li a:hover 
    					{
    					background-color: white;
    					color: #000066;
    					}
    #worksheetsmenu
    {
    float: left;
    width: 150px;
    margin-bottom: 5px;
    }
    
    	#worksheetstopmenu
    	{
    	width: 150px;
    	height: 23px;
    	background-color: #000066;
    	}
    
    	#worksheetsmainmenu
    	{
    	float: left;
    	width: 146px;
    	height: 70px;
    	border-style: solid;
    	border-width: 2px;
    	border-color: #000066;
    	}
    
    		#worksheetsmainmenu ul 
    		{
    		float: left;
    		margin-top: 2px;
    		margin-bottom: 2px;
    		width: 146px;
    		padding: 0px;
    		}
    
    			#worksheetsmainmenu ul li 
    			{
    			font-family: georgia;
    			font-size: 0.8em;
    			list-style-image: url('worksheet.png');
    			margin-left: 30px;
    			padding: 0px;
    			text-align: left;
    			}
    
    				#worksheetsmainmenu ul li a 
    				{
    				padding: 0px 0px 0px 5px;
    				text-decoration: none;
    				text-align: left;
    				color: black;
    				}
    
    					#worksheetsmainmenu ul li a:hover 
    					{
    					background-color: white;
    					color: #000066;
    					}
    
    #weblinksmenu
    {
    	float: left;
    	width: 150px;
    	margin-bottom: 5px;
    }
    
    	#weblinkstopmenu
    	{
    	width: 150px;
    	height: 23px;
    	background-color: #000066;
    	}
    
    	#weblinksmainmenu
    	{
    	float: left;
    	width: 146px;
    	height: 70px;
    	border-style: solid;
    	border-width: 2px;
    	border-color: #000066;
    	}
    
    		#weblinksmainmenu ul 
    		{
    		float: left;
    		margin-top: 2px;
    		margin-bottom: 2px;
    		width: 146px;
    		padding: 0px;
    		}
    
    			#weblinksmainmenu ul li 
    			{
    			font-family: georgia;
    			font-size: 0.8em;
    			list-style-image: url('links.png');
    			margin-left: 30px;
    			padding: 0px;
    			text-align: left;
    			}
    
    				#weblinksmainmenu ul li a 
    				{
    				padding: 0px 0px 0px 5px;
    				text-decoration: none;
    				text-align: left;
    				color: black;
    				}
    
    					#weblinksmainmenu ul li a:hover 
    					{
    					background-color: white;
    					color: #000066;
    					}
    
    p
    {
    	text-align: center;
    	font-family: georgia;
    	font-size: 1em;
    	color: #FFFFFF;
    	padding-top: 2px;
    }
    
    p.a
    {
    	text-align: center;
    	font-family: georgia;
    	font-size: 1em;
    	color: #FFFFFF;
    	padding-top: 0px;
    }
    
    p.b
    {
    	text-align: center;
    	font-family: georgia;
    	font-size: 1em;
    	color: #000000;
    	padding-top: 0px;
    }
    
    p.c
    {
    	text-align: center;
    	font-family: georgia;
    	font-size: 8px;
    	color: #000000;
    	padding-top: 0px;
    }
    
    </style>
    
    </head>
    
    
    <body>
    
    <div id="topmargin"></div>
    <div id="banner"></div>
    
    <div id="horizontalmenu">
    	<ul>
    		<li> <a href="#" id="number">Number and Algebra</a></li>
    		<li><a href="url">Geometry and Measures</a></li>
    		<li><a href="url">Statistics - Data Handling</a></li>
    	</ul>
    </div>
    
    <div id="mainpage">
    
    	<div id="one">
    		<div id="verticalmenu">
    			<div id="verticaltopmenu"><p>Main Menu</p></div>
    			<div id="verticalmainmenu">
    				<ul>
    					<li><a href="url">Angles</a></li>
    					<li><a href="url">Properties of Shapes</a></li>
    					<li><a href="url">Circle Theorems</a></li>
    					<li><a href="url">Geometry of Cuboids</a></li>
    					<li><a href="url">2d and 3d Shapes</a></li>
    					<li><a href="url">Area</a></li>
    					<li><a href="url">Perimeter</a></li>
    					<li><a href="url">Prisms</a></li>
    					<li><a href="url">Surface Area</a></li>
    					<li><a href="url">Using Pi</a></li>
    					<li><a href="url">Volumes</a></li>
    					<li><a href="url">Transformations</a></li>
    					<li><a href="url">Scale</a></li>
    					<li><a href="url">Coordinates</a></li>
    					<li><a href="url">Vectors</a></li>
    					<li><a href="url">Bearings</a></li>
    				</ul>
    			</div>
    		</div>
    	</div>
    
    <div id="two">
    	<div id="tickercontainer">
    		<div id="tickersidetitle"><p class="a">Brainteasers</p></div>
    		<div id="tickercontent">
    			<ul id="news">
    				<li>How many Degrees in a Triangle?</li>
    				<li><a href="javascript:poptastic('brainteasersolution.htm');">Algebra - What is 4x = 20 - X? Click for answer</a></li>
    				<li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li>
    			</ul>
    		</div>
    	</div>
    	<div id="contentwindow">
    		<ul class="tabs">
       			<li><a href="#tab1">Acute</a></li>
        		<li><a href="#tab2">Obtuse</a></li>
        		<li><a href="#tab1">Reflex</a></li>
        		<li><a href="#tab2">Vertex</a></li>
    		</ul>
    
    		<div class="tab_container">
     		<div id="tab1" class="tab_content">
            <p class="b">hello</p>
            <p class="c">Page Created by P.Devlin</p>
       		</div>
       		<div id="tab2" class="tab_content">
        	<p class="b">well done</p>
        	<p class="c">Page Created by P.Devlin</p>
        </div>
    </div></div>
    </div>
    	
    
    	<div id="three">
    		<div id="testsmenu">
    			<div id="teststopmenu"><p>Online Tests</p></div>
    			<div id="testsmainmenu">
    				<ul>
    					<li><a href="url">Linear Graphs</a></li>
    					<li><a href="url">Equations</a></li>
    					<li><a href="url">Averages</a></li>
    					<li><a href="url">Algebra</a></li>
    				</ul>
    			</div>
    		</div>
    	
    		<div id="downloadsmenu">
    			<div id="downloadstopmenu"><p>Downloads</p></div>
    			<div id="downloadsmainmenu">
    				<ul>
    					<li><a href="url">Linear Graphs</a></li>
    					<li><a href="url">Equations</a></li>
    					<li><a href="url">Algebra</a></li>
    					<li><a href="url">Tests</a></li>
    				</ul>
    			</div>
    		</div>
    	
    		<div id="worksheetsmenu">
    			<div id="worksheetstopmenu"><p>Worksheets</p></div>
    			<div id="worksheetsmainmenu">
    				<ul>
    					<li><a href="url">Linear Graphs</a></li>
    					<li><a href="url">Equations</a></li>
    					<li><a href="url">Algebra</a></li>
    					<li><a href="url">Tests</a></li>
    				</ul>
    			</div>
    		</div>
    	
    		<div id="weblinksmenu">
    			<div id="weblinkstopmenu"><p>Web Links</p></div>
    			<div id="weblinksmainmenu">
    				<ul>
    					<li><a href="url">Linear Graphs</a></li>
    					<li><a href="url">Equations</a></li>
    					<li><a href="url">Algebra</a></li>
    					<li><a href="url">Tests</a></li>
    				</ul>
    			</div>
    		</div>
    	</div>
    
    </div>
    
    
    </body>
    
    </html>
    Many thank to you all for your help so far.
    Peter

  • #2
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Help with a little Javascript code i have wrong

    Can anyone help change this code. It works on my test page.

    Thanks
    Peter


  •  

    LinkBacks (?)

    1. 02-21-2014, 08:38 AM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •