I’m trying to change a carousel that has arrows at the sides instead of buttons at the bottom.
So far I’ve got this:
HTML:
[code]
[/code]
CSS:
[code]#tabctrl {
display: block!important;
padding: 0;
padding: 10px 0 10px 0!important;
width: 100%!important;
top: 50%;
bottom: auto!important;
margin-top: -5px!important;
}
#tabb-cont-0, #tabb-cont-1{position:absolute}
#tabb-cont-0{left:0;}
#tabb-cont-1{right:0;}
[/code]
This works perfectly but that’s on a static page, the page is solely php and I want to show just two buttons but have no idea how to do that.
The php controlling the buttons is
<?php if( $value==1 && isset( $pagecontrol[1] ) ) { ?>
<div id="tabblock">
<div style="width: 994px; height: 275px; position: relative;">
<?php foreach( $tabblock as $key=>$value2 ) { ?>
<div class="tabb" id="tabb-<?php echo $key ?>" style="position: absolute;<?php if( $key!=$tabblock_init ) { ?> display: none;<?php } ?>"><a onclick="return clicktrack( 'tab',<?php echo $value2['id'] ?>,'' );" href="<?php echo $value2['url'] ?>"<?php if( $value2['newwin']==1 ) { ?> target="_blank"<?php } ?>><img src="/images/dynamic/<?php echo $value2['image'] ?>" alt="<?php echo htmldisplay( $value2['title'] ) ?>" title="<?php echo htmldisplay( $value2['title'] ) ?>" /></a></div>
<?php } ?>
<?php if( count( $tabblock )>1 ) { ?>
<div id="tabctrl" style="display: none; width: <?php echo ceil( 994-( count( $tabblock )*19 )+10 ) ?>px; background-color: rgba( 255,255,255,0.6 ); padding: 10px 0 10px <?php echo ceil( ( 994-( count( $tabblock )*19 )+10 )/2 ) ?>px; position: absolute; bottom: 0; left: 0;">
<?php foreach( $tabblock as $key=>$value2 ) { ?>
<div id="tabb-cont-<?php echo $key ?>" class="tabb_tab <?php if( $key==$tabblock_init ) { ?> tabb_on<?php } else { ?> tabb_off<?php } ?>"> </div>
<?php } ?>
<?php echo $html_clear ?>
</div>
<?php } ?>
I’m… confused by your code. Or what you’re trying to achieve.
Your statement was
But i see no carousel, i see 2 divs that are both hidden.
Without seeing the javascript powering clicktrack(), i coulld make a wild stab at what it does, but the 32 and 12 mean nothing to me.
Sorry I’ve very new to this and didn’t realise you needed that. The JavaScript for that is:
function clicktrack( type,id,loc ) {
$.ajax({
async: false, type: "POST", url: "/ajax/clicktrack.php",
data: { type: type, id: id, loc: loc }
});
return true;
}
and the clicktrack.php file is:
if( empty( $_POST['id'] ) || !ctype_digit( $_POST['id'] ) ) {
echo "no id received";
exit();
} else {
if( $_POST['type']=="banner" ) {
usedb( $country_modules[$ccode2]['db_web'],"dbLinkInt" );
$query="update front_banner_pool set clicks=clicks+1 where id=".dbstr( $_POST['id'] );
dbupdate( $query,"dbLinkInt" );
echo "ok";
exit();
} elseif( $_POST['type']=="tab" ) {
usedb( $country_modules[$ccode2]['db_web'],"dbLinkInt" );
$query="update front_tabblock set clicks=clicks+1 where id=".dbstr( $_POST['id'] );
dbupdate( $query,"dbLinkInt" );
echo "ok";
exit();
} else {
echo "no valid type received";
exit();
}
}
This is the php that is used to generate the carousel:
[code]<?php if( $value==1 && isset( $pagecontrol[1] ) ) { ?>
<?php foreach( $tabblock as $key=>$value2 ) { ?>
<a onclick=“return clicktrack( ‘tab’,<?php echo $value2['id'] ?>,‘’ );” href=“<?php echo $value2['url'] ?>”<?php if( $value2['newwin']==1 ) { ?> target=“_blank”<?php } ?>>
![<?php echo htmldisplay( $value2['title'] ) ?>](/images/dynamic/<?php echo $value2[%27image%27] ?> "<?php echo htmldisplay( $value2['title'] ) ?>")
<?php } ?>
<?php if( count( $tabblock )>1 ) { ?>
<div id="tabctrl">
<?php foreach( $tabblock as $key=>$value2 ) { ?>
<div id="tabb-cont-<?php echo $key ?>" class="tabb_tab <?php if( $key==$tabblock_init ) { ?> tabb_on<?php } else { ?> tabb_off<?php } ?>"> </div>
<?php } ?>
<?php echo $html_clear ?>
</div>
<?php } ?>
</div>
</div>[/code]
Also the JavaScript for the ‘tabs’ is:
[code]
[/code]
An interesting splattering of code all about the place.
Okay… so somehow, you need to get the concept of ‘next’ and ‘previous’ ID’s into your buttons so that it knows what to move it to. Right now, the code you’ve posted hinges on the tab being clicked, which loads that tab into the screen via acttab() [Acttab() is the core mechanic of the ‘carousel’]. (This is the $(‘.tabb_tab’).click function)
clicktrack is a red herring for this at the moment; it’s just there to record what people click on (which… isnt as make-sense when you’re doing ‘next’ and ‘prev’, because… they arnt choosing what to see.)
In order to have buttons that rotate the currently displayed div, you’ll need javascript that actually changes the next/prev buttons’ code so that it reloads what is ‘next’ and ‘prev’ each time the button is clicked…that or render way too many buttons to be sensible.
I will think on this; in the meantime i’m going to have this post moved to Javascript, as that’s your core issue at the moment.
Moved to JavaScript and jQuery Tag added
Thank you, I did originally post in the JavaScript forum and was given part of a solution but was told to post in the php forum for help on how to limit it to just two buttons
Don’t feel bad about it, it happens all the time.
When a problem involves PHP using a Database to generate JavaScript that alters HTML and CSS where it starts and where it goes nobody knows.
All I really want to do is show just one right (odd tab) and one left arrow (even tab) and when somebody clicks one of them it changes the background image to either the next (right arrow) or previous (left arrow). I’ve tried so many ways of doing this but am not getting anywhere and would be extremely grateful if anybody has any suggestions.
I’m really having problems with this and didn’t know if anybody had any suggestions?
