How to change mouseenter and mouseleave to working with click?
I have images and on click show another inside.
How to fix mouseleave, here is code in Javascript:
$("div.mitarbeiterfoto")
.mouseenter(function() {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'none'));
($('#' + id + '_o').css('display', 'block'));
showInfo(idInfo);
})
.mouseleave(function() {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'block'));
($('#' + id + '_o').css('display', 'none'));
hideInfo(idInfo);
});
Please i need help!
Assigning events like this would work
$('.mitarbeiterfoto').on('mouseenter', function () {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'none'));
($('#' + id + '_o').css('display', 'block'));
showInfo(idInfo);
});
$('.mitarbeiterfoto').on('mouseleave', function () {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'block'));
($('#' + id + '_o').css('display', 'none'));
hideInfo(idInfo);
});
$('.mitarbeiterfoto').on('click', function () {
//click
});
Related
I'm new with javascript. I have a problem with my code. Hope someone can help me.
I make 2 buttons and 1 dropdown. 2 Buttons are Btn-Next and Btn-Previous. And dropdown is Page
when Btn-Next click, Page will increase + 1 (ex: default 1, When clicked will be 2). And When btn-previous click, Page will decrease -1 (ex: default 2, When cicked will be 1).
And the problem is when I change the dropdown and try to click 1 button. The option is false.
Btn Next:
$("#btn-next").on('click', function () {
var datahalaman = $("#halaman").val();
$(".pagetotal").find("option[value ='" + datahalaman + "']").removeAttr('selected');
var inchalaman = parseFloat(datahalaman) + 1;
var datahalamanbaru = $("#halaman").val(inchalaman);
var halamannext = inchalaman + 1;
var tek = datahalamanbaru.val();
$(".pagetotal").find("option[value ='" + tek + "']").attr('selected', 'selected');
})
Btn previous:
$("#btn-previous").on('click', function () {
var datahalaman = $("#halaman").val();
$(".pagetotal").find("option[value ='" + datahalaman +"']").removeAttr('selected');
var inchalaman = parseFloat(datahalaman) - 1;
var datahalamanbaru = $("#halaman").val(inchalaman);
var tek = datahalamanbaru.val();
$(".pagetotal").find("option[value ='" + tek + "']").attr('selected', 'selected');
})
Dropdown:
$(document).on('change', '#pagetotal', function () {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
var datahalaman = $("#halaman").val();
$(".pagetotal").find("option[value ='" + datahalaman + "']").removeAttr('selected');
var fix =$("#halaman").val(valueSelected)
var fix = $("#pagetotal").find("option[value ='" + fix.val()+"']").attr('selected', 'selected');
})
In this we need to check every click and change of the elements we have,
Also created a fiddle for this exact requirement: https://jsfiddle.net/rt7dmoL5/3/
Try the following code to fix the issue:
$(".selectpage").on("change",function(){
validateSelectedPrev();
});
var validateSelectedPrev = function(){
var selectedValue =$(".selectpage").prop('selectedIndex');
if(selectedValue == 0){
$(".prev").attr("disabled","true");
}else{
$(".prev").removeAttr("disabled");
}
if($(".selectpage").prop('selectedIndex') == ($(".selectpage option").length-1)){
$(".next").attr("disabled","true");
}else{
$(".next").removeAttr("disabled");
}
}
validateSelectedPrev();
$(".prev").click(function(){
var selectedInd =$(".selectpage").prop('selectedIndex');
$(".selectpage").val($(".selectpage option").eq(selectedInd-1).val());
validateSelectedPrev();
});
$(".next").click(function(){
var selectedInd =$(".selectpage").prop('selectedIndex');
$(".selectpage").val($(".selectpage option").eq(selectedInd+1).val());
validateSelectedPrev();
});
On our Offices page if you click the dots on the map it opens a div below and changes the sidebar contents. We added a dropdown so you could select cities on mobiles. Since I recreated the website and copied over the code I've done something and it doesn't work anymore.
I know the problem has something to do with this bit of code
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Here is the full code
jQuery(function($) {
$(".dot").show();
$('.dot').click(function() {
$(".slidingDiv").slideDown('slow');
});
$('#continent').change(function() {
$(".slidingDiv").slideDown('slow');
});
});
jQuery(function($) {
$('#showSingle').click(function() {
$('.targetDiv').show();
});
$('.dot').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
var value = $(this).attr('city');
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#' + value).show();
$('#continent').val(value);
});
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
});
I'm sure this is something simple for someone who knows Javascript.
Thanks.
There you go:
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("#continent").find(":selected").attr('target');
var value = $("#continent").val();
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Should work, but it's very ugly code i guess :P
I am not able to create an edit in place feature with JavaScript/ jQuery. I could not use the plugin editinplace, because I need to put a datepicker on it. My code below does not work for some strange reason:
function editImpfDatumImpfung1Clicked(sender)
{
var sText = $(this).text();
var sId = $(this).attr("id");
$(this).attr("id", "tobechanged");
$(this).after('<input type="text" id="' + sId + '" value="' + sText + '" />');
$(this).remove();
bImpfung1Clicked = true;
$("#" + sId).focus();
$("#" + sId).datepicker(datepickerOptions);
if (bFirstRegisterImpfung1 === true)
{
firstRegisterImpfung1();
bFirstRegisterImpfung1 = false;
}
}
$(document).ready(function()
{
$elem = $("span[id^='impfung_1['");
if ($elem.length > 0)
{
bFirstRegisterImpfung1 = true;
$elem.click(editImpfDatumImpfung1Clicked);
}
});
Edit:
No Errors in console.
console.log($("#" + sId).val()); causes undefined
Edit 2:
Just needed to escape the id like this:
sId = sId.replace(/[[]/g,'\\[');
sId = "#" + sId.replace(/]/g,'\\]');
Thanks for your advice.
I imagine you have a typo in the following line:
$elem = $("span[id^='impfung_1['");
try this instead:
$elem = $("span[id^='impfung_1']");
I have the below code, which is also contained in this fiddle.
<div id="box"><div>click in the box</div></div>
<p>Click a name</p>
<ul>
<li id="id-1">tom</li>
<li id="id-2">jerry</li>
</ul>
<div id="result"></div>
<script>
var id;
var person;
jQuery(document).on("click", "li", function (event) {
id = jQuery(this).attr('id') || '';
person = jQuery(this).text();
$("#box").show();
});
$(function () {
$("#box").click(function (e) {
var d = new Date();
$( "#result" ).append( "<div class='item'>" + person + " last clicked the box at " + d + "</div>");
});
});
</script>
Currently you click on a persons name, then when you click on the box it appends the persons name and the time you clicked on the box.
Instead of having this happen repeatedly I want to append the person if they haven't been clicked before and if they have I want to update there latest item with the last time they clicked the box.
I am really stuck with how I would go about doing this, something like if blank append else update? What is the best way to handle something like this?
You could store the last click date as a data parameter on the item itself. Then you can easily tell if it has or has not been clicked. Try this:
$(document).on("click", "li", function (event) {
$(this).data('clickdate', new Date());
$("#box").show();
});
$("#box").click(function (e) {
var $box = $(this).empty();
$('li').each(function(i, el) {
var clickDate = $li.data('clickdate');
var $item = $('<p />', {
text: $(el).text() + ' : ' + (clickDate || 'Not clicked')
});
$box.append($item);
});
});
Example fiddle
As you can see in the fiddle, this shows all li elements, even if they have not been clicked. If required, you can remove the unclicked ones by appending the append line to:
clickDate && $box.append($div);
var cache = {},person,id;
jQuery(document).on("click", "li", function (event) {
id = jQuery(this).attr('id') || '';
$(this).data('appended' , true);
person = jQuery(this).text();
cache[person] = true;
$("#box").show();
});
$(function () {
$("#box").click(function (e) {
var d = new Date();
if( cache[person] ){
//update
}else{
$( "#result" ).append( "<div class='item'>" + person + " last clicked the box at " + d + "</div>");
}
});
});
I wish this code above can help you
Try
$(function () {
$("#box").click(function (e) {
var d = new Date();
var $div = $('#result .item[data-id="' + id + '"]');
if ($div.length == 0) {
$div = $('<div/>', {
"class": 'item',
"data-id": id
}).appendTo('#result');
}
$div.html(person + ' last clicked the box at ' + d);
});
});
Demo: Fiddle
I might have done it slightly different using a class attribute to mark the clicked item: http://jsfiddle.net/arunpjohny/CDCLF/2/
I want append link add in last child of class:(('.' + change_class + ':last .adda .mediumCell:first')) after remove, but if you remove last chil (44444444444444444444), it not append in last child mean 3333333333333333333 and remove with same row, how can fix it?
Example from my code: http://jsfiddle.net/LX49c/1/
$('.remove').live('click',function (e) {
e.preventDefault();
var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
var get_class = $(this).closest('.' + change_class).attr('id');
$('#' + get_class).fadeOut('slow', function () {
$(this).remove();
});
$('.' + change_class + ':last .adda .mediumCell:first').append('add');
});
Move the append(...) to within the .fadeOut function. See http://jsfiddle.net/LX49c/2/
$('.remove').live('click',function (e) {
e.preventDefault();
var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
var get_class = $(this).closest('.' + change_class).attr('id');
$('#' + get_class).fadeOut('slow', function () {
$(this).remove();
$('.' + change_class + ':last .adda .mediumCell:first').append('add');
});
//Moved from here
});
An alternative method is to remove the class before appending: http://jsfiddle.net/LX49c/4/
....
var get_class = $(this).closest('.' + change_class).attr('id');
$('#' + get_class).fadeOut('slow', function () {
$(this).remove();
});
$("#" + get_class).removeClass(change_class);
$('.' + change_class + ':last(-1) .adda .mediumCell:first').append('add');
You're doing multiple expensive JQuery calls. I'd suggest replacing the following code:
var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
//Replace the previous by:
var className = $(this).closest('.find_input').find('div').attr('class').split(" ");
var change_class = className[0];
var url = className[1];
You are appending the link before the remove. You are starting an animation that will remove the element when it's done, but the animation won't start until you exit the function.
If you want to append after the remove, you have to put that code in the event handler that is executed after the animation is done:
$('.remove').live('click',function (e) {
e.preventDefault();
var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
var get_class = $(this).closest('.' + change_class).attr('id');
$('#' + get_class).fadeOut('slow', function () {
$(this).remove();
$('.' + change_class + ':last .adda .mediumCell:first').append('add');
});
});