Javascript&Jquery why can't my animate() work? - javascript

I've written some code, which is shown beneath. I couldn't figure out why hideDialog() can work, but showDialog() doesn't work.Can anybody tell me what wrong is with my code, or give me some information to search? Thanks:)
Here is the error message:
Uncaught TypeError: $(...).showDialog is not a function
function showDialog(){
this.animate({
top:50
},{
duration:400,
effect:'slide',
easing:'easeOutBack'
});
}
function hideDialog(){
this.animate({
top:-200
},{
duration:400,
effect:'slide',
easing:'easeInBack'
});
}
function initSetting(){
$('.form-control').change(function(){
$('#myAlertDialog').showDialog();
$('#myAlertDialog').find('btnOk').on('click',function(){
$('#myAlertDialog').hideDialog();
});
});
}

Try to re frame your code like this,
function showDialog($this){
$this.animate({
top:50
},{
duration:400,
effect:'slide',
easing:'easeOutBack'
});
}
function hideDialog($this){
$this.animate({
top:-200
},{
duration:400,
effect:'slide',
easing:'easeInBack'
});
}
function initSetting(){
$('.form-control').change(function(){
showDialog($('#myAlertDialog'));
$('#myAlertDialog').find('btnOk').on('click',function(){
hideDialog($('#myAlertDialog'));
});
});
}
Or read this question to know how to create user defined functions on top of jquery.

use $.fn.showDialog() instead of just function showDialog().
use $.fn.hideDialog() instead of just function hideDialog().
You're trying to extend the jQuery prototype.
Please see What is $.fn.function and Plugins
How to Create a Basic Plugin

Try to frame your code like this. Further, read about the difference between this and $(this) in jQuery.
function showDialog(item){
$(item).animate({
top:50,
duration:400,
effect:'slide',
easing:'easeOutBack'
});
} // end of showDialog
function hideDialog(item){
$(item).animate({
top:-200,
duration:400,
effect:'slide',
easing:'easeInBack'
});
} // end of hideDialog
function initSetting(){
$('.form-control').change(function(){
showDialog($('#myAlertDialog'));
$('#myAlertDialog').find('btnOk').on('click',function(){
hideDialog($('#myAlertDialog'));
});
});
}
// btnOK should have a # or . for the identifier.
// if the click event does not work, then try with the delegate() function. http://api.jquery.com/delegate/

Related

jQuery error in visibility despite functioning function

I have the problem that with my jQuery code, despite the working code, the error message:
script.js: 28 Uncaught TypeError: $ (...). Css (...) is not a function
occurs. It was supposed to work anyway, but since I don't want any unnecessary error codes in my code, I ask if anyone has a solution to this error?
Here is my code:
$(document).ready(function () {
$("#bgh-tooltipin1").hover(function () {
$("#bgh-tooltipout1").css('visibility', 'visible');
}, function () {
$("#bgh-tooltipout1").css('visibility','hidden')()
});
});
You are adding unnecessary parenthesis at the end:
$("#bgh-tooltipout1").css('visibility','hidden')**()**
The last parenthesis would be fine if .css('visibility','hidden') returned a function, but instead, it returns a jQuery object representing the "#bgh-tooltipout1" element
This is the correct version:
$(document).ready(function () {
$("#bgh-tooltipin1").hover(function () {
$("#bgh-tooltipout1").css('visibility', 'visible');
}, function () {
$("#bgh-tooltipout1").css('visibility', 'hidden');
});
});

.rotate() callback function not working if i remove animateTo parameter

Refer this fiddle where the callback function is getting called
$("#img").rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:10,
duration:200,
callback: function(){
$(this).rotate({
angle: 340,
animateTo:100,
duration:400,
callback: function(){
alert("success")
}
})
}
})
}
}
});
Now in the above code i am just removing the animateTo parameter and the call back is not working !!
check this fiddle
Why is this happening?! is the number of parameters play a role in callback function !?
I think the answer is Parameters
if youcheck this
Check here
then you can see that onclick nothing happening to logo
I have removed animate parameter also onclick event
Ok, I done some more testing, and oufcourse you need all parameters in this case. Can't you just set the animateTo so it does nothing?

Very simple jquery custom function throws error

