I used jssor for image slide show in that if user clicked play show first time it works properly but if user clicking the play button again to initiate player even it is already loaded with another group of images. It shows this error Uncaught Error: prototype of 'thumbnavigator' not defined.
Jssor Slider cannot initialize the same "slider container" twice.
Please remove it and repopulate html code and then initialize it again.
$("#slider1_container").remove();
//do something to repopulate the "slider1_container" element.
...
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
Related
I have a simple Ionic v1 app that displays a list of items. Clicking on an item navigates the user to a new view displaying info about the item.
If the user selects a second before the first item is loaded, the app will navigate to both views respectively, which is an issue.
Is there a way to prevent this via an ionic config or angular?
Note I am using Ionic Native Transitions, but this issue seems to be independent
*Edit * I know I can use something like a 'loading' modal to prevent clicks, but then I'll have to do this for every single list in the application that loads data, so that doesn't sound ideal
I ended up utilizing inoicNativeTransition.beforeTransition in order to render a modal-style backdrop that prevents users from clicking for 300ms
$rootScope.$on('ionicNativeTransitions.beforeTransition', function(){
$rootScope.stateTransitioning = true;
$timeout(function(){
$rootScope.stateTransitioning = false;
}, 300)
});
HTML
<div ng-show="stateTransitioning === true" id="inivisible-backdrop"> </div>
I don't hide the backdrop on the success of the transition, because there seems to be an inconsistent lag between when the view is changed and the transition is marked as 'successful'. 300ms seems to work just fine
I am writing test cases in protractor using chromedriver
I have a link which when clicked gives an overlay div pop up where I can enter few details and Add details. After adding the details again the main page and link is visible. But when I am trying to click on the main link second time I am getting
WebDriverError: unknown error: Element is not clickable at point (330, 367). Other element would receive the click:
I tried using the below code still issue is not resolved
browser.wait(EC.elementToBeClickable(link)).then(function(){
link.click().then(function(){
browser.sleep(3000).should.notify(next);
});
});
Can someone please help
I have seen this in my application before, Once you close the pop-up you have to wait for the window closing animation to finish. Your flow should be something like below
browser.wait(EC.elementToBeClickable(link),5000)
//Fill the pop-up
element(by.css('.textArea')).sendKeys('jhghaskjdhkjasd')
//close the pop-up
element(by.css('.close')).click()
//wait for the pop-up to close
browser.wait(ExpectedConditions.invisibilityOf(element(by.css('.pop-up'))),5000)
Also as a side point, you don't need to chain all webdriverJs promises.They are already placed in queue using Protractor control flow
I am using Dropzone js for file uploads. This works fine for all events but i do not know how to detect an event when user starts dragging a file but does not drop it over to the dropzone (or let's say he decides to cancel the drop operation)
JSP
<div class="FilesDropzone dz-clickable" id="mydropzone" style="width:97%;height:50px;"><span>Drop files here!</span>//area for further processing</div>
Javascript
var myFilesDropzone = new Dropzone("div#mydropzone", { url:addedFilesResourceURL});
myFilesDropzone .on("dragover", function(event){
var dropzoneFilesHolder = document.getElementById('mydropzone');
dropzoneFilesHolder.setAttribute('style', 'height:150px;border:3px dashed #2AAAE6;');
});
myFilesDropzone .on("drop", function(event){
//display the dropped file });
Currently a blue border area is displayed that shows users where to drop the file. So if user decides to cancel drop i want to hide that area. But i do not know which event exactly is it.
I tried with dragleave but figure out that it was not the correct event. Any ideas?
I am making a custom plugin for the editor provided by Google Closure. The plugin makes it able to add a button.
I am having problems by setting an onclick on the button, the other values are nicely set.
button.innerHTML = event.label;
button.className = event.initialClass;
var extraClasses = event.extraClasses;
if (extraClasses)
{
button.className += ' ' + extraClasses
}
button.onclick = function() { event.onclick };
Does anyone know what I am doing wrong and how I can fix this?
After creating a button it is added to the editors SeamlessField. A second problem that I currently have is that after creating the button, my pointer is inside the button and I can't seem to get it out of there.
I've got the follow piece of code for handling this at the moment. The var button is the created button. button contains: <button class="orange">test</button>
// We want to insert the button in place of the user's selection.
// So we restore it first, and then use it for insertion.
this.restoreOriginalSelection();
var range = this.fieldObject.getRange();
button = range.replaceContentsWithNode(button);
// Done making changes, notify the editor.
this.fieldObject.dispatchChange();
// Put the user's selection right after the newly inserted button.
goog.editor.range.placeCursorNextTo(button, false);
// Dispatch selection change event because we just moved the selection.
this.fieldObject.dispatchSelectionChangeEvent();
Any ideas about how I could fix this second problem aswell?
For the first, it does not look like you have begun using Google Closure event code. Wiring up the button to the 'click' event in Google Closure would be as follows:
goog.events.listen(button, goog.events.EventType.CLICK, event.onclick)
You should also be investigating the goog.dom and goog.dom.classes namespaces if you'd like to use Google Closure's wrappers around standard CSS class and text DOM manipulation.
For the second, were you testing in Chrome? If so, you might have ran into a range issue in Webkit, documented within the Closure code itself:
https://code.google.com/p/closure-library/source/browse/closure/goog/editor/range.js#174
I have gotten around this in the past by inserting an empty <span> element as a sibling after the offending element (the button, in your case), and placing the cursor next to the <span> instead. However, there's nothing stopping the user from moving the cursor back inside your button. You'll have to add more logic to prevent a user from placing the cursor within the button's text.
I have an Ext Js panel that I am adding to my main TabPanel. The panel I am adding contains a FormPanel as one of it's items and inside the FormPanel I have a Name field. What I want to do is change the name of the Tab based on the name in the form field.
The problem is that if I call the FormPanel's getForm().getValues() inside of the panel's initComponent, I get the following javascript error:
Uncaught TypeError: Cannot read property 'dom' of undefined
If I do this outside of initComponent (e.g. on a button press) everything works fine. After doing some testing, I think the issue is that the FormPanel isn't actually rendered yet (and thus the dom doesn't exist), getValues() fails. However, I can't seem to figure out a way to get my FormPanel's values from the Panel on load.
I tried to listen for events. I tried:
this.detailForm.on('afterrender', function () { alert('test'); });
but doing this showed that AfterRender is called prior to the form actually being rendered (it's not visible on the screen). Changing the alert to my custom function handler produces the previous dom exception. I attempted to use the activate and enable events instead of afterrender, but even though the API says that FormPanel fires those events, the alert('test') never gets called.
I can't seem to find any way for my panel to get the inner FormPanel's values upon loading my panel. Does anyone have any ideas?
Using getFieldValues() in place of getValues() will collect values by calling each field instance's getValue() method instead of by reading from the DOM. This should allow you to get your values regardless of the form's rendered state.
I've got the same problems on one of my projects, I managed to fix it using the afterlayout event.
I'd give setting .deferredRender:false a try.
Ext.TabPanel.deferredRender
Probably best to roll out of your afterlayout changes, then test with just a straight deferredRender:false config item.
I believe the problem is caused because the inactive tabs are not rendered until they become active. In your scenario, you cannot get the values, because they don't exist until the tab is activated/shown.
Setting deferredRender:false will render the items within all tabs. There could be a performance hit by setting deferredRender:false, so testing you must do.
Hope this helps.