CSS Class Reverts to Not Active - javascript

I am adding a class to an image.
.bbbLink img {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
On hover I add this,
.bbbLink img:hover {
background-color: rgba(0, 0, 0, 0.1);
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
For active I am doing this,
.bbbLink img:active {
outline: 1px solid #111 !important;
border-top: 1px solid #555 !important;
padding: 10px !important;
background: #333 !important;
}
Since I am adding the active class to an image and you cannot do this because it is a self closing element I am using jquery to handle adding the active state like this,
<script>
(function($) {
$('.bbbLink').click(function() {
$(this).toggleClass('active');
});
})( jQuery );
</script>
Everything works perfectly, even when checking the dom after clicking the element my active class appears.
<a id="wrapbbb" class="bbbLink active" href="img.jpg" target="_blank">
<img src="content/uploads/-2-018.jpg" alt="BBB">
</a>
The problem is that when I press the mouse down and click, active state shows and the styling takes effect but when I release the click the active state styling goes away...
The active class is still in the dom but the styling effects revert back to the class without the active state.
Why is this happening?

Er... You need to give CSS like this:
.bbbLink img.active {
When you have :active, it is a state, active / mousedown state, not a class. Hope this is not a typo.

Related

Remove shadow from a button when its active

I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});
Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}
To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>

textbox css hover and button display asp.net c#

I want some css code and javascript to my textbox and a button, For First time my button is hide
when my mouse goes to the text box it height should be increased and then i remove my mouse on another place that that increased size should be kept.
when my mouse goes to the textbox a button should be visible and then i remove my mouse on another place that button should be visible.
This is CSS file now i am using, but i want to make some changes for this if i want to get upper things.
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
Post button css
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
}
how to change this css files as i want? I think I need a javascript file also to hide and visible post button
Put the textbox and the post button in one div and use the following CSS.
First HTML
<div class="textBoxWrapper" >
<textarea class="textbox_1" id="TextBox1" ></textarea>
<input type="button" id="post" value="Post me"></input>
</div>
Now the CSS
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
display: none;
}
.textBoxWrapper:hover > #Post {
display: block;
}
Pure CSS-solution for question number 2.
For number 1 I would use JavaScript
.TextBox1Large {
height: 100px;
}
<asp:textbox ID="TextBox1" runat="server"></asp:textbox>
<script>
document.getElementById("<%=TextBox1.ClientID %>").addEventListener("mouseover", changeHeightOfTextBox, false);
function changeHeightOfTextBox() {
document.getElementById("<%=TextBox1.ClientID %>").className = "TextBox1Large";
//Delete the event, since it is needed only once.
document.getElementById("<%=TextBox1.ClientID %>").removeEventListener("mouseover", changeHeightOfTextBox, false);
}
</script>
I would say instead of using the css hover try adding a class to the textbox1 when you detect the focus event for the the textbox1 using jquery. Then at the same time use jQuery to make the button visible.
Example code below:
//CSS
#TextBox1Clicked{
Height: 100px;
}
//jQuery
$(document).on('focus', '#TextBox1', function(){
//Show the button
$('#yourButtonId').show();
//Add the css class to the text box to make it taller
$('#TextBox1').addClass('TextBox1Clicked');
});
Resources:
jQuery '.On':
http://api.jquery.com/on/
jQuery 'addClass':
http://api.jquery.com/addclass/

Cursor-following <div> - Disappears when mouse moves down or right

