Menu
Thanks for taking the time to read this post. Hope those who are asking the same question would get their answers too.
I am working on a single page website divided into 8 big divs, so that when you click on the menu bar, it will take you to one of the divs (or "pages).
On one of the divs (or pages), which is the intro section of my website, I'm trying to introduce this effect :http://jsfiddle.net/unbornink/LUKGt/
I have a row of buttons, e.g. "Who we are", "What we do", "How we think"....and I have a div under this row of buttons, where different texts are shown when you click on different buttons.
I tried to follow all the steps suggested by http://jsfiddle.net/unbornink/LUKGt/. Unfortunately, I cannot get the button to fire.
Here is the code of my work:
<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"> <------I put these in CSS style sheet.
.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">
<a class="link" href="#about" data-link="first"> Why We Exist</a> • <a class="link" href="#about" data-link="second">Who We Are</a> •
<a class="link" href="#about" data-link="third">What We Do</a> •
<a class="link" href="#about" data-link="fourth">How We Think</a> •
<a class="link" href="#about" data-link="fifth">Where We Are Going</a>
</div>
<div id="pages_about" class="textContainer_about">
<div class="textWord_about" data-link="first">
<p>ffffffffffffffffffffffffffff</p>
</div>
<div class="textWord_about" data-link="second">
<p>ffffffffffffffffffffffffffff</p>
</div>
<div class="textWord_about" data-link="third">
<p>ffffffffffffffffffffffffffff</p>
</div>
<div class="textWord_about" data-link="fourth">
<p>ffffffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffffffff</p>
</div>
<div class="textWord_about" data-link="fifth">
<p>ffffffffffffffffffffffffffff</p>
</div>
</div>
<script type="text/javascript">
$('.textword_about').hide();
$('.link').click(function() {
$('.textword_about').hide();
$('.textword_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});
</script>
Please propose a solution! Much APPRECIATED!
891
There is typo in your selector. Change textword_about to textWord_about [Note the letter W in textWord_about]
Fixed Code: http://jsfiddle.net/LUKGt/5/ (without your stylesheets)
Code:
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});
You don't necessarily have to use JavaScript for this, if your target audience are using browsers that support the :active pseudo class.
Pure CSS Version
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
