I am trying to get a button inside a list view in bootstrap to get to two different links and it always follows the list view link, not the button link if I press the button. How do I achieve this?
<a href="foo.html" class="list-group-item">
<p>This links somewhere different than the button</p>
<button href="bar.html" class="btn btn-success">Example</button>
</a>
This doesn't appear to be easily accomplished with Bootstrap as-is, but a few tweaks can get us what we want. The main problem is that nested anchors aren't really valid HTML. However, we can achieve the same result by absoultely positioning a link above another link.
Have a look at this JS Bin:
http://jsbin.com/febivi/2/
In summary:
Add a new class to the list-group that will define our new container:
<ul class="list-group action-list-group">
<li class="list-group-item">
<a class="list-group-link" href="http://stackoverflow.com">Cras justo odio</a>
<a class="btn btn-sm btn-default" href="http://google.com">Go</a>
</li>
<li class="list-group-item">
<a class="list-group-link" href="http://stackoverflow.com">Cras justo odio</a>
<a class="btn btn-sm btn-default" href="http://google.com">Go</a>
</li>
</ul>
The primary link is ".list-group-link" and the secondary link is the ".btn" action.
Next we add some CSS to style list-group-item's inside action-list-group:
.action-list-group {
position: relative;
}
/* remove the list group padding since our nested anchor tag will now have it */
.action-list-group .list-group-item {
padding: 0;
}
.action-list-group .list-group-item > a.list-group-link {
display: block;
/* inherit from .list-group-item */
padding: 10px 15px;
color: #555;
}
/* re-add the link styling */
.action-list-group .list-group-item > a.list-group-link:hover {
background: #f5f5f5;
text-decoration: none;
}
.action-list-group .btn {
position: absolute;
right: 5px;
margin-top: 5px;
top: 0;
}
Where it says "inherit", if you were using the Sass version of Bootstrap you could use sass's #include or #extend to include the same styling as bootstrap's .list-group-item > a.
There is javascript solution that you can use as well. The one benefit being that you can then have your button element in the flow of the list-group.
HTML:
<a href="foo.html" class="list-group-item">
<p>This links somewhere different than the button</p>
<button data-href="bar.html" class="btn btn-success">Example #1</button>
</a>
JQUERY:
$('.list-group-item').on('click', function (event) {
event.preventDefault();
$target = $(event.target);
if ($target.is('button')) {
window.location=$target.data('href');
} else {
window.location=$target.closest('a').prop('href');
}
});
Basically, the click handler works to prevent the normal behavior of the list-group-item anchor tag using event.preventDefault(). Then using event.target, you can get the element that dispatched the event. If the target was a button, you retrieve its data property and set the window.location to it. Otherwise, the jQuery closest() method is used to find the nearest anchor tag and use its href value to set the window.location. In jQuery, the closest method starts with the current element (which could be the anchor itself or any of its ancestors that are not button elements) and travels up the DOM from there.
Also, note that since the button element does not have an href attribute, this example uses a data attribute to store the link reference.
Related
My goal is to come up with a dropdown menu:
$(document).on('click', '.dropdown', function() {
var is_visible = $(this).find('.dropdown-content').is(":visible");
$('.dropdown-content').toggle(false);
if (is_visible == false){
$(this).find('.dropdown-content').toggle(true);
}
});
.dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
div.dropdown-content {
display: none;
white-space: nowrap;
position: absolute;
padding: 12px 16px;
z-index: 1;
margin-top: 15px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='dropdown'>
<i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i>
<div class="dropdown-content">
<div><i class="fa fa-share-alt" aria-hidden="true"></i> Share</div>
<div><i class="fa fa-trash-o fa-fw"></i> Delete</div>
</div>
</div>
The question is, what is the semantic role of <a> tag in the dropdown-content item definition (provided I don't use its href attribute and use JavaScript to handle the click event)?
In other words: if I want to have a clickable icon, in which cases should I surround it with an <a> tag?
if I want to have a clickable icon, in which cases should I surround it with <a> tag?
The only case where you should wrap anything with an <a> tag is if it's a link, or a placeholder for where a link could be.
Otherwise, if you want to make something clickable, the appropriate element is <button type="button">.
The one exception to that is if you need to wrap anything that's not phrasing content, in which case I recommend using <div role="button" tabindex="0> with a keydown handler to trigger click events on Enter, and Space.
Additional notes about accessibility for icons, and icon fonts in general: If a network request fails and the icon font fails to load, your sighted users will find themselves in the same situation as your non-sighted users, where it's unclear as to what the button should do.
Generally speaking it's better to pair icons with textual labels, but if that's not possible, consider using an <img> element with [alt] text instead of the icon.
If that's not possible, at least add an [aria-label] attribute.
So I'm in the making of doing a border button that is active when you are on that page. But when you press on the second border button, the first ones border removes and the second one is visible. It's basically the same thing as the ones on this site. The "Questions, Jobs, Documentation Beta, Tags" buttons. One lights up as you are on that page and the other turns off. I tried looking it up on google but couldn't find. And I tried looking at the code by "inspecting element" through Google Chrome.
Make sure you have the exact same HTML on each page. Then in each page, style the corresponding button differently by assigning an 'active' class only to that button. For example:
On the Home page
<a class="button active" href="index.html">Home</a>
<a class="button" href="about.html">About</a>
On the About page
<a class="button" href="index.html">Home</a>
<a class="button active" href="about.html">About</a>
CSS
.button {
background-color: grey;
}
.active {
background-color: orange;
}
The simplest way I could think off is by adding an "active" Class to the button you want to light up on that page.
Requires a little bit of CSS and HTML. If you want the result element to be "activatable" without changing the page, you'll need some JS, as well.
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
});
button.active {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="active">Active Page</button>
<button>Not Active Page</button>
Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!
code:
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:hover {
color: red !important; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:selected {
background-color: #ff4b46;
color: #fff; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:active {
color: white !important;
background-color: red;
width: 140px;
height: 100px; }
CSS
:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.
The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.
.active:active {
color: red;
}
.focus:focus {
color: red;
}
:target {
color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>
Javascript / jQuery
As such, there is no way in CSS to absolutely toggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. jQuery
$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});
button.selected{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Item</button><button>Item</button><button>Item</button>
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
HTML
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
To make button change content:
HTML
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
Hope it helps!!
In the Divi Theme Documentation, it says that the theme comes with access to 'ePanel' which also has an 'Integration' section.
You should be able to add this code:
<script>
$( ".et-pb-icon" ).click(function() {
$( this ).toggleClass( "active" );
});
</script>
into the the box that says 'Add code to the head of your blog' under the 'Integration' tab, which should get the jQuery working.
Then, you should be able to style your class to what ever you need.
The first example didn't work. I need to have always a list to disable links? Or what is wrong with my first demo?
<a class="disabled" href="#">Disabled link</a>
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled">Disabled link</li>
...
</ul>
https://jsfiddle.net/7y0u2amy/
I think you need the btn class.
It would be like this:
<a class="btn disabled" href="#">Disabled link</a>
It seems that Bootstrap doesn't support disabled links. Instead of trying to add a Bootstrap class, you could add a class by your own and add some styling to it, just like this:
a.disabled {
/* Make the disabled links grayish*/
color: gray;
/* And disable the pointer events */
pointer-events: none;
}
<!-- Make the disabled links unfocusable as well -->
Link to disable<br/>
Non-disabled Link
I just created my own version using CSS. As I need to disabled, then when document is ready use jQuery to make active. So that way a user cannot click on a button until after the document is ready. So i can substitute with AJAX instead. The way I came up with, was to add a class to the anchor tag itself and remove the class when document is ready. Could re-purpose this for your needs.
CSS:
a.disabled{
pointer-events: none;
cursor: default;
}
HTML:
<a class="btn btn-info disabled">Link Text</a>
JS:
$(function(){
$('a.disabled').on('click',function(event){
event.preventDefault();
}).removeClass('disabled');
});
If what you're trying to do is disable an a link, there is no option to do this. I think you can find an answer that will work for you in this question here.
One option here is to use
123n
Disabled href tag
You cant set links to "disabled" just system elements like input, textfield etc.
But you can disable links with jQuery/JavaScript
$('.disabled').click(function(e){
e.preventDefault();
});
Just wrap the above code in whatever event you want to disable the links.
I just removed 'href' attribute from that anchor tag which I want to disable
$('#idOfAnchorTag').removeAttr('href');
$('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled');
Thanks for #jacob-van-lingen's comment, You can extend .btn-link in your global style
a.disabled{
#extend .btn-link
}
I developed the following solution because when I apply class styles such as btn disabled offered by Bootstrap 5 to an <a> element inside a card, margin and padding are applied to the element:
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
Disabled Link
I liked the answer by Sercan and I added a tiny jQuery to it, so that the links are also not followed on click:
$(document)
.on("click",
"a.disabled",
function () {
return false;
});
and for the look from the Answer above:
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
I am using Bootstrap 3 in my project.
Here is my html page:
As you can notice, the star is not aligned in line with the view details button below.
Here is my html code
<div class="col-6 col-sm-6 col-lg-4">
<h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
<p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small></p>
<p>
<a class="btn btn-default" href="/search/1799/detail/" role="button">View details »</a>
<button type="button" class="bookmark" id="1799" ><span class="
glyphicon glyphicon-star-empty "></span></button>
</p>
</div><!--/span-->
css file:
button.bookmark {
border:none;
background: none;
padding: 0;
}
The problem is, that the span with the star icon is already an inline-block with different height and line-height. The button which surrounds the span is also an inline-block element, that's why it is a bit complicated.
Another fix would be, to remove the span inside the button and add the classes from the star-icon to the button like this:
<button class="glyphicon glyphicon-star-empty bookmark">
Now you have the same styling for both buttons and they align correctly when you add
vertical-align: middle; to the star button.
http://jsfiddle.net/a29hC/
There's a number of ways this can be achieved. I'd use one of the following:
Option 1 - relative position with top
button.bookmark {
border:none;
background: none;
padding: 0;
position: relative;
top: 2px;
}
Demo
Option 2 - give the button a .btn class so it has same layout styles as the .btn next to it, then remove left and right padding
<button type="button" class="btn bookmark" id="1799" >
button.bookmark {
border:none;
background: none;
padding-left: 0;
padding-right: 0;
}
EDIT: Note that the gylphicon gets given a line-height of 1 by Bootstrap. With this technique we don't want that because we want it to match the .btn. So that can be overridden:
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}
Demo
Try putting the two images in a div and using the vertical-align property.
Example:
<div class="col-6 col-sm-6 col-lg-4">
<h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
<p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small>
</p>
<div> <a class="btn btn-default" href="/search/1799/detail/" role="button">View details »</a> <button type="button" class="bookmark" id="1799"><span class="glyphicon glyphicon-star-empty" style="vertical-align: middle;"></span>
</button>
</div>
</div>
why not just put the star inside the button and let Bootstrap align it for you? You can also add the btn class to the <a> tag to style it as a button. Less code :)
<a class="btn btn-default" href="/search/1799/detail/" class="bookmark" id="1799">
View details <span class="glyphicon glyphicon-star-empty"></span>
</a>
Edit: the reason I made this suggestion is a personal preference; I prefer to let Bootstrap do its thing and not add too much additional CSS positioning as it might get in the way when resizing the browser, etc.
Bootstrap may have some special class for this... however it might rely on a set of circumstances. I think you'd be better off thinking of this as a CSS positioning question.
You want to align 2 elements to one another, vertically. elements which are display: inline or inline-block can align with vertical-align. You can read about that HERE.
In your case, you will want the two elements to be display: inline-block so that you can give them shape and position like a block element, and still have access to some of the properties an inline element would have. Once they are both display: inline-block you can align them with vertical-align: middle;. 2 things to keep in mind are that you don't want them floated, and that when we say they are aligned, it is to each other and not to the box they reside in.
HTML
View Details >>
<button class="star">★</button>
CSS
a { /* reset a */
text-decoration: none;
color: inherit;
}
.button {
display: inline-block;
padding: .5em;
border: 1px solid black;
border-radius: 5px;
vertical-align: middle;
}
.star {
background: transparent;
border: 0;
display: inline-block;
vertical-align: middle;
}
Here is a jsFiddle