Develop Reference

swipebox auto transition to next slide

This is more of a tip than a question, but i hope others find this useful.
Basically i needed to make the lightbox slider called 'Swipebox' auto transition to the next slide, I looked online for help but found nothing.
to add this feature to the plugin i added this code:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
The file for this JS is called 'jquery.swipebox.js'. This is the code where you want to place the code previously mentioned:
/**
* Navigation events : go to next slide, go to prevous slide and close
*/
actions : function () {
var $this = this,
action = 'touchend click'; // Just detect for both event types to allow for multi-input
if ( elements.length < 2 ) {
$( '#swipebox-bottom-bar' ).hide();
if ( undefined === elements[ 1 ] ) {
$( '#swipebox-top-bar' ).hide();
}
} else {
$( '#swipebox-prev' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getPrev();
$this.setTimeout();
} );
$( '#swipebox-next' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getNext();
$this.setTimeout();
} );
}
$( '#swipebox-close' ).bind( action, function() {
$this.closeSlide();
} );
// THIS IS THE NEW CODE ADDED:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
},
This function is around about 550 lines down.
Also, to make the slideshow loop back around, you will need to change the option called 'loopAtEnd' from FALSE to TRUE. This is located at the top of the document.
loopAtEnd: true,
Hope this helped :)

Drop Down text won't come back up and won't recognize other instances

I used OnClick drop down text with JavaScript and HTML code to make the dropdown hidden div project.
But the problems are:
1 - It won't open divs separatelly, all of the "projects" are open at once;
2 - I won't come back up once I click it again.
I made another line of code to make it go up:
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
$(function() {
$(".project2").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
And so on... and it goes up as soon as I click it only once, like an animation. It won't stay down and THEN on the next click it goes back up. AND it still gets both down instead of each one separately.

You shouldn't use document.ready to often if isn't needed.
// Shorthand for $( document ).ready()
$(function() {
});
If you bind two events to an element, .. it will be executed if you don't stopPropergation or making "cases".
So you can check the visibility and decide what to do:
$( function () {
$("[class^='project']").on( 'click', function () {
var $details = $( this ).parent().find( '.details' );
if ($details.is(':visible'))
$( this ).parent().find( '.details' ).slideUp();
else
$( this ).parent().find( '.details' ).slideDown();
});
} );
https://jsfiddle.net/3738Lnmf/
edit:
slideToggle is more elegant :) #Diego López
$( function () {
$("[class^='project']").on( 'click', function () {
$(this).parent().find('.details').slideToggle();
});
} );
https://jsfiddle.net/3738Lnmf/1/

Use .slideToggle() if you want to toggle between show and hide the div elements
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
});

Backbone Events on jquery tool tip

I'm using JQuery Tool Tip in on my HTML page and in that tool tip I've User Name and a Sign Out Link.
Now I'm trying to bind the event in my backbone view, on the id of the Sign Out Link.
But the event is not fired.
I removed the tool tip code and then when i clicked on the sign out link the event got fired.
So question here is - Is it possible to bind the backbone event on jquery tool tip? If not than what would be the work around.
Some code snippets
This is the function which is used to apply jquery tool tip
jQuery(function () {
jQuery.widget("ui.tooltip", jQuery.ui.tooltip, {
options: {
content: function () {
// self.addDescendant('toolTip', {selector: templ.loginHelpContent, view: tt});
return jQuery(templ.loginHelpContent).html();
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
jQuery(this).stop(true).fadeTo(400, 1);
},
function () {
jQuery(this).fadeOut("400", function () {
jQuery(this).remove();
})
});
},
position: {
my: "left-190 bottom-18",
using: function( position, feedback ) {
jQuery( this ).css( position );
jQuery( "<div>" )
// .addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
},
}
});
jQuery(templ.loginHelpIcon).tooltip();
});
and the HTML
<span id=loginHelpContent style="display:none">
Not Elizabeth Murphy? <a id="logoutLink" style="color:blue;text-decoration: none">Sign out</a><br> and login as a different user.
</span>
When I tried to bind and event on 'logoutLink' it didn't worked.

