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>
Related
I have problem with with adding the hover.css effects, which I get from here.
First, here is the sample HTML that I have created.
In the NAV BAR you will see two Personal button. One is with the hover effects and another one is without the hover effects but with the Mega Dropdown Menu.
Second, what I'm trying to do is to add the hover effects into the second Personal button.
<li class="droppable nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link personal-hover" href="#">Personal</a>
<div class="mega-menu personal-menu-content">
...
</div>
...
</a>
</li>
Every time I try to add hvr-sweep-to-bottom class into the <li>, the drop down menu will always gone.
Here's the HTML directory file in case you want to access to the .css/.js.
Hope someone can help me with this, with many many Thanks! :D
You need to do two things
Remove the padding from the .pos-menu element that is your <li>. This will ensure the <a> tag inside gets full width.
.pos-menu {
border: 1px solid #DF1E34;
border-radius: 50px;
margin-right: 10px;
overflow: hidden;
}
Update your HTML like below. The hvr-sweep-to-bottom should be on the <a>.
<li class="droppable nav-item pos-menu">
<a class="nav-link personal-hover hvr-sweep-to-bottom" href="#">Personal</a>
<div class="mega-menu personal-menu-content">
...
</div>
...
</li>
To maintain the hover effect if cursor remains inside the mega-menu
.pos-menu:hover .hvr-sweep-to-bottom {
background: rgba(0,0,0,.7);
}
Hope it helped.
I am writing a very simple HTML page for selecting among a few files. The linked-to files are the current an past versions of some data file.
I want the "current" link to be in blue and the "past" links to be in light-blue. This is easily achievable through setting of the font color property in the <A ..> tag.
However, doing so means the color of visited links is not changed to purple.
An alternative is to use link, vlink and alink properties in the <body ...> tag, as explained here.
But doing so means that all links look the same. Apparently, the link, vlink and alink properties do not work when put in the <A ...> tag context.
How can I set a different "visited link" color per link?
You can use a:visited selector for that:
<html>
<style>
a.past:visited {
color: light-blue;
}
a.current:visited {
color: blue;
}
</style>
<body>
<a class="current" href="#">Link</a>
<a class="past" href="#">Link</a>
</body>
</html>
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 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.