I have the following code:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$.addRemoveButton();
});
And I get the following error message from firebug:
TypeError: $.addRemoveButton is not a function
$.addRemoveButton();
Why and how can I fix this?
You need to define a selector, try this:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$(document).addRemoveButton();
});
Here is working jsFiddle.
You need to apply that to any DOM.
Example
jQuery Code
$(function()
{
$.fn.addRemoveButton = function() {
alert(1);
};
$('#letit').addRemoveButton();
});
HTML Code
<div id="letit"></div>
or, you can create it as a jQuery global function:
$(document).ready(function() {
$.addRemoveButton = function() { // removed the .fn
alert(1);
};
$.addRemoveButton();
});
This binds the function to the jQuery object, where you can then use it like in your original example.
See this post for the difference between jQuery.fn.method and jQuery.method

Call A Function On ScrollExtend - jQuery

How to call a function on scrollExtend. I need the code like below but its not working fine. How to make it work?
$(document).ready(
function() {
$('#scrollBox').scrollExtend(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
But the actual code of scrollExtend is like below in which i dont know how to call a function on it,
jQuery('.scroll_container').scrollExtend({
'target': 'div#scroll_items',
'url': 'more_content.html',
'newElementClass': 'list_item more_content'
});
I would use the built in function onScrollBeyond in JQuery.
Else there is a setting in scrollExtend that is called beforestart and onSuccess which both are callback variables which means you could put functions there like
$('#scrollBox').scrollExtend({
'target': 'div#scroll_items',
'beforeStart': myFunction,
'onSuccess': mySecondFunction
});
Regards
As BeadFist said, you can simply use onScrollBeyond:
$('.scroll_container').onScrollBeyond(functionCall);//if the function exists already, just pass a reference too it
$('.scroll_container').onScrollBeyond(function()
{
//your function
});
Mind you, for both scrollExtend and onScrollBeyond, you need the plugin, of course.
Try using onScrollBeyond:
$(document).ready(
function() {
$('#scrollBox').onScrollBeyond(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
Try:
$('#scrollBox').scroll(function() {
if($('#scrollBox').scrollTop() + $('#scrollBox').height() == $(parentElm).height()) {
alert("bottom!");
}
});

Convert String to Function in Javascript

I have a little problem with creating a new function from a string.
The example: I have a div, and some buttons. One of the buttons just make my div animating, nothing else. But the other button make the div animating and after the animation is complete, call a new function.
I have to handle the new, following function as a variable, because there will be a lot of function I have to call after the div animated.
Here is an example I made: http://jsfiddle.net/AmVSq/3/. I hope you can understand my problem.
I found the new Function(); in JavaScript but it just left me in doubt and the JS console did not log anything.
Can somebody tell me what am I doing wrong?
Thank you so much..
In JavaScript, functions are "first class" objects. This means you can assign them to variables and pass them to other functions as parameters.
There is no need to create a function from a string when you can pass the function name itself, like so:
<div>Close Div then do something</div>
and the script:
function close_div( next_function ) {
$('#wrap').animate({ 'height': '-=100px' }, 300, function() {
if ( next_function ) {
// do the following function
next_function();
}
});
}
--- jsFiddle DEMO ---
In fact, for your purposes, you can simply pass next_function right along to the animate function, like this:
function close_div( next_function ) {
$('#wrap').animate({ 'height': '-=100px' }, 300, next_function);
}
There's no need to check if next_function is undefined, because .animate will do that for you.
What you're doing wrong is using new Function at all. The correct way is to just pass the function, which are objects like anything else in JavaScript:
http://jsfiddle.net/minitech/AmVSq/6/
<div>Close Div</div>
<div>Close Div then do something</div>
<div>Close Div then do another thing</div>
<div id="wrap"></div>​
function close_div( next_function ) {
$('#wrap').animate({ 'height': '-=100px' }, 300, function() {
if(next_function) {
next_function();
}
});
}
function alert_me() {
alert( 'The animation is complete' );
}
function confirm_me() {
confirm('Are you sure?');
}
Or, more concisely, $('#wrap').animate({height: '-100px'}, 300, next_function);.
The chrome console displays the result properly:
> f = new Function("alert('hello');");
function anonymous() {
alert('hello');
}
> f(); //executes it.
But using string to create function, or passing strings to functions to execute it is really bad practice.
function test(callback) {
callback();
}
test(function() { alert("hello"); });
You don't need to make the function into a string, you can pass functions as arguments to other functions in Javascript.
For example:
function get_message1() {
return "hello world";
}
function get_message2() {
return "yay for first-class functions";
}
function print_message(message_func) {
console.log(message_func())
}
print_message(get_message1);
print_message(get_message2);

Categories