I am trying to create a button that is called 'Follow', but changes to 'Unfollow' when clicked in HTML. Here is what I have so far:
<div>
<button routerLink="/settings" mat-raised-button color="primary">Follow Topic</button>
</div>
How to I add this functionality?
HTML probably would not be an advisable way to do this. You would be better served by using the JavaScript onClick event. I would also assume there's going to be more going on behind the scenes when a user clicks on the button, in any case.
We can use onClick attribute to call a function, which checks what state the button is in, and changes it accordingly.
function toggle(el) {
if (el.innerText=='Follow Topic') {
el.innerText='Unfollow'
} else {
el.innerText='Follow Topic'
}
}
<div>
<button routerLink="/settings" mat-raised-button color="primary" onClick="toggle(this)">
Follow Topic
</button>
</div>
Related
I am working on improving the accessibility of an Angular Application. There is a cancel button, if pressed will hide the button and display div with a warning and two buttons, yes and no. If pressed no, the warning disappears and the cancel button re-appears.
I will add a small sample code snippet below. Actual code is a little complex.
<button *ngIf="!hideCancel" (click)="toggleWarning(true)" </button>
<div *ngIf="hideCancel">
<p>Are you sure you want to cancel?</p>
<button> Yes </button>
<button (click)="toggleWarning(false)"> No </button>
</div>
toggleWarning(flag: boolean) {
if (flag) {
document.getElementById('someWarning').innerHTML = 'Are you sure you want to cancel?';
} else {
document.getElementById('someWarning').innerHTML = '';
}
this.hideCancel= !this.hideCancel;
}
When using tab key and when focused on cancel button, when user presses enter key, the cancel button disappears and the below Warning appears. Then Chrome/Firefox, when I press the tab key, focus goes to the "No" button below the Warning as expected. But in IE, focus goes to the top of the page.
I am not getting why it is happening. Is it because the currently focused element(cancel button) is removed from the DOM hence the focus is reset to the top on tabbing?
Please help on how to prevent this in Internet Explorer.
There is a workaround to this by retaining the tab focus on the next element.
<button *ngIf="!hideCancel" (click)="toggleWarning(true);yesBtn.focus()">Cancel </button>
<!-- see how yesBtn reference is used to set the focus-->
<div *ngIf="hideCancel">
<p>Are you sure you want to cancel?</p>
<button #yesBtn> Yes </button>
<button (click)="toggleWarning(false)"> No </button>
</div>
Checkout the working example.
NOTE: I am using Angular, so if Angular can solve this it will also work
I want to build a page where I can view the styles I am making. Therefore I need to somehow activate the hover and active states. Here is my code now:
.myclass {
background-color: blue
}
.myclass:disabled {
background-color: red
}
.myclass:hover {
background-color: green
}
.myclass:active {
background-color: pink
}
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass">Hover</button>
<button class="myclass">Active</button>
I am hoping for something like this:
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass hover">Hover</button>
<button class="myclass active">Active</button>
Or:
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass" hover="true">Hover</button>
<button class="myclass" active="true">Active</button>
This can be done easily, just right click on the element -> inspect element -> navigate to the class (myClass in your case) in styles tab.
Then click on :hov and activate the hover, focus or active (refer to the image attached)
If this is for testing purposes use a dedicated hover en active class.
Give the buttons some dummy classes and style the buttons
When you are finished copy the style to the :hover and :active state
and delete the dummy code.
There is no other solution. If there is one than I also want to know what that solution is.
The answer of Divesh Panwar is the way to go.
For development:
Just introduce a new css class that does what you need.
just do
myclass.hover in css then <button class="myclass hover" disabled="true">Disabled</button> and switch back to :hover when finished styling or whatever.
If you use chrome f.E. you can press F12 to open developer console.
There you can toggle the hover state in the top right.
There
For testing:
If it's for some kind of automated tests, and you realy need the hover state, i gues you approach the problem from the wrong side, use a selenium or similar to guide you in the right direction.
I have a View/View-Model pair that implements a popover custom attribute. My specific goals include dismissing the popover upon both button click within the popover itself, and from clicking anywhere else on the page.
I can get my doSomething() VM function to work on the element level in the view, but not within an attribute containing an element. I've explained the issue further in the code comments. I'd appreciate some guidance. Thanks!
blog.html
<template>
<require from="../popover/popover"></require>
...
<!-- doSomething() works here! -->
<button type='button' click.trigger='doSomething()'>ClickMe</button>
<!-- doSomething() does not work here! -->
<!-- `click.trigger`/`click.delegate` does not trigger anything, while `onclick` shows
"Uncaught ReferenceError: doSomething is not defined" -->
<span class="glyphicon glyphicon-star" popover="title.bind: blogpost.title; placement.bind: 'top'"
data-content='<button type="button" click.trigger="doSomething()">ClickMe</button>' ></span>
...
</template>
blog.ts
...
doSomething() {
console.log('doing something');
}
popover.ts
...
bind() {
$(this.element).popover({
title: this.title,
placement: this.placement,
content: this.content,
trigger: 'click',
html: true
});
}
I recently went through the same problem. I'm currently working on a Bootstrap port for Aurelia, it is not done yet, and I haven't written any documentation, but the popover is already implemented.
You are more than welcome to take a look:
https://github.com/tochoromero/aurelia-bootstrap/tree/master/src/popover
The way you are trying to implement the popover is going to be very complicated (if even possible), things are going to get messy with the scopes. If you only had text then it would be fine, but you basically want to be able to put anything in the popover and have it bound to the right View-Model.
The way I solved this was having a couple of Custom Elements that represent the popover, I have AubsCustomPopover, AubsPopoverTitle and AubsPopoverContent.
With this 3 custom elements you will create the bootstrap markup for the popover, and because you are adding them directly in the view they will have the right View-Model, and you can do whatever you want inside them.
And then, there is a custom attribute, this is AubsPopover, this is the one that will be in charge of showing and hiding the custom attribute depending on the trigger action you specify (hover, click, focus, outsideClick).
The code using it looks something like this:
<aubs-custom-popover model.bind="customPopover">
<aubs-popover-title>
This is my awesome title <i class="fa fa-star"></i>
</aubs-popover-title>
<aubs-popover-content>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" text.bind="password"
placeholder="Password">
</div>
<button class="btn btn-default" click.delegate="isOpen = false">
Close
</button>
</aubs-popover-content>
</aubs-custom-popover>
<button class="btn btn-primary"
aubs-popover="custom-model.bind: customPopover;
trigger: outsideClick;
position: bottom;
open.bind:isOpen">
Custom Popover
</button>
As I said the Popover is fully implemented but I haven't written any documentation, I want to have a couple of more components before I do that.
If you want to use it, I can give you some help setting it up.
I want to change the content of a button when clicked - specifically I want it to change to a "block" state where it can't be clicked, while I want to give it a Glyphicon.
What I want added:
<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
and the text "Downloaded" - I wish for this to erase the previous text and Glyph icon, and I've found this little peace of jQuery that changed the text on click.
<script>
$(document).ready(function(){
$('#download-btn').click(function() {
$("#download-btn").text('Downloaded');
})
});
</script>
but it wouldn't allow me to add any HTML code, it just outputted it as pure text.
And last, I want to add the following style btn-block to the button.
This is the button before being clicked;
<button id="download-btn" type="button" class="center btn btn-primary">
<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download
</button>
After click, the jQuery above changed the text to "Downloaded", but I can't seem to figure out how I add style, and code, to a tag.
With jQuery:
You can change an elements html with .html()
You can change an elements styles with .css()
For changing classes, you can use .addClass() and .removeClass()
There are many more jQuery functions for DOM manipulation.
I'd suggest taking a look. jQuery API
Use .html() to apply/override HTML that is inside the element you are selecting.
You can disable buttons in a few ways. I used .attr() or you can use .prop().
$('#download-btn').click(function() {
$(this).html('<span class="glyphicon glyphicon-ok"></span> Downloaded').attr('disabled', true);
});
jsFiddle Example
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>