I've got a function worked out that creates a new query ui tab panel when a user clicks a button. It also creates a new tab with a close button in it, like so:
$(function newTab() {
var $tabs = $('#nav-tabs').tabs();
$('.add-tab').click(function (e) {
e.preventDefault()
var tabName = $(this).text(),
tabLink = $(this).attr('href'),
tabNumber = -1;
$tabs.find('.nav-tab-menu li a').each(function (i) {
if ($(this).text() == tabName) {
tabNumber = i;
}
});
if (tabNumber >= 0) {
$tabs.tabs('option', 'active', tabNumber)
} else {
$("<li><a href=" + tabLink + " class='ui-icon-tab-add'>" + tabName + "</a><span class='ui-icon-close' role='presentation'><span class='sr'>Remove Tab</span></span></li>")
.appendTo(".nav-tab-menu");
$("#nav-tabs").tabs("refresh");
$('#nav-tabs').tabs('option', 'active', -1);
}
return false
})
});
It works great, but this client is a total pain in the ass, and one close button isn't good enough for them - they also want one in the newly created panel as well. I've tried cloning the button and appending it to the panel, but it doesn't seem to work. Any ideas? I should mention that the content of the current tab is replaced when the user clicks a link, so the button probably needs to be inserted before the active tab panel, rather than inside it so it doesn't get removed when the content is updated.
Related
I have an issue where I wish to re-style an item inside a selectmenu dropdown list when a new item is dynamically changed by other javascript.
The change event works when I pick the item from the dropdown list by clicking a desired option, but not when I do so via javascript (see last 2 lines).
The text value changes from "Black" to "White", but the color square still shows the old css.
$("#original-native-dropdown")
.selectmenu({
create: function (event, ui) {
var widget = $(this).selectmenu("widget");
// pass in style from a <span> inside the native <option> tags used in the selectmenu
const span = $('<span id="' + this.id + 'selected" class="color-option-selected"> ').html(" ").appendTo(widget);
const styleString = $(this).parent().find("select > option:first > span:first").data("style");
span.attr("style", styleString);
},
change: function (event, ui) {
// works when the user clicks an item in the selection dropdown but not from the outside.
$("#" + this.id + 'selected').parent().children(":last").attr("style", ui.item.element.children(":first").data("style"));
}
})
.selectmenu("menuWidget")
.addClass("ui-menu-icons color-option");
$("#original-native-dropdown").val("White");
$("#original-native-dropdown").selectmenu("refresh").trigger("selectmenuchange");
The color square changes only when user clicks.
The color square is not restyled when selection is changed via javascript.
I have a CustomizableUI.jsm button i add to the toolbar. On click of this it opens a panel which has a chrome page loaded.
I want all windows to open this same panel. So my thought was to add the panel to Services.appShell.hiddenDOMWindow and then open it anchored to the the CustomizableUI.jsm button.
However I'm having trouble adding the panel to the hidddenDOMWindow.
This code works fine from scratchpad if you make the first line be var win = window. But if you make it be var win = Services.appShell.hiddenDOMWindow it has trouble appending the panel to the popupset. So weird.
Code here is the appShell hidden window code. If you make it var win= window it works fine:
var win = window; //Services.appShell.hiddenDOMWindow;
var panel = win.document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul','panel');
var props = {
type: 'arrow',
style: 'width:300px;height:100px;'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
var popupset = win.document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul','popupset');
popupset.appendChild(panel);
win.document.documentElement.appendChild(popupset);
panel.addEventListener('popuphiding', function (e) {
e.preventDefault();
e.stopPropagation();
//panel.removeEventListener('popuphiding', arguments.callee, false); //if dont have this then cant do hidepopup after animation as hiding will be prevented
panel.addEventListener('transitionend', function () {
panel.hidePopup(); //just hide it, if want this then comment out line 19 also uncomment line 16
//panel.parentNode.removeChild(panel); //remove it from dom //if want this then comment out line 18
}, false);
panel.ownerDocument.getAnonymousNodes(panel)[0].setAttribute('style', 'transform:translate(0,-50px);opacity:0.9;transition: transform 0.2s ease-in, opacity 0.15s ease-in');
}, false);
panel.openPopup(window.document.documentElement, 'overlap', 100, 100);
I am trying to run jQuery code on elements contained within a jQuery tab which is not selected. If i quickly click the tab before the Ajax loading has completed it works, but if i leave it running without being selected the code will not be executed.
As ou can see below, the tab i want to load data into were not defined from the beginning, it was created when the user clicked a button.
The functionality i want to achieve is tabs, where the user will search for X in the start tab, then the new tab is created, content is loaded in the background (needs jQuery code for grids and format). Then the user can click the tab and see the results.
jQuery 1.10
jQuery-UI 1.10
Example:
<script>
$(document).ready(function(){
var myindex = 1;
$("#startsearch").click(function() {
search = escape(($("#search").val()));
searchdate = ($.datepicker.formatDate('yy-mm-dd', new Date()));
var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
// Add new tab
newhtml = "<li id='henrik_tab_" + myindex + "Selector'><a href='#henrik_tab_" + myindex + "'>Search: " + searchdate + "</a></li>";
newhtml2 = "<div id='henrik_tab_" + myindex + "'></div>";
ul.append(newhtml);
tabs.append(newhtml2);
tabs.tabs( "refresh" );
// Load data into tab
$( "#henrik_tab_" + myindex).load("dosearch.php?data=" + search, function(responseTxt,statusTxt,xhr) {
if(statusTxt=="success") {
!! DOING STUFF WITH ELEMENTS CONTAINED IN THE NEW TAB HERE !!
}
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
// increse the counter for next tab
myindex++;
});
$( "#tabs" ).tabs();
});
</script>
Any help would be much appreciated.
Try change code
tabs.append(newhtml2);
to
$( "#tabs" ).append(newhtml2);
If not fix, would like show the code should be executed but not.
I am creating a jQuery menubar, and everything is looking good but I get a weird effect when I mouse over a top level menu item that has a submenu where the first item also has a sub menu. If I mouse in and out (moving left and right over the View menu item) like 20 times, I will start to see the View>Encoding sub-submenu moving more and more to the right.
I can recreate the issue with a modified version of the menubar demo example. I am on firefox 20.0.1.
See here: http://jsfiddle.net/Njjgm/
I figure it is finding the right edge of the subsub menu and then setting the new left edge of the same subsub menu to that position... So if I slow down the opening or fix the positioning math then I shouldn't have that bug.
I'm looking in the jquery.ui.menubar.js file to see if I can adjust the setTimeouts, or fix the subsub menu positioning but not having any luck.
I'm looking at this (from jquery.ui.menubar.js line 262):
__applyMouseBehaviorForSubmenuHavingMenuItem: function (input, menubar) {
var menu = input.next( menubar.options.menuElement ),
mouseBehaviorCallback = function( event ) {
// ignore triggered focus event
if ( event.type === "focus" && !event.originalEvent ) {
return;
}
if (event.type === "mouseenter") {
this.element.find(":focus").focusout();
if (this.stashedOpenMenu) {
this._open( event, menu);
}
this.stashedOpenMenu = undefined;
}
if ((this.open && event.type === "mouseenter")
|| this.options.autoExpand) {
if (this.options.autoExpand) {
clearTimeout( this.closeTimer );
}
this._open( event, menu );
}
};
And also at this: (from jquery.ui.menubar.js line 68)
focusin: function( event ) {
clearTimeout( menubar.closeTimer );
},
focusout: function( event ) {
menubar.closeTimer = setTimeout (function() {
menubar._close( event );
}, 150 );
},
"mouseleave .ui-menubar-item": function( event ) {
if ( menubar.options.autoExpand ) {
menubar.closeTimer = setTimeout( function() {
menubar._close( event );
}, 150 );
}
},
"mouseenter .ui-menubar-item": function( event ) {
clearTimeout( menubar.closeTimer );
}
Has anyone with jquery ui menubar experience seen and fixed this before? Does anyone know a fix with setTimeout? HoverIntent seems to use the same set/clearTimeout technique as menubar, so I don't want to rip out all the logic from menubar to add that in. Any suggestions welcome. Thanks.
Well I found a work around to the issue, though I didn't fix the buggy positioning (but I think I found where it could be fixed).
The code by default selects the first list element in a opened menu, and if that element has a menu too, that menu also opens. I took out the code that puts focus on the first child element (why does it even need to do that?)
from jquery.ui.menubar.js line 451
this.active = menu
.show()
.position($.extend({
of: button
}, this.options.position));
//.removeAttr("aria-hidden")
//.attr("aria-expanded", "true")
//.menu("focus", event, menu.children(".ui-menu-item").first() )
// TODO need a comment here why both events are triggered
//.focus()
//.focusin();
And Presto-Changeo! No more phantom drop down menus... I could have tried to figure out the menu.position but this worked for me.
I am trying to drag an element without keeping the mouse button down.
The behavior I would like is :
I click on a draggable item
Drag my item without keeping mouse left click down : just follow the mouse as a cursor
I click on a droppable container to confirm and append my item
I am able to simulate this behavior if I add an alert box durring the start event.
start : function(){
alert('test')
},
Here is the fiddle : http://jsfiddle.net/QvRjL/103/
How is it possible to code this behavior without the alert box?
Here is a good solution about this problem : Trigger Click-and-Hold Event
http://jsfiddle.net/VXbpu/1/
http://jsfiddle.net/vPruR/70/
var click = false;
$(document).bind('mousemove', function (e) {
if (click == true) {
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
}
});
$('#your_div_id').click(function() {
click = !click;
return false;
});
$('html').click(function() {
click = false;
});