ProLoser/AnythingSlider — Issue #203: appendControlsTo: navbar problems
Author: tracco
Created: 2011-10-26 09:18:54+00:00
State: open

I am a total newbie and do not understand javascript so please forgive my ignorance. I am trying to use the AnythingSlider for my new site – temporarily here: http://www.redbaydesign.co.uk/new/index3.html

It’s a great slider and everything works ok but I am having problems getting the external navbar to display properly. I want to confine it to an area of 740px x 28px with only about 6 or 6 tabs showing

It is currently showing all the tabs in one row with the forwardText and backText buttons showing above and below (making 3 rows) also from showing the 6th slide upwards the whole thing moves over to the left.

Please can anyone advise what I am doing wrong? Or, if I am asking in the wrong place please forgive me and point me to where I can get some advise.

My Code:
Script:

$(function(){

$('#slider').anythingSlider({
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
navigationSize : 5, // Set this to the maximum number of visible navigation tabs; false to disable
buildNavigation : true,
enableNavigation : true,
appendControlsTo: $('#nav'),
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Welcome', 'About Us', 'Contact', 'Services', 'Projects', 'Commercial', 'Private', 'Residential', 'Leisure', 'Play', 'Thornhill', 'Roof Garden'][index - 1];
},
onSlideComplete: function(slider) {
// keep the current navigation tab in view
slider.navWindow( slider.currentPage );
},
});

});

CSS:

#nav li { padding: 4px; display: inline; }

#nav a {
width: 150px;
height: 35px;
background: #cbe3e6;
padding: 8px;
text-align: center;
text-decoration: none;
color: #fff;
list-style-type: none;
}
#nav a:hover { background: #a2b3a1; }
#nav a.cur { background: #0080ff; }

HTML

table width="1024" border="0" cellspacing="0" cellpadding="0" align="right">
tr>
td width="284">
td width="740" height="28px">
!-- TemplateBeginEditable name="nav" -->
div id="nav">
/div>
!-- TemplateEndEditable -->
/td>
/tr>
/table>

Thank you.