Develop Reference

Semantic UI Dropdown multiple select close not working

I am working on multiple selection dropdown in semantic ui and have got most of it working except closing out of items after you've selected them.
I have replicated the example they give in the documentation in a jsfiddle and still having the same problem.
I have also tried putting a 'close' parameter in the dropdown function.
http://jsfiddle.net/mpenovich1/qYp8L/28/
$('#multi-select').dropdown();
https://semantic-ui.com/modules/dropdown.html#/usage

To get the item delete button (✖) and the dropdown button (▼) working, you have to use a more recent version of jQuery than 1.7.1, apparently. Here is a jsfiddle that works with version 1.9.1 (specified in the Javascript pane). According to my tests, it also works with jQuery 2.2.4 and 3.2.1.
The code itself has not changed:
$('#multi-select').dropdown();

Migrating scripts from 1.7.1 to 1.9 jQuery (Bootstrap 3)

I have javascript scripts that work with jQuery 1.7.1, but don't with 1.11.1 that comes with Bootstrap v3.3.4
The code is across three scripts, but here is one part that toggles rows in a table:
$('#change-selection').click(function(e){
e.preventDefault();
$('.product-choice').toggle();
$(this).toggleClass('closed');
});
$('.compare th a').click(function(e){
e.preventDefault();
var className='tr.'+$(this).parent().attr('class');
$(className).toggle();
$(this).toggleClass('closed');
});
If I link the page to jQuery 1.7.1, toggling across the HTML table works, CSS works as well, but Bootstrap dropdown navigation stops working (fair enough, Bootstrap requires a higher jQuery version). If I use the jQuery that came with Bootstrap, toggling across the HTML table stops working, and CSS inside the table gets messed up. The code above should be a good start to fix the toggling at least. I read about what got deprecated with jQuery 1.9, but that was not enough for me to fix this. I replaced that one instance of attr with prop, but that did not make any change. Is this code troubling for that toggling function or I should look elsewhere?
Thank you

If you got to have, you can have 2 or more versions of jQuery on the same page. https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page

javascript checkbox containers - is there a simpler way to write this

I'm trying to make a checkbox check when I click not only the checkbox, but also the container it's in. The problem I faced is that when I checked a checkbox, it fired it twice because it was also clicking the container. I've come up with the following solution that seems to work fine, but I have a feeling there's a simpler way to do this and I'm looking to learn to really why short and compact javascript, so any advice would be helpful :)
http://jsfiddle.net/masedesign/8q5TQ/

$(function(){
$('td.cell input').click(function(e){
e.stopPropagation();
});
$('td.cell').click(function(){
$(this).find('input').click();
});
});​
The e.stopPropagation() method prevents the event from bubbling.

just for fun I tried to achieve the same effect without javascript: if you're interested in a pure CSS solution working only on newer browser (it relies on :checked pseudoclasses) look at this fiddle: http://jsfiddle.net/g6Sx7/2/ (but if you're interested I can improve it with a js fallback for old IE)
Edit: a fiddle with js fallback: http://jsfiddle.net/g6Sx7/7/ this code should work fine also on IE6 but here the problem is about CSS support (the adjacent sibling operator + is not supported on IE6) : the whole effect won't work there, but anyway you cannot have a box shadow in that browser... so I think it's not a great problem.

If you are not performing any other task when the checkbox is checked i.e. the js that you have written is just for the sake of making the box clickable then i would suggest to take a CSS approach rather then JS.
here's a working example http://jsfiddle.net/8q5TQ/6/
Note: this works in IE7/8/9 FF (latest installed in my machine) and Chrome (latest installed in my machine)
Update: (after reading ur comment) i don't have IE 6 (sorry) but tried in quirk's mode and is working fine. Hope this helps :)

Select options disappear on mouseover in IE 8

I'm working on a Joomla 1.7 site and I'm having a strange problem in IE8. When trying to select an option from a select box, the options appear for a second and then when you try to select one they disappear. It only happens on a specific page - I've disabled every other module on the page to count out any conflicts (thought for sure it was a conflict with the slideshow, but no luck). If anybody can shed some light on this I'd really appreciate it! Below are some examples - click on the 'Quicksearch' select dropdowns.
This page works fine:
//link removed - solution below
This page doesn't:
//link removed - solution below
Thanks!
Solution -- Thank you both for your input. I figured it out after pulling my hair out for a couple hours! The template was calling IE specific css behavior 'behavior: url(/css/PIE.htc);' for the module wrapper divs. I just forced the select box styles in the template html IE8 specific css and it works now. Nothing like a waste of time with IE! Thanks again.

Seems like some outer div has a MouseOut event. Please Check this out and maybe you will find your answer.

Try adding
position:relative;
z-index: 0;

Is possible to have more granular control over jQuery UI Dialog Widget's show/hide method?

Currently it seems that I can only use effects in their most basic form when using the Dialog widget. For example, the following will use the drop effect for both showing and hiding the dialog box:
$('#dialog').dialog({show:'drop', hide:'drop'});
However, the default for the drop method always drops to the left. What I really want is for it to drop to the right. Something like this:
$('#dialog').dialog({
show:{effect:'drop', direction:'right'},
hide:{effect:'drop', direction:'right'}
});
Is this possible?
I'm currently using 1.6rc6. I've also tried it 1.5.3 (stable) without any luck.
After digging into the source a bit, I don't think this is supported in both version 1.5.3 and 1.6rc*. It'll probably require a change to the API before the functionality above can be supported. Steerpike has found a version that probably should be in the mainline. If anyone knows otherwise, do correct me.

Actually, you can use any of the jQuery UI effects; e.g. pulsate:
$("#dialog").dialog({ show: "pulsate" });
There are plenty to be found here: http://docs.jquery.com/UI/Effects/
Note that there is a dependency on effects.core.js.
I tried passing an option (like you did) into 'show', it didn't work. I also tried to make 'show' a function, no luck avail.
What works however is:
$("a").click(function() {
$("#dialog").hide("drop", { direction: "right" }, 1000);
});

This is currently not Possible with 1.6 and 1.7.1.

You may find this link of dialog box examples useful. In particular the second one from the right. I'm not sure if it's using the standard dialogue plugin, but you should be able to figure it out from the examples they use.