Mouse in-out events for Javascript - javascript

question from a beginner..
I want to show/hide an inner div when the mouse enter/out from the parent div. I tried first with onmouseover, onmouseout events, but the problem is that onmouseover keep firing while the mouse over the div, and I want it to fire one time only.
I found JQuery events that might help me, but I don't know where can I put this code because my divs exist in a template for a control, and there is no onload event for the div.
<script type="text/javascript" language="javascript">
// Where should I call this !!!
function Init(sender) {
$(sender).bind("mouseenter", function () {
$(sender.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(sender.childNodes[1], this).hide(500);
});
}
</script>
Any help!

You can use mouseenter and mouseleave events.
You can put your code in the and bind your with these events.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
Init('.your_div_class');
});
function Init(sender) {
$(sender).bind("mouseenter", function () {
$(sender.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(sender.childNodes[1], this).hide(500);
});
}
</script>

Thanks for everybody. as YNhat said, I have to use classes instead of Ids. and this is the code that I used and it's work well.
$(document).ready(function () {
InitEntities();
});
function InitEntities() {
var parentDiv = $(".parentDivClass");
parentDiv.each(function (index) {
var childDiv = $(this).children(".childDivClass");
$(this).bind("mouseenter", function () {
$(childDiv, this).show(250);
}).bind("mouseleave", function () {
$(childDiv, this).hide(250);
});
});
}

css
.parent_div .inner_div
{
display:none;
}
.parent_div:hover .inner_div
{
display:block;
}

This is what I use in a script.
Once the document is fully loaded ($(document).ready) the mouseover event is bound.
I then unbind the event when I'm in it (to prevent it from spamming the event) and bind the mouseleave event.
$(document).ready(function() {
$("#loginformwrapper").bind("mouseover", showLoginForm);
});
function showLoginForm() {
$("#loginformwrapper").unbind("mouseover", showLoginForm);
$("#loginform").animate({
top: '+=80'
}, 1000, function() {
$("#loginform").bind("mouseleave", hideLoginForm);
});
}
function hideLoginForm() {
$("#loginform").unbind("mouseleave", hideLoginForm);
$("#loginform").animate({
top: '-=80'
}, 1000, function() {
$("#loginformwrapper").bind("mouseover", showLoginForm);
});
}

Use this:
<script type="text/javascript">
$(function(){
var mydiv = $("#parent_div_id");
$(mydiv).bind("mouseenter", function () {
$(mydiv.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(mydiv.childNodes[1], this).hide(500);
});
});
</script>
replace the "parent_div_id" with the id of your parent div

Related

Select image by ID

Can you select an image based on id using jQuery? Because when I tried it, it didn't work. Is this the correct way? Thanks
$(document).ready(function () {
$("#imageID").click(function (){
$("#imageID").addClass("className");
});
});
This could be happening because the element is not inside the DOM when you bind the event. Then you could try to bind with jquery using on function and binding the event to body for instance:
$(document).ready(function () {
$("body").on("click", "#imageID", function (){
$(e.target).addClass("className");
});
});
First, check duplicate id's.
Better way:
$(document).ready(function () {
$("#imageID").on('click', function (){
$(this).addClass("className");
});
});
Also, it add new classname only to clicked image, not to all images, so this is right way.
Your problem may occures because you have thow or more tags with #imageID id.
So, more better way is using js-* classes:
<img src="/images/img.png" class="js-my-image" alt="">
Code:
$(document).ready(function () {
$(".js-my-image").on('click', function (){
$(this).addClass("className");
});
});
If image is added after page loads, right code:
$(document).ready(function () {
$(document).on('click', '.js-my-image', function (){
$(this).addClass("className");
});
});
or
$(document).ready(function () {
$(".js-my-image").live('click', function (){
$(this).addClass("className");
});
});

How make this slider with mouse over action?

I created this slider and I want to mouse over action on numbers jquery but I can't seem to get it to work, Does anyone know how I can achieve this? Every time I tried something it seemed to break the slider.
thanks
jsfiddle version: http://jsfiddle.net/BijanZand/cmqkc59b/
Here is the current code:
function tabsrotate() {
$("#slider_a, #slider_b").tabs({
show: function (event, ui) {
var lastOpenedPanel = $(this).data("lastOpenedPanel");
if (!$(this).data("topPositionTab")) {
$(this).data("topPositionTab", $(ui.panel).position().top);
}
$(ui.panel).hide().fadeIn(1500);
if (lastOpenedPanel) {
lastOpenedPanel.toggleClass("ui-tabs-hide").css("position", "absolute").css("top", "0").fadeOut(1500, function () {
$(this).css("position", "");
});
}
$(this).data("lastOpenedPanel", $(ui.panel));
}
}).tabs('rotate', 7777, true);
}
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
});
You can attach a mouseover event to your anchor using jQuery and inside this event trigger the anchor click:
Your $(document).ready will look like this:
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
$('.tabnavigation li a').mouseover(function(){
$(this).click();
});
});

