We Keep Coding

How to keep the active state of a link when the new page is loaded

I am developing a website using Bootstrap.
I have a section with three buttons, each one of them leading to a different page of my website.
<div class="container-fluid filter-tag py-3">
<ul class="tag-menu">
<li> Biella </li>
<li> Vercelli </li>
<li> Valsesia </li>
</ul>
</div>
I've set the css active class so that, when a button (link) is clicked the background-color and color change, in order to let the user know which section of my website is currently on.
.tag-menu li a{
border:1px solid $primary;
border-radius:12px;
padding:5px;
margin-right:7px;
color:#000000;
}
.tag-menu li a:active{
border:1px solid $primary;
background-color:$primary;
border-radius:12px;
padding:5px;
margin-right:7px;
color:#ffffff;
box-shadow:none;
}
I can see, through the inspector, that the active class is set correctly, but when I click on one of the buttons, I see that the active class appears for just one second and then, when the new page is loaded, the button hasn't kept its active class.
I'm aware of the fact that Stack is full of questions similar to mine and that I should probably use JQuery/JavaScript, but none of the solutions I've tried so far worked for me.
Could you please help me solving the problem?
Thank you very much!

:active is not a class, but a selector that catch the clicking moment (between the click and the release), so your CSS is added only for that instant. Here a small example:
a:active{
color:red;
}
<a>link example</a>
In order to achieve what you wanted to do, you should use an event listener to add the class when the link is clicked:
var links = document.querySelectorAll(".link");
for(link of links){
link.addEventListener("click", function(e){
for(inlink of links){
inlink.classList.remove("active");
}
e.target.classList.add("active");
});
}
.active {
color:red;
}
<a class="link">link 1</a><br>
<a class="link">link 2</a>

How to open and close an action menu using CSS?

I am creating a floating action button.
My code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="#" class="float" id="menu-share">
<i class="fa fa-share my-float"></i>
</a>
<ul>
<li>
<i class="fa fa-facebook my-float"></i>
</li>
<li>
<i class="fa fa-google-plus my-float"></i>
</li>
<li>
<i class="fa fa-twitter my-float"></i>
</li>
</ul>
Fiddle Link: jsfiddle.net/7zkjas08.
Currently in my code when the user click the action button the popup appears and the user need to click or tap in somewhere on the screen to close the popup.
I want functionality like this: jsfiddle.net/r2hxbL5j
When the user click the button it shows the cross X closing sign. So the user can tap/click the cross sign and popup disappears.

Cool menu, and that you're trying to achieve that with CSS. I wanted to do that myself for a while. What bootstrap is using is something called pseudo elements to display the character. You just need to replace that character with something else on hover.
I inspected the #menu-share element to find all this out. Just add the following code, and it will work out.
/* when hovering the "a" tag, change the content in the pseudo-element "before" */
a#menu-share:hover > i::before{
content: '✕';
font-weight: bold;
}
I added the multiplication character. If you want to go with an X, I suggest that you change the font-family to a sans-serif, like Arial.
[edit]
It's IMHO impossible to add close functionality to the button with CSS, so it's needed to add the following functions:
/* Old code, but you need to put the next one below this one */
a#menu-share:hover + ul{
visibility: visible;
animation: scale-in 0.5s;
}
/* When giving the element focus (=clicking or tabbing to), close */
a#menu-share:focus + ul {
visibility: hidden;
}
/* Ignore any kind of pointer interaction */
.float > i {
pointer-events: none;
}
<a onmouseout="this.blur()" href="#" class="float" id="menu-share">
this means "this element", namely the a tag. blur() means remove focus from. I also needed to add .float > i syntax to the CSS in order for this to work.

How to underline links which are surrounded by text?

I need to underline anchor links which are surrounded by text on hover.
I am looking for a result similar to below but without targeting any links from id's or classes because it would be same for all the links.
How can I put underline for the links which are surrounded by text, using css(or javascript if not)
Is it possible?
a{
text-decoration: none;
}
a#withText:hover{
text-decoration: underline;
}
<span> Alone link <span>
<br/>
<span> Text around <a id="withText" href="#"> Text surrounded link </a> Text around </span>

You could use span > a:hover this will target all a that comes as a direct child of span.
a{
text-decoration: none;
}
span > a:hover{
text-decoration: underline;
}
Alone link
<br/>
<span> Text around <a id="withText" href="#"> Text surrounded link </a> Text around </span>

If your a is always within a span you can target it like this:
span a:hover {
text-decoration: underline;
}
This targets all a's within a span.

