I have got two functions :
function startgame() {
"some code"
}
function return() {
"some other code"
}
1) how to run functions here :
$( "#start" ).on('click', function() {
/*I need my startgame function to run when the button is clicked*/
});
$( "#clear" ).on('click', function(){
/*I need my return function to run in here*/
});
2) Second question is what is the best way to call my functions in this code :
$( "#check" ).on('click', function() {
if ( $.inArray ( newword, words ) > -1 ) {
/*here I need to run my return function*/;
} else {
g = g+6;//adds points
/*and here I need to run my startgame function*/;
}
});
Thanks !
return is a reserved keyword. So i changed function name to return_val
JSFiddle Demo
function startgame() {
alert("startgame");
}
function return_val() {
alert("return");
}
$("#start").on('click', startgame);
$("#clear").on('click',return_val);
$( "#start" ).on('click', function() {
startgame();
});
$( "#clear" ).on('click', function(){
return_function()
});
you can't call a retun as a function name , the simple answer for your question is just to call the function whenever you want using Function_Name();
If you know how to create a function, you must know how to use or call them unless you had copied them elsewhere. In JQUERY you can call function with the function name followed by () and if that function accept params then put them inside () like
$( "#start" ).on('click', function() {
startgame();
});
$( "#clear" ).on('click', function(){
return_function()
});
You can also do
$( "#start" ).on('click', startgame());
$( "#clear" ).on('click', return_function());
It depends on how you need them.
Hope it helps!
Related
I have a hidden container that contains comments, and a <div> with a <p> inside that says "Show all comments" that I click to show the comments. When I click the div it shows the hidden comments container perfectly, but when I click it again it doesn't hide the comments container. I am thinking there is something wrong with my jQuery code maybe?
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};
When you initialize commentsHidden it is never updated so it always has its initial value. You need to check if its hidden on every click. So you don't need an if statement to attach the event. Just attach a single click event and check inside the event if its hidden and continue accordingly.
$(".see-all").click(function() {
var commentsHidden = $(".comments-container").is(":hidden");
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
When you call on('click', ..) or its shortcut click(..), you install a new handler. What ends up happening is that you have multiple handlers on the same object, and they all get called. Instead, either install the handler only once:
// In global code or code that gets executed upon module load
// Only once!
$(".see-all").click(function() {
if ($( ".comments-container" ).is( ":hidden" )) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
or unbind the old handler:
$( ".see-all" ).off('click'); // Unbind all click handlers
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};
You need to check the flag state inside the click function(). The way you have it now will only bind the click handler once on page load.
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
Try changing to
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
}
});
The click handler should only be bound once, and you need to check whether comments are hidden each time the p element is clicked.
I don't understand the use of stop() element in jquery.
In this example, i try to open a div when the user launch the myfunction function (for example by clicking on a trigger)
But if you click several time, #mydiv desapears anyway, without waiting 3 seconds, because it close 3 second after your first click.
function myfunction(hello)
{
$( "#mycontener" ).html( hello );
$( "#mydiv" ).stop( true, true ).slideDown( 250, function() {
setTimeout(function() {
$("#mydiv").slideUp( 250 );
}, 3000);
});
};
Is it clear enough ?
Thanks
You will need to clear the timeout to prevent it from happening on future calls. Something like this:
(function () {
var handle;
function myfunction(hello) {
clearTimeout(handle);
$("#mycontener").html(hello);
$("#mydiv").stop(true, true).slideDown(250, function () {
handle = setTimeout(function () {
$("#mydiv").slideUp(250);
}, 3000);
});
}
window.myfunction = myfunction;
})();
I want to call a function in jquery when mouse click or key press is occure
one way is to write same code twice for this both event but it is not proper way
can any one tell me how it is possible?
write a function
function Process(){
//Put all your logic
}
call the function in all the event
$("some element selector").on("click keypress",function() {
Process();
});
or any other click event.
If you want to register both handlers to the same element then you can use .on() to register handler for multiple events
$('myelementselector').on('click keypress', function () {
//mycode
})
Use the on method.
$("some element selector").on("click keypress",function() {
//do something
});
yes you can use like
<input type="text" />
$(document).on("click mouseenter","input",function(){});
Try this:-
$(element).on('click keypress keydown', function() {
});
Write only one function & call it on both event.
$( "#target" ).keypress(function() {
funABC();
});
$( "#target" ).click(function() {
funABC();
});
function funABC(){alert("DONE");}
One more shortcut :
$( "#target" ).click(function() {
$( "#target" ).keypress();
});
$( "#target" ).keypress(function() {
funABC();
});
You also use :
$( "input" ).on('keypress mouseup',function() {
alert('done');
});
or
$( "input" ).on('keypress mouseup',fun);
I am writing an small code to run on CKEditor document click event, but its not working. My code is,
var element = CKEDITOR.document.getById( 'Editor_TextArea' );
element.on( 'click', function( ev )
{
//mycode
alert('ok');
}
);
Can anyone help me..
That CKEDITOR.document.getById( 'Editor_TextArea' ); is not giving any values for me..
So i used the below code and its works well.
CKEDITOR.instances['Editor_TextArea'].on('contentDom', function() {
this.document.on('click', function(event){
//your code
alert('Click Event');
});
});
This will work emailTemplateBody is name of textarea field.
var editor = CKEDITOR.instances.emailTemplateBody
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'click', function () {
console.log("click event");
});
});
editor.editable().on('click', function (event) {
//YOUR CODE GOES HERE
});
I am learning jQuery and I'm finding that this code is not working:
<script type="text/javascript">
$(document).ready(
/* Navigtion Stuff */
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
)
},
function(){
$(".menu").parents("li").addClass("active");
}
);
</script>
The first function does what it is supposed to. The second function does not. Is my syntax bad? If not, then I have a feeling that my code is conflicting with some other Javascript on the page.
Thanks in advance!
you have a little confusion with the brackets
$(document).ready(
/* Navigtion Stuff */
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
);
$(".menu").parents("li").addClass("active");
}
);
is better.
The ready function only takes one parameter. You are trying to pass two functions.
function 1 :
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
)
}
function 2:
function(){
$(".menu").parents("li").addClass("active");
}
To bind the hover event to $('.menu ul') and add 'active 'class to $(".menu").parents("li") you should do
$(document).ready(function() {
/* Navigtion Stuff */
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
);
$(".menu").parents("li").addClass("active");
});
The ready function only takes one function as a parameter. See the above posts for examples.