It is possible to declare 2 more functions in main function like this ?
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: function() {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
and i receive the following error: Uncaught SyntaxError: Unexpected token ( on this line "show: function() {"
Remove the function from the right of the countdown (demo)
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
Next time, use jsFiddle to make a demo and click the "JSHint" button.
Actually, none of this will work. Unless you make countdown an object or you treat its sub-functions as proper functions.
Why: Under countdown, you created an instance of object not a function.
var jquery4u = {
countdown: function() {
show = function() {
console.log('show');
}
hide = function() {
console.log('hide');
}
jquery4u.countdown.show();
}
}
The above code is a valid code so it is possible. Unfortunately it will not return anything.
The proper way to do this is in this format:
var jquery4u = {
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
This will work. You can try it out by calling:
jquery4u.countdown.show();
Related
I have a timeout setup like this below:
var someObj = {
init: function() {
someObj.timeout();
someObj.someWork();
},
timeout : setTimeout(function() {
someObj.myFunc();
}, 15000),
myFunc: function() {
console.log('myFunction called');
},
someWork: function(){
console.log('some work');
if(this.timeout !== null){
console.log('clearing timeout...');
clearTimeout(this.timeout);
}
}
}
$(function() {
someObj.init();
});
I want to stop the timeout if it is assigned to timeout variable and not null.
Jsfiddle link: https://jsfiddle.net/jy2p7jtd/17/
Is it possible?
Update:
Is this valid way to assign a timeout and clear it?
var someObj = {
timeout :null,
init: function() {
someObj.make();
someObj.someWork();
},
make: function(){
this.timeout = setTimeout(function() {
console.log('myFunction called');
}, 15000)
},
someWork: function(){
console.log('timeout is ', this.timeout);
if(this.timeout !== null){
console.log('clearing timeout...');
clearTimeout(this.timeout);
}
}
}
$(function() {
someObj.init();
});
updated link: https://jsfiddle.net/jy2p7jtd/41/
declare another property timeoutId:null and check if it is present then clear it.
var someObj = {
timeoutId: null,
init: function() {
this.timeoutId = this.timeout();
someObj.someWork();
},
timeout: function() {
return setTimeout(function() {
someObj.myFunc();
}, 15000)
},
myFunc: function() {
console.log('myFunction called');
},
someWork: function() {
console.log('some work');
if (this.timeoutId) {
console.log('clearing timeout...');
clearTimeout(this.timeoutId);
}
}
}
$(function() {
someObj.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
clearTimeout() prevents the function set with the setTimeout() to execute.
How to create play and pause functionality in bookblock.js.
below is my js function which is invoked on click of play/pause button.
i am not able to pause(and again recycle) the slideshow using this function. what is wrong in this.
function playPauseSlide(obj) {
if (isPlay) {
$(obj).find('i').removeClass('glyphicon-pause').addClass('glyphicon-play');
$('#bb-bookblock').bookblock({ autoplay: false });
} else {
$(obj).find('i').removeClass('glyphicon-play').addClass('glyphicon-pause');
$('#bb-bookblock').bookblock({ autoplay: true, interval: 1000 });
}
isPlay = !isPlay;
}
after lots of trying i finally added play and pause functions in slide show by customizing the script.
jquery.bookblock.js
_pauseSlideshow: function () {
if ( this.options.autoplay ) {
clearTimeout( this.slideshow );
}
},
//// public method: pause the slide show
pause: function () {
this._pauseSlideshow();
},
//// public method: play again the paused slide show
playAgain: function () {
this.options.autoplay = true;
this._navigate('next', this.$currentItem);
this._startSlideshow();
},
In my view script
var config = {
$bookBlock: $('#bb-bookblock'),
$navNext: $('#nextPage'),
$navPrev: $('#prevPage'),
$navFirst: $('#bb-nav-first'),
$navLast: $('#bb-nav-last'),
$pause: $('#pause'),
$playAgain: $('#playAgain'),
},
initEvents = function () {
config.$pause.on('click touchstart', function () {
config.$bookBlock.bookblock('pause');
return false;
});
config.$playAgain.on('click touchstart', function () {
config.$bookBlock.bookblock('playAgain');
return false;
});
});
I'm using the below code for tooltip display for click event
Html Component:
Test<br>
JQuery:
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
}
}
); // this is the line i'm getting "Expected Identifier, string or number".
$(this).tooltip("open");
});
I'm using jquery 1.9.1.js and jquery-ui.1.9.2.js. But I'm getting "Expected Identifier, string or number".
EDIT: Error resolved, but still I'm not getting tool tip on click event. Could someone tell me where I went wrong?
This Codepen: http://codepen.io/anon/pen/EjVBOW seems to work for me with your code and latest jQuery and jQuery UI. Did it get resolved for you?
$(document).on("click", ".tooltip", function() {
$(this).tooltip({
items: ".tooltip",
content: function() {
return $(this).data('description');
},
close: function(event, ui) {
var me = this;
ui.tooltip.hover(
function() {
$(this).stop(true).fadeTo(400, 1);
},
function() {
$(this).fadeOut("400", function() {
$(this).remove();
});
}
);
ui.tooltip.on("remove", function() {
$(me).tooltip("destroy");
});
}
}); // this is the line i'm getting "Expected Identifier, string or number".
$(this).tooltip("open");
});
I am building a simple tab system with angularjs, but I'm having trouble referring to this in the parent function. I know I might be misunderstanding some fundamentals, so please educate me:
js:
$scope.tabs = {
_this: this, // doesn't work
open: function(elem) {
$scope.tabsOpen = true;
if(elem)
$scope[elem] = true;
},
close: function() {
$scope.tabsOpen = false;
},
about: {
open: function() {
$scope.aboutOpen = true;
_this.notification.close(); // doesn't work
$scope.tabs.notification.close(); // works
},
close: function() {
$scope.aboutOpen = false;
}
},
notification: {
open: function() {/*etc*/},
close: function() {/*etc*/}
},
message: {
open: function() {/*etc*/},
close: function() {/*etc*/}
},
}
How about:-
$scope.tabs = getTab();
function getTab(){
var tab = {
open: function(elem) {
$scope.tabsOpen = true;
if(elem)
$scope[elem] = true;
},
close: function() {
$scope.tabsOpen = false;
},
about: {
open: function() {
$scope.aboutOpen = true;
tab.notification.close(); // Should work
},
close: function() {
$scope.aboutOpen = false;
}
},
notification: {
open: function() {/*etc*/},
close: function() {/*etc*/}
},
message: {
open: function() {/*etc*/},
close: function() {/*etc*/}
},
}
return tab ;
}
This way you don't rely on what this context would be which is anyways determined by the execution context, not where it is defined. Here you are just using a local tab object created in the local scope while calling the function getTab and instead of doing _this.notification.close(); you can just do tab.notification.close();, where tab is really the this that you are looking for there. A simple Demo
I got a div, that on mouseenter, is suppose to show another div. I'm not sure how to achive this in a plugin. This is my code and what I have tried so far.
Code: JsFiddle
<div class="hover-me"></div>
<div class="show-me"></div>
var Nav = {
hover_me: $('.hover-me'),
show_me: $('.show-me'),
init: function() {
Nav.toggle_display();
console.log('init');
},
toggle_display: function() {
Nav.hover_me.mouseenter(function() {
Nav.show();
});
Nav.hover_me.mouseleave(function () {
Nav.hide();
});
},
show: function() {
Nav.show_me.fadeIn();
},
hide: function() {
Nav.show_me.fadeOut();
}
};
I tried to do this, without any luck.
Nav.hover_me.mouseenter(function() {
Nav.delay(1000).show();
});
see Jimbo's comment:
var Nav = {
// [...]
timeoutId: undefined,
// [...]
};
Nav.hover_me.mouseenter(function() {
Nav.timeoutId = setTimeout(function() {
Nav.show();
}, 1000);
});
Nav.hover_me.mouseleave(function () {
if (Nav.timeoutId) { clearTimeout(Nav.timeoutId); }
Nav.hide();
});
SEE THE FIDDLE