You can listen to the "tooltipopen" event ".tooltip tooltipopen": "listenTooltip" and in listenTooltip function :
listenTooltip: function( e ) {
var tooltip = $( e )
}
Now you can bind listener to tooltip in this function

Disable click on an element during animation

I want to prevent clicking on an element, while it performs some animations and then enable it later. I have tried to use unbind and then bind, but clicking remains permanently disabled.
Is there any other way to do it?
$("something").on("click", function() {
$("selected").unbind("click");
$("selected").animate({...}, function() {
$("selected").unbind("click");
});
basically, i don't want someone to click on the selected div while the animation is in progress, as clicking on it will start another set of animations which i don't want to start in between.

Try this, using a flag variable to store the info if the animation is happening:
var animating = false;
$("something").on("click", function () {
animating = true;
$("selected").animate({...
}, 1000, function () {
animating = false;
});
});
$("selected").click(function(){
if (animating) return false;
});

Use on and off this way you can "bind" the function foo to a click event on a particular element, switch it off and on again, as many times as you like. Have fun ;-)
DEMO: http://jsfiddle.net/4yBbb/2/
var foo = function() {
// Code to handle some kind of event
};
// ... Now foo will be called when paragraphs are clicked ...
$( "p" ).on( "click", foo );
// ... Foo will no longer be called.
$( "p" ).off( "click", foo );
edit: updated answer, my example used delegation and this was not necessary.
applied to your example it would look like this:
$("something").on("click", function() {
$("selected").off( "click", foo );
$("selected").animate({...}, function() {
$("selected").on( "click", foo );
});

clicking remains permanently disabled.
Because when never bind the "click" again to $("something"). Try:
$("something").on("click", function animate() {
var _this = $(this);
_this.off("click");
$("selected").animate({...}, function() {
_this.on("click",animate);
});
Here I use named function to make it easy to refer to the function again.

How about adding a check in your click function to perform the animation only when the clicked element is not animating?
$("something").on("click", function() {
$("selected").animate({...});
});
$("selected").on("click",function(){
if(!$(this).is("selected:animated")){
//Start other animation
}
});
Demo fiddle

Use .on() & .off() event of jquery. here is the example Jquery API
you need to do somthing like as follows:
function flash() {
// do your stuff here
}
$("something").on("click", function() {
$( "body" ).off( "click", "Your Div Selector", flash );
});
$("something").on("click", function() {
$( "body" ).on( "click", "Your Div Selector", flash );
});

Wordpress core color picker (iris) in widget - refresh when edited in wordpress customizer

I have added the Wordpress Core color picker (iris) to a widget I developed, but when you edit the color, there is no change triggered. As a result, the iframe (live preview) for the customizer does not update unless you trigger a change in another input field.
Javascript to iniitalize the color picker
var myOptions = {
// you can declare a default color here,
// or in the data-default-color attribute on the input
defaultColor: '#000',
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){
},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: true
};
// Add Color Picker to all inputs that have 'color-field' class
$('.color-field').wpColorPicker(myOptions);
Note:
I tested adding the code below to the change call back.
change: function(event, ui){
$(this).trigger('change');
},
This will trigger a change and update the iframe when the user clicks the color picker, but it happens before the color value is saved.
Does anyone happen to know how to access the event after the color chosen has been saved?
I would appreciate any help.
Thanks!

I'm not sure if this is the best solution, but it's a solution that seems to solve the issue.
add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 );
public function print_scripts() {
?>
<script>
( function( $ ){
function initColorPicker( widget ) {
widget.find( '.color-field' ).wpColorPicker( {
change: _.throttle( function() { // For Customizer
$(this).trigger( 'change' );
}, 3000 )
});
}
function onFormUpdate( event, widget ) {
initColorPicker( widget );
}
$( document ).on( 'widget-added widget-updated', onFormUpdate );
$( document ).ready( function() {
$( '#widgets-right .widget:has(.color-field)' ).each( function () {
initColorPicker( $( this ) );
} );
} );
}( jQuery ) );
</script>
<?php
}
I believe the workaround here is that you want to activate the ('.color-field').wpColorPicker() -> .on('widget-added widget-updated') as well as when the document is ready.