Imagemap: Leave clicked area's tooltip displayed on mouseout? - javascript

I am using the plugin Imagemapster to add highlighting and tooltip functions to an image map. It provides callbacks like so:
image.mapster(
{
mapKey: 'name',
listKey: 'name',
onClick: function (e) {
if(!$(this).hasClass('clicked')){
$(this).addClass('clicked');
}
$('#selections').html(xref[e.key]);
},
onMouseover: function (e) {
$('#selections').html(xref[e.key]);
},
onMouseout: function (e) {
if(!$(this).hasClass('clicked')){
$('#selections').html('');
}
},
});
Here is my example:
http://jsfiddle.net/5scbh/6/
If you click an item, I want that item's tooltip to remain displayed even if you mouseout. I'm sort of there, but the problem is: if you click an item, and then mouseover another area and then mouseout... it doesn't keep the clicked item's tooltip on mouseout.
I like that the tooltip changes on mouseover to whatever you rollover, but once you mouseout of that area or the imagemap, I want it to go back to showing the tooltip of whatever area has been clicked. If you unclick the clicked area so that nothing is clicked, then the tooltip should go away.
Can you help me do this? Thank you.

You can store your current tooltip in a data attribute, then write it back on mouse out.
...
onClick: function (e) {
if(!$(this).hasClass('clicked')){
$(this).addClass('clicked');
}
$('#selections').html(xref[e.key]);
$( '#selections' ).data( 'storage', xref[e.key] );
},
...
onMouseout: function (e) {
if(!$(this).hasClass('clicked')){
$('#selections').html('');
}
if( $( '#selections' ).data( 'storage' ) ) {
$( '#selections' ).html( $( '#selections' ).data( 'storage' ) );
};
},
....
updated your fiddle acordingly.

Here is the updated fiddle, using the correct edits provided by #robotroll, as well as the solution to the selecting/deselecting issue described in my comment above.
That part was solved by using this code:
onClick: function (e) {
if (e.selected) {
$(this).addClass('clicked');
$('#selections').html(xref[e.key]);
$('#selections').data( 'storage', xref[e.key] );
} else {
$(this).removeClass('clicked');
$('#selections').removeData();
$('#selections').html('');
}
},
http://jsfiddle.net/5scbh/10/

Related

JQuery-UI autocomplete search() not displaying DropDownList

Given the documentation for the search method for the Autocomplete Widget, I would expect a button that calls this method would display a box containing a list of available selections. Nothing happens.
I have the following code that creates the autocomplete widget on a text box:
$("#StateListCoolBox").autocomplete({
source: StateListCoolBoxTags,
focus: function( event, ui ) {
$("#StateListCoolBox").val(ui.item.label);
return false;
},
select: function( event, ui ) {
$("#StateListCoolBox").val(ui.item.label);
$("#StateListCoolBox-id").val(ui.item.value);
return false;
}
});
It works fine.
I have the following code attached to the button I want to display the list. It gets called but nothing happens:
function StateListCoolBox_dropDownClick() {
$("#StateListCoolBox").autocomplete("search", "" );
};
I have tested this with text in the corresponding textbox and with the textbox blank.
How do I get a button to behave like the button on a DropDown Combo, so that when clicked, the list of available selections is displayed?
If you look at the "View Source" for this: http://jqueryui.com/autocomplete/#combobox
You will see:
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.on( "mousedown", function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.on( "click", function() {
input.trigger( "focus" );
// Close if already visible
if ( wasOpen ) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
}
So this shows all the results by triggering focus event on the text field.
How do I get a button to behave like the button on a DropDown Combo, so that when clicked, the list of available selections is displayed?
I think this fits what you wanted to accomplish. So Try the following with minLength: 0:
function StateListCoolBox_dropDownClick() {
$("#StateListCoolBox").trigger("focus").autocomplete( "search", "" );
};
That said, there should be nothing wrong with your method:
Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.
Your current code is simply missing: minLength: 0. Try both if you like.

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();
});
});

Jquery .focus()-loop?

I am trying to apply a new Style to my Submit-Button if its focused.So if its focused, the Style changes, but i cant get rid of it.Means that i cant lose focus on my Button.The other Problem is, that when focused the button moves like 2-3pixel down.
$(document).ready(function(){
$(".login").hover(function() {
$(this).toggleClass("hoverbutton");
});
$(".login").focus(function(){
$(this).toggleClass("focusbutton");
return false;
});
});
Hope someone can help me out with this :)
try this
$(document).ready(function () {
$(".login").hover(function () {
$(this).toggleClass("hoverbutton");
}, function () {
$(this).toggleClass("Normalbutton");
});
});
OR
$(document).ready(function () {
$(".login").hover(function () {
$(this)
.removeClass("normalbtn")
.addClass("hover_btn");
}, function() {
$(this)
.removeClass("hover_btn")
.addClass("normalbtn");
});
});
Refer Here
According to the jQuery API (http://api.jquery.com/hover/), hover accepts two functions:
$( ".login" ).hover(
function() {
// This part is called on Mouse over
$( this ).addClass( "hoverbutton" );
}, function() {
// This part is called on Mouse out
$( this ).removeClass( "hoverbutton" );
}
);
$(".login").blur(function(){
$(this).removeClass("focusbutton");
return false;
});
Added this after .focus() and works fine for me
You are looking for wrong events,
Look at jQuery API: http://api.jquery.com/blur/

JQuery.hover() not working when hovering over tile

I'm trying to add some functionality when hovering over a 2048 tile. Each tile of value n has a class 'tile-n'.
For the basic 'tile-2' tile, I have the hover functionality:
<script>
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
</script>
But nothing is happening and I don't believe the hover is being registered and I'm not sure why.
My implementation can be seen at: http://kpscript.github.io/PCN-Embark-2048/
The 'tile-2' div can be seen at: html.body.container.game-container.tile-container.tile-2.
Of course, I plan to do more non-trivial things with hover, but for now I can't even get the alert to show.
Try like this, It works for me...
$("body").on('mouseenter', '.tile-2', function () {
alert("in!");
}).on('mouseleave', '.tile-2', function () {
alert("out!");
});
I think you load html using ajax, this should work
<script>
$( "body" ).on('hover','.tile-2',
function(){
alert("in!");
}, function() {
alert("out!");
}
);
;)
You are trying to bind the event to the element before the element is rendered on the page. Wait until its loaded.
$(document).ready({
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
});

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.

Categories

Resources