Hi
I have written some code that slides items within 2 divs, at the same
time
First on the left is an image that slides to the next and on the right
is text.
All works good except the element <div> that contains the text wont
slide any contents except pure text. It wont slide any <h1></h1> <h2></
h2> or any other tag i put inside it it just makes them vanish, though
any plain text inside the div will slide just fine... any ideas?
Here is an example of the <div> elements i want to slide...they slide
like I say with just plain text, but the <h> tags just dont move:
The class="slidertxt" positions the elements absolutely, with "inline"
set so i can have them slide next to each other, floating them didnt
seem to work:
[code]
<div id="gbc_cc_right">
<div id="txt0" class="slidertxt">
Testing 2 Testing 2 Testing 2
</div>
<div id="txt1" class="slidertxt">
Testing 2 Testing 2 Testing 2
</div>
</div>
[/code]
[code]
<script type="text/javascript">
var current_display = 0;
var total = 0;
$(document).ready( function() {
// Hide second image
//$("#par2").hide();
// Hide all
$("#gbc_cc_left").find ("img").each (
function(i) {
// Dont hide the first one
if ( i != 0 ) {
$(this).hide();
}
// Count total
total = total + 1;
});
// Hide txt
$("#gbc_cc_right").find ( "div" ).each (
function(i) {
if ( i != 0 ) {
$(this).hide();
}
});
// If left is clicked
// hide the current image
// show the next
$("#left").click (
function() {
// We must check
current_display is not = total
if ( current_display !=
total - 1 ) {
$("#gbc_cc_right > #txt" + current_display ).hide ( "slide",
{direction: "left" }, 500 );
$("#gbc_cc_left
> #par" + current_display ).hide ( "slide",
{direction: "left" }, 500, left_slide() );
}
//alert (
current_display );
});
// If right is clicked
// hide current image to right
// show prev
$("#right").click (
function() {
// We must check the
current_display is not 0
if ( current_display >
0 ) {
$("#gbc_cc_right > #txt" + current_display ).hide ( "slide",
{direction: "right" }, 500 );
$("#gbc_cc_left
> #par" + current_display ).hide ( "slide",
{direction: "right" }, 500, right_slide() );
}
//alert (
current_display );
});
function left_slide() {
// Add 1 to current display
current_display = current_display + 1;
$("#gbc_cc_left > #par" + current_display ).show (
"slide",
{direction:"right"},500 );
$("#gbc_cc_right > #txt" + current_display ).show (
"slide",
{direction:"right"}, 500 );
}
function right_slide() {
// Minus 1 from current display
current_display = current_display - 1
$("#gbc_cc_left > #par" + current_display ).show (
"slide",
{direction:"left"}, 500 );
$("#gbc_cc_right > #txt" + current_display ).show (
"slide",
{direction:"left"}, 500 );
}
});
</script>
[/code]
