I use bootstrap 3 popover.
And now I would like link on text popvover.
Code:
<a href="#"
role="button"
class="btn popovers"
data-toggle="popover"
title=""
data-content="test content link on content"
data-original-title="test title"
>
test link
</a>
But when I start code in html I see:
link on content
"
data-original-title="test title"
>
test link
I know that problem in symbol " but i don't know have add link in link...
Tell me please how will be aright code?
P.S.: if question already exist please give me link.
You'll need to pass html option with value true while initializing popover like following.
Demo
JS:
$("[data-toggle=popover]")
.popover({html:true})
HTML:
test link
Simply use the attribute data-html="true".
<button
data-toggle="popover"
data-content="Link: <a href='xyz.com'>XYZ</a>"
data-html="true">
CLICK
</button>
I used data-trigger="focus" and had an issue with a link in content of popover. If mouse button is clicked on the link and hold for a while then the popover disappears and the link 'doesn't work'. Some clients complained about that.
HTML
test link
JS
$("[data-toggle=popover]").popover({html:true})
You can reproduce the problem here.
I used the folowing code to fix the issue:
data-trigger="manual" in html and
$("[data-toggle=popover]")
.popover({ html: true})
.on("focus", function () {
$(this).popover("show");
}).on("focusout", function () {
var _this = this;
if (!$(".popover:hover").length) {
$(this).popover("hide");
}
else {
$('.popover').mouseleave(function() {
$(_this).popover("hide");
$(this).off('mouseleave');
});
}
});
If you want to use focus and a link inside the popup you need to prevent the popup to close when clicking inside. The cleanest solution I found was to preventDefault clicks inside a Popup which has the .popover class
$('body')
.on('mousedown', '.popover', function(e) {
e.preventDefault()
});
});
<i class="glyphicon glyphicon-info-sign"></i>
By simply adding data-html="true" is working with link attribute :)
Its worth noting that whilst the answers given are correct - a link will cause problems when the data-trigger="focus" is applied. As I found out from a client if the click occurs quickly on a popover the link will be actioned, should a user hold down their mousebutton then unfortunately the trigger kicks in and the popover occurs. So in short consider whether a link is necessary and plan for slooow clicks.
$("body").on("mousedown",".my-popover-content a",function(e){
document.location = e.target.href;
});
does it for me: basically, take matters into your own hands. Again, this is with popover options html: true, sanitize: false, and trigger : "focus"
Related
I am new to stackoverflow and I want some quick help here. Actually I am in learning phase now and I want to know how to visit a new page on button click. Like <a href='mypage'></a> That means, if I am on page 1 I want to go to page 2.
FOR EXAMPLE:
if we use anchor tag and add href value it will redirect us to new page
<a href='mypage'>Click ME</a>
But i need to know if we use button how can i redirect to specific page like anchor tag!
How can I achieve this?
Sorry if this requirement is too low for you, but its kind of first step to me.
Any help would be appreciable.
Thanks!
Way 1 :
<button onclick="location.href = 'www.example.com';">www.example.com</button>
Way 2 :
<button id="button">www.example.com</button>
<script type="text/javascript">
document.getElementById("button").onclick = function () {
location.href = "www.example.com";
};
</script>
Try in this way.
<input type='button' value='redirect' class="btn" onclick="document.location.href='www.google.com';"/>
You can either:
Wrap button tags with <a href>
<a href='mypage'><button>Click ME</button></a>
Wrap <a href> with button tags
<button><a href='mypage'>Click ME</a></button>
When both, href and ng-click attributes are defined:
Sign out
the href attribute takes precedence over ng-click.
I am looking for a way to raise priority of ng-click.
href is required for Twitter Bootstrap, I can't remove it.
This example from the angular documentation site just does href without even assigning it to an empty string:
[<a href ng-click="colors.splice($index, 1)">X</a>]
http://docs.angularjs.org/api/ng.directive:select
You can simply prevent the default behavior of the click event directly in your template.
<a href="#" ng-click="$event.preventDefault();logout()" />
Per the angular documentation,
Directives like ngClick and ngFocus expose a $event object within the scope of that expression.
Here is another solution :
Sign out
i.e. Just remove the # from the href attribute
You should probably just use a button tag if you don't need a uri.
Just one more hint. If you need real URL (to support browser accessibility) you can do the following:
template:
<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>
directive:
$scope.linkClicked = function(link){
// your code here
$location.path(link);
};
In this way your code in linkClicked() will have chance to execute before navigating to the link
In Angular, <a>s are directives. As such, if you have an empty href or no href, Angular will call event.preventDefault.
From the source:
element.on('click', function(event){
// if we have no href url, then don't navigate anywhere.
if (!element.attr(href)) {
event.preventDefault();
}
});
Here's a plnkr demonstrating the missing href scenario.
This worked for me in IE 9 and AngularJS v1.0.7:
Logout
Thanks to duckeggs' comment for the working solution!
There are so many answers for this question here but it seems there is a bit of confusion about what's actually going on here.
Firstly, your premise
"href overrides ng-click in Angular.js"
is wrong. What is actually happening is that after your click, the click event is first handled by angular(defined by ng-click directive in angular 1.x and click in angular 2.x+) and then it continues to propagate(which eventually triggers the browser to navigate to the url defined with href attribute).(See this for more about event propagation in javascript)
If you want to avoid this, then you should cancel the event propagation using the The Event interface's preventDefault() method:
<a href="#" ng-click="$event.preventDefault();logout()" />
(This is pure javascript functionality and nothing to do with angular)
Now, this will already solve your problem but this is not the optimal solution. Angular, rightfully, promotes the MVC pattern. With this solution, your html template is mixed with the javascript logic. You should try to avoid this as much as possible and put your logic into your angular controller. So a better way would be
<a href="#" ng-click="logout($event)" />
And in your logout() method:
logout($event) {
$event.preventDefault();
...
}
Now the click event will not reach the browser, so it will not try to load the link pointed by href. (However note that if the user right clicks on the link and directly opens the link, then there won't be a click event at all. Instead it will directly load the url pointed by the href attribute.)
Regarding the comments about visited link color in the browsers. Again this has nothing to do with angular, if your href="..." points to a visited url by your browser by default the link color will be different. This is controlled by CSS :visited Selector, you can modify your css to override this behaviour:
a {
color:pink;
}
PS1:
Some answers suggest to use:
<a href .../>
href is an angular directive. When your template is processed by angular this will be converted to
<a href="" .../>
Those two ways are essentially the same.
Just write ng-click before href ..It worked for me
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script>
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
console.log("d");
}
})</script>
</head>
<body ng-app="module" ng-controller="controller">
<h1>Hello ..</h1>
<a ng-click="func()" href="someplace.html">Take me there</a>
</body>
</html>
I don't think you need to remove "#" from href. Following works with Angularjs 1.2.10
Logout
You can also try this:
<div ng-init="myVar = 'www.thesoftdesign'">
<h1>Tutorials</h1>
<p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>
I'll add for you an example that work for me and you can change it as you want.
I add the bellow code inside my controller.
$scope.showNumberFct = function(){
alert("Work!!!!");
}
and for my view page I add the bellow code.
<a href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>
Did you try redirecting inside the logout function itself? For example, say your logout function is as follows
$scope.logout = function()
{
$scope.userSession = undefined;
window.location = "http://www.yoursite.com/#"
}
Then you can just have
<a ng-click="logout()">Sign out</a>
Please check this
Logout
$scope.logout = function(event)
{
event.preventDefault();
alert("working..");
}
//for dynamic elements - if you want it in ng-repeat do below code
angular.forEach($scope.data, function(value, key) {
//add new value to object
value.new_url = "your url";
});
<div ng-repeat="row in data"><a ng-href="{{ row.url_content }}"></a></div>
This works for me
<a href (click)="logout()">
<i class="icon-power-off"></i>
Logout
</a>
<a href="#">
<span ng-click="logout()"> Sign out </span>
</a>
I did like this and it worked for me.
This question already has answers here:
What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)
(16 answers)
Closed 6 years ago.
I created a button that open a modal window on click.
Connect
For some reason the data-role="disabled" doesn't work good.
How can I disable it?
You can use CSS to accomplish this:
.disabled {
pointer-events: none;
cursor: default;
}
Some link
Or you can use JavaScript to prevent the default action like this:
$('.disabled').click(function(e){
e.preventDefault();
})
I created a button...
This is where you've gone wrong. You haven't created a button, you've created an anchor element. If you had used a button element instead, you wouldn't have this problem:
<button type="button" data-toggle="modal" data-target="#myModal" data-role="disabled">
Connect
</button>
If you are going to continue using an a element instead, at the very least you should give it a role attribute set to "button" and drop the href attribute altogether:
<a role="button" ...>
Once you've done that you can introduce a piece of JavaScript which calls event.preventDefault() - here with event being your click event.
.disabledLink.disabled {pointer-events:none;}
That should do it hope I helped!
<script>
$(document).ready(function(){
$('#connectBtn').click(function(e){
e.preventDefault();
})
});
</script>
This will prevent the default action.
Hi I would like to know how bootstrap can add role="button" to there a href link.
<a href="" role="button">
I can not see the role button anywhere in the css
I am trying to make my own version.
What exactly do you want the link/button to do?
If you are just looking at styling the link to look like a bootstrap button you can just add the button classes to it:
A Link
if you want it to function like a button (ie submit a form or something) then you will need javascript or jQuery would be better in order to do that:
A Link
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$("#myFormID").submit();
});
});
</script>
Then just combine the two and the anchor link will appear and act like a button.
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>