I'm using the jQuery UI tabs widget and I am trying to show/hide images based on the active widget.
I have a two column layout; left column has the tabs widget with three tabs, right column has the image(s); the image in the right column should swap depending on the active tab. Looking at the api and other posts why wouldn't my code work? How would I do it?
jQuery(function($) {
//turn content into tabs
$( "#tabs" ).tabs();
var active2 = $( "#tabs-2" ).tabs( "option", "active" );
if (active2) {
$(".gala-img1").show();
$(".gala-img2").hide();
$(".gala-img3").hide();
}
});
You can try something like this in your JS :
$( "#tabs" ).tabs({
activate: function (event, ui) {
if (ui.newHeader[0]) {
$(".gala-img" + $(ui.newHeader[0]).attr('data-imgid')).show();
}
},
beforeActivate: function (event, ui) {
if (ui.oldHeader[0]) {
$(".gala-img" + $(ui.oldHeader[0]).attr('data-imgid')).hide();
}
}
});
And put in your tabs-headers the data-imgid of the image you want, like this :
<li data-imgid="X">....</li>
Related
I am using jquery tabs to display different content.
my functions looks like this:
$(function() {
$( "#tabs" ).tabs();
});
I have tried to make all the tabs the same height by doing it like this:
var heightStyle = $( ".tabs" ).tabs( "option", "heightStyle" );
// Setter
$( ".tabs" ).tabs( "option", "heightStyle", "fill" );
But this does not seem to work.
Is there another way to set the height to the highest tab?
D
Problem is in your selector, in the above code you are using $("#tabs").tabs(); accessing by id, in below code you are using $(".tabs") accessing by class.
Use this jquery and change class as per your wish
$(function(){
jQuery.fn.equalHeight = function () {
var tallest = 0;
this.each(function() {
tallest = ($(this).height() > tallest)? $(this).height() : tallest;
});
return this.height(tallest);
}
//Now you can call equalHeight
$(".equaltab").equalHeight();
});
Let's say I have two drop-zones one below the other and I have a draggable element whose height is equal to the sum of the heights of the drop-zones and the spacing between them. When I drag the element over both the zones and release the mouse, the element gets appended to the bottom drop-zone rather than the top drop zone. What I need to do is if I place the element over both the zones , I want the element to drop into the first zone and not the second zone.
This is what I have tried so far.
FIDDLE
and this is the script
<script type="text/javascript">
var display_under_drag = '';
$(document).ready(function(e) {
$( ".draggable_display" ).draggable({revert: "invalid"});
$( ".draggable_display" ).on( "dragstart", function( event, ui ) {
display_under_drag = $(this).attr('id');
$('.droppable_display').each(function(index, element) {
//$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
});
});
$( ".draggable_display" ).on( "drag", function( event, ui ) {
$(this).css('z-index','3001');
$('.droppable_display').each(function(index, element) {
if($("#"+display_under_drag).hitTestObject($(this)))
{
//console.log($('#'+display_under_drag).data().display_type);
//console.log($(this).data().dim);
console.log($(this).attr('id'));
$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
}
else
{
$(this).css({'border-width':'0px'});
}
});
});
$( ".droppable_display" ).droppable({greedy: true,tolerance: 'touch',accept: ".draggable_display"});
$( ".droppable_display" ).on( "drop", function( event, ui ) {
//alert(display_under_drag);
if($('#'+display_under_drag).data().display_type == '2x1')
{
$('#'+display_under_drag).appendTo($(this));
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px','z-index':'1000'});
});
$(this).css('z-index','3000');
//$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
$('#'+display_under_drag).appendTo($(this));
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px','z-index':'1000'});
});
$(this).css('z-index','3000');
$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
}
});
$( '.draggable_display' ).on('mouseup',function(e){
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px'});
});
});
});
</script>
Can someone help me out.
EDIT: There might multiple dropzones like this stacked next to each other. Like a 3x3 grid. In each case , the top dropzone should be the one which should accept the drop and not the bottom one. For instance , if I hover over column 1 => row 1 and row 2 , col1 row1 should be the dropzone. If I hover over column 1 => row 2 and row 3 , col1 row2 should be the dropzone.
It's for a game we are trying to develop.The drag and drop should work the way I have posted in the question.
I have accordion is collapsible and sortable.
Look here full code in action http://jsfiddle.net/wvtPw/
And this the JS code I'm using
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
The only problem when I'm trying to sort the expanded div group is big and hard to sort and when its the first div and you drag it, you can't see below it because if the height size
See this image below is example of collapsed div, see how easy to use and you can see below it easily.
So what I need to reach is when the user trying to sort expanded div, the flying div turn into collapsed shape like this
And when he drop the element just turn back to expanded like normal
I recommend doing the following:
$(function() {
var active = false,
sorting = false;
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true,
activate: function( event, ui){
//this fixes any problems with sorting if panel was open
//remove to see what I am talking about
if(sorting)
$(this).sortable("refresh");
}
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
start: function( event, ui ){
//change bool to true
sorting=true;
//find what tab is open, false if none
active = $(this).accordion( "option", "active" );
//possibly change animation here (to make the animation instant if you like)
$(this).accordion( "option", "animate", { easing: 'swing', duration: 0 } );
//close tab
$(this).accordion({ active:false });
},
stop: function( event, ui ) {
ui.item.children( "h3" ).triggerHandler( "focusout" );
//possibly change animation here; { } is default value
$(this).accordion( "option", "animate", { } );
//open previously active panel
$(this).accordion( "option", "active", active );
//change bool to false
sorting=false;
}
});
});
DEMO:
http://jsfiddle.net/m939m/2/
Please let me know if you have any questions! Cheers!
have a look at the documentation for sortable
look at the sortable event start( event, ui ). The logic would then check to see if the item is expanded. if so then close it. after sort expand it again
http://api.jqueryui.com/sortable/#event-start
Add the code below before the stop event on your sortable object.
over: function(event, ui) {
$('#accordion').accordion({active:false});
},
http://jsfiddle.net/wvtPw/8/
While this code works for the collapsing/expanding issue when sorting, the "activate"-function causes an issue regarding opening the first item in the accordion. Opening and closing the first item makes it impossible to reopen. Continuing with the next item, same thing happens. In the end the complete list of items will not be possible to expand.
Since this is more of a UX question, my suggestion is to offer a different UX. I would disable sorting by default and offer a button to toggle sorting on/off. When sorting is enabled, collapse all the fields and disable the accordion.
$( '.accordion-toggle' ).on('click', function() {
$( "#accordion" ).toggleClass( 'sorting' );
});
$( "#accordion:not(.sorting)" )
.accordion({
header: "> div > h3",
collapsible: true
});
$( "#accordion.sorting" )
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
EDIT: (2018-06-18)
I missed that this is jQuery UI. You probably want to use the enable/ disable features.
$( '.accordion-toggle' ).on( 'click', function() {
if ( $( '#accordion' ).hasClass( 'sorting' ) ) {
$( '#accordion' ).removeClass( 'sorting' )
.accordion( "enable" )
.sortable( "disable" );
} else {
$( '#accordion' ).addClass( 'sorting' )
.sortable( "enable" )
.accordion( "disable" )
I have an array of DOM elements. If the fourth one is clicked I want to hide the search box. If any of the other ones are clicked I want to show it. How would I do this? I currently have:
var app = {
config: {
tabs: [$("#tab1"), $("#tab2"), $("#tab3"), $("#tab4")],
search: $("#search")
},
showHideSearch: function () {
// Here I need to test if the fourth tab was clicked on then hide();
// else if tabs one through three were clicked show
}
}
app.showHideSearch();
Any help is appreciated. Thank you.
You don't need an array to do this.
$( "#tab4" ).click( function() {
app.config.search.hide();
// $( "#search" ).hide();
});
$( "#tab1, #tab2, #tab3" ).click( function() {
app.config.search.show();
// $( "#search" ).show();
});
$.each(app.config.tabs, function(i, v) {
v.bind('click', function(){
$('#searchbox').show();
if(i==3)
$('#searchbox').hide();
});
});
I have a loading animation which I initially hide in my application.js file:
$('#loading_field').hide();
I have an autocomplete field, and I want the animation to appear when the user starts typing, and for it to disappear when the autocomplete suggestion results appear. Below is my jquery code for the jquery ui autocomplete plugin:
$(".showable_field").autocomplete({
minLength: 1,
source: '/followers.json',
focus: function(event, ui) {
$('.showable_field').val(ui.item.user.name);
return false;
},
select: function(event, ui) {
var video_id = $('#video_id_field').val();
var user_id = ui.item.user.id;
$.post("/showable_videos.js", {video: video_id, user: user_id});
$(':input','#new_showable_video').not(':button, :submit, :reset, :hidden').val('');
return false;
}
});
var obj = $(".showable_field").data('autocomplete');
obj && (obj._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.user.name + "</a>" )
.appendTo( ul );
});
Where should I show and hide the animation?
Well, jQuery UI automatically adds the class 'ui-autocomplete-loading' to your input when it is loading remote data, so the absolute easiest way to do this is to simply put an animated GIF in as the background image on your input when that class is present.
That's what they do in the remote-loaded example on jQueryUI.com (note that you have to type two more more characters to kick off the ajax call in this example).
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
Because you're using AJAX to load the suggestions I think this should work for you:
$('#loading_field').ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});