We Keep Coding

Unfolding div transformation effect

I have a list of users - approved and awaiting approval. To that I need to add the button at the bottom that unfolds the list of archived users - on top of the approved/awaiting approval lists. It should give the transition like collapsible component - folding/unfolding the div on top of the previous one. And I don't know where to start. The most obvious thing to do is:
<div class="approved_users">
</div>
<div class="archive" style="display: none">
</div>
<button type="button" id="show_archive" onclick="myFunction()">Show archive</button>
function myFunction() {
var archive = document.getElementById("archive");
var app = document.getElementById("approved_users");
if (archive.style.display === "none") {
archive.style.display = "block";
app.style.display="none";
} else {
archive.style.display = "none";
app.style.display="block";
}
}
But I do not know how to achive the "unfold" transformation effect.Could you help?

The folding effect on hover is actually fairly simple. For the HTML, all you need to add is a button in a navbar, as well as a list with the items (in your case, the approved accounts and waiting approval accounts).
<nav>
<li class="hov">Approved Accounts
<ul class="main">
<li>Crystal Bell</li>
<li>Frederick Adams</li>
<li>Add</li>
<li>More</li>
</ul>
</li>
</nav>
The bulk of this effect, though is in css. I demonstrate the effect for you in this demo (HTML and CSS only):
ul,li{
margin: 0;
padding: 0;
}
.main{
position:absolute;
z-index:1;
}
.main li{
list-style:none;
background: blue;
width:100px;
padding: 0 5px;
border: 1px solid black;
height: 30px;
line-height: 30px;
-webkit-transition: all .5s ease-in-out;
}
.main li:nth-child(odd){
-webkit-transform-origin: top;
-webkit-transform: perspective(350px) rotateX(-90deg);
}
.main li:nth-child(even){
margin-top:-65px;
-webkit-transform-origin: bottom;
-webkit-transform: perspective(350px) rotateX(90deg);
}
.hov:hover li:nth-child(odd){
-webkit-transform-origin: top;
-webkit-transform: perspective(350px) rotateX(0deg);
margin-top:0;
}
.hov:hover li:nth-child(even){
-webkit-transform-origin: bottom;
-webkit-transform: perspective(350px) rotateX(0deg);
margin-top:0;
}
.main li:first-child{
margin-top:0;
}
.hov{
position:relative;
height: 40px;
width:112px;
background: green;
color: white;
font-size: 13px;
font-family: Helvetica;
font-weight:bold;
text-align: center;
line-height: 40px;
list-style:none;
z-index:2;
}
<nav>
<li class="hov">Approved
<ul class="main">
<li>Crystal Bell</li>
<li>Frederick Adams</li>
<li>Add</li>
<li>More</li>
<li>To</li>
<li>This</li>
<li>List!</li>
</ul>
</li>
</nav>
As you can see here, this css code works for any number of list items, so you can use it for any number of approved accounts you have. In your case, though, you should create many of these buttons for your other types of accounts (awaiting accounts).

Trying to style a Sidebar Widget Navigation with JQuery

