Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Nearly sorted

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-05-2011, 09:43 AM   PM User | #1
far2many
New Coder

 
Join Date: Feb 2011
Posts: 62
Thanks: 11
Thanked 2 Times in 2 Posts
far2many is an unknown quantity at this point
Nearly sorted
After much help and research i have found what i need. I can make the demo work but need to be able to get it to work on my page. Now i have the code i think it may be easier for those kind people to help me as i dont think i was clear before.

this is what i need (in a fashion)

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

But in my page i need to be able to click on the algebra link in the horizontal menu and the topics load in the main menu to the left. As you can see i have it slightly wrong as i am trying to adapt the script.

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

I am so close to it i can feel it. Please stick with me guys

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()
 {
  $("#loadData").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="algebramenu"></div>')
                    .children("#algebramenu").hide()
                    .load("algebra.htm ul#algebramenu", function()
                     {
                      $("#loadData").remove();
                      $("#algebramenu").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;
	height: 500px;
	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: 400px;
	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;
height: 500px;
}

	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: 400px;
	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;
	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;
	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;
	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;
	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><li><a href="#" id="loadData">Number and Algebra</a></li></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>
					<li><a href="url">Tests</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>
the other page is http://www.bushcottages.co.uk/algebra.htm

Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Algebra</title>
</head>

<body>
<ul id="algebramenu">
	<li><a href="url">Integers</a></li>
	<li><a href="url">Powers and Roots</a></li>
	<li><a href="url">Index Laws</a></li>
	<li><a href="url">Fractions</a></li>
	<li><a href="url">Decimals</a></li>
	<li><a href="url">Percentages</a></li>
	<li><a href="url">Ratio</a></li>
	<li><a href="url">Proportion</a></li>
	<li><a href="url">Use of Symbols</a></li>
	<li><a href="url">Liner Equations</a></li>
	<li><a href="url">Inequalities</a></li>
	<li><a href="url">Interpret Graphs</a></li>
</ul>

</body>

</html>
Thanks you so much
Peter
far2many is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 08:08 AM.
Advertisement
Log in to turn off these ads.