I need to create a dropdown with "change password" section in it, the dropdown is supposed to appear on click, let the user change the password and close when the button is clicked again.
This is how it looks like at the moment:
The popup closes as soon as the user clicks on it, so the user cannot update the password.
I know it might be a dumb question, but I'm new to programming and just learning..
This is what I got so far:
$('.ui.dropdown')
.dropdown({
on: 'click'
})
<div className="ui dropdown link item" tabIndex="0" href="/Account/Profile">Hi {this.props.username}
<div className="menu">
<div className="item">
<ChangePassword/>
</div>
</div>
</div>
Thank you so much in advance!
I'll just point out why this is happening for you, there's a few updates you could make to your code but I'll let you figure that out as you go :)
Firstly, onClick() will trigger whenever a mouse click occurs on the element you've set it on, as well as all the children of that element:
e.g (this is just semi-psuedo)
<div onClick={} >
<button />
<button />
</div>
In this case, onClick will trigger when you click the parent div which, on the page, will be wrapping both buttons.
If you've set the method to trigger when the ui-dropdown component is clicked, this will occur whether the drop down is open or not.
The usual way to do this would have two separate components:
Button (The thing you click on to open the dropdown)
The Dropdown
If you put the onClick function on the Button element, but have it activate the Dropdown element, your problem will be solved :)
I am trying to be as clear as possible without just downright fixing it for you, let me know if you need any more clarity!
Related
I have the following HTML:
<div fxFlex="48px">
<div *ngFor="let title of levelLabels"
[style.marginLeft.px]="title.xPosition+16">{{title.label}}<button
(click)="test()" style="cursor:pointer"></button></div>
</div>
When I click on the button no event is firing. Hovering over the button is not changing the cursor to hand. Any idea what is wrong with my code?
Thanks
Your button doesn't have anything inside it, so I believe it is actually impossible to hover or click it. Try adding some text in it and see if that works <button (click)="test()" style="cursor:pointer">Test text</button> or move your {{title.label}} inside the button. Because hovering your div with an empty button inside it will not work.
On our (Vue.js v.2) webpage we have a section where you can swipe between cards, or by pressing "left" and "right" button. This swiping section is written with vanilla JS, and no fancy library. In order to have the adjacent visible when swiping, I need to have all of them visible in the DOM tree, but hiding them from the viewer. I have made it so all the unfocused cards are aria-hidden, and it works great when using ChromeVox. The problem is that when using VoiceOver, and I click the "right" button, and immediately tab down to the card, it will read out the card to the left, and also get trapped there since the card is aria-hidden. Code-wise the change from aria-visible to aria-hidden happens as soon as the button is pressed, but it seems like VoiceOver has already decided that when I am focusing on the "right" button, that the next element should be card 5 (for instance). If I wait around 1 or 2 seconds after clicking the "right" button, it will change the "next" element, and focus on the correct one (card 6) when I tab down. Is there any way to get around this, so it will focus only on the aria-visible element? Maybe a way to "force refresh" VoiceOver's stack of elements to read next? Maybe if I remove the message being read out when clicking the button, it will refresh immediately? I still haven't found of doing either of those things. I created a low quality flowchart to illustrate the problem better. What I want is for it to behave like ChromeVox.
I have tried several methods of getting this to work now, and it feels like it's a bug with VoiceOver. Some of the (desperate) attempts I've tried: setting tabindex=-1, role=presentation, changing the ID of "right" button dynamically as I navigate between cards, creating an empty div with a dynamic ID below the button, using aria-flowto, dynamically setting aria-describedby on the "next" element, and different variations between these and some other stuff I can't remember.
Eventually I found a solution that kinda works. I'm not very happy about it, but it's better than nothing. What I did was to make the title inside the card aria-hidden, and creating a currentHeader variable in store. I created an sr-only & aria-visible title above the swiping section, where the v-html points to the currentHeader variable. This way, the "next" element for the "right" button will always be the same element, but content will change after I click the button. It's not a perfect solution, and for some reason it makes VoiceOver "halt" when trying to go to the next element immediately after clicking the button, but at least the user won't read the wrong text and get trapped. Here's a pseudocode illustration of how I did it if my explaination was confusing:
// old solution // old swiping-section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 v-html="element.title" />
<swiping-section /> <p v-html="element.desc" />
</div>
// new solution // new swiping section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" /> <p v-html="element.desc" />
<swiping-section /> </div>
If anyone finds a better way to do it, please post your solution.
I making a webpage. The problem is I am really bad at HTML. I need to make a button that opens up the contact like on a new page I don't know how to explain really.
Right now if I click contact it leaves it on the same page with other stuff not cleared.
How would I do that?
[EDIT]
I misunderstood. I would try showing the element in a modal. This is simple with something like Fancybox, if you're new to coding.
https://fancyapps.com/fancybox/3/
Example of how to load an element in a modal: https://fancyapps.com/fancybox/3/docs/#inline
To hide your contact div until it's clicked:
<div style="display: none;" id="contact">Your content...</div>
[ORIGINAL]
Have you tried adding a target="_blank" attribute to your HTML?
Eg:
Contact
I am trying to use one of the 'checkbox hacks' in which an accordion opens or closes when the user clicks on a label that toggles a checkbox.
The issue is that the webpage I am working on does not use labels, but rather h4 elements. So the user would be clicking on the h4 element to open/close the accordion. As far as I know, making this work directly is not possible. Or is it? I thought that maybe I could overlay an empty label over this h4 element, so that the user would be clicking on the label. Is that possible? Or is making a javascript accordion the only option here?
Here's a suggestion how to do it:
<body>
<!-- Add cursor : pointer to show the user he can click -->
<h1 onClick="myFunc()" style="cursor: pointer;">test</h1>
<script>
// Do something here
function myFunc(){
console.log("title clicked")
}
</script>
</body>
I am working on a collapsible table.
I have a table with a ng-show. The header panel of the table uses an ng-click that toggles the ng-show piece to be true or false. However, I want to have a button at the top that toggles all the tables to one way or the other. It works unless I click on an individual table. If an individual table is clicked the toggle button ignores that table. Here's an example of what the code looks like.
<h3>{{page.name}}
<button type="button"ng-click="isOpen=!isOpen">Toggle</button>
</h3>
<div>
<div class="panel-heading" ng-click="isOpen=!isOpen">
<h3>{{table.name}}</h3>
</div>
<table ng-show="!isOpen">
~~table contents~~
</table>
</div>
The tables start out open, then close when either the toggle button is pressed or their headers are clicked. However the toggle button fails to change a table if it has been altered by clicking on the header.
One button would be the best, but having two buttons (one that opens them all, and one that closes them all) would work well too, and I feel might be the only way.
<button type="button"ng-click="isOpen=!isOpen">Toggle</button>
//lose a space.... and did you init the isOpen?
<button type="button" ng-click="isOpen=!isOpen">Toggle</button>