As far as I know there is no way to deal with pure "text nodes" in css selectors. I'd go to JS, where you can easily check if the text of the link is equal to all the text of it's parent element.
Here is a fiddle using jquery, but you can do it also in plain javascript.
$("a").each(function(){
if($(this).text().trim() == $(this).parent().text().trim()){
//This link is the only content of parent item, so...
$(this).addClass('no-underline');
}
});
a{text-decoration:none}
a:hover{text-decoration:underline}
a.no-underline:hover{text-decoration:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>text arround the link</p>
<p>text arround the link on both side</p>
<p>the link with text after it</p>
<p> a link alone (whitespaces arround) </p>

Change the default color code of URL

Friends
I want to change the default blue color of the folloowing URL to RED , I tried using
style="color:red but it didnt help.
Please suggest a better approach.
<div class="row-fluid">
<div class="span12" style="color:red">${fn:length(alertStatusForm.totalNotSentRecipient)}
</div>
</div>

You need to edit the actual a element. You can do this multiple ways.
In your CSS File (this will edit all links)
a:active, a:link, a:visited {
color: red;
}
With Inline Styling
Apply the style directly to the a element.
<a style="color: red" ...
Or, create a class in your CSS File
You could create a class in your CSS file:
a.myLink:active, a.myLink:link, a.myLink:visited {
color: red;
}
Then apply the class to your link:
<a class="myLink" ...

I see that your <a> link has the class "underline".
You can add this css code to your CSS file to make the text red:
.underline a:active, .underline a:link, .underline a:visited {
color: red;
}
or apply it directly in the HTML like so:
<div class="row-fluid">
<div class="span12"><a style="color:red" href="/event/alert/recipient/list/${alertStatusForm.forAlert.id}" class="underline">${fn:length(alertStatusForm.totalNotSentRecipient)}</a>
</div>
</div>

You applied to color to div, you need to change color of a instead of div
Live Demo
<div class="row-fluid"><div class="span12" ><a style="color:red" href="/event/alert/recipient/list/${alertStatusForm.forAlert.id}" class="underline">${fn:length(alertStatusForm.totalNotSentRecipient)}</a></div></div>
Its generally a good practice to use css class instead of directly changing style using style attribute.
CSS
.red-color-a
{
color:red;
}
HTML
<div class="row-fluid"><div class="span12" ><a class="red-color-a" href="/event/alert/recipient/list/${alertStatusForm.forAlert.id}" class="underline">${fn:length(alertStatusForm.totalNotSentRecipient)}</a></div></div>

You need to target the <a> tag instead of its parent span :
<a style="color:red"> ... </a>
The default styles from the anchor tag are going to overwrite the <span> tag that is wrapping it.

use text decoration none
Visit google

How to select two links at once? (i.e. Title & Image)

i'm wondering how to achieve this kind of thumbnail gallery...
http://cargocollective.com/saintea
like when you roll over the thumbnail,
it gives an highlight effect to the title at the same time even though they are two separate elements.
I could make them as one file, but the reason why I want to have them separate is to assign
different effects :) !
can someone please lend me a hand?
thank you so much for reading this post !!!
have a great day !

It's just two <div>s in a link tag. But block elements in inline elements aren't valid, so you could better use <span> elements in a link tag like this:
HTML:
<a href="#">
<span class="one">text</span>
<span class="two">something else</span>
</a>
a:link span, a:visited span {
display: block; /* <-- for example */
color: blue;
}
CSS:
a:hover span.one {
color: yellow;
}
a:hover span.two {
color: orange;
}

As the other answers indicate, you could do it with both javascript and CSS. The page uses javascript and the framework jQuery to do it.
I made a demo of how it can be done both ways: here.
Given the following HTML:
<a href="#" id="theLink">
<img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" />
<span id="theText">Some text</span>
</a>
You can either do it with jQuery (this is roughly how that page does it):
$("#theImage").hover(
function() {
$(this).fadeTo("fast", 0.7);
$("#theText").addClass("hover");
},
function() {
$(this).fadeTo("fast", 1);
$("#theText").removeClass("hover");
}
);
where the class hover styles the text.
Here, you are telling jQuery to fire one function when you hover over the image, and another function when you hover out of the image. $("this).fadeTo sets the opacity of the image, while $("#theText").addClass.. well, it adds the class to theText.
(ofcourse, you don't need jQuery to do this, it's just very handy to use such a framework because it abstracts away much of the work)
Or with CSS:
#imagelink:hover img {
/* See http://www.quirksmode.org/css/opacity.html for opacity */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#imagelink:hover span {
background-color: #66E8FF;
}
Here we're telling the browser that when we hover over the link with the id imagelink, the contents inside the link of type img should have an opacity of 70%, while elements of the type span should have a different background color.

It's perfectly acceptable to wrap just about any elements within a single anchor element. Most browsers already support this, and w/ HTML5 it's actually preferred. So I would just do:
<a href="#">
<img src="image.jpg" width="" height="" alt="" >
<p>Description of the image</p>
</a>
a:hover img { }
a:hover p { }

I'd do it the following way:
<img src="image.gif"
onmouseover="change image style, then change getElementById('comment') style"
onmouseout="change all back"/>
<span id="comment">some text</span>