I'm at the moment working with Angular (4.0) and ng2-dragula. I've mad a div to a dragula container to move the items in it like this:
<div id="dragcontainer" [dragula]='"first-bag"'>
Now I'd like to implement the function to make my div to a dragable dragula div on button click. For example:
Before button click:
<div id="dragcontainer">
After button click:
<div id="dragcontainer" [dragula]='"first-bag"'>
I've tried this:
HTML-Button:
<button md-raised-button style="margin-left: 20px;" (click)="dragable()">
Make it drawable
</button>
TypeScipt Code:
dragable(): void {
document.getElementById("dragcontainer").setAttribute("[dragula]", "first-bag");
}
but that's not working. To ensure that I've used the .setAttribute command correctly I've tried this:
dragable(): void {
document.getElementById("dragcontainer").setAttribute("align", "center");
}
and that was working.
Has anybody tried this before or does anybody know how to solve this?
Perhaps you need some boolean flag in the controller that is triggered after button click, you should listen on drakeService.on('drag', listener) and if flag is set to false (initially) then you immediately trigger .cancel(true) method.
Would be much easier I think if you could provide some online demo (plunkr for example).
Related
I have ng-repeat on a div that contains a button. Say the div repeats 5 times with 5 buttons. I want to disable the 2nd button when it is clicked. How can I disable the button at that index?
<div ng-repeat='thing in things'>
<button ng-click='clickToDisable($index)'>button</button>
</div>
Something like this. I tried ng-disabled= 'disableButton == $index but that just disables all of the buttons.
You can pass in the $event into the click function and set the disabled attribute to true, like this:
<div ng-repeat='thing in things'>
<button ng-click='clickToDisable($event)'>button</button>
</div>
And in the controller:
$scope.clickToDisable = function(evt) {
evt.currentTarget.setAttribute('disabled', 'true');
}
Here is a fiddle of it working.
I am building a schedule view, which is currently in a preliminary stage, where I add events and then I can rearrange them, either by dragging the event vertically upwards or downwards, or by resizing it vertically. For resizing, I'll click a button contained within the event and drag it up or down to resize the event. For a better view, please have a look at this opensource calendar.
I am currently facing an issue, in making my elements draggable. None of the drag events fire, although other (click, mouseover) do work. The following are snippets from what I've done till now. Please excuse me for my work, I'm still a little rusty at Angular.
*.component.html:
<table>
<tbody *ngFor="let item of FullHours; let i = index" >
<tr [ngSwitch]="returnItem(Doc)" [ngStyle]="{'background-color':returnItem(Doc) === ',' ? 'white' : 'yellow' }">
<td [style.height.px]="unitHeight" >
<div ondrop="drop($event)" ondragover="allowDrop($event)" *ngIf="hasEvent(i)" class="event-container" style="background-color: white;">
<div class="event" draggable="true" ondragstart="drag($event)">
<div style="width:100%; float:left" class="content">04:30PM -- 05:30PM</div>
<div style="width:100%; float:left" class="content">event {{i}}</div>
<button draggable="true" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" class="eventbtn" style="position: absolute; left:0; right:0; bottom:0" >
=
</button>
</div>
</div>
<div *ngIf="!hasEvent(i)" (click)="createEvent(i)" class="event-container"></div>
</td>
</tr>
</tbody>
</table>
*.component.ts:
onDrop(event: any) {
alert('on-drop');
event.preventDefault();
event.stopPropagation();
// your code goes here after droping files or any
//try to change height
}
onDragOver(evt) {
alert('on-drag-over');
evt.preventDefault();
evt.stopPropagation();
}
onDragLeave(evt) {
alert('on-drag-leave');
evt.preventDefault();
evt.stopPropagation();
}
I've put in alerts on all binded functions, but none of them work. I did try this earlier with the whole event too but it still didn't work. I've created simple drag and drop divs wit JavaScript code but even those don't work in here. Do let me know if I need to provide anything else.
I'd be grateful for any guidance that can make my drag and drops work. Thanks in advance.
I have a simple button with a span inside it with some boostrap icon as its class.
Nothing serious.
<button ng-click="ctrl.toggleMenuDropDown()" class=" cornerMenuButton menuButton">
<span class="fa fa-reorder"></span>
Menu
</button>
The problem is that the span part does not register the click. When I click on the rendered button where the icon is, the click is not registered. And I don't know why, or what might be causing that.
But when I add stop propagation to the button it all works fine. Like so:
<button ng-click="ctrl.toggleMenuDropDown(); $event.stopPropagation()" class=" cornerMenuButton menuButton">
<span class="fa fa-reorder"></span>
Menu
</button>
It works fine. Why is that?
It's very hard to know why you are using a span inside a button element but clarifying your question:
You need to add ng-click on the span element also. If you want only the span ng-click to work you need to add event.stopPropagation() to your toggleMenuDropDown(event) function passing event to this function.
The definition of event.stopPropagation is:
The event.stopPropagation() method stops the bubbling of an event to
parent elements, preventing any parent event handlers from being
executed. Tip: Use the event.isPropagationStopped() method to check
whether this method was called for the event.
$("#but").click(function(event){
event.stopPropagation();
});
$("#foo").click(function(){
alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo">button
<span id="but">
<span></button>
Try this...Added z-index to my span and it worked out
.reorder{
.fa {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
My website was working fine before I added more code and features.
It may be because of the tags around the code.
I would like to know how to fix the buttons with numbers (the Cool Music button works fine).
My website is here
<script>
function btnClicked()
{
var audio = new Audio('http://a.tumblr.com/tumblr_lkfhhpM4M41qcmhugo1.mp3');
audio.playbackRate = 2.5;
audio.loop = true;
audio.play();
}
function changeImage1()
{
document.getElementById("image").src= "https://media0.giphy.com/media/sIIhZliB2McAo/200.gif";
}
function changeImage2()
{
document.getElementById("image").src= "https://www.clicktorelease.com/code/gif/1.gif";
}
function changeImage3()
{
document.getElementById("image").src= "http://www.kizoa.com/img/e8nZC.gif";
}
function changeImage4()
{
document.getElementById("image").src= "http://www.netanimations.net/flying_pig_by_rutabaga.gif";
}
</script>
<button onclick="btnClicked()">
Cool Music
</button>
<button onclick="changeImage1()">1</button>
<button onclick="changeImage2()">2</button>
<button onclick="changeImage3()">3</button>
<button onclick="changeImage4()">4</button>
This is not exactly an answer. But this could lead you to the answer.
You have document.getElementById("image").src="<some url>"; in your changeImage functions. But you don't have any DOM element with ID as image. Please check your console and you can find the error yourself.
You're trying to access an element called Image, but from looking through your code I can't find an element with the id of Image.
In the console it shows: "Uncaught TypeError: Cannot set property 'src' of null". This means that it couldn't find the DOM element you are referencing.
You are using document.getElementById("image") but looking at your source code, there is no element with the ID image.
i have simple application which should work on keyboard events like onfocus and onblur instead of onmouseover and onmouseout.
here is my code snippet to zoomin/zoomout:
<script>
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage)
{
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
calling this function in this way:
<td align=center valign=middle >
<figure>
<button style="background-color:black; height:160px;width:160px ; border:none"><img src="F:\rashmi\icons_tv\Help_Normal.png" onfocus="zoom('57px','120px','96px','136px',this);"
onblur="zoom('57px','120px','57px','120px',this);" > </button>
<figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font></figcaption>
</figure>
</td>
but problem is when i select image using tab key i cant see any zoomin/zoomout effect. if i replace onfocus/onblur with onmouseover/onmouseout respectively it works well.
please some one help me where i am going wrong.
regards
rashmi
You will not get focus on an img element by tabbing but on the button element instead. Move your onblur/onfocus events to the button element. This will change your button's size each time you focus/lose focus on it, but it will not change your image size. What you have to do then is to modify your code so the change is mapped on the button's contained image dimensions as well. Something that I can think of right now is
<script type="text/javascript">
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichElement)
{
theImage = whichElement.firstChild;
theImage.style.width=nW;theImage.style.height=nH;
oW=whichElement.style.width;oH=whichElement.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichElement.style.width=nW;whichElement.style.height=nH;
theImage.style.width=nW;theImage.style.height=hH;
}
</script>
Here, the first child of the button element, which happens to be the image, takes the same height and width with the button, whenever that changes.