I have a onMouseOver event that triggers an alert box. See the code below. However, it will trigger that event even if I hover the mouse to the right of the text. That is part of my problem. All I want is to have it triggered when hovering over the text itself.
The next issue is, depending on which li element I hover over, I need to to trigger an event that takes into considering which piece of text it is hovering over. For example, if I hovered over the first item in the White Advantages image, it would know that it is about being uncastled and act accordingly. If it was the second item, it would know it is about semi-open files and then act accordingly. How do I do this?
<li style={litags} onMouseOver={() => alert('hover')}>
<span style={tags} key={index1}>
{name1}
</span>
</li>
Related
Currently I'm trying to overlay a button on another button in Material UI:
https://codesandbox.io/s/responsivedrawer-demo-material-ui-forked-inc7xz?file=/demo.js
I'd like if pressing the X would only print B, rather than printing A and B. I know nesting buttons is not the correct way to do it, but I'd like to overlay the button with the exact look and ripple behavior I'm currently seeing with the nesting. I like how it looks so well aligned on the right, clicking the X doesn't ripple the effect to the entire ListButton the ListButtons takes up the entire drawer width without any extra work, and clicking the ListButton ripples under the X.
I'd really appreciate it if someone has the time to help. Thanks so much!
The solution would be to stopPropagation inside the onClick function since this is where the click event happens.
onClick={(e) => {
e.stopPropagation();
console.log("B");
}}
I have a basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
So I have a button on my template, with a tooltip that gives some extra information about the button. I would like the tooltip to appear when the mouse hovers over the button, and then disappear when the button is clicked. Clicking the button loads a separate view.
Currently I have it so the tooltip appears on hover, but then the problem is that the tooltip sticks around after the button has been clicked. Since the button is no longer part of the current view, the tooltip jumps to the top corner of the screen for a few seconds before disappearing. I'd like it to disappear the moment the button is clicked.
So far I've tried two things to solve the problem, neither of which have worked:
I tried wrapping the JS function which opens a new view in $timeout, hoping that the tooltip would disappear before the new view loads.
I tried changing the tooltip-trigger to 'click', but now the tooltip won't appear when the mouse is hovering over it. It will appear once the button is clicked, and stay there until the view is re-loaded.
Here is my code, which includes the two failed attempts mentioned above:
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo($event)"
tooltip-trigger="'click'"
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function($event) {
$timeout(function($event) { //timeout
SystemViews.openNewView(ctrl.newView);
});
};
Is it possible to have separate triggers for a tooltip like this? If not, what is another way that I can make sure the tooltip disappears before the new view is loaded?
Thank you very much in advance for any wisdom you'd be willing to impart.
The simplest solution is to hide the tooltip before changing view.
If your tooltip is triggered by a click on your anchor, you can emulate a click in your loadNewFunction function to hide it.
Test.html:
<a id="the-button" ng-click="loadNewView($event)" uib-tooltip-html="getToolTipInfo($event)" tooltip-trigger="'click'">Click Me!</a>
Test.js
ctrl.loadNewView = function($event) {
angular.element('#the-button').trigger('click');
SystemViews.openNewView(ctrl.newView);
};
Maybe this answer can interest you since it's about a very similar question.
I found the solution (for me, at least). I learned that you can have multiple triggers if you separate them by space. For my solution, I used the value:
tooltip-trigger='mouseenter click'.
That way it always turns on when I mouse-over, and turns off when I click.
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo()"
tooltip-trigger="'mouseenter click'
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function() {
SystemViews.openNewView(ctrl.newView);
};
Hope someone else finds this helpful!
Basically all I want to do is have the dragged item have a decreased opacity so that it is slightly see through. My issue is that I can't seem to change the style of the item being dragged when it is initially started dragging.
<div class=" btn btn-droppable growBackground"
ng-repeat="folder in Folders"
data-drop="true"
ng-model='Folders'
jqyoui-droppable="{index: {{$index}}, onOver: 'moveFolderOnFolder($index)'}"
data-jqyoui-options="{accept: '.folder'}">
<div class="btn btn-draggable grow folder nospacing"
data-drag="true"
data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
ng-model="Folders"
<!-- IMPORTANT LINE HERE -->
jqyoui-draggable="{index: {{$index}}, placeholder:true, animate:false, onDrag: 'storeDraggedFolderId(folder.Id)', onStart: 'addDraggingClass()', onStop: 'removeDraggingClass()' }">
{{folder.Name}}
</div>
The important bit of this code is in the second draggable div in the jqyoui options where i apply the folderopacity class through the onstop and onstart methods.
This code has the following effect -
The bottom block is the one being currently dragged. I want THIS one to have the opacity styling, but I can't find a way of doing it (at least initially anyway. If I do not remove the class when the dragging finished it will keep the opacity next time you drag it). I seem to have tried this with a bunch of the different attributes but yet no success.
Any ideas?
if I understood you correctly you want to catch the "drag" event and accordingly use an ng-class to add/remove class right?
so you can either add a drag event that jqyoui-dragable is producing(I assume its angular-dragdrop):
http://codef0rmer.github.io/angular-dragdrop/#/
or you can just catch a mix of mousedown mouseup and mousemove events (prone to errors) and that with ng-class
the docs for the event are in the webpage.
you probably want to use onStart event catch it in the controller
onStart- callback method to be invoked (has to be defined in a
controller) when dragging starts
so in the docs it shows
<div jqyoui-draggable="{onStart:'startCallback(item)'}">
jsut add in the controller the callback:
$scope.startCallback = function(){
$scope.isDragged = true;
}
and in the box add
ng-class={'opacityClass':isDragged}
for the other option just check when mouse is down and not up and see that the mousemove has been triggered and if all those statuses occur update the ng-class.Dont see why but if you want Ill help out with that
naturally if the
During dragging, the item dragged gets ui-draggable-dragging style appended to the class attribute.
Adding this to the css will do the trick:
.ui-draggable-dragging{
opacity:0.3;
}
I want to add star button on navigation bar and when user press on this, the button show selected icon and next time is press it show unselected.
I tried it by using ionic-on and ionic-off but I can't make it.
The icon-on and icon-off attributes only apply to tabs I think. You can use ng-class like you see here. Based on the value of your $scope.starred property, it will show a star or the outline of a star.
<span class="icon" ng-class="{'ion-ios-star': starred, 'ion-ios-star-outline': !starred}"></span>