I'm creating a large set of HTML components that works in every browser (where did the idea started anyway :-) )
Now, I want to have a button, and according to this post on StackOverflow, I should not use a button because that one has a 3D push effect on click. In order to remove that one, the advice was to use a a href and style that to the button I like.
So here's the HTML:
<a href="#" class="button">
<span>Yes</span>
</a>
And off course, here's the HTML:
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a:active.button {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
Nothing really commplicated
Now, this does all work in Google Chrome and Firefox as this JsFiddle demonstrates.
The button has 3 different states:
A normal 'default' button.
A style when you hover on it.
A style when you click on it.
Now, Internet Explorer does not apply a new style when you click on the button, it's the same style as the one on hovering. Unless you click the border (If you manage to click the border, than the correct style does apply).
Now, why do I have this behaviour and can it be solved as it is crucial to the development of my Control Suite.
I know it's possible to solve with jQuery by adding a removing a class when you click on it, but this seems a very ugly solution and if there's a 'CSS-Friendly' solution, I would like to use that one.
This may be because the CSS selector is backwards:
Change:
a:active.button {
to
a.button:active {
Chrome et al don't appear to give a care about what order these are in, but IE is, well, IE.
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<a href="#" class="button">
<span>Yes</span>
</a>
Edit
The issue appears to be that when you click on the link, you are actually clicking the span and, in IE, the click event is not bubbling. As far as IE is concerned, the anchor is not being :activeated.
You need to take the span out of the anchor:
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<a href="#" class="button">
Yes
</a>
Edit
If you need the span, then the only solution left is a javascript one.
This block of code adds a mousedown/mouseup event listener to all .button elements which toggles the active class on/off.
// vanilla JS
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
anchors[i].addEventListener("mousedown", function (event) {
this.classList.add('active');
}, false);
anchors[i].addEventListener("mouseup", function (event) {
this.classList.remove('active');
}, false);
}
// jQuery
jQuery(document).ready(function($) {
$('a.button').mousedown(
function(){
$(this).addClass('active');
}
)
.mouseup(
function(){
$(this).removeClass('active');
}
);
});
And we change the :active line of the css to:
a.button:active,
a.button.active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
Which listens to both the :active pseudo-class, as well as the .active class.
//pure JS solution
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
anchors[i].addEventListener("mousedown", function (event) {
this.classList.add('active');
}, false);
anchors[i].addEventListener("mouseup", function (event) {
this.classList.remove('active');
}, false);
}
//jQuery solution
/*
jQuery(document).ready(function($) {
$('a.button').mousedown(
function(){
$(this).addClass('active');
}
)
.mouseup(
function(){
$(this).removeClass('active');
}
);
});
*/
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active,
a.button.active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="button">
<span>Yes</span>
</a>
This seems to be a simple problem of priority... a.button:hover is more accurate than a:active.button so it has precedence. The reason why the browsers don't all behave exactly the same is simply because they handle ties differently.
Making sure that the different pseudo classes are always set at the same level of the selector rule will help counter this problem.
So, this means a:active.button should be switched to a.button:active or the others be switched...
You can remove push effect on button by adding a
button {
padding:0;
}
Related
Hi I have created a textarea from a div using -webkit-appearnce. Now I want to add an event to this div on key press. I try my best to do this but I am not sure where I am going wrong.
Please take a look at code and let me know what wrong in this
CSS:
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
}
HTML:
<div id="input" contenteditable>I look like an input</div>
Jquery:
$('#input').unbind().on('keypress', function(e) {
if (e.which == 13) {
alert('hello');
}
});
Thanks
Have a look following snippet.
$('#input').on('keypress', function(e) {
alert('hello');
});
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input" contenteditable>
I look like an input
</div>
Your code is working fine. Try to press enter so that it will alert . You are checking whether enter key is pressed if (e.which == 13) . You can remove that conditional statement for any key press.
Refer : JsFiddle
Your code works as intended when I try it in a JSFiddle. Your code will only run when you press Enter and it will create a new line below the existing text, as well as show the alert(). However, if what you intended was not to create a new line but only show a message when your user hits Enter, use this. If what you intended was to only greet the user once, use this. Finally if you wanted to never allow the user to write text but just show him the alert, use this.
Fiddle
I want my textbox to have a #96f226 border at input:focus, and it works. But if you click away and click back in, it doesn't have that green border anymore.
CSS:
#input {
background: #4a4a4a;
border: 1px solid #454545;
color: #96f226;
}
#input:hover {
background: #656565;
}
#input:focus {
outline: none;
border: 1px solid #96f226
}
HTML:
<input type='text' id='input'>
Edit:
It only doesn't do it if you click in, start typing, click out, and then click in.
The reason this is happening is because your jQuery is adding an inline-style to the input in line 9:
$('#input').css('border', '1px solid #454545');
Inline-styles override styles defined within the stylesheet.
A quick fix would be to add !important to your CSS:
#input:focus {
outline: none;
border: 1px solid #96f226 !important;
}
That works, but it's more of a hack.
If I understand correctly, you're adding the inline-style to remove the red border after an error. A better way to do this would be to simply remove the inline-style. That would sort out the conflict and you wouldn't need to add the !important hack. Replace line 9 in your jQuery with the following:
$('#input').css('border', '');
I have this button, who have a icon (picture). Now, I want to do is on a click on a button icon (picture) will change to another icon and when you click again it will jump back on old icon. (like toggle principle).
Here is my button CSS code:
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family: "open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
and here is CSS icon code:
.w8-button.iconize {
padding-right: 50px !important;
background: url(D:/firstPicture.png) no-repeat 115px center;
}
And this is how I call my button in html:
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>
Can somebody tell me how to do code in javascript, that when I click on button, icon (background picture) will change and stay like that, until you click again will go back to old one (like toggle system)
On a a modern browser that supports addEventListener and the Class List API (shims are available for both on their respective MDN pages to add support for older broswers), you could do this.
CSS
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family:"open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
.w8-button.iconize {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center;
}
.w8-button.iconize2 {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center;
}
HTML
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>
Javascript
document.getElementById("w8-d-blue").addEventListener("click", function (e) {
var target = e.target;
target.classList.toggle("iconize");
target.classList.toggle("iconize2");
}, false);
On jsfiddle
Here is how you can do this in jquery
$(function(){
$("#w8-d-blue").click(function(){
$(this).toggleClass("iconize");
return true;
});
});
To use jquery you'll have to add this to the head section of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and type the above code afterwards.
Quick solution
var switch = 0, element = document.getElementById("w8-d-blue"), img1, img2;
element.onclick = function(){
if (switch == 0){
element.style.backgroundImage(img1);
switch = 1;
}
else {
element.style.backgroundImage(img2);
switch = 0
}
I think you are unaware of the wonders Jquery can bring you. If so you should really look it up, it makes many things like that much easier.
I want to have this button pressed effect in css. I mean for example lets say I press a button then I want to change its css so that it looks pressed. Here is something that I tried. But it's not working. I used example from a site. But the button's size gets smaller and it looks different. Here is the link for the code http://jsfiddle.net/goku/GdD34/
.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
$('.happy').click(function() {
alert('hello');
$('.happy').attr('class','pressed');
});
<input type="button" class="happy">
Just used the :active pseudo-class.
input.happy:active { /* Your style */ }
This is happening because you're replacing the class and not adding a new one. you should use :
$('.happy').addClass('pressed');
Instead of :
$('.happy').attr('class','pressed');
Because when u do that you remove all the css you previously applied to it. Your other option it to add the width/height or any other css to the pressed class.
There are a few things in your code (fiddle):
I guess you want to use a javascript framework (like jQuery), you did not select one in the fiddle.
You have a typo in the fiddle, inside the function it says $('happy') so no element will be found.
You remove the class "happy" within the javascript and replace it with pressed. Maybe you want to apply both $('.happy').attr('class', 'happy pressed'); But then for change .pressed to input.pressed and move below .happy
Perhaps you don't want all buttons to change, use use $(this).attr(...) inside the function
I'd suggest you change the order of your CSS, the and the JS to:
<style>
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
input.happy.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
</style>
<script>
$(function(){
$(".happy").click(function(){
$(this).addClass("pressed");
});
});
</script>
<input type="button" class="happy">
Note, the "$(function(){" bit says "do this after page load". "addClass" will add the class to the list of classes for an element, but the event must be assigned after the DOM has loaded.
Also, you must use '$(this)' instead of '$(".happy")' inside the click function as to only apply the style to the button that was clicked.
You had some syntax errors.
Best event for this isn't .click(), its .mousedown();
When you click the Button without Releasing:
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
});
I believe now it's working : http://jsfiddle.net/HKZ7M/
Then when you release the mouse, give it back the old class.
When you Click the Button then Release it
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
$('.pressed').mouseup(function() {
$('.pressed').attr('class','happy');
});
});
It's working : http://jsfiddle.net/Xx2Gn/
Important Note: The .pressed button is smaller than the .happy button, when you release the mouse you have to make sure that the pointer will be above the new .pressed button, that's why you must make them the same size.
I am having global css file contains below code
#menu_left
{
color: #004080;
width: 225px;
margin: 0px;
border-style: solid solid none solid;
border-color: #ffffff;
border-size: 1px;
border-width: 1px;
}
#menu_left li a
{
color: #222222;
height: 26px;
voice-family: inherit;
text-decoration: none;
border-bottom: solid 1px #ffffff;
background-color:#D3D7D9;
font-size:12px;
font-family:tahoma;
}
#menu_left li a:link, #menu_left li a:visited
{
color: #222222;
display: block;
padding: 8px 0 0 10px;
border-bottom: solid 1px #ffffff;
background-color:#D3D7D9;
font-size:12px;
font-family:tahoma;
}
#menu_left li a:hover
{
color: #222222;
padding: 8px 0 0 10px;
border-bottom: solid 1px #ffffff;
font-weight:normal;
background-color:#B9C4CA;
font-size:12px;
font-family:tahoma;
}
as of now i assigned #menuleft id to my div which contains li's(list tag) and each li tag having one anchor tag.
all my li's will come in the left side panel as list .once i selected any li it should display some css styles and other should have the above css.
i have written one js function to toggle these css changes on selection and un slection .
but hover css is not applying if do like below ...
function setSelected(selID)//selId is ID for anchor tag in selected li item
{
//contains all list of anchor tag id's
var anchorID=['usersAnchor','securityAnchor','passPolAnchor','activeSessAnchor'];
for(i=0;i<anchorID.length;i++)
{
if(selID!=anchorID[i])
{
var div = document.getElementById(anchorID[i]);
div.style.fontWeight = 'bold';
div.setAttribute('style','color: #222222;height: 26px;voice-family: inherit;text-decoration: none;border-bottom: solid 1px #ffffff;background-color:#D3D7D9;font-size:12px;font-family:tahoma;');
}
else
{
var div = document.getElementById(selID);
div.style.fontWeight = 'bold';
div.setAttribute('style','color: #FFFFFF; display: block; padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296; font-size:12px; font-family:tahoma;');
}
}
can any one help me how can i get all css properties in such way that it should work for selection hover and normal while toggeling selection?
Regards,
Kamesh
In your setSelected you are overwriting the bold style right after you set it.
That said, you can deal with css a lot more comfortably.
Instead of setting the css right at the node level, why not use what css was invented for?
You can set a a selected class and in your code just toggle the className
.selected {
color: #222222;
height: 26px;
voice-family: inherit;
text-decoration: none;
border-bottom: solid 1px #ffffff;
background-color:#D3D7D9;
font-size:12px;
font-family:tahoma;
}
And a simple JS function takes care of the class swapping:
function setSelected(selID) {
var anchorIDs = {
'usersAnchor': true
'securityAnchor': true
'passPolAnchor': true
'activeSessAnchor': true
};
var div = document.getElementById(selID),
className = div.className;
if (anchorIDs[selID] === true) {
div.className = className.replace(/\s+(selected)/, " selected");
} else {
div.className = className.replace(/\s+(selected)/, "");
}
}
Use jQuery to make your work simpler!
Instead of using this:
div.setAttribute('style','color: #FFFFFF; display: block; padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296; font-size:12px; font-family:tahoma;');
When you use jQuery, it will be easy and cross browser compatible. You can do the same using this way:
$('div').attr('style','color: #FFFFFF; display: block; padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296; font-size:12px; font-family:tahoma;');
Or
$('div').css({
'color': '#FFFFFF',
'display': 'block',
'padding': '8px 0 0 10px',
'border-bottom': 'solid 1px #ffffff',
'background-color': '#718296',
'font-size': '12px',
'font-family': 'tahoma'
});
The .css attribute from jQuery can be used! :)
I recommend using .css from jQuery API.
Please see this fiddle. Is this the effect you are going for? It uses jQuery to make the Javascript easier, but switches the styles by toggling a CSS class instead using jQuery's .css() method. There are two reasons for this… The first is that you should separate your code by purpose. HTML should be content, CSS should be styles, and Javascript should be used for logic only (you shouldn't put content or styles in your Javascript if possible). The second reason is that it's much easier to use Javascript to switch a class than to switch styles.