function navigation() {
var navigation = {
value:1
};
return navigation.value;
$( '#cookie_outside').click( function() {
var navigation = {
value:0
};
return navigation.value;
});
$( '#cookie_inside' ).click( function() {
var navigation = {
value:1
};
return navigation.value;
});
}
swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
parallax: false,
initialSlide: navigation(),
grabCursor: true,
resistanceRatio: .00000000000001
});
How can i change default value with click function. "initialSlide: navigation()".
My default value is 1, i want it change when i clicked #cookie_inside or #cookie_outside.
It can be possible instant change?
Your event binding is never triggered due to return statement and another reason is the binding of event must be done outside your function. On your ready function do call setup
function navigation() {
var navigation = {
value:1
};
return navigation.value;
}
function setup()
{
$( '#cookie_outside').click( function() {
var navigation = {
value:0
};
return navigation.value;
});
$( '#cookie_inside' ).click( function() {
var navigation = {
value:1
};
return navigation.value;
});
}
$(document).ready(function(){
//set it up
setup();
});
Related
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 am using the flux architecture with reactjs. I am trying to implement control over displaying a spinjs spinner.
This is my component view that is using the spinner:
var ItemListing = React.createClass({
render: function(){
if (this.state.loading === true) {
return (
<div className="pill-pane active item-list-pane">
<LoadSpin />
</div>
)
}
// .. more non-related logic here
return (
<div className="pill-pane active item-list-pane">
{ items }
<Paginator
paginationClickHandler={ this.paginationClickHandler }
offset={ offset }
limit={ limit }
store={ AppStore }
/>
</div>
);
},
getInitialState: function(){
return {
items: AppStore.getAssetDetails().assetList
};
},
componentWillMount: function(){
AppStore.addChangeListener(this.changeHandler);
AppStore.addChangeListener(this.toggleActivity);
},
componentDidMount: function(){
this.setState({loading: false});
AppActions.queryAssets();
},
toggleActivity: function() {
this.setState({loading: true});
}
});
As shown in componentWillMount I add this.toggleActivity which ultimately sets the loading state to true. Then in componentDidMount I set the loading state to false. But for some reason my spinner remains spinning indefinitely. That is, it never gets set to false when laid out like this. How can I change this so that it will change to false?
Edit - added AppStore.js as requested:
"use strict";
var AppDispatcher = require('../AppDispatcher');
var assetConstants = require('../constants/AssetConstants');
var EventEmitter = require('events').EventEmitter;
var CHANGE_EVENT = 'assetChange';
// Application State
var _assetDetails = {
assetList: [],
requestStatus: undefined,
totalCount: 0
};
var _queryProgress;
var AppStore = $.extend({}, EventEmitter.prototype, {
emitChange: function(){
this.emit(CHANGE_EVENT);
},
addChangeListener: function(callback){
this.on(CHANGE_EVENT, callback);
},
removeChangeListener: function(callback){
this.removeListener(CHANGE_EVENT, callback);
},
getTotalCount: function(){
if(_assetDetails.meta){
return _assetDetails.meta.total_count;
}
return 0;
},
getAssetDetails: function(){
return _assetDetails;
},
getRequestStatus: function(){
return _assetDetails.requestStatus;
},
getQueryProgress: function(){
return _queryProgress;
},
dispatcherIndex: AppDispatcher.register(function(payload){
var action = payload.action.actionType;
if(payload.source === "ASSET_ACTION"){
switch(action){ // eslint-disable-line default-case
case assetConstants.QUERY_ASSETS:
_assetDetails = payload.action.assetDetails;
break;
case assetConstants.QUERY_PROGRESS:
_queryProgress = payload.action.progress;
break;
}
AppStore.emitChange();
_assetDetails.requestStatus = undefined;
}
return true;
})
});
module.exports = AppStore;
Re-edit added AppActions.js:
"use strict";
var assetConstants = require('../constants/AssetConstants');
var AppDispatcher = require('../AppDispatcher');
var config = require('../../config');
var ITEM_V2_MAP = require('./apiRemapping').ITEM_V2_MAP;
var getRemappedAssets = require('./apiRemapping').getRemappedAssets;
var AssetActions = {
queryAssets: function(filters){
var assetDetails;
$.ajax({
method: "GET",
url: config.endpoints.itemAPIV2,
contentType: "application/json",
dataType: "json",
data: filters,
beforeSend: function(){
AppDispatcher.handleAssetAction({
actionType: assetConstants.QUERY_PROGRESS,
progress: "querying"
});
},
success: function(data) {
var remappedAssets = getRemappedAssets(
data.objects, ITEM_V2_MAP
);
assetDetails = {
assetList: remappedAssets,
currentFilters: filters,
meta: data.meta
};
},
error: function() {
assetDetails = {
assetList: [],
totalCount: 0
};
},
complete: function(data) {
assetDetails.requestStatus = data.status;
AppDispatcher.handleAssetAction({
actionType: assetConstants.QUERY_ASSETS,
assetDetails: assetDetails
});
AppDispatcher.handleAssetAction({
actionType: assetConstants.QUERY_PROGRESS,
progress: "finished querying"
});
}
});
}
};
module.exports = AssetActions;
Placing your AppStore.addChangeListener(this.toggleActivity); in the componentWillUnmount() lifecycle should solve the issue.
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();
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
I'm getting a firebug error:
missing : after property id
error source line:
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
This is the surrunding code:
Edited post with update as I was unclear.
I am trying to create a framework for creating dialogues for a project.
In the dialogs there can be four predefined buttons.
The mmDialogButton is my attempt to an ENUM class.
The if statement is there to enable the buttons the user wanted to use in the dialog.
Here is some more code to illustrate.
mmDialog.js
...
function mmDialog(title, spawnerId, widget, buttons){
...
$dialog.html(widget.getInitialHTML())
.dialog({
autoOpen: false,
title: title + ' <img id="myJquerySpinner" />',
buttons: {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
Cancel: function() {
$( this ).dialog( "close" );
},
}
if(jQuery.inArray(mmDialogButton.NEXT, buttons)){
"Next": function() {
widget.doNext();
},
}
if(jQuery.inArray(mmDialogButton.PREVIOUS, buttons)){
"Previous": function() {
widget.doPrevious();
},
}
if(jQuery.inArray(mmDialogButton.OK, buttons)){
"Ok": function() {
widget.doOk();
}
}
}...
mmDialogButton.js
function mmDialogButton(){ // Constructor
}
mmDialogButton.CANCEL = function() { return "mmDBCancel"; };
mmDialogButton.OK = function() { return "mmDBOk"; };
mmDialogButton.NEXT = function() { return "mmDBNext"; };
mmDialogButton.PREVIOUS = function() { return "mmDBPrevious"; };
jsp/html page
var title = "Test Dialog";
var spawnerId = "myJqueryStarter";
var mmDialogButtons = new Array();
mmDialogButtons[0] = mmDialogButton.CANCEL;
mmDialogButtons[1] = mmDialogButton.OK;
mmDialogButtons[2] = mmDialogButton.NEXT;
mmDialogButtons[3] = mmDialogButton.PREVIOUS;
myPublishWidget = new mmPublishWidget();
myDialogPublishWidget = new mmDialogWidget(myPublishWidget);
myDialog = new mmDialog(title, spawnerId, myDialogPublishWidget , mmDialogButtons);
This:
buttons: {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
Cancel: function() {
$( this ).dialog( "close" );
},
should probably be:
buttons: (function() {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons))
return {
Cancel: function() {
$( this ).dialog( "close" );
}
};
return null;
})()
though it's hard to tell. What it looks like you're trying to do is conditionally set that "buttons" property to some object with a labeled handler (that little "close" function). However, the code you posted is syntactically nonsensical. The change I made wraps the "inArray" test in an anonymous function that returns the button object only when that test is true.
Again, I'm just guessing that that's what you were trying to do.
I think you mean to execute the "close" only if CANCEL is in buttons, if it's the case you can write:
buttons: {
Cancel: function() {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
$( this ).dialog( "close" );
}
},
....
EDIT:
you can define the buttons dictionary beforehand as you like, the pass it to .dialog(:
dialog_buttons = {}
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
dialog_buttons[Cancel] = function() {
$( this ).dialog( "close" );
}
}
if(jQuery.inArray(mmDialogButton.NEXT, buttons)){
dialog_buttons["Next"] = function() {
widget.doNext();
}
}
if(jQuery.inArray(mmDialogButton.PREVIOUS, buttons)){
dialog_buttons["Previous"] = function() {
widget.doPrevious();
}
}
if(jQuery.inArray(mmDialogButton.OK, buttons)){
dialog_buttons["Ok"] = function() {
widget.doOk();
}
}
$dialog.html(widget.getInitialHTML())
.dialog({
autoOpen: false,
title: title + ' <img id="myJquerySpinner" />',
buttons: dialog_buttons
}...