For the navigational items which have a submenu, for example, 'Primary Fees', I have included an arrow. Now when I hover over the Main Menu Item, I have included an animation which rotates the arrow and highlights the Main Menu item with red. In order to rotate the arrow, I added a .rotateOnHover class to all the Main Menu Items which have the arrow. then I use CSS to perform the rotation animation.
Now to the problem. When I hover over the submenu Items, I want to keep that particular Main Menu item highlighted and keep the arrow rotated. For example, when I hover over 'Grade 1-3 Boarding', I want to keep 'Primary Fees' highlighted and I want to keep the arrow rotated. I did some searching on the interwebs, and in particular StackOverflow, and I was encouraged to use Jquery to achieve this task. Since this is in essence, hovering over a child element and changing the style of its parent element.
The problem is when I hover over the submenu items e.g. 'Grade 1-3 Boarding', it applies the rotating arrow animation to ALL the main menu items which have the same arrow and arrow class, .rotateOnHover.
How can I hover over a submenu item and apply my desired hover effects to its parent Menu Item Only and not all the menu items?
Any help will be appreciated.
Also, any styling tips for the sidebar and the website, in general, will be appreciated. This is my very first website and I'm learning on the job.
This is the code for the sidebar
HTML
<div class="sidebar-widget">
<div class="sidebarExplore">
<h4>
<span style="color: grey; text-align: center; margin:auto; display:block; font-size: 25px;">
<i class="fa fa-globe" aria-hidden="true"></i> Explore This Section</span>
</h4>
</div>
<ul class="sidebarExploreList">
<li class="dropdownsidebaritem">
Primary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i>
<div class="sidebarExploreSubmenu" style="font-size: 12px;">
Grade 1 - 3 - Boarding
Grade 4 - 7 - Boarding
Other Costs - Boarding
Reception - Day School
Grade 1 - 3 - Day School
Grade 4 - 7 - Day School
Other Costs - Day School
</div>
</li>
<li class="dropdownsidebaritem">Secondary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i></li>
<li>Admission Forms</li>
<li>School Fee Policy</li>
</ul>
</div>
CSS
.sidebar-widget {
border:1px solid #afb1b3;
margin-top: 13.8%;
margin-right: 5%;
overflow: hidden;
background-color: #f3f3f3;
float: right;
width: 20%;
height: auto;
}
.sidebar-widget ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-widget ul li {
list-style-type: none;
width: 100%;
border-top: 1px solid black;
}
.sidebar-widget ul li:last-child{
list-style-type: none;
width: 100%;
border-bottom: 1px solid black;
}
.sidebar-widget ul li a{
display: block;
position: relative;
text-decoration: none;
text-align: center;
padding: 20px;
font-size: 18px;
font-weight: 100;
text-rendering: optimizeLegibility;
}
.sidebarExploreSubmenu{
display: none;
position: relative;
color: black;
background-color:white;
font-size: 11px;
border-bottom: 0.5px solid bisque;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.sidebarExploreSubmenu a{
padding: 10px;
text-decoration: none;
display: block;
text-align: center;
font-size: 10px;
}
.rotateOnHover {
font-size:18px;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sidebar-widget a:hover {
background-color: #990000;
color: white;
}
.dropdownsidebaritem a:hover .rotateOnHover {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.sidebarExploreSubmenu a:hover{
font-size: 10px;
}
JS
<script type="text/javascript">
$(document).ready(function() {
$( '.dropdownsidebaritem' ).hover(
function(){
$(this).children('.sidebarExploreSubmenu')
.delay(100)
.slideDown(500);
},
function(){
$(this).children('.sidebarExploreSubmenu')
.clearQueue()
.slideUp(500);
}
);
});
$(function() {
$('.sidebarExploreSubmenu a').hover(function() {
$('.rotateOnHover').css('transform', 'rotate(180deg)');
}, function() {
// on mouseout, reset the transform
$('.rotateOnHover').css('transform', '');
});
});
</script>

First of all don't style inline elements, example:
Grade 4 - 7 - Day School
instead make it like that:
Grade 4 - 7 - Day School
and then in style.css add:
.sidebarExploreSubmenu-anchor {
font-size: 15px; font-weight:bold; padding: 5px; }
It can make your website messy. Try to do everything in style.css, remember that there're levels in which browser are reading styles, example:
!important > inline styles > #style .style .style > .style .style > .style

Setting the thickness of an underline (text decoration) in JavaScript

I am trying to find out how to set the thickness of an underline (the text decoration that happens when one hovers with the cursor) in JavaScript. Currently the text becomes underlined like this:
x.style.textDecoration = "underline";
and, "onmouseout", this is undone as follows:
x.style.textDecoration = "none";
All the advice I've seen online so far has to do with formatting the bottom borders of tags. I am not trying to format a menu bar or any other element, but ordinary hyperlinks. I've tried it in various browsers, and the default underline looks fine in Firefox, but in Chrome, the line is hairline-thin, in contrast with the bold text it underlines.
Any advice on how to fix this is greatly appreciated.

CSS :hover should be used for such tasks
.x{
/* default styles here */
}
.x:hover {
/* HOVER default styles here */
}
if you want to be able to control the thickness of your "underline"
use border-bottom instead or box-shadow inset.
Border on whole padded Anchor
.x{
display: inline-block;
color: magenta;
background: #ddd;
padding: 15px 15px 10px;
text-decoration: none;
border-bottom: 5px solid transparent;
transition: border-bottom 0.3s;
}
.x:hover{
border-bottom-color: magenta;
}
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
On Anchor's text only using inner <span> and inset box-shadow
.x{
display: inline-block;
color: magenta;
background: #ddd;
padding: 15px 15px 10px;
text-decoration: none;
}
.x span{
transition: 0.3s;
box-shadow: inset 0 -2px 0 0 trasparent;
}
.x:hover span{
box-shadow: inset 0 -2px 0 0 magenta;
}
<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>
Using :after pseudo for more control
.x{
position: relative;
color: magenta;
text-decoration: none;
}
.x:hover:after{
content: "";
position: absolute;
left: 0;
bottom: -3px; /* Control bottom position */
width: 100%;
height: 5px; /* Set your desired thickness */
background: magenta;
}
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>

If you want to use JavaScript to update the border-bottom style attribute, you can use:
someTag.style.borderBottom="3px solid blue";
Note that the CSS border-bottom is borderBottom in JavaScript

Try using css :after pseudo element , :hover , font-family set to block ; adjust font-size to change thickness of line, top to to change position of line corresponding to text of element
div {
width:24px;
}
div:after {
position:absolute;
top:-24px;
content:"_";
width:0px;
color:#000;
display:none;
font-weight:bold;
font-family:block;
font-size:48px;
}
div:hover:after {
cursor:pointer;
display:block;
}
<div>abc</div>

JavaScript or CSS: How can I make a transition of one element to another?

I'm working on my custom home page and I'd like to make a transition of one element to another.
Here's my HTML code:
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the support forum so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>
CSS:
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
As you can see, I've two ul tag and what I want is to do a transition of the first ul to the other ul: http://prntscr.com/7ftax4 and the second ul: http://prntscr.com/7ftba6
The idea would be that the first ul is displayed and after 10 seconds, second ul passes over the first ul.
How can I do it with JavaScript or CSS please?

Here is a piece of jQuery which will successively add an active class over the <ul> elements. Then using CSS the <ul> elements can be hidden and shown when the .active class is applied
$(function(){
$('#index-features ul').first().addClass('active');
setInterval(loop,10000);
function loop(){
var $active=$('ul.active');
var $next=$active.nextAll('ul').first();
if($next.length===0)$next=$active.prevAll('ul').last();
$active.removeClass('active')
$next.addClass('active');
}
});
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
#index-features ul {
position: absolute;
top: 0;
opacity: 0;
transition: opacity 0.5s;
}
#index-features ul.active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the support forum so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>

This can be done with pure CSS, but you need animation and animation delay. I have made a fiddle where one div will be covered by another div after 10 seconds so be patient: http://jsfiddle.net/Lcek5s21/
#number1, #number2 {
height:100px;
width: 100px;
}
#number1 {
background-color:red;
}
#number2 {
background-color:green;
-webkit-animation: mymove 3s infinite;/* Chrome, Safari, Opera */
-webkit-animation-delay: 10s;/* Chrome, Safari, Opera */
animation: mymove 3s infinite;
animation-delay: 10s;
position:relative;
opacity:0;
}
#-webkit-keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}

