I have written the below angular code for anchor link tag
<div class="Import">
<a ng-disabled="List.length==0" ng-click="Click()"><i class="icon-table"></i>Import</a>
</div>
if the anchor tag is disabled and when try to click it is not clickable in other browsers such as chrome,firefox
but in microsoft edge browser it is clickable. Can anyone suggest how to make it as non clickable
in edge browser?
If you are using bootstrap, may you need to write something like this:
<div class="Import">
<a class="btn" ng-disabled="List.length==0" ng-click="Click()"><i class="icon-table"></i>Import</a>
</div>
add class="btn" into the anchor hyperlink
What do you think saying other browsers?
BTW you've unclosed correctly tag.
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
I try this html code on Google Chrome and works. But on Mozilla and IE11 don't works link. Why? Thanks all
<button>
<span>
Home
</span>
</button>
But on Mozilla and IE11 don't works link. Why?
Because it is invalid HTML - you can not nest other “interactive” elements such as a link into a button.
HTML5, 4.10.6. The button element:
Content model:
Phrasing content, but there must be no interactive content descendant.
I guess you're trying to do something like this.
Code
<button class="btn btn-primary" type="button" [routerLink]="['/home']">Home/button>
It is not working because it is not allowed w3 specifications
is not allowed inside
Better to make a input with the href
I have used <a> tag inside <div> which is not working in IE
my code structure is like :
<div>
<a target="_top" href="address">
<button>
</button>
</a>
</div>
So It is working fine in all browsers except IE.
When I click on button it is not redirected to specified url from tag.
What you are doing is not recommended - don't wrap a button in a link. Style your link like a button or use an onclick:
<button onclick="window.open(href);">
</button>
(Addendum: Just for accessibility, don't use target on your links since it messes with people who use screen readers. Only apply a target after page load when there is javascript available. Also, people like to control where their new page opens - it's not something you should try to dictate too much.)
button tag is only allowed within a <form> tag. Since there is no form, IE is ignoring this. Other browser have a more defensive "do what I mean" parser probably ...
You might do it like this:
<input type="button" onClick="document.location='address'; return false" value="click me" />
I have checkbox insde a link. In all browsers except Chrome, when clicking on the checkbox you follow the link (instead of just having the checkbox become selected).
How do I avoid this behaviour?
Demo (hover over one of the product images to see the checkbox):
http://livedemo07571.prestatrend.com/category.php?id_category=9
And here’s the code in question:
<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" class="product_img_link">
<img src="http://livedemo07571.prestatrend.com/img/p/25-65-large.jpg" height="469" width="469" alt="Crew Neck Jumper" />
<span class="new">New</span>
<div class="right_block large">
<h3 class="large">Crew Neck Jumper</h3>
<span class="product_arrow"></span>
<p class="availability_container"><span class="availability">Available</span></p>
<span class="slash">/</span>
<p class="price_container"><span class="price" style="display: inline;">$2,390.00</span></p>
<p class="compare large"><input type="checkbox" class="comparator" id="comparator_item_25" value="comparator_item_25" /> <label for="comparator_item_25">Select to compare</label></p>
</div>
</a>
This isn't valid HTML (see report). The way to avoid this is, quite simply, to include only text or images inside an anchor tag, and move the checkbox outside. You could use some jQuery to add a click event to the box which would navigate to the next page.
If you want for-sure don't want to move it outside the <a> then you'd have to have an onclick="return false;" and add a listener with jQuery that toggles it when its clicked. I'm not sure if this would work in all browsers, and your best option is just to do it a standards friendly way.
I think this happen because you have the Div (block element) is inside the A (inline element) tag and by default the event will bubble up soon as you click the checkbox.
Even if HTML 5 has made the exception for the A tag and now allow a block element to be nested within that inline element. To get that working the same accross all browser you'll have to wait they all support the html 5 features
1) try with a different doctype
2) build the div outside the A has the link is not required to be executed
I have sitewiode styling of buttons using the html element. For buttons that submit forms this works well. However some buttons are just links. Therefore I use this syntax:
<button>Link Text</button>
This works perfectly in all browsers except IE, where the button clicks but nothing happens. The link isn't followed.
How can I get this to work in IE?
Don't put the button inside the link. You can easily style the <a> to look just like the <button> with CSS.
Could you post more code? As it stands, a <button> element inside a link element isn't a proper way to do this. Stick to semantics. You should just style the <a> element using CSS. If you really want to stick to using that combination, IE requires you to use type="button". So <button type="button"></button>
This is my issue also. Using code:
<a href="table_of_contents.html" title="Table of Contents">
<button> <b>Contents</b> </button>
</a>
It works for Firefox and Safari; but fails for Explorer and Opera.
Tried answer from Michel:
Contents
No change: Firefox and Safari OK; Explorer and Opera NG.
I have changed to the following code, which works for all four browsers.
<form action="table_of_contents.html">
<input value="Contents" title="Table of Contents"
style="font-weight: bold" type="submit">
</form>
PS: This does NOT work for type="button". Hope this helps.