How to hide visited links after a click to button? - javascript

There are a list of links on a page and some of them are already visited by me. I have to make them invisible after any action(checking a checkbox, clicking button, etc).
I tried to use jQuery: $("a:visited").hide(300); but it doesn't seem to work.
UPD: So, the scenario is:
1) the user clicks a button;
2) all the visited links disappear.
jsFiddle example

You can try full CSS method :
a:visited { display: none; }
Or
a:visited { visibility: hidden; }
Or you can use a plugin method : Visited Plugin by Remy Sharp
Usage in jQuery :
$('a').visited().addClass('visited');
With CSS :
.visited { display: none; }
Or
.visited { visibility: hidden; }

ok, so try this
in your css file
.foo a:visited{
display:none;
}
in your javascript
$('button').on('click', function(e){
$('ul').addClass('foo');
})

Related

Text color doesn't change on hover in CSS

I'm practising animations in CSS but somehow one of the buttons refuses to change.
It's the last button, all alone, that needs to have white text when you hover on it (and also white text when you click on it). I've tried some things but didn't work, who can help me? (Also I prefer not to use javascript)
Code can be find here: https://limoon.nl/test-animations/
Edit: It worked, thanks for all the tips!
First off, you shouldn't have an anchor inside of a button. It's better to ditch the outer button and style the anchor with the same styles as a button.
The reason why the anchor isn't changing colour is because you are setting it here
/*link */
a:link, a:visited, a:hover, a:active {
color: black;
text-decoration: none;
}
This will take precedent over the button hover styling
You should not use links within the button.
<button class="LMbuttonBG">Hover over mij</button>
Replace with this:
<button class="LMbuttonBG">Hover over mij</button>
Currently, in your code, the color style of tag is black.
Like this and try it.
.LMbuttonBG:hover, .LMbuttonBG:active, .LMbuttonBG:focus {
background-color: black;
}
.LMbuttonBG:hover a, .LMbuttonBG:active a, .LMbuttonBG:focus a{
color: #fff;
}
You can specify a class for link inside the button like that.
.LMbuttonBG:hover a {
color: white;
}

CSS selector for :hover plus no mouse-button pressed?

I am currently using :hoverCSS pseudo-class for displaying tooltip-like elements (i.e. tables) in a way similar to what is suggested here:
div.tool:hover div.tooltip { display:block; }
I like the fact that this does not require any JavaScript.
Is it possible to add a further constraint to the effect that the hover only applies if no mouse button is pressed? The reason is that I want to prevent interference of these tooltips with other functionality (drag-and-drop, drop-down menus) that is based on jQuery UI. (As it happens, the tooltips are currently dragged together with their corresponding "tool" elements.)
Basically the if mouse clicked css selector method id :active so what you would have to do is this:
.tool {
min-height: 18px;
height: auto;
}
.tool:active .tooltip {
display: none !important;
}
.tool:hover .tooltip {
display: block;
}
.tooltip {
display: none;
}
The order is crucial because the higher rules take priority
Here is a working fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/
Also you might want to consider using visibility instead of display because otherwise you need to set the height of the parent:
.tool:active .tooltip {
visibility: hidden !important;
}
.tool:hover .tooltip {
visibility: visible;
}
.tooltip {
visibility: hidden;
}
Example fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/1/
Is it possible to add a further constraint to the effect that the
hover only applies if no mouse button is pressed?
One option could be to use :active pseudo-class to hide the tooltip. According to the spec: (my emphasis)
5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
The :active pseudo-class applies while an element is being activated
by the user. For example, between the times the user presses the mouse
button and releases it.
For instance:
div.tool:hover div.tooltip { display:block; }
div.tool:active div.tooltip { display:none; }
I think that's not possible because the hover event will always launch before the click event. If you want to disable that effect once the user clicks the element, you could add custom style rules to the css in the click event overriding the hover rules via element.addClass() or element.css()

