video-js has the default toggle-pause-play button, which works fine. for a specific use, i want to a button next to it that pauses, rewinds, show the poster image and the big play button. in other words, a stop button :-)
it should be a simple plugin, but i cant find the right examples .. it would probably start with
videojs.plugin('stopbutton', function(options) {
var StopButton = videojs.Button.extend({ ....
Can anyone point me to the simplest example of adding a button ?
Have a look here for a partial answer to your question.
If you decide to build your own "stop" button on top of the videojs interface then the sequence would be something like (API ref here):
myPlayer.pause();
myPlayer.currentTime(0);
myPlayer.posterImage.show(); // as per OP plans
myPlayer.bigPlayButton.show(); // as per OP plans
Related
I've started working with Dragula and I'm having elements be moved from one box to another. However, I want to be able to click a button and have the Dragula elements be placed back where they were before, basically resetting it. I've looked around for a solution but I can't seem to find any anywhere, so if anyone can help me with this I'd appreciate it.
You are going to want to pull out the HTML data from the two boxes compile the data and reset then second box.
// reset toppings using JQuery each() method
$("#box2").each(function () {
$("#box").append(this);
});
Hope this helps, just remember all you and doing is targeting the box2 and pulling out the information.
Here is another version that is not quite as clean but easier to follow:
var dragged = $("#box2").html();
var notDragged = $("#box1").html();
var original = dragged + notDragged ;
$("#box1").html(original);
$("#box2").html("");
We are using VueDraggable (and Vue) in our front-end and we are testing our front-end with Dusk.
I am currently trying to use $browser->drag('selector', 'selector') from dusk to drag objects from one list to the other, but I don't see anything happening during the test (although it might be the action is not visible) nor is the right result shown, the object does not end up in the indicated list.
I was wondering if anybody made a working example already of using $browser->drag() combined with Vue.draggable? I am asking since I don't know if I am trying the impossible or not.
There is an open issue for this on Dusk's Github. I had to open a new issue that can be found here since the original was closed for comment. The link contains a more thorough explanation, but the short answer and solution are highlighted here:
Problem: Laravel's Dusk does not trigger Vue.draggable events. To simulate a drag-and-drop Dusk does a "mouse down", "move mouse to location", and "mouse up" sequence. In theory this is correct but does not trigger Vue' s events.
Solution: Dusk's method does trigger mouse down and mouse up events, so we can simply use those events to trigger the ones desired.
$("a[draggable='true']").on("mousedown", function(event) {
$(this).trigger("dragstart");
});
$("div[droppable='true']").on("mouseup", function(event) {
$(this).trigger("drop");
});
This JSFiddle is an example of how it would work (though you need to implement it on a Laravel project to truly test, of course!).
a) I have a complex of nodes and edges. I want to add a title to the complex. Is there any way in Cytoscape.js, where I can display the title of the complex?
b) Additionally, I want to give user an option to download the complex in png file with a right click option, but my right click on the cytoscape div doesn't work. Is there any way or any flag I need to change to enable my right click on the picture?
Looks like no one is going to answer my question, answering them myself:
So, after struggling with these questions; I have got the solution for my first problem i.e. putting the title. We can have a parent node with the label as your complex title and then display it on the node. Don't think that it is a good way to do it. There should be something in cytoscape.js to display the title as well. But I don't think it is there yet.
In cytoscape there is an option to bind the event on right click, "cxttap" I used that to make a right click event. But I don't know how to give options on that click, working on that..!! If you are looking for same solution, stay tuned ;)
You can use right button with cytoscapejs by modifying the code below, adding your code
cy.on('cxttap', function(e){
console.log("right click!"); // just to check that it works, look at the console
// add here your code...
// ....
})
Ok guys,
I'm QAing a claims application by guidewire and this is where im running into an issue.
The header area has header buttons and one of them is Claims, this button has two click zones, when you click on the claims label it recalls the last claim you had opened, when you click the down arrow, it opens and shows you more options.
The option I want to get to is "New Claim"
FirePath shows me two seperate xPaths
For the claim label: .//[#id='TabBar:ClaimTab-btnInnerEl']
For the downarrow label: .//[#id='TabBar:ClaimTab-btnWrap']
Once the downarrow is initiated the xpath for New Claim: .//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']
However when I write my script:
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab-btnWrap']")).click();
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']")).click();
it constantly keeps clicking on the wrong area and recalling the last claim and the script fails.
Here is a screencast of the behavior expected:
http://screencast.com/t/jtI1kGkfmXK
and here is basically what its doing
http://screencast.com/t/s2Q6VrbJl
What can I do to circumvent this issue? Its driving me crazy.
I took help from here
Try this code, and see if it works:
driver.findElement(By.xpath("//span[#id='TabBar:ClaimTab-btnWrap']")).sendKeys(Keys.ARROW_DOWN);
Well what I can gather is you have to get to the "New Claim" span and click it.
You can use Javascriptexecutor and directly click on the "New Claim" even without bringing it up. It helps that your intended element to be clicked has a unique id.
So you can use the following :
var js = Driver as IJavaScriptExecutor;
if (js != null)
{
js.ExecuteScript("document.getElementById('TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl').click();")
}
You need to click open the window and wait for that to open.So,
Some wait needed after your first click
Then, You probably have to use switchTo() to set focus on the newly opened dropdown window. Some examples how to use it are here. After that use a textbase search for finding your element. Something like this.
EDIT:
I found text base search helps a lot in such cases.
try this:
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab-btnWrap']")).click();
//use some static delay for now. But, really you should use some fluent wait for the element to appear.
driver.findElement(By.xpath(".//*[.='New Claim']")).click();
I figured it out! I had to use the actions class but this worked!
Its a little weird but it works
WebElement element = driver.findElement(By.linkText("Claim"));
Actions builder = new Actions(driver);
Action dropdown = builder.clickAndHold(element)
.sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN)
.build();
dropdown.perform();
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']")).click();
First, im not really experienced with javascript or jquery, usually the plugins or very very simple code by hand (as you are about to see).
Wat i want is done many times, but for some reason i cannot get it to work like i would.
I have several problems.
I use the .animation to slide 2 divs in and out (2 divs next to each other, and i want them to slide in and out of the screen (like the iphone homescreen for example).
Now the problem is the animation does not work as intended, instead of sliding away div1 WHILE sliding in div2 along side of div1, div1 disapears/shrinks (sliding up and left) instead of "sliding outside of the screen" and then div2 shows up afterwards. (so the slide effect is not working and the divs hide and show seperatly instead of sliding like a iphone screen).
Now the thing is i have recreated the setup and tried on there, and it works as intended as shown here: http://jsfiddle.net/dkeulen/2fHbz/
So that is how i want it to work, but it does not do so as show here: (NOTE: its work in progress) http://jsfiddle.net/dkeulen/gQ9aE/2/
(Black square on the right center is the button you need to click).
I could post all the html and css and jquery here but its quite the amount to post...
If anything els is needed i can provide it ofcourse.
As code this is the part i use for the sliding:
$('.btnr').click(function(){
$('#hosting').animate({'width' : '0px'}, 100).hide(600);
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
$('.btnl').click(function(){
$('#hosting').animate({'width' : '100%'}, 600).show(400);
$('#inexchange').animate({'width' : '0px'}, 600).hide(600);
$('.btnl').fadeOut(600);
$('.btnr').fadeIn(600);
});
I hope anyone can help me out on what goes wrong and what i must do about it, thanks in advance!.
it's better to specify a jsfiddle for us to see it in action
I think your problem is that the hide() and show() doesn't stack in the same animation queue
so one way of solving this is using promise ex.
$('.btnr').click(function(){
promise1 = $('#hosting').animate({'width' : '0px'}, 100).promise();
$.when(promise1).then(
function(){
$('#hosting').hide();
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
});
the same goes for the other button.
check this simple fiddle I made to demonstrate how it's working
http://jsfiddle.net/artmees/BCTxH/