There is an annoying effect in v0.12.0 of Bootstrap tour when activating backdrop.
It works, but once you click next step, backdrops disapears for a moment and appears again doing a blink.
Anyone has a way to deactivate this behavior or a fix for this?
This is the last version... and it is 1 year old by now.
Well I did something that worked.
In the "hidestep" function I changed the condition, removing the last or statement:
if (step.backdrop) {
next_step = (iNext != null) && _this.getStep(iNext);
if (!next_step || !next_step.backdrop /*|| next_step.backdropElement !== step.backdropElement*/) {
_this._hideOverlayElement(step);
}
}
So it ends:
if (step.backdrop) {
next_step = (iNext != null) && _this.getStep(iNext);
if (!next_step || !next_step.backdrop ) {
_this._hideOverlayElement(step);
}
}
Related
I'm running this code and every time I save, it adds 3 other words that I didn't want to be added.
useEffect(() => {
const fuse = new Fuse(slideRows, { keys: ['data.description', 'data.title', 'data.genre'] });
const results = fuse.search(searchTerm).map(({ item }) => item);
if (slideRows.length > 0 && searchTerm.length > 3 && results.length > 0) {
setSlideRows(results);
} else {
setSlideRows(slides[category]);
}
}, [category, searchTerm, slideRows, slides])
The last line of code I only one one word searchTerm but vs code keeps auto filling the array with the other 3 words.
Is there a setting to prevent this or how do I solve this issue?
because of this it will create infinite loop.you can disable eslint plugging and try if you are using that.because this will do auto filling.
I am using ionic native transition plugin in my app. I am using slide up transition for pages.It works,but when state changes it shows the same page for a short period of time and then the other page (the page where I want to switch) appears. Here is the github link.I tried with different values for the default options, but it doesn't solve my problem. any help will be appreciated
I'm not sure if your issue is the same that I had (when transition to next/previous state begins the "new state" which it's supposed to transition to is shown in the "old view" before/during animation) but here is what I did. I found a solution which is to add a timeout to the state change in the stateGo() function in the ionic.native-transitions(.min).js which leads to it being run as the last function. The following code works on both iOS and Android devices.
function stateGo() {
var state = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
var stateParams = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var transitionOptions = arguments.length <= 2 || arguments[2] === undefined ? null : arguments[2];
var stateOptions = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
if (!state) {
$log.debug('[native transition] cannot change state without a state...');
return;
}
unregisterToStateChangeStartEvent();
transition(transitionOptions);
if (ionic.Platform.isIOS()) {
$timeout(function() {
$state.go(state, stateParams, stateOptions);
});
} else {
$state.go(state, stateParams, stateOptions);
}
}
I decided to add the check for an iOS device and run the timeout only in that case because it was only occurring in iOS devices and the timeout perhaps made Android devices flicker a little on the transition (I could be paranoid and this not really even occurring, or is due to large images on the content on my app).
Same fix probably also works in the case that you are using locationurl instead in which case you just set timeout to the "$location.url(url);" function.
Not sure if this would be the final solution for this problem but it works for now and hopefully the plugin will be fixed soon so this problem won't bother anyone else.
The same issue was on my side as well when using:
$scope.$on('$ionicView.enter', function(event, viewData) {
var transitionDirection = viewData.direction !== "back" ? "left": "right";
var options = {
"direction": transitionDirection,
"duration": 600,
"androiddelay": 75
};
window.plugins.nativepagetransitions.slide(
options,
function () {},
function () {}
);
});
However, when I changed the '$ionicView.enter' event to '$ionicView.beforeEnter', it solved the case for me. Not sure if that is a proper solution though.
I have been trying many things to attach a click event handler to a selection box in tinymce 4.0.2 content with no success. Does anyone know how to do this in a custom plugin? The following is what I have tried but it is not functioning.
ctr++;
var id = 'vnetforms_elem_'+ctr;
editor.insertContent('<select id="'+id+'"><option>X</option</select>');
tinymce.dom.DOMUtils.bind(tinymce.activeEditor.dom.select('#'+id)[0],'click',function() {
alert('click!');
});
Using jQuery this may help:
$(ed.getBody()).find('#'+id).bind('click', function() {
alert('click!');
});
I have solved my own problem.
It turns out that this was indeed a bug in firefox. When a select element in firefox is marked as editable it doesn't fire events. I was able to resolve this with the following.
ctr++;
var id = 'vnetforms_elem_'+ctr;
editor.insertContent('<select id="'+id+'"></select>');
tinymce.activeEditor.dom.select('#'+id)[0].contentEditable = 'false';
addEvent(tinymce.activeEditor.dom.select('#'+id)[0],'click',function() {
alert('MyClick');
});
Where addEvent is defined in the custom plugin as
var addEvent = function(node,eventName,func){
if ("undefined" == typeof node || null == node) {
} else {
if (!node.ownerDocument.addEventListener && node.ownerDocument.attachEvent) {
node.attachEvent('on' + eventName, func);
} else node.addEventListener(eventName,func,false);
}
}; this.addEvent = addEvent;
I am struggling with function that should check form fields before submitting.
I have some select (dropdown fields) and a text field. None of them should be empty for submit.
The script http://jsfiddle.net/6KY5J/2/ to reproduce.
I check dropdown fields within .each and additional text field. Here is the function:
function checkFields(e) {
$$('.dropdown').each(function (element) {
if (element.selectedIndex === 0) {
alert('Fill all dropdown fields!');
Event.stop(e);
throw $break;
return;
}
});
if ($('sometext').value == '') {
alert('Fill the input!');
Event.stop(e);
return;
}
alert('OK!');
}
But I am not able to prevent further execution of the script if one of dropdown is empty. Event.stop(e) seems to to work for the input field only in the second part.
Desired behaviour:
Check dropdowns, if one is empty, stop execution, do not make any
further checks.
Check text input field only if dropdowns are not empty.
Submit only if everything if filled.
The issue is in step 1. My script does not stop here, alerts, but does not stop. Any idea? Thank you!
function checkFields(e) {
var dropdownsokay = true;
$$('.dropdown').each(function (element) {
if (dropdownsokay && element.selectedIndex === 0) {
alert('Fill all dropdown fields!');
Event.stop(e);
dropdownsokay = false;
}
});
if(dropdownsokay) { //only check textfield if all the dropdowns are okay
if ($('sometext').value == '') {
alert('Fill the input!');
Event.stop(e);
return;
}
alert('OK!');
}
}
I am trying to implement a custom WYSIWYG editor using a contenteditable <div>.
One of the major issues I am facing is the inconsistent way browsers handle ENTER keystroke (linebreaks). Chrome inserts <div>, Firefox inserts <br> and IE inserts <p>. I was taking a look at TinyMCE and it has a configuration option called forced_root_block. Setting forced_root_block to div actually works across all major browser. Does someone know how forced_root_block option in TinyMCE is able to achieve it across browsers ?
In the tinymce source (/tiny_mce/classs/dom/DomParser.js) you will find the following:
rootBlockName = "forced_root_block" in args ? args.forced_root_block : settings.forced_root_block;
whiteSpaceElements = schema.getWhiteSpaceElements();
startWhiteSpaceRegExp = /^[ \t\r\n]+/;
endWhiteSpaceRegExp = /[ \t\r\n]+$/;
allWhiteSpaceRegExp = /[ \t\r\n]+/g;
function addRootBlocks() {
var node = rootNode.firstChild, next, rootBlockNode;
while (node) {
next = node.next;
if (node.type == 3 || (node.type == 1 && node.name !== 'p' && !blockElements[node.name] && !node.attr('data-mce-type'))) {
if (!rootBlockNode) {
// Create a new root block element
rootBlockNode = createNode(rootBlockName, 1);
rootNode.insert(rootBlockNode, node);
rootBlockNode.append(node);
} else
rootBlockNode.append(node);
} else {
rootBlockNode = null;
}
node = next;
};
};
This obviously takes care of creating root block elements.
I am 99% sure that tinymce handles the 'ENTER' keystroke itself and stops the propagation/ default browser command.