We Keep Coding

How to toggle jQuery element with a duration AND display?

When I want to toggle off a component I can use
$("#donkey").toggle(false);
and when I need it to be toggled during a certain time period I can use
$("#emailInvalid").toggle(700);
but now I'd like to combine those two. I want to ensure that the component is being toggled off (not only toggled back and forth) and I want to specify a duration of the process.
According to the jQuery API, I'm supposed to be able to specify an object with options, too. However, the following
$("#donkey").toggle({ duration: 700, display: false });
only toggles the donkey back and forth (during said time, though), whereas I'd like it to be toggled to invisibility. When I reviewed the options, I noticed that there's none that addresses display, so I fear that the above is treated by jQuery equivalently with
$("#donkey").toggle({ duration: 700, biteMe: "in the donkey" });
How can I make sure that the toggler is hiding the component (equivalent with the first line of code above) and that I can control the time for the process to be done (equivalent to the second line of code above)?

Apply toggle only when visible:
$('#donkey:visible').toggle(500);
Alternatively
var element=$('#donkey');
if(element.css('display') !== 'none'){
element.toggle(500);
}

Short answer - you can't.
Your options are to build something custom and carry out the logic in custom code. Alernatively, you might want to toggle between differen classes that have the look that you like. Check out toggleAss() for details.
For completeness I also give you a link to animate() as suggested by #DavidThomas, although I haven't used that one very much.

I think this is what you want -- if the element (#donkey) is visible it gets hidden, if it's hidden nothing happens.
$( '#button' ).click( function(){
if( $( '#donkey' ).css( 'display' ) === 'block' ) {
$("#donkey").toggle( 700 );
}
});
Codepen: http://s.codepen.io/SteveClason/debug/RRwpBd

This small plugin would allow you to combine the two:
(function ( $ ) {
$.fn.myToggle = function(show, options) {
return this.each(function() {
if ($(this).is(":hidden") ? show : !show) $(this).toggle(options);
});
};
}( jQuery ));
Simple example:
$("#donkey").myToggle(false, 700);

manual click event only triggers on second click

I build a small color-picker module. But it only opens up (and then works) when pickColor is called a second time. I also tried to wrap the _openColorPicker into a setTimeout but that didn't work either. In fact, the color-picker didn't show up at all when I did that.
What I found interesting is that the binding to the change event works, so the $ selector must have found the element already.
So I have two questions:
1) why is the picker only showing after the second call to _openColorPicker?
2) why didn't the picker open at all when I wrapper the _openColorPicker call in a setTimeout?
Edit: The _openColorPicker functions gets executed after the user has right-clicked into the document and then clicked on context-menu which is now showing.
Complete Code:
const ColorUtils = {
_initialized: false,
_openColorPicker: function () {
$('#color-picker').click();
},
pickColor: function (onChangeCallback, context) {
if (!this._initialized) {
$('<input/>').attr({
type: 'color',
id: 'color-picker',
display: 'hidden',
value: '#ffffff'
}).appendTo('#centralRow');
this._initialized = true;
$('#color-picker').on('change', onChangeCallback.bind(context));
}
this._openColorPicker();
// version with timeOut
const scope = this;
setTimeout(function () {
scope._openColorPicker();
}, 1000);
}
};
export default ColorUtils;
Above code is used like ColorUtils.pickColor(onColorPicked, this);

Check out this post. Looks like you can't trigger a click on an invisible color picker. That answer suggests giving the element an absolute position and placing it off screen, like so:
position:absolute;
left:-9999px;
top:-9999px;

I tried to replicate your case (for what I understood) : JSFIddle
I made some changes.
I moved the $('<input/>') in a property of the object ColorUtils and appended it to the DOM with absolute position and outside the screen.
(And also commented display:'hidden' because it's either display:none or visibility:hidden and as a CSS property, not Html attribute)
On right clic on the document I instantiate the picker (and register the callback + context) then add a button to the DOM to trigger the picker again.
Does it fulfill your requirements ?

TinyMCE opened in jqueryUI modal dialog

When using tinyMCE in a jqueryUI modal dialog, I can't use the hyperlink or 'insert image' features.
Basically, after lots of searching, I've found this:
http://www.tinymce.com/develop/bugtracker_view.php?id=5917
The weird thing is that to me it seams less of a tinyMCE issue and more of a jqueryUI issue since the problem is not present when jqueryUI's modal property is set to false.
With a richer form I saw that what happens is that whenever the tinyMCE loses focus, the first element in the form gets focus even if it's not the one focused / clicked.
Does some JavaScript guru have any idea how I might be able to keep the dialog modal and make tinyMCE work?

This fixed it for me when overriding _allowInteraction would not:
$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
I can't really take credit for it. I got it from this thread on the TinyMCE forums.
(They have moved their bugtracker to github. tinymce/issues/703 is the corresponding github issue.)

It seems there are no propper solution for this issue yet. This is kind of a hack but it really worked for me.
Every time you open the Dialog remove the text area and re add it like following,
var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later
myTextarea.remove(); // remove the textarea
myDialog.find('.mce-container').remove(); // remove existing mce control if exists
myTextAreaParent.append(clonedTextArea); // re-add the copy
myDialog.dialog({
open: function(e1,e2){
setTimeout(function () {
// Add your tinymce creation code here
},50);
}
});
myDialog.dialog('open');

This seems to fix it for me, or at least work around it (put it somewhere in your $(document).ready()):
$.widget('ui.dialog', $.ui.dialog, {
_allowInteraction: function(event) {
return ($('.mce-panel:visible').length > 0);
}
});

Js jQuery bug? Can not detect element while hide() + slide

I have a rare issue. May be is a bug of jQuery, I dont know how can I solve it.
While I am using below method to hover a element, meanwhile I was monitering the length of element.
The problem is the length of added element 'el' will return 0 while using hide() + slide
hover(
function() {
if (!trigger.next('#id').length) // if #id not exsist, add html
el = trigger.after(html).next('#id') // el = new added html
else
el = trigger.next('#id')
el.stop(true, true).show('slide', { direction, 'left' })
},
function() {
el.hide('slide', { direction, 'left' })
});
If I switch to another method, hide()<-just hide, animate(), fadeOut(), all will return 1.
The added html is existing. However, length will not return while hide() + slide,
but after finish hide() + slide, will return 1;
Please help to solve this issue.
Issue is el.length will return 0 while hide() + slide even-though the el is existing
Thank you very much for your advice.
I have created a example, please check.
http://jsfiddle.net/fantill/DFd7e/6/

Is there a reason why you're using jQuery beta 2.0 ? It would have been worth mentioning.
You're also using jQuery UI which I doubt is compatible with jQuery 2.0.0b1.
I just changed jQuery to v1.9 and it seems to be working, I also added brackets and commas.
This is tidier :
if( !$('#B').length )
{
el = $(this).after('<div id="B" style="display:none; width:50px; height:50px; background-color:#09F; ">YYYYYYYYY</div>').next('#B');
}
else
{
el = $('#B');
}
Here's the fiddle updated :
http://jsfiddle.net/DFd7e/9/
EDIT: I enabled jQuery UI, and replaced this $(this).next('#B').first().length
with this : $('#B').length.
next() doesn't work in your case because jQuery UI is adding a wrapper around the div that you're animating, you can see it if you open your dev tool.
Updated fiddle : http://jsfiddle.net/DFd7e/11/

Javascript Fancybox 1.3.4 Solution but needed it further explained please

This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?

Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});

This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};