Onclick function on td element Kendo Scheduler

I have a table that is generated by a Kendo Scheduler.
I have to add a click function on each td on document load.
For now, I have tried this:
$(document).ready(function () {
$('td.k-nonwork-hour').click(function () {
alert("Hello");
});
});
For adding a onclick function. I have also tried with onclick
$(document).ready(function () {
$('td.k-nonwork-hour').onclick =function () {
alert("Hello");
};
});
But none of them works. Anyone knows a solution? :)
Better use delegated event instead of attaching event handler to each cell.
e.g.
scheduler.wrapper.on("click", "td.k-nonwork-hour", function() {
alert("Non working day!")
});
Here is live example.
scheduler.wrapper.on("mouseup touchend", ".k-scheduler-table td, .k-event", function(e) {
var target = $(e.currentTarget);
if (target.hasClass("k-event")) {
var event = scheduler.occurrenceByUid(target.data("uid"));
scheduler.editEvent(event);
} else {
var slot = scheduler.slotByElement(target[0]);
scheduler.addEvent({
start: slot.startDate,
end: slot.endDate
});
}
});

jquery .on(click) not working

i have a link on html
Veja aqui ยป</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically
Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle
If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});

How to stop a jQuery animation when it is executed

This is my sample code. Below I explain my problem:
<script type="text/javascript" src="jquery.min-1.10.1.js"></script>
<script type="text/javascript" src="jquery.animate-colors.js"></script>
<script type="text/javascript">
$(function () {
$("a").mouseover(function (){
$("a").animate({color: "#eee"});
});
$("a").mouseleave(function () {
$('a').animate({color: '#000'});
});
});
</script>
Hover Me
Explanation:
When I hover over an item once this is executed consecutively every time you pass the mouse and I would like not to run again while doing an action. What I can recommend for this?
First of all, chain your events and use on, next add .stop(stop, stop):
$(function () {
$("a").on('mouseover', function (){
$(this).stop(true, true).animate({color: "#eee"});
}).on('mouseleave', function () {
$(this).stop(true, true).animate({color: '#000'});
});
});
Demo: http://jsfiddle.net/maniator/bktUt/
please use some logical thing:
Declare a variable in $(document).ready function.
var i = 0;
var j = 0;
$(function () {
if(i==0){
i=1;
$("a").mouseover(function (){
$("a").animate({color: "#eee"});
});
}
if(j==0){
j=1;
$("a").mouseleave(function () {
$('a').animate({color: '#000'});
});
}
});
}
});
YOu are using the correct exit event of mouseleave, but you are not using the correct enter event. You should be using mouseenter which does not fire multiple times.
.mouseenter( handler(eventObject) )
Description: Bind an event handler to be fired when the mouse enters
an element, or trigger that handler on an element.
Also as Neal pointed out, you should also use stop in case the leave/open animation is firing when the user exits/enters the element.

Categories

Resources