As you can see
I want to somehow remove the dotted lines after the button has been clicked.Any ideas how ?
Thanks
GUYS : This is the current status of my CSS ansd HTML but still no USE:
.myButton input {
position:absolute;
display:block;
top: 5%;
left:87%;
height: 44px;
border:none;
cursor:pointer;
width: 43px;
font: bold 13px sans-serif;;
color:#333;
background: url("hover.png") 0 0 no-repeat;
text-decoration: none;
}
.myButton input:hover {
background-position: 0 -44px;
color: #049;
outline: 0;
}
.myButton input:active {
background-position: 0 -88px;
color:#fff;
outline: 0;
}
input:active, input:focus {
outline: 0;
}
<div class="myButton">
<input type="submit" value="">
</div>
Nothing seems to be happening !!
You have to style the <a> like:
a {outline: none}
use the below code
a:active
{
outline: none;
}
try for other browsers also
a:focus
{
-moz-outline-style: none;
}
a:focus { outline:none }
Possible with pure HTML as well:
...
And with JavaScript you can do that on all links:
window.onload = function WindowLoad(evt) {
//hide focus:
var arrLinks = document.getElementsByTagName("a");
for (var i = 0; i < arrLinks.length; i++) {
arrLinks[i].hideFocus = "true";
}
Despite my comment on your question,
You should keep them for
accessibility.
You can find your CSS-trick here for this
(Anyway, you should keep them.)
#myElement { outline: 0; }
Try this on your element, i dont now if is an image, div, button, link. But it works
If you want to keep the outline on active and on focus, but hide it on clicking a link, you can add in css:
A.No-Outline {outline-style:none;}
and use script:
$('A').hover(function() {
$(this).addClass('No-Outline');
},function() {
$(this).removeClass('No-Outline');
});
you must be hover befor clicking, so it does the job.
Related
I want to display a list of links like a drop down select, without losing the semantic if possible. Here's what I tried. The CSS obviously does not work now. For the select I emulated the link a bit with location.href in the JavaScript but it loses semantic value, and accessibility I guess.
Without jQuery and Bootstrap,
How to display a list of links as a drop down select ?
document.getElementById("0").addEventListener("change", function (event) {
location.href = event.target.value;
});
.like-select {
appearance: select;
}
<p>Semantic wanted</p>
<ul class="like-select">
<li>Wikipedia</li>
<li>Stack Overflow</li>
<li>Echo Js</li>
</ul>
<p>Look and feel wanted especially on mobile</p>
<select id="0">
<option value="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</option>
<option value="https://stackoverflow.com">Stack Overflow</option>
<option value="http://www.echojs.com/">Echo Js</option>
</select>
The WAI provides multiple examples of emulated listbox using role=listbox and role=option. This requires the use of aria-activedescendant and aria-selected for better accessibility support.
See Examples under section: 3.13 Listbox
For the styling, you can copy the style used by the user agent stylesheet.
That being said, it might a bad idea to style a list of links as a dropdown select as it could lead to an unpredictable change of context
I think you are looking for something like this?Without using Jquery and Bootstrap solution
Dropdown for Url
HTML
<div class="dropdown">
Select URL...
<div class="dropdown-content">
<ul class="like-select">
<li>Wikipedia</li>
<li>Stack Overflow</li>
<li>Echo Js</li>
</ul>
</div>
</div>
CSS
.dropdown {
position: relative;
display: inline-block;
padding: 10px;
width:160px;
border: 1px solid;
}
.dropdown:after{
content: '\25BC';
position: relative;
font-size:14px;
float:right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: inherit;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 39px;
left: 0;
width: 100%;
z-index: 1;
}
li a{
text-decoration:none;
color: black;
padding:10px;
}
ul{
padding:0;
margin:0;
}
li{
list-style: none;
padding:10px;
border-bottom:1px solid black;
}
li:hover{
background-color:gray;
}
li:hover a{
color:white;
}
JS
var dropdown = document.getElementsByClassName("dropdown");
var attribute;
var myFunction = function() {
attribute = this.getAttribute("data-target");
var x = document.getElementById(attribute);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener('click', myFunction, false);
}
Working Fiddle
<option> does not take nested HTML elements.
What you have to do is style your <ul> <li> and make it look and feel like a native drop down.
Here is a working example:
https://codepen.io/anon/pen/boxKRz
I made this sample only using CSS, hope this will help u
HTML:
<ul>
<li id="box">Hover Me
<ul>
<li class="dropdown_item">111</li>
<li class="dropdown_item">222</li>
</ul>
</li>
</ul>
CSS:
ul, li {
list-style-type: none;
margin: 0;
padding:0;
height:30px;
line-height: 30px;
width: 100px;
}
#box {
border: 1px solid #bbb;
display: inline-block;
cursor:default;
}
ul li ul {
display: none;
position: absolute;
top: 40px; /* change this value based on your browser */
left: 10px;
}
ul li:hover>ul:last-child {
display: block;
width: 100px;
}
ul li ul li:hover {
background-color:rgb(33,144,255);
color:white;
border: 1px solid #bbb;
}
Link:
https://codepen.io/zsydyc/pen/VMGGPv
ALL SOLUTION WITH JUST CSS AND HOVER ARE WORKING COMPLETLY WELL ON MOBILE!!! That comments that there is no hover on mobile are not quite right... The hover states are mapped to a finger tap and working on every mobile OS in every brwoser! Normally the default behaviour already does the trick, in some cases you can make it more usable with some JS...
If you want a dropdown just with css and NO hover here comes an other solution realized with a checkbox: (just google "css checkbox hack" for further information)
.checkhack {
display: none;
}
#menu {
display: none;
}
#menutoggle:checked + #menu {
display: block;
}
<label for="menutoggle" class="checklabel">OPEN MENU</label>
<input id="menutoggle" class="checkhack" type="checkbox" />
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
quick way of making a combobox without using ID selector and keeping the HTML as above
link:https://codepen.io/gabep/pen/KXJoEK
first the CSS them the JS
fist I style the UL :
.like-select {
height:21px;
overflow:hidden;
width:8%;
}
.like-select li{
appearance: select;
color:red;
border-left: 1px solid blue;
border-right: 1px solid blue;
list-style-type: none;
}
make the first child your box :
.like-select li:first-child {
border: 1px solid blue;
}
make the last child the bottom part of dropdown:
.like-select li:last-child {
border-bottom: 1px solid blue;
}
give the list item a hover effect :
.like-select li a:hover {
background-color: green !important;
}
.like-select li:first-child a:hover{
background-color: none !important;
}
a {
color:blue;
text-decoration:none;
width:100%;
}
now the Js:
function load() {
//add the main item to your list you need to have it in your drop-down:
// use querySelectorAll to find specific elements of any type and put in a list
var addfirst= document.querySelectorAll(".like-select li:first-child");
var ullist = document.querySelectorAll(".like-select");
ullist[0].innerHTML = addfirst[0].outerHTML + ullist[0].innerHTML ;
y = document.querySelectorAll(".like-select li");
// do an onlick here instead of mouse over
y[0].onmouseenter = function(){
//resize wrapper event - im not going to do a toggle because you get the idea
var comboboxwrapper = document.querySelectorAll(".like-select");
comboboxwrapper[0].style.height = "100px";
}
// loop though all other items except first-child
var i;
for (i = 1; i < y.length; i++) {
y[i].onmouseover = function(){
var selecteditem =document.querySelectorAll(".like-select li");
//change the value in the combobox with the value hovered over
var mainitem = document.querySelectorAll(".like-select li:first-child");
mainitem[0].innerHTML = this.innerHTML;
};
} }
window.onload = load;
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;
}
I am having some trouble changing the color property of a link when its class is changed. Here is the code
<div id="information">
<ul class="pagination">
<li><span>Administration</span><small>Learn Site Administration</small></li>
<li><span>Management</span><small>Learn Access Management</small></li>
<li><span>Dashboard</span><small>Learn Dashboard Functions</small></li>
<li><span>Visitors</span><small>Learn Visitor Management</small></li>
</ul>
</div>
This is the html code i am using to create my list with no inline style or anything else.
Now here is my css.
#information {
width: 1000px;
height: 350px;
margin: 0 auto;
background:url(../images/information-bg.jpg) no-repeat 25px 5px;
}
#information ul{
list-style: none;
margin: 0;
padding: 0;
}
#information ul.pagination{
float: left;
list-style:none;
padding:0;
margin:0;
width:246px;
height:350px;
background:url(../images/pagination-bg.jpg) no-repeat left top;
}
#information ul.pagination li {
padding:5px 0 0 5px;
margin-bottom:-5px;
}
#information ul.pagination li a {
width:270px;
height:85px;
background-repeat:no-repeat;
background-position:left -85px;
background-image:url(../images/thumb-sprite.png);
text-decoration:none;
display:block;
color: #464646;
}
#information ul.pagination li.current a {
background-position:left top;
color: white;
}
#information ul.pagination li a span {
font-size: 26px;
line-height: 1.2em;
display: block;
padding: 14px 0 0 0;
}
#information ul.pagination li a small {
display:inline-block;
color:#428301;
background-repeat:no-repeat;
background-position:right -80px;
background-image:url(../images/arrows.gif);
padding:0 17px 0 0;
font-size: 10px;
}
#information ul.pagination li.current a small {
font-size: 10px;
color: #89C100;
background-position:right 5px;
}
#information ul.pagination li a span, #information ul.pagination li a small {
padding-left:40px;
}
Currently no element have a class .current so I add class to first element through script and , here is the script
$("document").ready(function(){
//Adding class to pagination and showing first image
var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);
//On click of pagination link, changing background of pagination and anmating new slide
$("ul.pagination li").click(function (){
currentPagination.removeClass("current");
currentPagination = $(this).addClass("current");
var ul = $(this).parent();
var index = ul.children().index(this);
});
});
The dilemma here is that, the background of the li with class = current is changing correctly but the color property of the element is not changing, which you can see in css property of ( #information ul.pagination li.current a ), i dont know whats wrong with it, but i have been stuck for so long finally i decided to ask of forum.
Please note that the script is working fine because background is changing perfectly. Even at the start of webpage li with current class has the color #fff but it doesnt work afterwards, any help will be much appreciated.
P.S Here is the URL in which you can see it works fine at start but after that background image positioning changes but color does not
Its working perfectly. as you can see in JSFiddle
http://jsfiddle.net/banded_krait/m9kV9/1/
if it's still not working in your code try to put !important to that css.
#information ul.pagination li.current a {
background-position:left top;
color: red !important;
}
for the subtitle color put this css
#information ul.pagination li.current a small {
color: red !important;
}
I also updated my jsfiddle. please see.
I changed the color from white to red to see that it's working or not.
It works fine in this DEMO
I have added
#information ul.pagination li.current a {
background-position:left top;
background-color: black;
color: white;
}
So that it is easily visible
Updated Answer
try to override the default link color by specifying the following property
#information ul.pagination li.current a:active{
color: #FFF;
}
try
#information ul.pagination li.current a {
background-position:left top;
color: red;
}
your code is working fine , the thing is you are using color: white;
so link is not showing .
I don't see any error here
$("document").ready(function(){
//Adding class to pagination and showing first image
var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);
//On click of pagination link, changing background of pagination and anmating new slide
$("ul.pagination li").click(function (){
currentPagination.removeClass("current");
currentPagination = $(this).addClass("current");
var ul = $(this).parent();
var index = ul.children().index(this);
});
});
So I'm trying to write a super simple script that will allow a user to throw any link or button with the class .close inside of a div, and when that .close link is clicked, it automatically closes the parent container.
Here is what I'm currently trying to work with: JSFiddle
The code that I am currently trying to use is:
HTML
<div class="well notice bg-green">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>This is a notice that is green.</p>
</div>
CSS
.well {
background: #f9f9f9;
border-color: #f1f1f1;
border-style: solid;
border-width: 1px;
padding: 15px 20px;
}
.notice {
margin: 15px 0;
padding: 0px 15px;
}
.well.bg-green {
background: #dff0d8;
border-color: #d6e9c6;
color: #468847;
}
.close {
color: #000;
filter: alpha(opacity=20);
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
margin-top: 15px;
opacity: .2;
text-shadow: 0 1px 0 #fff;
}
.close:hover, .close:focus {
color: #000;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
text-decoration: none;
}
button.close {
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
JavaScript (jQuery)
$('.close').live("click", function () {
$(this).parents('div').fadeOut;
});
Let me know if my question doesn't make sense or if any more elaboration is needed. Thank you!
Two problems:
live() doesn't exist in the version of jQuery in your fiddle (deprecated in 1.7, removed in 1.9)
fadeOut is a function (you were missing parens to execute it)
http://jsfiddle.net/KF7S6/
$('.close').on("click", function () {
$(this).parents('div').fadeOut();
});
If you want it to work on dynamic elements, use this version:
$(document).on('click', '.close', function () {
$(this).parents('div').fadeOut();
});
http://jsfiddle.net/6Xyn4/4/
$('.close').click(function () {
$(this).parent().fadeOut();
});
Recommended to use .click() now in place of deprecated .live()
working demo http://jsfiddle.net/gL9rw/
Issue was .live which is deprecated now.
If you keen: What's wrong with the jQuery live method? :)
code
$('.close').on("click", function () {
$(this).parents('div').fadeOut();
});
Try this, it should be fadeOut() not fadeOut
$('.close').click(function () {
$(this).parents('div').fadeOut();
});
.live() is dead. use .on() delegates. Also you missed something, check below
$('body').on("click", '.close', function () {
$(this).parents().fadeOut();
});
Fiddle
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.