Bootstrap 3 Dropdown Animate/ Easing

I spent hours to figure out what JavaScript function or CSS3 rules is making the smooth Dropdown function in This Demo but I couldnt figiure it out.
Then I tried to create my own slideToggle as:
$(function() {
$('.selectopt').click(function() {
$(this).next('.dropdown-menu').slideToggle(500);
});
});
which is not as good as the above mentioned demo and there are some issue with it as it just slide down and up the .dropdown-menu ONLY if user clicks on the top of .selectopt and it doesn't care about losing focus or selected options!.
Considering all of these can you please let me know what is making the smooth slide and fade presentation of the .dropdown-menu in the demo? Thanks
It's "fancy" fading using transition of 0.25s. on
dropdown-menuclass.
The demo you mentioned is using external resources
looking at the code
$("select[name='herolist']").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});
you can see that it's using .selectpicker() which is coming from Bootstrap select plugin. The object passed {style: 'btn-primary', menuStyle: 'dropdown-inverse'} contains only css classes to style the dropdown menu which are contained in Flat UI CSS. When the code is executed the underlying HTML is changed to
Class dropdown-menu contains the following rules
.dropdown-menu {
background-color: #f3f4f5;
border: none;
display: block;
margin-top: 8px;
opacity: 0;
padding: 0;
visibility: hidden;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
transition: 0.25s;
}
Conclusion: It's "fancy" fading using transition of 0.25s.
There's a whole bunch of external resources in the fiddle:
bootstrap.min.css
bootstrap.min.js
flat-ui.css
bootstrap-select.min.css
bootstrap-select.js
As far as I can see, flat-ui.css is responsible for the fancyness.
I'd recommend adding all the external resources from the fiddle and when you're done with the dropdowns, try removing each one to see if any of them aren't used. In the fiddle they are all requered.

making background inactive when a button is pressed

When i click a user name on twitter background it becomes inactive and dark.just like that:
I want to make my website's background inactive when a button is pressed, how can i do that?
Note: and i want to now which solution should i use make a box appear/disappear middle of my site when a button is pressed?i am doig something like this.
//in css
.visible{
display: inline;
}
.hidden {
display: none;
}
//in jquery
$("#div1").click(function() {
$('#div2').removeClass("visible").addClass("hidden");
}
This is called a lightbox.
First hit should make you happy: https://www.google.nl/search?q=lightbox
You are trying to build lightbox. Just show fullscreen div with semi-transparent background color for this.
Simple solution:
CSS:
.lightbox {
display:none;
position: absolute;
z-index:10;
background-color: rgba(255,255,255,0.7);
}
HTML:
Show lightbox
<div class="lightbox"></div>
</body>
JQuery:
$("a").on("click",function(){
$(".lightbox").css({'width':$(document).width()+'px','height':$(document).height()+'px'});
$(".lightbox").show();
return false;
});

How to remove underline from a link and add underline on hover? (images attached)

I want underline to be removed from a link. Also I want underline to appear when I hover it with my mouse pointer. How can this be done? Pls help.
No hover:
When I hover the Login link:
You need to turn off the CSS property text-decoration for the link and then use the :hover dynamic pseudo class to add the text-decoration back when hovering.
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
Demo
Also, you might also need to style the :visited:hover pseudo class so that the underline appears on links a user has already visited. link order in css is a good answer because the order of the CSS rules matters.
Assuming your login link has the id login...
#login {
text-decoration: none;
}
#login:hover {
text-decoration: underline;
}
In your style sheet, whatever the ID is.
#LoginButton a:active {text-decoration: none;}
#LoginButton a:hover {text-decoration: underline; color: white;}
Call a CSSClass within the login button and define the following lines in the style sheet,
.ClassName a:link {text-decoration:none;}//removes underline
.ClassName a:hover {text-decoration:underline;}// displays underline on mouse over
Hope this helps..

Categories