Styling a class after added via jQuery

I am trying to style a button depending on whatever it was clicked or not. To be more precise, I have a button which in the normal state and hover state has some CSS styling ( not important ), and when it's clicked, a certain class is added to it ( in my case selected ).
And if that class it's added another CSS style should be applied to it. Well, I have the JavaScript ( it's more jQuery ) which adds the class I need to the button, and the CSS style. But it seems like nothing is happening.
I will paste some of the code so you can see what I'm using for that, but I'll paste the link to the actual working thing.
/*
The jQuery used for adding the class
I'm using log() to check if anything happens, but only till I make it work
*/
var iqns = $(this).find('.iqn');
$(iqns).each(function() {
var iqn = $(this).parent();
$(iqn).on('click', function() {
if($(this).hasClass('.selected')) {
log('Rmoved / Added Class');
$(this).removeClass('.selected');
$(this).addClass('.selected');
} else {
log('Added Class');
$(this).addClass('.selected');
}
});
});
<!-- A part of the HTML mockup so you can see what's the class I'm looking for -->
<div id="509247" class="product-wrapper">
<div class="product">
<div class="description">
<div class="thumb">
<i class="icon">
<img src="http://0.s3.envato.com/files/5880011/Pool.jpg" alt="Thumb">
<span class="preview" data-image-link="http://2.s3.envato.com/files/5880010/Pool.jpg">
<img src="assets/gfx/zoom-icon.png" alt="Zoom">
</span>
</i>
</div>
<div class="info">
<div class="sales">
<div class="icon">
<img src="assets/gfx/sales-icon.png" alt="Sales Icon">
</div>
<div class="text">
<p>2</p>
</div>
</div>
<div class="rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
</div>
</div>
</div>
<div class="purchase">
<div class="info">
<i class="icon">
<i class="iqn"></i>
<span class="tooltip">$ 7</span>
</i>
</div>
<div class="proceed">
<a class="button" href="http://photodune.net/item/pool/509247">Purchase</a>
</div>
</div>
</div>
</div>
/*
Some of the CSS ( it is actually LESS )
*/
.icon {
position: relative;
margin: 0px auto;
margin-top: 12px;
margin-left: 12.5px;
display: block;
cursor: pointer;
.dimensions(35px, 35px);
.background(#noise-monochrome, #323b43, #242a30);
.border(1px, 1px, 1px, 1px, #242a30);
.border-radius(25px, 25px, 25px, 25px);
.shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.1) inset);
.text-format(center, none, none, inherit, none, normal, normal, normal, #ffffff);
.iqn {
position: relative;
margin: 0px auto;
display: block;
.dimensions(35px, 35px);
.background(url(../gfx/price-icon.png), 0px 0px, no-repeat);
}
.tooltip {
position: absolute;
display: block;
top: 0px;
left: 40px;
pointer-events: none;
.dimensions(50px, 35px);
.background(#1f252a);
.border(1px, 1px, 1px, 1px, #1a1f23);
.border-radius(5px, 5px, 5px, 5px);
.font-format(Arial, 16px, normal, bold, normal);
.text-format(center, none, none, inherit, none, normal, 35px, normal, #03b0f0);
.opacity(0);
.transition (all, 0.25s, ease-in-out);
}
.tooltip:before {
position: absolute;
top: 7.5px;
left: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #1f252a;
content: '';
z-index: 5;
}
.tooltip:after {
position: absolute;
top: 6.5px;
left: -11px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-right: 11px solid #1a1f23;
content: '';
z-index: 0;
}
&:hover {
.background(#noise-monochrome, #3c4750, #2c353c);
.iqn {
.background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
}
}
&:hover > .tooltip {
.opacity(1);
left: 50px;
.transition(all, 0.25s, ease-in-out);
}
&.selected {
.background(#noise-monochrome, #2c353c, #3c4750);
.shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5) inset, 1px 1px 1px rgba(255, 255, 255, 0.1));
.iqn {
.background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
}
.tooltip {
.opacity(1);
left: 50px;
.transition(all, 0.25s, ease-in-out);
}
}
}
But what I pasted won't be very helpful, probably the link will help more: Anchor ; navigate to the Shop page.
I would appreciate it if someone could help me out with identifying the problem, I'm not so good using the console, perhaps that would help me a lot.

You dont need to set a dot (.) to add a new class, remove and the code should work.
$(this).removeClass('selected');