Just randomly found the most apt bit of information in the
documentation for the jQuery UI tabs:
"Why does...
[edit]
...my slider, Google Map, sIFR etc. not work when placed in a hidden
(inactive) tab?
Any component that requires some dimensional computation for its
initialization won't work in a hidden tab, because the tab panel
itself is hidden via display: none so that any elements inside won't
report their actual width and height (0 in most browsers).
There's an easy workaround. Use the off-left technique for hiding
inactive tab panels. E.g. in your style sheet replace the rule for the
class selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize the map once the tab is displayed
like this:
$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() will call Google Maps' checkResize() on the particular
map."
At least now I know it's not an instantiation issue, and it's to do
with my other click'able tabs being hidden (hence the content,
including the sliding content, is hidden too - thus not displaying as
it should). HOWEVER, this work around doesn't appear to work, so I
will persevere.
If anyone else has stumbled upon on the same problem and found a
suitable solution please let me know!
Thanks,
L
On Apr 21, 11:06 pm, ldexterldesign <m...@ldexterldesign.co.uk> wrote:
> Hey guys, no point going into detail yet, but both pieces of code work
> independently here, it's just when they're put together it messes
> things up. I assume it's an instantiation issue.
>
> Would anyone care to help me experiment? The two function are below:
>
> <!-- display footer logo tabs -->
> <link type="text/css" href="<?php bloginfo
> ('stylesheet_directory'); ?>/scripts/javascript/css/smoothness/jquery-
> ui-1.7.1.custom.css" rel="stylesheet" />
> <script type="text/javascript">
> $(function() {
> $('#tabs').tabs();
> });
> </script>
>
> <!-- logo scroller thanks
> to:http://logicbox.net/jquery/simplyscroll/horizontal.html-->
> <script type="text/javascript" src="<?php bloginfo
> ('stylesheet_directory'); ?>/scripts/javascript/simplyScroll/
> jquery.simplyscroll-1.0.3.js"></script>
> <link rel="stylesheet" href="<?php bloginfo
> ('stylesheet_directory'); ?>/scripts/javascript/simplyScroll/
> jquery.simplyscroll-1.0.3.css" media="all"
> type="text/css">
>
> <script type="text/javascript">
> (function($) {
> $(function() {
> //on DOM ready
> $('#accreditors').simplyScroll({
> autoMode: 'loop',
> });
> });
> })(jQuery);
> </script>
>
> Cheers guys,
> L
