Databases
StackOverflow2013
Postsdbo
POHow do i use animate() to slide (left-wards or right-wards) the jQuery tabs navigation menu?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do i use animate() to slide (left-wards or right-wards) the jQuery tabs navigation menu?
    text
    copied!<p>I have a problem. I would like to use the animate() function to slide the navigation menu present jQuery tabs.</p> <p>I am using a fixed width style for the tabs container and the no. of tabs is more than what could be accommodated - hence the extra tabs overflow onto the next line. </p> <p>I would like to put two arrow buttons at both ends of the tab. So that when the user clicks on the button, the navigation menu slides in the respective direction. </p> <p>I am using a theme that i made using jQuery UI's theme roller feature. The css for tabs uses relative positioning and animate() only works if absolute positioning is used. The css for jQuery tabs is :</p> <pre><code> .ui-tabs { padding: .2em; zoom: 1; } .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .1em .1em 0; overflow: hidden; max-height: 25px; } .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .1em -1px 0; padding: 0; } .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .2em 0.7em; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; } .ui-tabs .ui-tabs-hide { display: none !important; } </code></pre> <p>So can anyone please suggest awork around to get this working properly?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload