I have the following code which works only that not as I desire:
HTML:
<div class="horizontal-ribbon">
<div class="list" id="pseudoCheckBoxes">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="button" id="but" value="next" onclick="check()">
CSS:
.horizontal-ribbon {
padding: 8px 8px 8px 8px;
background: #d6dbdf;
}
.list {
position:relative;
}
.list ul {
display:inline-block;
background:#d6dbdf;
margin:0;
padding:0;
border-radius:0px;
color:#ffffff;
}
.list ul li {
cursor: pointer;
cursor: hand;
display:inline-block;
vertical-align:middle;
border-radius: 50%;
width:14px;
height:14px;
padding:0px;
background:#fff;
border: 5px solid #d6dbdf;
color: #ffffff;
text-align:center;
font: 700 13px"Lato", Helvetica, Arial sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: background 0.2s ease-out, border-color 0.2s ease-out;
transition: background 0.2s ease-out, border-color 0.2s ease-out;
}
.list ul li:first-child {
margin-left: 20px;
}
.list ul li:last-child {
margin-right: 20px;
}
.list ul li:hover {
background:#1abc9c;
border-color:#1abc9c;
}
JAVASCRIPT:
function check() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "#1abc9c";
items[0].style.borderColor = "#1abc9c";
setTimeout(function () {
uncheck()
}, 2000);
}
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "white";
items[0].style.borderColor = "#d6dbdf";
}
I wish to control that effect both from button press and by hovering the mouse of <li> elements.
The hover effect works well but after I click the button next the hover effect disappears and I don't know why. Please be kind and help me (http://jsfiddle.net/xfpyM/).
You are applying :hover effect using CSS hover and adding inline style after clicking the next button.
You can try doing it by adding class.
Here is the demo
JS
function check(){
element=document.getElementById("pseudoCheckBoxes");
items=element.getElementsByTagName("LI");
items[0].className ="active";
setTimeout(function(){uncheck()}, 2000);
}
function uncheck(){
element=document.getElementById("pseudoCheckBoxes");
items=element.getElementsByTagName("LI");
items[0].className=" ";
}
CSS
.list ul li.active,
.list ul li:hover{
background:#1abc9c;
border-color:#1abc9c;
}
Your uncheck function have some error. Instead of removing style attribute you are adding different styels. So the actual hover style not applying.
Instead of this
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "white";
items[0].style.borderColor = "#d6dbdf";
}
Use like this.
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].removeAttribute("style");
}
DEMO
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 got this little codepen which I am working on. I am pretty new to javascript and just worked some solutions out the best as I could. Now my question is: Would there have been any better ways to do this?
That's my JS:
$(function() {
$("#selectable").selectable();
$("#selectable").selectable({
selected: function(event, ui) {
var nthchild = ($(ui.selected).index() + 1);
$("section:nth-child(" + nthchild + ")").css('opacity', '1');
$("section:not(:nth-child(" + nthchild + "))").css('opacity', '0');
}
});
});
As you can see, I just got the nth-child with the index + 1 of the selected list item. Then I called the matching section with section:nth-child(" + nthchild + ") and set the opacity to 1. Would there been any better ways to get multiple selectable tabs? Atm there aren't even multiple selectable tabs. The $("section:not(:nth-child(" + nthchild + "))").css('opacity', '0'); only leaves the last selected one.
My final goal for this codepen is to get multiple selectable tabs, whose content get merged (like put below each other), when there are multiple tabs selected.
Remember, I am pretty new to javascript and like to improve. I am open to any solution. For the multi select I am using the jQuery Seletable widget (http://api.jqueryui.com/selectable/). Thanks for your help!
You can get the list of selected items with $('.ui-selected', this). Use .map() on it to get an array of selected indexes. Then you can iterate of the sections and set their visibility depending on whether their index is in that array.
If you want multiple sections to appear at the same time, you'll have to abandon the current absolute position you have for them, and just use visibility (display) to show or hide them. That way they will not take space unless they are visible, and when you have more than one visible, they will not overlap.
So change the CSS as follows:
For .tabcontent replace this:
position:absolute;
opacity:0;
with this:
display:none;
And then use this code:
$(function() {
// define one function, to be used for both select/unselect
function selectionChange(event, ui) {
// Get indexes of selected items in an array
var items = $('.ui-selected', this).map(function () {
return $(this).index();
}).get();
// Show or hide sections according to the corresponding option's selection
$("section").each(function () {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
Of course, this is just a starting point. Right now, when you select many sections, they will flow out of your green box. So depending on what you are actually going to show, you will need to play with the CSS to make it render nicely.
$(function() {
// define one function, to be used for both select/unselect
function selectionChange(event, ui) {
// Get indexes of selected items in an array
var items = $('.ui-selected', this).map(function () {
return $(this).index();
}).get();
// Show or hide sections according to the corresponding option's selection
$("section").each(function () {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
*{
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
}
#selectable .ui-selecting {
background: #9eefbc;
transition:.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
transition: transform 0.8s, background-color 0.8s;
-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
transform: perspective(300px) rotate3d(1,0,0,-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
}
#selectable .ui-selected {
background: #6dce91;
transition:all 0.8s;
}
#selectable {
list-style-type: none;
position:absolute;
width: 60%;
margin-left:20%;
display:flex;
transition:.3s ease-in-out;
z-index:1;
}
#selectable li {
background:#ddffea;
padding: 0.6em;
font-size: 1.4em;
flex-grow:1;
transition:.3s ease-in-out;
border:none;
text-align:center;
line-height:0.8em;
}
#selectable .ui-selected:after,
#selectable .ui-selected::after {
position: absolute;
top: 44px;
margin-left:-50px;
transition: .2s ease-in-out;
content: '';
width: 0;
height: 0;
opacity:1;
animation:dreieckFade 1s forwards;
border-top: solid 15px #6dce91;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
#keyframes dreieckFade{
0%{opacity:0;border-top: solid 0px #6dce91;}
100%{opacity:1;border-top: solid 15px #6dce91;}
}
#content{
width:60%;
background-color:#9eefbc;
height:500px;
margin-left:20%;
}
.tabcontent{
width:60%;
top:44px;
height:100px;
display:none; /* no abs position, no opacity:0 */
background-color:transparent;
z-index:0;
transition:.3s ease-in-out;
text-align:center;
font-size:5em;
padding-top:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">1</section>
<section class="tabcontent">2</section>
<section class="tabcontent">3</section>
<section class="tabcontent">4</section>
<section class="tabcontent">5</section>
<section class="tabcontent">6</section>
</div>
I'm currently trying to learn jQuery and JavaScript, and for my navigation I'm trying to make it look underlined on mouseover which, although it might not be the cleaned of code, I have managed to do it using a addClass and removeClass.
I am now trying to make the underline class fade in and fade out, which I believe is something normally done with CSS3 but due to just trying to learn jquery, I've been trying to figure it out.
I've tried putting .fadeIn() and .fadeOut() in different places in the code, but nothing seems to work, so I'm assuming this is not the correct way to do it.
Here's my code
HTML
<div class="navleft">
<ul>
<li class="active">Home</li>
<li class="active1">Dealerships</li>
<li class="active1">Contact</li>
</ul>
</div>
CSS
.navleft ul li.active1 {
border-width: 0 0 1px 0;
border-color: #999;
border-style: solid;
cursor: pointer;
}
.navleft ul li.active {
border-width: 0 0 1px 0;
border-color: #999;
border-style: solid;
cursor: pointer;
}
Javascript
$(function(){
$('.navleft ul li').removeClass('active1');
$('.navleft ul li').mouseover(function(){
$(this).addClass('active1');
});
$('.navleft ul li').mouseout(function(){
$(this).removeClass('active1');
})
});
If anyone could help, that would be great, as I'm really stuck on this one.
Classes can't fade in or out. fadeIn and fadeOut are for the opacity of elements. If you actually want to ›fade‹ a style you have to either write your own animation code (which I wouldn't recommend) or use CSS3 transitions, which I would recommend anyways.
Here's a CSS way to smoothly transition from one border to another on hovering: http://jsfiddle.net/u4h7k/2/.
HTML:
<ul id = "nav">
<li>Home</li>
<li>Dealerships</li>
<li>Contact</li>
</ul>
CSS:
#nav > li {
position: relative;
cursor: pointer;
}
#nav > li:before, #nav > li:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid blue;
opacity: 0;
-webkit-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
#nav > li:after {
border-bottom: 1px solid red;
opacity: 1;
}
#nav > li:hover:after {
opacity: 0;
}
#nav > li:hover:before {
opacity: 1;
}
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);
});
});
phpFox has released a theme named "Nebula" with the version 3.5.0. On this theme, there is button on the Header and the menu slides down when the user clicks the button. (Actually not a button, but a div)
I want to add this feature to SocialEngine. But JavaScript Code contains a phpFox variable and I don't know what it refers to. I am not so good at JavaScript.
HTML:
<div id="nb_features">
Features
<div id="nb_features_holder">
Menu widget code will be added here...
</div>
</div>
JavaScript:
$Behavior.customNebula = function(){
$('#nb_features_link').click(function(){
if ($(this).hasClass('nb_is_clicked')) {
$(this).removeClass('nb_is_clicked');
$('#nb_features_holder').slideUp('fast');
} else {
$(this).addClass('nb_is_clicked');
$('#nb_features_holder').slideDown('fast');
}
return false;
});
};
CSS:
#nb_features {
position:absolute;
top:0px;
right:0px;
}
#nb_features_link,
#nb_features_link:hover {
display:block;
width:40px;
height:40px;
line-height:40px;
text-indent:-1000px;
overflow:hidden;
background:url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
margin-top:-7px;
margin-right:20px;
}
#nb_features_link:hover {
background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}
#nb_features a.nb_is_clicked,
#nb_features a.nb_is_clicked:hover {
background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}
#nb_features_holder {
position:absolute;
background:#4f4f4f;
right:0px;
width:980px;
border:1px #304779 solid;
border-top:0px;
display:none;
margin-top:20px;
}
#nb_features_holder ul li a,
#nb_features_holder ul li a:hover {
float:left;
color:#fff;
height:30px;
line-height:30px;
padding:0px 10px 0px 10px;
text-decoration:none;
}
#nb_features_holder ul li a.menu_is_selected,
#nb_features_holder ul li a.menu_is_selected:hover {
background:#009AEF;
color:#fff;
}
#nb_features_holder ul li a:hover {
background:#2F2F2F;
-webkit-transition: all 0.50s ease;
-moz-transition: all 0.50s ease;
-o-transition: all 0.50s ease;
}
What should I do to make this code work with SocialEngine?
Well the $Behavior namespace is a wrapper for the onLoad event, is this the js variable you were talking about? If it is you can replace it for the more conventional jquery/mootools/etc way and it would probably work although you would have to match the selectors properly, dont know if the code you posted is everything you need