I'm trying to make a mouseover map area on an image that must display a dialog box when the mouse is over.
The dialog box content is different, depending on which area it is.
My script actually always show all the dialog boxes.
Here is the jsFiddle I created :
http://jsfiddle.net/U6JGn/4/
and the javascript :
$(function() {
$('#box').dialog( { modal:true, resizable:false } ).parent().find('.ui-dialog-titlebar-close').hide();
for (var i = 0; i < 2; i++) {
$( "#elem"+i ).mouseover(function() {
$( ".box"+i ).dialog( "open" );
});
$( "#elem"+i ).mouseout(function() {
$( ".box"+i ).dialog( "close" );
});
}
});
What am I doing wrong ?
Assign the box dialog to a variable and then don't queue more jquery events with it because it will break your code.
Since Ids need always to be unique we need to do some changes in your html and css
ids: #box0, #box1
class: .box
$(function() {
$('.box').each(function(k,v){ // Go through all Divs with .box class
var box = $(this).dialog({ modal:true, resizable:false,autoOpen: false });
$(this).parent().find('.ui-dialog-titlebar-close').hide();
$( "#elem"+k ).mouseover(function() { // k = key from the each loop
box.dialog( "open" );
}).mouseout(function() {
box.dialog( "close" );
});
});
});
working example: jsfiddle
Try this:
for (var i = 0; i < 2; i++) {
(function(i) {
$( "#elem"+i ).mouseover(function() {
$( ".box"+i ).dialog( "open" );
});
$( "#elem"+i ).mouseout(function() {
$( ".box"+i ).dialog( "close" );
});
})(i);
}
UPDATE:
Take a look at the demo
http://jsfiddle.net/U6JGn/129/
Modified JQuery code....
$(document).ready(function() {
for (var i = 0; i<= 1; i++) {
$( "#elem"+i ).on('mouseenter',function() {
var st = $(this).attr('Id').replace('elem','');
$( ".box" + st).css('display','');
});
$( "#elem"+i ).on('mouseout',function() {
var st = $(this).attr('Id').replace('elem','');
$( ".box"+st ).hide();
});
}
});
Related
I created a simple lottery ticket and I made selector with toggle method.
This is my code.
$( "span" ).click(function() {
$( this ).toggleClass( "span-selected" );
});
The toggle functionality works fine but I want to add a limitation so that only 7 numbers can be chosen in one container. Is there a way to achieve this.
Here is my JSBIN > http://jsbin.com/menawu/1/edit?js,output
You need to check if there are already 7 elements checked in that container, like so:
$( "span" ).click(function() {
if (
$(this).hasClass("span-selected") ||
(!$(this).hasClass(".span-selected") && $(this).closest(".num-cont").find(".span-selected").length < 7)
) {
$( this ).toggleClass( "span-selected" );
}
});
So your criteria are:
if it's not selected, check if there are less than 7: if yes, toggle, otherwise don't do anything
if it is selected, unselect it.
You can use this code;
$( "span" ).click(function() {
if($(this).parent().parent().find('.span-selected').length===7){
alert('Limit');
}
else{
$( this ).toggleClass( "span-selected" );
}
});
Yes,
you can cumulate the count of tickets chosen in a variable and allow toggling only when count is less than 7, based on the jQuery hasClass method to check if your span was previously selected:
var countTicket = 0;
$( "span" ).click(function() {
if($(this).hasClass( "span-selected")) {
countTicket--;
$( this ).toggleClass( "span-selected" );
} else if(countTicket<7) {
$( this ).toggleClass( "span-selected" );
countTicket++;
}
});
Here an example, with multiple case for controle your numbers.
You can easily know if it's unselect/select or if more than 7 span are selected by using hasClass/removeClass/addClass
$("span").click(function(){
if($(this).hasClass("selected"))
{
$(this).removeClass("selected");
}
else{
if($("span.selected").length<7)
{
$(this).addClass("selected");
}
else
console.log("7 span selected");
}
});
span{
width:50px;
height:50px;
margin:10px;
background-color:#eee;
display:inline-table;
}
.selected{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
just insert count and max variables
var max = 7;
var count = 0;
$("span").click(function() {
if (count < max) {
$(this).toggleClass("span-selected");
count++;
}
});
You can get the number of selected item using the parent container and count them:
$( "span" ).click(function() {
if($(this).closest('.num-cont').find('.span-selected').length==7){
alert('Limit');
}
else{
$( this ).toggleClass( "span-selected" );
}
});
I would like to add a custom class on mouseover. So that when the mouse is hovered over .leftbar, a class is added and it should be popped up(I set css for his). How do I add slow or time delay for the popup?
<script>
$(document).ready(function(){
$( ".leftbar" ).mouseenter(function() {
$( "body" ).addClass( "myclass" );
});
});
$(document).ready(function(){
$( ".leftbar" ).mouseleave(function() {
$( "body" ).removeClass( "myclass1" );
});
});
</script>
I tried this- $( "body" ).addClass( "myclass" , '300'); with no luck
Thank you!
You can use setTimeout
$(document).ready(function(){
$( ".leftbar" ).mouseenter(function() {
window.setTimeout(function(){
$( "body" ).addClass( "myclass" );
}, 300);
});
}):
See https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout
You could take a look at the jQuery UI method addClass which allows you to pass in some animation parameters into it. View the example and documentation here http://api.jqueryui.com/addClass/
For your use, it should be as simple as adding in the delay to addClass()
Add a reference to the jQuery Library, then change your code to;
$("body").addClass("myclass", 300);
Use a setTimeout, being sure to clear it when the cursor leaves.
Minor error, but myclass != myclass1.
$(document).ready(function(){
var barTimeout = 0;
$( ".leftbar" ).on({
mouseenter: function(){
barTimeout = setTimeout(function(){
$( "body" ).addClass( "myclass" );
}, 300);
},
mouseleave: function(){
if( typeof barTimeout !== 'undefined' ) clearTimeout( barTimeout );
$( "body" ).removeClass( "myclass" );
}
});
});
JSFiddle
You can do it like this:
$(document).ready(function () {
$(".leftbar").hover( function () {
$(this).delay(300).queue(function(next){
$(this).addClass("myclass");
next();
});
}, function(){
$(this).delay(300).queue(function(next){
$(this).removeClass("myclass");
next();
});
});
});
Check it out here: JSFiddle
I have a javascript code as follow:
$( "#hover0" )
.mouseenter(function() {
$( "#hover0" ).attr("style","background-color:#e1e8ed;");
})
.mouseleave(function() {
$( "#hover0" ).removeAttr();
});
which works perfectly but as soon as I change it to the following it does not work:
var item=0;
$( "#hover"+item )
.mouseenter(function() {
$( "#hover"+item ).attr("style","background-color:#e1e8ed;");
})
.mouseleave(function() {
$( "#hover"+item ).removeAttr();
});
what is the problem?Can anyone help me how I can do it like the second approach?(Actually the real scenario is a for loop with item changing as each loop passes)
Update:
Here is my loop:
for (var item in jsresult) {
if (jsresult[item] != "null") {
$('#tweetWrapper')
.append("<div class='tweetCon' id='hover"+item+"' >" +
"<div class='tweetimgcon' ><img alt='' height='50px' src='"+jsresult[item].url+"'></div>" +
"<div class='tweetcontitle' >"+jsresult[item].name+"</div>" +
"<div class='tweetcondate' >"+jsresult[item].date+"</div>" +
"<div class='tweetconcontent' '>"+jsresult[item].text+"</div>" +
"</div><div class='ttest' style='float:left;height:300px;width:100%;display:none;'></div>");
$("#hover0")
.mouseenter(function() {
$( "#hover0" ).attr("style","background-color:#e1e8ed;");
})
.mouseleave(function() {
$( "#hover0" ).removeAttr();
});
}
}
Those handlers will always use the last-known value of item, not the value that it had when you set them up.
Better to move the handler code into a setup function, and call that - its local variable will always have the right value.
function addHandlers(item) {
$( "#hover"+item )
.mouseenter(function() {
$( "#hover"+item ).attr("style","background-color:#e1e8ed;");
})
.mouseleave(function() {
$( "#hover"+item ).removeAttr('style');
});
}
// called as...
//
for(var item in jsresult)
{
if (jsresult[item]!="null")
{
// wrappers, etc., then...
//
addHandlers( item );
}
}
i am using struts2-jquery-jqgrid. i have buttons in the columns of the grid. i need to implement a confirm dialog when user clicks to delete.
SOLUTION:
// JAVASCRIPT THAT ADD BUTTONS IN THE COLUMN AND EVENT CLICK
$.subscribe('gridCompleteTopics2', function() {
var ids = jQuery("#gridtable2").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var fila = jQuery("#gridtable2").jqGrid("getRowData", ids[i]);
link = "<button id='opener' onClick='deleteRecord(" + fila["idplanilla_det"] + ");'>Open Dialog</button>";
jQuery("#gridtable2").jqGrid('setRowData',ids[i],{acti:link});
}
});
function deleteRecord(id) {
alert(id);
$("#dialogo").dialog("open");
}
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"ACEPTAR": function() {
$( this ).dialog( "close" );
},
"CANCELAR": function() {
$( this ).dialog( "close" );
}
}
});
});
<div id="dialog" title="Empty the recycle bin?">
These items will be permanently deleted and cannot be recovered. Are you sure?
WORK.
First of all, you should not have multiple controls with the same ID. Here, you are creating ids.length-many buttons with id opener. Instead, assign a class to the buttons, e.g. opener.
Then, you should move your .opener click function after the buttons were created, as such:
$.subscribe("gridCompleteTopics2", function () {
var ids = jQuery("#gridtable2").jqGrid("getDataIDs");
for (var i = 0; i < ids.length; i++) {
var fila = jQuery("#gridtable2").jqGrid("getRowData", ids[i]);
link = "<button id='opener'>Open Dialog</button>";
jQuery("#gridtable2").jqGrid("setRowData", ids[i], { acti: link });
}
$(".opener").on("click", function() {
$("#dialog").dialog("open");
});
});
I have an array of DOM elements. If the fourth one is clicked I want to hide the search box. If any of the other ones are clicked I want to show it. How would I do this? I currently have:
var app = {
config: {
tabs: [$("#tab1"), $("#tab2"), $("#tab3"), $("#tab4")],
search: $("#search")
},
showHideSearch: function () {
// Here I need to test if the fourth tab was clicked on then hide();
// else if tabs one through three were clicked show
}
}
app.showHideSearch();
Any help is appreciated. Thank you.
You don't need an array to do this.
$( "#tab4" ).click( function() {
app.config.search.hide();
// $( "#search" ).hide();
});
$( "#tab1, #tab2, #tab3" ).click( function() {
app.config.search.show();
// $( "#search" ).show();
});
$.each(app.config.tabs, function(i, v) {
v.bind('click', function(){
$('#searchbox').show();
if(i==3)
$('#searchbox').hide();
});
});