On mouseover event i want to call function which will do somethig when the mouse will be over on images but i dont know how to write code for it.
function reload(){
$("img.lazy").lazyload({
effect : "fadeIn",
event:"mouseover"
});
}
eg:-
function reload(){
$("img.lazy").lazyload({
effect : "fadeIn",
event:function(moueover)
{
//do somthing here
}
});
}
You want to use mouseenter:
$('.test').on('mouseenter', function() {
alert( 'mouse is over here' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hover here</div>
Let's see if this works for you
$(function() {
$("img.lazy")
.mouseover(function() {
console.log("Mouseover");
});
});
You can d like this
jQuery('#youdomid').hover(function(){
// do your stuff here
//, your mouse has entered
alert(2);
},
function (){
// your mose leave the element
// do the stuff what you want
alert("leaved");
}
)
You can also use .hover function
$( "img.lazy" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
$(document).ready(function(){
$("img.lazy").lazyload({effect : "fadeIn"}, function() {
mousehover();
});
}
function mousehover(){
//do something mousehover stuff on here
}
You can just use the event mouseenter below:
$('.lazy').on('mouseenter', function() {
console.log('foo');
});
Related
This is my bind code:
<div id="exam-passing-test">
<button id="button-next-task">
<div class="e-div-nextpage-style">'.$butText.'</div>
</button>
</div>
function($){
$.event.special.destroyed = {
remove: function(o) {
if (o.handler) {
o.handler()
}
}
}
})(jQuery);
$("#exam-passing-test").on("destroyed", function() {
console.log("bind")
alert("Error");
});
$("#button-next-task").on("click", function(e){
e.preventDefault();
$("#exam-passing-test").off("destroyed", function() {
console.log("unbindOk")
});
$("#content-exam").load("/exam.php?action=show&epage=task&categoryId=" + selectedCategoryId, {testData:testData});
)};
Ok, now i just try to do that, I simplified the code, but off still not working. Need to off() event on click button.
Consider using jQuery.one() method:
$( "#exam-passing-test" ).one( "click", function( event ) {
alert( "A click event happened!" );
});
It will handle your click event just once.
Is it possible listen click and change for one code?
$(document).on("click", "button.options_buy",function(event) {
// same code
}
$(document).on("change", "select.options_buy",function(event) {
// same code
}
I try this
$(document).on("click change", "button.options_buy,select.options_buy",function(event) { }
It works but I want 'click' only for 'button.options_buy' and 'change' for 'select.options_buy'
is it possible?
Best way to do it is to have two event handlers as you have, but only have a common function that is called from each:
$(document).on("click", "button.options_buy",function(event) {
commonFunction();
})
$(document).on("change", "select.options_buy",function(event) {
commonFunction();
})
function commonFunction(){
//common function code
}
I would like to extend your code.
$(document).on("click change", "button.options_buy,select.options_buy",function(event) {
if(event.type=="click"){
someFunction();
} else if(event.type=="change"){
someFunction();
}
}
You can use .on() to bind a function to multiple events:
$('#foo').on('keypress click change', function(e) {
//
});
OR declare a function and call it for each event
$('#foo')
.change(myFunction)
.click(myFunction)
.blur(myFunction)
jQuery .bind()
$( "#foo" ).bind({
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});
OR
$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});
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/
I want to know how to change jquery mobile default Page Transition to slide ?
i tried
$("div[data-role=page]").bind("pagebeforeshow", function ( e , data ) {
console.log("++++++++++++++++++++++++++++++++++++ page before show");
$.mobile.silentScroll(0);
$.mobile.changePage.defaults.transition='slide';
});
and
$( document ).on( "mobileinit", function() {
//apply overrides here
$("div[data-role=page]").pagecontainer( "change" , { transition: "slide" } );
});
But both did not work
Solution :
Okay found the answer this mobileinit need to call before jq mobile load
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$( document ).on( "mobileinit", function() {
alert("yes");
console.log("mobile initialize .....");
$.extend( $.mobile , {
defaultPageTransition: 'slide'
});
});
</script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
Like this:
$( document ).on( "mobileinit", function() {
$.extend( $.mobile , {
defaultPageTransition: 'slide'
});
});
Or this:
$(document).bind('mobileinit', function() {
$.mobile.defaultPageTransition = "slide";
});
I am writing this code, first toggle function is working but second toggle isn't. Why is that?
<script type="text/javascript">
$(document).ready(function(){
$( ".navicon" ).click(function() {
$( "#menu" ).slideToggle( "medium", function() {
// Animation complete.
});
});
});
$(document).ready(function(){
$('.navicon').toggle(function () {
$("body").css({"overflow": "hidden !important"});
$("#mobile_menu").css({"width": "100% !important"});
});
});
</script>
The toggle() method was deprecated, you need to use an alternative, such as a flag to depict the 'toggled' state.
A loose example:
$('.myclass').click(function() {
if ($(this).hasClass('toggle')) {
doThis;
$(this).removeClass('toggle');
} else {
doThis;
$(this).addClass('toggle');
}
});
And encase all of your functions with $(document).ready() rather than doing it for each individual one.