Rendering a Kendo Menu from an Ext JS Panel - javascript

I'm combining ExtJS and Kendo UI - I realise this I'm off the reservation here ;)
I'm rendering a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel
Fiddle: http://jsfiddle.net/blackfrancis75/5e6Lgtaj/1/
The problem is that the drop-down items (on hover) get drawn only within the bounds of the Ext JS Panel. Is there a way to have the drop down items show 'in front' of everything (I tried changing some of the classes z-order)?

This is not z-index issue. It is parent overflow: hidden issue. If you have relatve container with overflow: hidden CSS property it will always work like that. Simple solution for kendo menu right now is to set all menu relative parents overflow to visible:
.x-panel,
.x-panel-body {
overflow: visible;
}
Like here:
http://jsfiddle.net/5e6Lgtaj/2/
But you must be beware that if you want to use it as scrollbars in them or actually hide overflow it will be a problem.
Other option would be append menu to body element, but you will face more problem then: like loose styling (cause it is moved from initial container with important classes), javascript functions to keep it in correct position and it will be more problems then it is worth.
This is first step how it could looks like:
http://jsfiddle.net/5e6Lgtaj/3/

Related

jQuery UI Draggable with Bootstrap layout

jQuery draggable elements goes under the bootstrap styled columns (col-*). For example, I have two .row each divided into 4 columns (with col-md-3). I am trying to get the first row columns to be draggable onto 2nd row droppable columns.
But when I drag 'Drag #' elements, they always go under the 'droppable' elements. I am not able to get drop working with Bootstrap styles.
Can someone explain why this is happening and provide a solution?
Bootply Exmple: http://www.bootply.com/THBX5GJnCn
Is seems that class .ui-draggable-dragging has lower `z-index' property than others
Adding sth like here:
.ui-draggable-dragging {
z-index: 10000!important
}
Here is jsfiddle which works: http://www.bootply.com/P0Okde8ZmV
Code above will fix the problem. Of course my 10000 value & !important are here just to show You solution. It's not so pretty to use !important each time, You can't get the clue of case :)

jQuery Multisortable with CustomScrollBar

I am using the mulisortable jquery plugin (github.com/shvetsgroup/jquery.multisortable) along with mcustomscrollbar plugin (manos.malihu.gr/jquery-custom-content-scroller), and I am having trouble displaying the dragged items "overtop" of the customscrollbar containers.
As an example, I have 4 separate containers that utilize the custom scrollbar, and inside each of these containers I have various lists that are connected by the multisortable plugin. I am able to drag selected items from a list in one container to a list in another container, however since the custom scrollbar adds overflow:hidden to its container, the dragged items go "behind" the lists/containers.
My question is: how do I make the dragged items appear in front of the containers
Things I've Tried:
I have removed the overflow:hidden properties from the scrollbar, which does what I want, but then when scrolling, the scrolled content appears outside of the container, which is not good.
I have tried using the helper:"clone" setting in the multisortable options, but this seems to only clone one item (instead of multiple) and my originating list css does unexpected things.
I have also tried setting the z-index on those items which are selected, however this also doesn't seem to help.
Here is my jsfiddle: http://jsfiddle.net/ML49V/12/
If anyone has come across this before and has any suggestions, I would appreciate it.
Thanks
After doing some searching I found the answer. If you add the lines below to the mulitsortable options, it works as intended.
The working jsfiddle is here: http://jsfiddle.net/ML49V/13/
stop: function (e, ui) {
var elements = ui.item.data('multidrag');
ui.item.after(elements).remove();
},
helper: function (e, item) {
if (!item.hasClass("selected")) {
item.addClass("selected").siblings().removeClass("selected");
}
var elements = item.parent().children(".selected").clone();
item.data('multidrag', elements).siblings(".selected").remove();
var helper = $('<li/>').css('list-style', 'none');
helper.height('auto');
return helper.append(elements);
},

Wootheme 'Function' mobile select box nav breaks desktop dropdown nav

I'm using the Wootheme called Function, which has mobile styling and navigation built in. There is a select box for mobile screen widths that is added in place of the top navigation, but I'm having issues with it.
First, the select box is added to div#top at 781px screen width rather than the standard switch to mobile at widths less than 768px.
Second, and the main issue, is that the initiation of the select box adds inline styling of overflow: hidden; to the original nav ul, breaking the drop-down functionality of that menu once the screen width is increased again.
Ideally, I'd like the select box to not show up until less than 768px screen width and to remove the inline styling that breaks the original navigation drop-down. I've found references to the mobile menu in general.js and third-party.js files. Nothing looks incorrect, but the mobile menu plugin is minified, making it difficult to tell what's going on.
Edit: originally included link to problem site, but now it's fixed. It's seems like it was a problem with the plugin included below.
I'm not sure how helpful this is, but the minified javascript plugin is below:
(function(a){a.uniform={options:{selectClass:"selector",radioClass:"radio",checkboxClass:"checker",fileClass:"uploader",filenameClass:"filename",fileBtnClass:"action",fileDefaultText:"No file selected",fileBtnText:"Choose File",checkedClass:"checked",focusClass:"focus",disabledClass:"disabled",buttonClass:"button",activeClass:"active",hoverClass:"hover",useID:true,idPrefix:"uniform",resetSelector:false,autoHide:true},elements:[]};if(a.browser.msie&&a.browser.version<7){a.support.selectOpacity=false}else{a.support.selectOpacity=true}a.fn.uniform=function(k){k=a.extend(a.uniform.options,k);var d=this;if(k.resetSelector!=false){a(k.resetSelector).mouseup(function(){function l(){a.uniform.update(d)}setTimeout(l,10)})}function j(l){$el=a(l);$el.addClass($el.attr("type"));b(l)}function g(l){a(l).addClass("uniform");b(l)}function i(o){var m=a(o);var p=a("<div>"),l=a("<span>");p.addClass(k.buttonClass);if(k.useID&&m.attr("id")!=""){p.attr("id",k.idPrefix+"-"+m.attr("id"))}var n;if(m.is("a")||m.is("button")){n=m.text()}else{if(m.is(":submit")||m.is(":reset")||m.is("input[type=button]")){n=m.attr("value")}}n=n==""?m.is(":reset")?"Reset":"Submit":n;l.html(n);m.css("opacity",0);m.wrap(p);m.wrap(l);p=m.closest("div");l=m.closest("span");if(m.is(":disabled")){p.addClass(k.disabledClass)}p.bind({"mouseenter.uniform":function(){p.addClass(k.hoverClass)},"mouseleave.uniform":function(){p.removeClass(k.hoverClass);p.removeClass(k.activeClass)},"mousedown.uniform touchbegin.uniform":function(){p.addClass(k.activeClass)},"mouseup.uniform touchend.uniform":function(){p.removeClass(k.activeClass)},"click.uniform touchend.uniform":function(r){if(a(r.target).is("span")||a(r.target).is("div")){if(o[0].dispatchEvent){var q=document.createEvent("MouseEvents");q.initEvent("click",true,true);o[0].dispatchEvent(q)}else{o[0].click()}}}});o.bind({"focus.uniform":function(){p.addClass(k.focusClass)},"blur.uniform":function(){p.removeClass(k.focusClass)}});a.uniform.noSelect(p);b(o)}function e(o){var m=a(o);var p=a("<div />"),l=a("<span />");if(!m.css("display")=="none"&&k.autoHide){p.hide()}p.addClass(k.selectClass);if(k.useID&&o.attr("id")!=""){p.attr("id",k.idPrefix+"-"+o.attr("id"))}var n=o.find(":selected:first");if(n.length==0){n=o.find("option:first")}l.html(n.html());o.css("opacity",0);o.wrap(p);o.before(l);p=o.parent("div");l=o.siblings("span");o.bind({"change.uniform":function(){l.text(o.find(":selected").text());p.removeClass(k.activeClass)},"focus.uniform":function(){p.addClass(k.focusClass)},"blur.uniform":function(){p.removeClass(k.focusClass);p.removeClass(k.activeClass)},"mousedown.uniform touchbegin.uniform":function(){p.addClass(k.activeClass)},"mouseup.uniform touchend.uniform":function(){p.removeClass(k.activeClass)},"click.uniform touchend.uniform":function(){p.removeClass(k.activeClass)},"mouseenter.uniform":function(){p.addClass(k.hoverClass)},"mouseleave.uniform":function(){p.removeClass(k.hoverClass);p.removeClass(k.activeClass)},"keyup.uniform":function(){l.text(o.find(":selected").html())}});if(a(o).attr("disabled")){p.addClass(k.disabledClass)}a.uniform.noSelect(l);b(o)}function f(n){var m=a(n);var o=a("<div />"),l=a("<span />");if(!m.css("display")=="none"&&k.autoHide){o.hide()}o.addClass(k.checkboxClass);if(k.useID&&n.attr("id")!=""){o.attr("id",k.idPrefix+"-"+n.attr("id"))}a(n).wrap(o);a(n).wrap(l);l=n.parent();o=l.parent();a(n).css("opacity",0).bind({"focus.uniform":function(){o.addClass(k.focusClass)},"blur.uniform":function(){o.removeClass(k.focusClass)},"click.uniform touchend.uniform":function(){if(!a(n).attr("checked")){l.removeClass(k.checkedClass)}else{l.addClass(k.checkedClass)}},"mousedown.uniform touchbegin.uniform":function(){o.addClass(k.activeClass)},"mouseup.uniform touchend.uniform":function(){o.removeClass(k.activeClass)},"mouseenter.uniform":function(){o.addClass(k.hoverClass)},"mouseleave.uniform":function(){o.removeClass(k.hoverClass);o.removeClass(k.activeClass)}});if(a(n).attr("checked")){l.addClass(k.checkedClass)}if(a(n).attr("disabled")){o.addClass(k.disabledClass)}b(n)}function c(n){var m=a(n);var o=a("<div />"),l=a("<span />");if(!m.css("display")=="none"&&k.autoHide){o.hide()}o.addClass(k.radioClass);if(k.useID&&n.attr("id")!=""){o.attr("id",k.idPrefix+"-"+n.attr("id"))}a(n).wrap(o);a(n).wrap(l);l=n.parent();o=l.parent();a(n).css("opacity",0).bind({"focus.uniform":function(){o.addClass(k.focusClass)},"blur.uniform":function(){o.removeClass(k.focusClass)},"click.uniform touchend.uniform":function(){if(!a(n).attr("checked")){l.removeClass(k.checkedClass)}else{var p=k.radioClass.split(" ")[0];a("."+p+" span."+k.checkedClass+":has([name='"+a(n).attr("name")+"'])").removeClass(k.checkedClass);l.addClass(k.checkedClass)}},"mousedown.uniform touchend.uniform":function(){if(!a(n).is(":disabled")){o.addClass(k.activeClass)}},"mouseup.uniform touchbegin.uniform":function(){o.removeClass(k.activeClass)},"mouseenter.uniform touchend.uniform":function(){o.addClass(k.hoverClass)},"mouseleave.uniform":function(){o.removeClass(k.hoverClass);o.removeClass(k.activeClass)}});if(a(n).attr("checked")){l.addClass(k.checkedClass)}if(a(n).attr("disabled")){o.addClass(k.disabledClass)}b(n)}function h(q){var o=a(q);var r=a("<div />"),p=a("<span>"+k.fileDefaultText+"</span>"),m=a("<span>"+k.fileBtnText+"</span>");if(!o.css("display")=="none"&&k.autoHide){r.hide()}r.addClass(k.fileClass);p.addClass(k.filenameClass);m.addClass(k.fileBtnClass);if(k.useID&&o.attr("id")!=""){r.attr("id",k.idPrefix+"-"+o.attr("id"))}o.wrap(r);o.after(m);o.after(p);r=o.closest("div");p=o.siblings("."+k.filenameClass);m=o.siblings("."+k.fileBtnClass);if(!o.attr("size")){var l=r.width();o.attr("size",l/10)}var n=function(){var s=o.val();if(s===""){s=k.fileDefaultText}else{s=s.split(/[\/\\]+/);s=s[(s.length-1)]}p.text(s)};n();o.css("opacity",0).bind({"focus.uniform":function(){r.addClass(k.focusClass)},"blur.uniform":function(){r.removeClass(k.focusClass)},"mousedown.uniform":function(){if(!a(q).is(":disabled")){r.addClass(k.activeClass)}},"mouseup.uniform":function(){r.removeClass(k.activeClass)},"mouseenter.uniform":function(){r.addClass(k.hoverClass)},"mouseleave.uniform":function(){r.removeClass(k.hoverClass);r.removeClass(k.activeClass)}});if(a.browser.msie){o.bind("click.uniform.ie7",function(){setTimeout(n,0)})}else{o.bind("change.uniform",n)}if(o.attr("disabled")){r.addClass(k.disabledClass)}a.uniform.noSelect(p);a.uniform.noSelect(m);b(q)}a.uniform.restore=function(l){if(l==undefined){l=a(a.uniform.elements)}a(l).each(function(){if(a(this).is(":checkbox")){a(this).unwrap().unwrap()}else{if(a(this).is("select")){a(this).siblings("span").remove();a(this).unwrap()}else{if(a(this).is(":radio")){a(this).unwrap().unwrap()}else{if(a(this).is(":file")){a(this).siblings("span").remove();a(this).unwrap()}else{if(a(this).is("button, :submit, :reset, a, input[type='button']")){a(this).unwrap().unwrap()}}}}}a(this).unbind(".uniform");a(this).css("opacity","1");var m=a.inArray(a(l),a.uniform.elements);a.uniform.elements.splice(m,1)})};function b(l){l=a(l).get();if(l.length>1){a.each(l,function(m,n){a.uniform.elements.push(n)})}else{a.uniform.elements.push(l)}}a.uniform.noSelect=function(l){function m(){return false}a(l).each(function(){this.onselectstart=this.ondragstart=m;a(this).mousedown(m).css({MozUserSelect:"none"})})};a.uniform.update=function(l){if(l==undefined){l=a(a.uniform.elements)}l=a(l);l.each(function(){var n=a(this);if(n.is("select")){var m=n.siblings("span");var p=n.parent("div");p.removeClass(k.hoverClass+" "+k.focusClass+" "+k.activeClass);m.html(n.find(":selected").html());if(n.is(":disabled")){p.addClass(k.disabledClass)}else{p.removeClass(k.disabledClass)}}else{if(n.is(":checkbox")){var m=n.closest("span");var p=n.closest("div");p.removeClass(k.hoverClass+" "+k.focusClass+" "+k.activeClass);m.removeClass(k.checkedClass);if(n.is(":checked")){m.addClass(k.checkedClass)}if(n.is(":disabled")){p.addClass(k.disabledClass)}else{p.removeClass(k.disabledClass)}}else{if(n.is(":radio")){var m=n.closest("span");var p=n.closest("div");p.removeClass(k.hoverClass+" "+k.focusClass+" "+k.activeClass);m.removeClass(k.checkedClass);if(n.is(":checked")){m.addClass(k.checkedClass)}if(n.is(":disabled")){p.addClass(k.disabledClass)}else{p.removeClass(k.disabledClass)}}else{if(n.is(":file")){var p=n.parent("div");var o=n.siblings(k.filenameClass);btnTag=n.siblings(k.fileBtnClass);p.removeClass(k.hoverClass+" "+k.focusClass+" "+k.activeClass);o.text(n.val());if(n.is(":disabled")){p.addClass(k.disabledClass)}else{p.removeClass(k.disabledClass)}}else{if(n.is(":submit")||n.is(":reset")||n.is("button")||n.is("a")||l.is("input[type=button]")){var p=n.closest("div");p.removeClass(k.hoverClass+" "+k.focusClass+" "+k.activeClass);if(n.is(":disabled")){p.addClass(k.disabledClass)}else{p.removeClass(k.disabledClass)}}}}}}})};return this.each(function(){if(a.support.selectOpacity){var l=a(this);if(l.is("select")){if(l.attr("multiple")!=true){if(l.attr("size")==undefined||l.attr("size")<=1){e(l)}}}else{if(l.is(":checkbox")){f(l)}else{if(l.is(":radio")){c(l)}else{if(l.is(":file")){h(l)}else{if(l.is(":text, :password, input[type='email']")){j(l)}else{if(l.is("textarea")){g(l)}else{if(l.is("a")||l.is(":submit")||l.is(":reset")||l.is("button")||l.is("input[type=button]")){i(l)}}}}}}}}})}})(jQuery);
There is a demo of the theme - Woothemes Function Demo - though it doesn't have a drop-down top menu.
Does anyone familiar with Woothemes have any ideas about where the inline styling is added to the original navigation and the screen width set for the mobile select menu?
Had to replace the jQuery mobile menu plugin that was included with the theme and this fixed the issue with the drop-down on the original nav ul. The problematic plugin is located in the theme directory includes/js/third-party.js, at the top of the file.
To add the select menu at 767px instead of 781px, in includes/js/general.js in the call to the mobileMenu plugin around line 26, the switchWidth had to be changed to 750 to account for the way the javascript was getting the screen width. This part is a little buggy still, so I'm not sure exactly what the best fix is for it.

Set max height on dijit.Menu

I have one popup subMenu using dijit.menu that can be very long due to dynamic input. I want to set a max Height and overflow-y:auto to dijit.menu. So it will has a scroll bar when becoming too long.
var subMenu = new dijit.Menu({ parentMenu: this.mainMenu});
//....add a lots of submenu items here
this.mainMenu.addChild(new dijit.PopupMenuItem({label: "some label", popup: subMenu}));
The problem is the top level of dijit.menu is a <table>, and max-height won't work on it. Also, unlike dijit.form.select, the dijit.menu does not take maxHeight as a parameter.
I noticed there is a ticket describing this problem on dojo long time ago and marked as fixed. However, I still have no idea how to set maxheight on the menu.(The fix seems no longer exsits too)
Ticket #9086 (Allow CSS height on dijit.Menu)
Any hint on how I might able to do this would be apperciated.
As you noted, there is an issue with the way that Dojo handles the DOM creation of the dijit.Menu widget. The problem isn't that maxHeight isn't accepted as a parameter (as you can just pass it into the widget's style property as part of an Object or String), rather how the styling is applied.
You mentioned that the "top level" of a Menu widget is the <table> node. However, this is not the whole truth. That node is what Dojo presents to the client (you) as the "top level" domNode, but the Menu actually wrapped in another <div> that you cannot access directly from the widget, and it is this node that your styles should be applied to.
This <div> has the attribute class="dijitPopup dijitMenuPopup", but I doubt you want to set your styles to Dijit popups/menus globally. To avoid this, you can set the baseClass property on your widget as follows:
new Menu({
baseClass: "myCustomMenu",
targetNodeIds: ["myTarget"]
});
This will change that top level <div> attribute to read class="dijitPopup myCustomMenuPopup". This gives you a class that you can modify with the CSS styles you need to accomplish your goal:
.myCustomMenuPopup {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
Here is a working example in jsfiddle.

jCarousel display nothing if only one item

I've developed one page using jCarousel within jQuery ui Tabs.
Following page is what I got:
http://knowledge.teldap.tw/knowledgeFB/my_creation/?fid=668330535
Problem is:
If you click the 3rd tab (only one item), you'll find nothing unless you click the left arrow to navigate. It's weird because one the 1st tab ( more than one items) everything is normal and visible.
Can anyone find out what I've missed? Because I've struggled on this for several hours.
Thanks!
The problem is the width of your carousel image has not been adjusted properly
In your jquery,put scroll 1
jQuery('#listelements').jcarousel({
scroll : 1,
And also adjust the height of the container
.jcarousel-skin-tango1 .jcarousel-container-horizontal {
width: 1200px;
height:630px;
margin-left://adjust margin left here
}
You may have a look on this carousel example

Categories