Thank you for taking the time to go through this post. I hope that those with similar questions will find their answers as well.
Currently, I am in the process of developing a single-page website that is divided into 8 large divs. The concept is such that when you click on the menu bar, it navigates you to one of these divs or "pages".
One particular section of my website acts as an introduction and I am attempting to incorporate this captivating effect: http://jsfiddle.net/unbornink/LUKGt/
In this segment, there is a row of buttons labeled "Who we are", "What we do", "How we think" and more. Below this button row, there is a div where different texts are displayed upon clicking various buttons.
I followed all the steps outlined here:http://jsfiddle.net/unbornink/LUKGt/. Regrettably, I have been unsuccessful in making the buttons function as intended.
Below is a snippet of the code I've been working on:
<head>
<link href="textContainer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
.textWord_about{
position: absolute;
font-family: Calibri;
font-size: 14px;
top: 22px;
left: 29px;
width: 650px;
height: 390px;
text-align: left;
background-image: url(images/slider_bkgd.png);
background-repeat: repeat;
}
.textContainer_about {
position: absolute;
top: 870px;
left: 234px;
width: 727px;
height: 452px;
z-index: 20;
color: rgb(4,4,4);
display: block;
background-image: url(images/slider_bkgd.png);
background-repeat: repeat;
overflow: visible;
}
.links {
font-family: Calibri;
font-size: 14px;
}
</style>
</head>
<body>
<div id="menu_about">
...
Your assistance in resolving this issue would be highly appreciated! Thank you in advance!