I'm trying to use this method to get a div to fadeIn when a user mouses over a text field that tells them what sort of information goes into the field. I've got the <div> to follow the cursor while in the text field if the user moves the mouse up or left, but when I move the mouse down or right the <div> disappears during the motion to reappear when the mouse stops. Here is a JSFiddle showing my relevant code and the odd behavior it's yeilding.
$(document).ready(function() {
$(document).bind("mousemove", function(e) {
$(".hover").css({
"left" : e.pageX,
"top" : e.pageY
});
});
$(".num").hover(function() {
$(".hover").stop().html("Enter a number").delay(500).fadeIn(150);
}, function() {
$(".hover").stop().hide();
});
});
.hover {
display: none;
position: absolute;
float: left;
font-family: Calibri, sans-serif;
font-size: 0.7em;
background-color: rgb(255,255,230);
border: 1px solid black;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.4);
box-shadow: 0 0 2px rgba(0,0,0,0.4);
padding: 1px 3px;
z-index: 50;
}
input {
margin: 30px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='hover'></div>
<input type="text" class="num" size="2">
I have tried applying the same .hover() JQuery method to other elements in my web page to see if it's a problem with applying it to a text field, but the down/right vanishing behavior persisted.
In my full code, the hovering <div> is created dynamically when the user first mouse-overs an element which produces the effect, but I couldn't get that aspect to work is JSFiddle.
Since this effect seems easily-produced by others I'd like to know not only how to achieve the correct behavior but also understand why my attempt came out so wonky.
Basically if your mouse moves over the .hover overlay, it generates a hover "out" on the item underneath your mouse. Moving the mouse left/right causes the cursor to move on and off the overlaid div.
Add pointer-events: none; to your .hover style. This will stop it being visible to the mouse and avoid generating any events on the .hover:
http://jsfiddle.net/4ba70vy3/6/
.hover {
pointer-events: none;
display: none;
position: absolute;
float: left;
font-family: Calibri, sans-serif;
font-size: 0.7em;
background-color: rgb(255, 255, 230);
border: 1px solid black;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
padding: 1px 3px;
z-index: 50;
}
Update: If the .hover was below the mouse, vertical movement would cause the same problem.
http://jsfiddle.net/4ba70vy3/7/
Also, as DevlshOne suggests, you might as well use the title= attribute on the controls and maybe just do yours for older browsers?
Just add a pointer-event:none to the .hover class
Working example: http://jsfiddle.net/4ba70vy3/

Should !important be used here?

I have a form where the default values disppear on focus and reappear on blur if the user did not input anything. The color of the text changes to a darker black when the user types in something, and if the textbox goes into blur with user-inputted text.
Problem: I cannot get the font to change to a darker black when the user types something in, or when the textbox goes into blur with user-inputted text without using !important. Did something go wrong that requires me to use !important, or is there a better way?
HTML Code
<div id="splash_register_form">
<input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" />
<input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" />
<input type="text" name="register_email" class="splash_register_long_input" title="Email" />
<input type="text" name="register_password" class="splash_register_long_input" title="Password" />
</div>
jQuery Code
$(".splash_register_short_input, .splash_register_long_input").each(function() {
$(this).val( $(this).attr('title') );
});
$(".splash_register_short_input, .splash_register_long_input").focus(function() {
if($(this).val() == $(this).attr('title')) {
$(this).val('');
}
});
$(".splash_register_short_input, .splash_register_long_input").blur(function() {
if($(this).val() == '') { // If there is no user input
$(this).val($(this).attr('title'));
$(this).removeClass('splash_register_have_userinput');
} else { // If there is user input
$(this).addClass('splash_register_have_userinput');
}
});
CSS
.splash_register_long_input {
height: 22px;
width: 300px;
padding: 3px 0px 3px 8px;
margin: 0px 1px 2px 0px;
float: left;
font-family: Arial, Sans-Serif;
font-weight: bold;
border: 1px solid #5cb5ee;
}
.splash_register_long_input:focus {
border: 2px solid #5cb5ee;
width: 298px;
height: 20px;
}
.splash_register_short_input{
height: 22px;
width: 144px;
padding: 3px 0px 3px 8px;
margin: 0px 1px 2px 0px;
float: left;
font-family: Arial, Sans-Serif;
font-weight: bold;
border: 1px solid #5cb5ee;
}
.splash_register_short_input:focus {
border: 2px solid #5cb5ee;
width: 142px;
height: 20px;/
}
.splash_register_short_input:focus, .splash_register_long_input:focus {
color: #333 !important;
-webkit-box-shadow:0 0 10px #5cb5ee;
-moz-box-shadow:0 0 10px #5cb5ee;
box-shadow:0 0 10px #5cb5ee;
outline: none; /* prevent chrome from adding border */
}
#splash_register_form input {
color: #AAA;
}
.splash_register_have_userinput {
color: #333 !important;
}
I see what happened. IDs have higher precedence in CSS even if they appear before a class style rule to the same element. You can either leave !important there or change the last rule to this:
#splash_register_form .splash_register_have_userinput {
color: #333 !important;
}
The !important rule provides a way to have the styles you feel are most crucial always applied. A style that has the !important rule will (in most cases) be applied no matter where that rule appears in the CSS document.
Here is one of the solution of your code.
The reason why the input word back to gray because you use id selector #splash_register_form input to apply gray color to blur texts, but class selector .splash_register_have_userinput to apply user input texts.
And cause the id selector's priority is higher the class selector. So while your focus leave the input, the gray color came back and override the class selector.
To solve the situation, you can add a class name to your div (in case you have other divs and inputs at the same page), apply the gray color using class selector, and use more precise selector like input.className to apply the black color.Then you can remove your !important from your code.

JavaScript: clicked link should disappear in a spectacular way

I've programmed a PHP/PostgreSQL/Oracle script for internal usage at my work, where links are displayed as light-blue "tags", which can also be hidden by clicking an "x" near them:
This works pretty well sofar and my colleagues are already impressed.
The CSS-appearance for the "tags" I have stolen from Stackoverflow (since my own CSS/JS skills are very limited and also Imitation is the sincerest form of flattery):
a.hide {
color:#3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.hide:hover {
background-color: #e7540c;
color: #E0EAF1;
border-bottom: 1px solid #A33B08;
border-right: 1px solid #A33B08;
text-decoration: none;
}
a.tag {
color:#3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.tag:hover {
background-color: #3E6D8E;
color: #E0EAF1;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
text-decoration: none;
}
Now I would like to enhance my script by few JavaScript lines and make the "tags" disappear in an interesting way, when an "x" near them has been clicked by the user (the links should still work of course). Maybe make them fly up or maybe even explode? Does anybody have an idea here or can share a nice trick?
I'd prefer not to use jQuery, because I haven't learnt it yet.
Thank you and I hope for your creativity :-)
Alex
A pure javascript fadeout effect would be (for non-IE browsers at the moment..)
var hides = document.getElementsByClassName('hide');
for (var i = 0 ; i < hides.length; i++)
{
hides[i].onclick = function(evt){
var el = this.parentNode;
el.style.opacity=1;
var el_timeout = setInterval(function(){
el.style.opacity -= 0.05;
console.log(el.style.opacity);
if (el.style.opacity <= 0.05)
{
el.parentNode.removeChild(el);
clearInterval(el_timeout);
}
},20);
}
}
demo: http://jsfiddle.net/gaby/AkA5C/
I have wrapped the tag and button in a <span></span> so that you can easily target both.
Use jQuery effects. Easy as hell and looks cool
I advise not using flamboyant “explosive” effects in your app, at the end of the day users are use your app because it solves a problem not to get a show. If you must have effects, then use simple effects. If you MUST use such effects then use a different technology like flash.

Categories