I've got a slider that's built with jQuery UI Tabs:
<section id="featured">
<aside id="sidebar">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected">
[Tab Heading]
</li>
<li class="ui-tabs-nav-item">
[Tab Heading]
</li>
<li class="ui-tabs-nav-item">
[Tab Heading]
</li>
<li class="ui-tabs-nav-item">
[Tab Heading]
</li>
</ul>
</aside>
<section id="rotate_me">
<div class="featured_panel" id="panel_1">
<p>[Tab Content]</p>
</div>
<div class="featured_panel ui-tabs-hide" id="panel_2">
<p>[Tab Content]</p>
</div>
<div class="featured_panel ui-tabs-hide" id="panel_3">
<p>[Tab Content]</p>
</div>
<div class="featured_panel ui-tabs-hide" id="panel_4">
<p>[Tab Content]</p>
</div>
</section>
<script>$('#featured').tabs('rotate', 4000, false);</script>
The client wants the tabs to rotate through just the first and second tabs.
I added a function to the show event:
.tabs({
show: function(event, ui) {
var selected = $( ".selector" ).tabs( "option", "selected" );
if (selected == 3) {
$( "#featured" ).tabs( "option", "selected", 1 );
}
}
})
but this did nothing.
Any idea how I could make the slider rotate through just the first and second tab?
The selected option only applies to initialization. You could simply trigger a click on the first tab.
$("#featured li.ui-tabs-nav-item:first").trigger("click");
Related
I have an Owl Carousel inside a tabpanel like this:
<div role="tabpanel" class="tab-pane fade" id="tabAcessorios">
<div id="acessoriosCompativeis8x" class="featured-carousel brand-dot">
//itens here
</div>
</div>
When i click the link to display the tab, the carousel is broken:
I tried to trigger the refresh like this:
$("#acessoriosCompativeis8x").trigger("refresh.owl.carousel");
But it didn't work. What am i missing here?
Here's the nav definition:
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active">FOCO/PRÉ-PAGO</li>
<li role="presentation">INDIVIDUAL</li>
<li role="presentation">FAMÍLIA</li>
<li role="presentation">CONTROLE</li>
#if (Model.AcessoriosCompativeis != null)
{
<li role="presentation">Acessórios Compatíveis</li>
}
</ul>
And here's the carousel definition:
$('#acessoriosCompativeis8x').owlCarousel({
items: 2,
lazyLoad: true,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 5000
});
I managed to solve the issue by destroying and re-creating the carousel when the panel appears:
$('#linkAcessorios').on('shown.bs.tab', function (e) {
var owl = $('#owl-example').owlCarousel(opcoes);
owl.trigger('destroy.owl.carousel');
owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
owl.owlCarousel(options);
});
I want to use autocomplete and popover in one input tag.
But autocomplete can't display , I see google chrome developer tools, autocomplete is work, just can't display . I don't know how to do .
HTML code
<span class="form-labelTitle img-searchForm02">place</span>
<input class="auto-input" placeholder="city" data-toggle="popover" data-placement="bottom">
<div class="leave-btn"></div>
<div class="autocomplete-div auto1"></div>
<div id="popover-content" class="hide">
<div role="tabpanel">
<ul class="nav nav-tabs arrival-tabs" role="tablist" id="myTab">
<li class="active" role="presentation" ><a href='#JPN' role='tab' data-toggle='tab'>japan</a></li>
<li role="presentation" ><a href='#TPE' role='tab' data-toggle='tab'>taiwan</a></li>
</ul>
<div class="tab-content">
<div class='tab-pane active city' id='JPN'>
<span>Tokyo</span>
<span>okinawa</span>
</div>
<div class='tab-pane' id='TPE'>
<span>taipei</span>
</div>
JS code
$(function(){
$('.auto-input').popover({
'html': true,
'content': function () {
return $('#popover-content').html();
}
});
$('.auto-input').autocomplete({
open:function(event, ui){
$(this).popover('hide');
},
source: [
"tokyo",
"okinawa",
"taipei
],
appendTo:($('.auto1')),
});
});
I am using a jquery-ui tab control. On the default tab I have built a hyperlink. The href renders but the link is not clickable.
I have a function already to set the active tab.
What do I need to do to make the link active?
<script>
$(function () {
$("#tabs").tabs({
activate: function() {
var selectedTab = $('#tabs').tabs('option', 'active');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
active: <%= hdnSelectedTab.Value %>
});
});
</script>
<div id="tabs">
<ul>
<li>Status</li>
<li>Documents</li>
<li>Notes</li>
</ul>
<div id="tabs-1">
<div id="label">
<p>Current Status:</p>
<p><dx:ASPxLabel ID="Name" CssClass="detailheading" runat="server"></dx:ASPxLabel></p>
<p><span><dx:ASPxLabel ID="StoreName" CssClass="detailheading" runat="server"></dx:ASPxLabel>
<a id="StoreURL" runat="server" target="_blank" >Visit Website</a>
</span>
</p>
I want to make the div - "small_box" in the first item of sortable list to be always not visible. I tried with jquery first() but that works only once and only for one and same element whenever it's dragged. How can i simple make it back to be visible when I dragg it into other than first place and then make invisible "small_box" for the item which jumps in the first place?
I put the live example here: http://jsfiddle.net/kriskasper/3knnn/
<ul id="sortable" class='connectedSortable'>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
</ul>
And here is jquery ui function:
$(function() {
$( "#sortable" ).sortable({
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
opacity: 0.6,
revert: 70
});
});
Please help.
You should play with the sortable plugin events. The sortreceive event is fired when the connected element receives an item. My guess would be something like ...
$("#sortable").bind("sortreceive", function(event, ui) {
$(".connectedSortable .small_box").show();
$("#sortable .small_box").first().hide();
});
My question is similar, but different from jquery-hover-menu-when-hovering-over-child-menu-disappears.
I originally had the hover event on the li.item, which was a little quirky, but did what i needed it to do. I switched the hover to the span so that the event would fire on the text block, rather than the list block, which expands the full width of the list.
The effect I'm trying to achieve is when hovering over ul.sub. I'd like it to continue with the animation in queue from span.text's hover, which is displaying it, but also keep it open.
What is happening is that the mouse is leaving the span, so the li.item is firing its mouseout portion of the trigger.
jsFiddle Page
HTML
<ul id="main">
<li class="head">Title Bar</li>
<li class="item odd">
<span class="text">A</span>
<ul class="sub">
<li>1</li>
<li>2</li>
</ul>
</li>
<li class="item even">
<span class="text">B</span>
<ul class="sub">
<li>3</li>
<li>4</li>
</ul>
</li>
<li class="item odd">
<span class="text">C</span>
<ul class="sub">
<li>5</li>
<li>6</li>
</ul>
</li>
<li class="item even">
<span class="text">D</span>
<ul class="sub">
<li>7</li>
<li>8</li>
</ul>
</li>
</ul>
CSS
/* colors used are not for production; they are
used only to enhance the example's visual distinction */
#main{width:10em;}
.head,.item{border:1px solid black;padding:.5em;}
.head{font-weight:bold; background:#336; color:#fff; cursor:pointer;}
.item{background:#f90;}
.sub{display:none;}
.sub li{padding-left:1em;}
.text,.sub{cursor:pointer;}
JavaScript
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(function(){
$(this).siblings().stop(true,true).toggle('slow');
});
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Edit:
I think something along these lines is what I need, however the animation is refired when going from the sub to the span.
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(
function(){$(this).siblings().stop(false,true).show('slow');}
,function(){$(this).siblings().stop(true,true).hide('slow');}
);
$('#main li.item ul.sub').hover(
function(){$(this).stop(false,true).show();}
,function(){$(this).stop(false,true).hide('slow');}
);
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Split the hover behavior into its two constituents, mouseenter and mouseleave. Also split toggle() into show() and hide(). Bind mouseenter to the span.text and mouseleave to the li.item:
$(document).ready(function() {
// specific here because of other divs/list items
$('#main li.item span.text').mouseenter(function() {
$(this).siblings().stop(true, true).show('slow');
});
$('#main li.item').mouseleave(function() {
$(this).children("ul").stop(true, true).hide('slow');
});
$('li.head').hover(function() {
$(this).parent().find('ul.sub').stop(true, true).toggle('slow');
});
});
That way, the hover is not triggered by whitespace, which is what you want.