Custom scrollbar and AJAX tabs issues - javascript

Greetings fellow stackoverflow members,
I am having some major issues trying to get my custom scrollbar to work in conjunction with ajax based tabs. Any help would be greatly appreciated. I have most of it complete and working, and I'll provide a demo of what I currently have with the code below and in the demo.
Here is the Demo: http://jsfiddle.net/54RLc/
As you will note in the demo above, the first tab works as intended - simply hover the icon in the upper left hand corner of the container to view the drop down menu tabs - but any tab after that, the custom scrollbar doesn't seem to want to apply itself. Any help would be greatly appreciated!
HTML:
<div id="extended_container" class="shadow_effect">
<h2>Divisions</h2>
<ul id="options">
<li>
<ul>
<li>All
</li>
<li>Latest
</li>
<li>Featured
</li>
<li>Most Popular
</li>
</ul>
</li>
</ul>
<div id="division_all_wrapper" class="modern-skin">
<div id="division_all" class="navcontent">
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
</div>
</div>
<div id="division_latest_wrapper" class="modern-skin">
<div id="division_latest" class="navcontent" style="display: none;">
<div class="holder_box">
<p>Testing</p>
</div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
</div>
</div>
<div id="division_featured_wrapper" class="modern-skin">
<div id="division_featured" class="navcontent" style="display: none;">
<div class="holder_box">
<p>Gamelll</p>
</div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
</div>
</div>
<div id="division_popular_wrapper" class="modern-skin">
<div id="division_popular" class="navcontent" style="display: none;">
<div class="holder_box">
<p>Play</p>
</div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
</div>
</div>
</div>
CSS:
.scrollable {
position: relative;
}
.scrollable:focus {
outline: 0;
}
.scrollable .viewport {
position: relative;
overflow: hidden;
}
.scrollable .viewport .overview {
position: absolute;
}
.scrollable .scroll-bar {
display: none;
}
.scrollable .scroll-bar.vertical {
height: 100%;
position: absolute;
right: 3px;
z-index: 9999;
}
.scrollable .scroll-bar .thumb {
position: absolute;
}
.scrollable .scroll-bar.vertical .thumb {
width: 100%;
min-height: 10px;
}
.not-selectable {
-moz-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ===== Start of 'Modern skin for Custom Scrollbar' ===== */
.scrollable.modern-skin {
padding-right: 16px;
}
.scrollable.modern-skin .scroll-bar {
padding-bottom: 4px;
border: 1px solid #151515;
border-radius: 6px;
-moz-box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
-webkit-box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
}
.scrollable.modern-skin .scroll-bar .thumb {
background-color: #95aabf;
border: 1px solid #151515;
border-radius: 4px;
}
.scrollable.modern-skin .scroll-bar.vertical .thumb {
width: 6px;
margin: 1px 0 0 1px;
background: -moz-linear-gradient(left, #95aabf 0%, #515D69 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #95aabf), color-stop(100%, #515D69));
background: -webkit-linear-gradient(left, #95aabf 0%, #515D69 100%);
background: -o-linear-gradient(left, #95aabf 0%, #515D69 100%);
background: -ms-linear-gradient(left, #95aabf 0%, #515D69 100%);
background: linear-gradient(to right, #95aabf 0%, #515D69 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient( startColorstr='#95aabf', endColorstr='#515D69',GradientType=1 )";
-moz-box-shadow: inset 0.05em 0 0.3em -0.05em #111;
-webkit-box-shadow: inset 0.05em 0 0.3em -0.05em #111;
box-shadow: inset 0.05em 0 0.3em -0.05em #111;
}
.scrollable.modern-skin .scroll-bar.vertical {
width: 10px;
max-height: 290px !important;
}
#extended_container {
width: 304px;
height: 335px;
margin: 10px 16px;
float: left;
display: inline;
background: #222;
border: 1px solid #000;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
position: relative;
top: 40px;
left: 5px;
}
#extended_container h2 {
width: 304px;
height: 27px;
padding: 3px 0 0 0;
margin: 0;
background-color: #444;
background: -moz-linear-gradient(#444, #191919);
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#191919));
background: -webkit-linear-gradient(#444, #191919);
background: -o-linear-gradient(#444, #191919);
border-top: 2px solid #616161;
border-bottom: 1px solid #111;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
float: left;
color: #BBB;
text-align: center;
text-shadow: 1px 1px #222, -1px -1px #000;
}
#options, #options ul {
padding: 0;
margin: 0;
list-style: none;
}
#options {
width: 23px;
height: 18px;
padding: 3px;
background: url(../images/Icons/menu-icon.png) no-repeat 5px 1px;
border-top: 1px solid #616161;
border-radius: 4px;
-moz-box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
-webkit-box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
float: left;
position: relative;
top: -29px;
left: 4px;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#options:hover, #options.active {
background: url(../images/Icons/menu-icon.png) rgba(0, 0, 0, 0.15) no-repeat 5px 1px;
border-top: 1px solid #494949;
-moz-box-shadow: inset 0 0.1em 0.4em 0.1em #111;
-webkit-box-shadow: inset 0 0.1em 0.4em 0.1em #111;
box-shadow: inset 0 0.1em 0.4em 0.1em #111;
}
#options {
zoom: 1;
}
#options li {
position: relative;
}
#options ul {
width: 150px;
background-color: #444;
background: -moz-linear-gradient(#444, #191919);
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#191919));
background: -webkit-linear-gradient(#444, #191919);
background: -o-linear-gradient(#444, #191919);
border: 1px solid #111;
border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
-webkit-box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 0;
visibility: hidden;
position: relative;
top: 21px;
left: -14px;
z-index: 9999;
}
#options li:hover > ul {
margin: 0;
opacity: 1;
visibility: visible;
}
#options ul li {
display: block;
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
}
#options ul li a {
width: 130px;
padding: 10px;
display: block;
white-space: nowrap;
float: none;
color: #999;
font: 12px Arial, Helvetica, sans-serif;
font-style: bold;
text-shadow: 1px 1px #222, -1px -1px #000;
}
#options ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#options ul li a:hover, #options ul li a.active {
background-color: #515D69;
background: -moz-linear-gradient(#515D69, #050D14);
background: -webkit-gradient(linear, left top, left bottom, from(#515D69), to(#050D14));
background: -webkit-linear-gradient(#515D69, #050D14);
background: -o-linear-gradient(#515D69, #050D14);
-moz-box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
-webkit-box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
color: #FFF;
text-shadow: 1px 1px #2D363F, -1px -1px #000;
}
#options ul li:first-child > a {
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
#options ul li:first-child > a:after {
content:'';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #343536;
position: absolute;
top: -6px;
left: 19px;
}
#options ul ul li:first-child a:after {
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #515D69;
top: 50%;
left: -6px;
}
#options ul li:first-child a:hover:after {
border-bottom-color: #515D69;
}
#options ul li:last-child > a {
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
#division_all_wrapper, #division_latest_wrapper, #division_featured_wrapper, #division_popular_wrapper {
width: 304px;
height: 299px;
position: absolute;
top: 36px;
overflow: hidden;
background: pink;
}
.navcontent {
width: 304px;
float: left;
position: relative;
z-index: 9997;
background: blue;
}
.holder_box {
width: 286px;
height: 100px;
padding: 0;
margin: 5px 8px 10px 8px;
border: 1px solid #111;
}
JS/AJAX:
Cannot provide all the JS/AJAX that is required unfortunately due to the body of this post exceeding 30000 characters...however, full JS/AJAX is provided in the demo link.


Most custom scrollbar scripts don't work immediately for hidden content.
A couple of scripts such as Tiny Scrollbar and Malihu's Custom Scrollbar offer update function that will solve this kind of issue.
I just had a brief look at the github site for the custom scrollbar script that you're using and it doesn't seem to have update function.

Related

radio button as image with onclick to next fieldset

<a id="Choise" name="next" class="next Choise-button" value="Next" >
<input type="radio" name="designation" id="designation" />
<label for="designation"><img src="" alt="designation" />
<h2>designation</h2></label>
</a>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$('#Choise input:radio').addClass('input_hidden');
$('#Choise label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise2 input:radio').addClass('input_hidden');
$('#Choise2 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise3 input:radio').addClass('input_hidden');
$('#Choise3 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise4 input:radio').addClass('input_hidden');
$('#Choise4 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise5 input:radio').addClass('input_hidden');
$('#Choise5 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise6 input:radio').addClass('input_hidden');
$('#Choise6 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise7 input:radio').addClass('input_hidden');
$('#Choise7 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise8 input:radio').addClass('input_hidden');
$('#Choise8 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise9 input:radio').addClass('input_hidden');
$('#Choise9 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
/*custom font*/
#import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.6));
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 950px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 1px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 40px 40px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
margin-top: 5px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform select {
text-align:left;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
margin-top: 5px;
width: 30%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 400px;
background: #00affe;
font-weight: bold;
font-size:16px;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #00affe;
}
/*buttons2*/
#msform .choise-button {
cursor: pointer;
}
#msform .choise-button:hover, #msform .choise-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #00affe;
border: 10 solid;
border-color: #FF0000;
}
#msform .Angaben {
font-size:12px;
text-align:left;
}
#msform .zustimmung {
font-size:12px;
}
#msform .zustimmunglinks {
font-size:12px;
color:#00affe;
}
#msform .zustimmunglinks:hover, #msform .zustimmunglinks:active, #msform .zustimmunglinks:hover+label, #msform .zustimmunglinks:active+label {
font-size:13px;
}
/*headings*/
.fs-title {
font-size: 18px;
color: #2C3E50;
margin-bottom: 40px;
}
.hr {
width: 110%;
margin-left: -5%;
text-align: center;
margin-bottom: 25px;
}
.Abfragentext {
border: 1px solid;
width:300px;
text-align: center;
margin-bottom: 40px;
margin-top: 40px;
padding-bottom: 30px;
margin: auto;
}
.fs-boldtitle {
font-weight: bold;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 10px;
}
.sliderOutput {
color: #00affe;
font-weight: bold;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
font-size: 9px;
width: 25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 7px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 20px;
background: white;
position: absolute;
left: -50%;
top: 0px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #00affe;
color: white;
}
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
border-style: solid;
border-width: 5px;
border-color: #00affe;
border-radius: 5px;
}
#usp.uspdiv {
font-size:12px;
text-align: center;
margin-top: 20pt;
background-color: #888888;
width: 100%;
hight:100%;
}
.usp-facts1 {
font-size:13px;
margin-top: 20pt;
background-color: #F5F5F5;
width: 100%;
padding: 25px;
padding-right:50px;
margin-left:-40px;
margin-bottom:-40px;
}
.usp-table {
width:100%;
text-align: center;
}
.usp-prima {
font-size:18px;
color:#00affe;
}
/*Seite eins Auswahlen*/
label:hover, label:active, input:hover+label, input:active+label {
border: 3px solid;
border-color: #00affe;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
transform: scale(1.05);
}
#Choise label {
width: 400px;
margin-right:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise h2 {
margin-bottom: 20px;
}
#Choise2 label {
margin-left:5px;
margin-right:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise2 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise2 h2 {
margin-bottom: 20px;
}
#Choise3 label {
margin-left:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise3 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise3 h2 {
margin-bottom: 20px;
}
#Choise4 label {
margin-top:5px;
margin-right:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise4 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise4 h2 {
margin-bottom: 20px;
}
#Choise5 label {
margin-top:5px;
margin-left:5px;
margin-right:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise5 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise5 h2 {
margin-bottom: 20px;
}
#Choise6 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise6 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise6 h2 {
margin-bottom: 20px;
}
#Choise7 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise7 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise7 h2 {
margin-bottom: 20px;
}
#Choise8 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise8 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise8 h2 {
margin-bottom: 20px;
}
#Choise9 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise9 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise9 h2 {
margin-bottom: 20px;
}
/*ragen Slider Etagen*/
input[type=range].etagenslider {
-webkit-appearance: none;
width: 100%;
margin: 8.5px 0;
}
input[type=range].etagenslider:focus {
outline: none;
}
input[type=range].etagenslider::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
background: #484d4d;
border-radius: 25px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].etagenslider::-webkit-slider-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.5px;
}
input[type=range].etagenslider:focus::-webkit-slider-runnable-track {
background: #7e8787;
}
input[type=range].etagenslider::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
background: #484d4d;
border-radius: 25px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].etagenslider::-moz-range-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
}
input[type=range].etagenslider::-ms-track {
width: 100%;
height: 3px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range].etagenslider::-ms-fill-lower {
background: #121313;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
}
input[type=range].etagenslider::-ms-fill-upper {
background: #484d4d;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
}
input[type=range].etagenslider::-ms-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
height: 3px;
}
input[type=range].etagenslider:focus::-ms-fill-lower {
background: #484d4d;
}
input[type=range].etagenslider:focus::-ms-fill-upper {
background: #7e8787;
}
Hey, I am working on a contact form in which several steps are taken per .
the first step is that you can choose an image from six images.
When you click on an image (which acts as hidden radio-button) then it allows to (are directed to) the next fieldset.
This link prevent the radio buttons from being selected. do you have an idea how to activate the input with the link at the same time? I already tried it with an onclick, but unfortunately it doesn't work. I need the to "group" the code, because otherwise, it dont work.
I'm looking forward to your ideas, thank you!
Edit: is it possible to say if <a id="x1"> is klickes then select <input type="radio" id="x1" and how would the code look like? im not that good, sorry for that :(

footer button in Android Browser

I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>

Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.

How may I stack multiple html/css buttons vertically along the center of the page?

My css is listed below, followed by the html.
I am not currently aware of a method to centralize the buttons within the below detailed "box/inner-box" s. The flex display seems to be stacking the buttons vertically (though, honestly, I am not certain as to how), but, no matter what I try, and I have tried most searchable recommendations, I cannot seem to locate the column of buttons to the centre of the page, beneath the 'my name' . Does anyone know how I might centralize the buttons or if there is a much simpler method for accomplishing a similar aesthetic? I am open to all solutions. Thank you in advance!
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>

I know you already have multiple answers. However the way you use flex is not correct. It should be added into the parent div box-inner
display:flex;
align-items:center; //align item center
flex-direction:column; //direction to column
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
display:flex;
align-items:center;
flex-direction:column;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>

Check out this code: you need to have a margin: 0 auto, and add text-align:center.
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}

Simply add below CSS
.box
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
}
.box .btn {
display: block;
margin: 0 auto;
}
and modify you HTML too
<body>
<div class="box">
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</body>
this will place buttons in center of page, both horizontally and vertically.

check out this code: you need to have a margin 0 auto, and add text-align:center
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>

making a.active work with background image slide

I am having some troubles trying to get this to work, I'm new to javascript, and am pretty sure I'd need it for this. I'd like to have my background image slide upon hover and stay active on its correct div when selected. What I currently have html, css, and javascript wise works perfectly...javascript part is when user clicks on the div, a container opens up below it - that works as it should, however, I have no idea how to integrate giving the initial div a.active to stay active on that div rather than always going back into the center. Any ideas, suggestions, and/or help would be much appreciated.
UPDATE:
Here is a jsfiddle of what is provided below: http://jsfiddle.net/mGQ8w/4/
This is what I got so far:
HTML
<div id="profile_selection">
<a href="#nos_profiles" class="profile_selection">
{Ñا}<br />Members
</a>
<a href="#registered_profiles" class="profile_selection">
Registered<br />Members
</a>
<a href="#team_profiles" class="profile_selection">
Team<br />Profiles
</a>
<div id="profile_selection_slider"></div>
</div>
<div id="nos_profiles" class="selection"></div>
<div id="registered_profiles" class="selection"></div>
<div id="team_profiles" class="selection"></div>
CSS
#profile_selection {
width: 612px;
height: 152px;
padding: 0;
margin: 15px auto;
position: relative;
}
#profile_selection a {
width: 200px;
height: 105px;
padding: 45px 0 0 0;
margin: 0;
background: #333;
border: 2px solid #444;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
float: left;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
color: #FFF;
font: 24px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
z-index: 4;
}
#profile_selection a:hover, #profile_selection a.active {
height: 100px;
padding: 50px 0 0 0;
background: #222;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
color: #DF7401;
}
#profile_selection_slider {
width: 64px;
height: 16px;
background: url(http://www.nosclan.net/images/Home/menu_bg_hover.png) no-repeat 0 0 transparent;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position: absolute;
top: 152px;
left: 275px;
z-index: 4;
}
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider {
left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider {
left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider {
left: 480px;
}
#nos_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
#registered_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
#team_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
JAVASCRIPT
$(document).ready(function () {
$('a.profile_selection').click(function () {
var a = $(this);
var selection = $(a.attr('href'));
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if (selection.is(':visible')) {
selection.slideToggle(400)
} else {
selection.slideToggle(400)
};
});
});
LATEST UPDATE:::::
http://jsfiddle.net/mGQ8w/13/
Is it possible to make it where once a user decides to click a different div, the active class goes back to normal while the new selected div becomes active? The way it is now, is that if you click on all 3, they all become active....I'd like it where only 1 is active - the one that a user clicks on....so if a user clicks on the NOS Members div, it becomes active, then if the user clicks on Registered Members, the NOS members is no longer active, but the Registered Members div is...

You need to add the active class using addClass& can remove the remove the active class from previous selection using removeClass.
$(document).ready(function(){
$('a.profile_selection').click( function(){
var a = $(this) ;
$('a.profile_selection').removeClass('active');
$(this).addClass('active');
var selection = $( a.attr('href') );
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if( selection.is(':visible') ){
selection.slideToggle(400)
}else{
selection.slideToggle(400)
};
});
});
This need to be used along with the css changes provided by #N1ck as below
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider {
left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider {
left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider {
left: 480px;
}
Check this http://jsfiddle.net/mGQ8w/14/

Give same rule to .active as you do for :hover e.g:
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider{
left: 71px;
}
becomes
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{
left: 71px;
}
Then toggle the selected menu item with an .active class.
var menuItems = $('a.profile_selection');
menuItems.on('click', function () {
var a = $(this),
selection = $(a.attr('href'));
menuItems.removeClass('active');
a.toggleClass('active');
...etc
});
Here's a fiddle as an example: http://jsfiddle.net/n1ck/FbeFU/

javascript or css - almost working, running into some snags

below I'll provide the code I currently have - html, css and javascript. Everything is working properly except 1 minor thing, and I can't seem to figure it out. I am still fairly new to javascript and think that javascript is needed to make this work, if not - it's got to be in my css...
If you click on each div with the titles (NoS Members), (Registered Members), and (Team Profiles) you will see that the slider background image (small triangle) works and is active upon clicking any one of the three divs - which in doing so opens up another container below it. That all works perfectly, however, the issue I'm running into is that if you click on the (NoS Members) one first, then go in order to the right and click on either the 2nd one - (Registered Members), or the last one (Team Profiles), then try clicking back on the 2nd - (Registered Members) or 1st one - (NoS Members), the slider doesn't work going back sliding to the left. It only appears to work sliding to the right once a click has taken place.
Here is a jsfiddle of what I got: http://jsfiddle.net/5DTKH/
Code:
HTML
<div id="profile_selection">
{Ñا}<br />Members
Registered<br />Members
Team<br />Profiles
<div id="profile_selection_slider"></div>
</div>
<div id="nos_profiles" class="selection">
</div>
<div id="registered_profiles" class="selection">
</div>
<div id="team_profiles" class="selection">
</div>
CSS
#profile_selection { width: 612px; height: 152px; padding: 0; margin: 15px auto; position: relative; }
#profile_selection a {
width: 200px;
height: 105px;
padding: 45px 0 0 0;
margin: 0;
background: #333;
border: 2px solid #444;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
float: left;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
color: #FFF;
font: 24px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
z-index: 4;
}
#profile_selection a:hover, #profile_selection a.active {
height: 100px;
padding: 50px 0 0 0;
background: #222;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
color: #DF7401;
}
/* ===== Start of 'Profile - Selection - Slider' ===== */
#profile_selection_slider {
width: 64px;
height: 16px;
background: url(http://www.nosclan.net/images/Home/menu_bg_hover.png) no-repeat 0 0 transparent;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position: absolute;
top: 152px;
left: 275px;
z-index: 4;
}
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{ left: 71px; }
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(2).active ~ #profile_selection_slider { left: 275px; }
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(3).active ~ #profile_selection_slider { left: 480px; }
/* ===== Start of 'NoS - Profiles' ===== */
#nos_profiles {
width: 950px;
height: 520px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -15px;
z-index: 1;
}
/* ===== Start of 'Registered - Profiles' ===== */
#registered_profiles {
width: 950px;
height: 520px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -15px;
z-index: 1;
}
/* ===== Start of 'Team - Profiles' ===== */
#team_profiles {
width: 950px;
height: 520px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -15px;
z-index: 1;
}
Javascript
$(document).ready(function(){
$('a.profile_selection').click( function(){
var a = $(this);
$('a.profile_selection').removeClass('active');
$(this).addClass('active');
var selection = $( a.attr('href'));
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if( selection.is(':visible')){
selection.slideToggle(400)
}else{selection.slideToggle(400)
};
});
});
Any help would be much appreciated - not sure if this matters either, but I am using the jquery library 1.3.2 -- I know it's outdated, but it is what it is...
Lastly, I do want to re-thank Ashis and Nick for helping me with a different question of which is relevant to this.

I have made few changes in above code and updated the fiddle Fiddle Here
$(document).ready(function(){
var clicked;
$('a.profile_selection').click( function(){
var a = $(this);
clicked=$(this);
$('a.profile_selection').not(clicked).removeClass('active');
$(this).addClass('active');
var selection = $( a.attr('href'));
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if( selection.is(':visible')){
selection.slideToggle(400)
}else{selection.slideToggle(400)
};
});
$('a.profile_selection').hover(function(){
var a = $(this);
$('a.profile_selection').not(clicked).removeClass('active');
$(this).addClass('active');
})
});

you can change your css lines 53 to 55 from this
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{ left: 71px; }
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(2).active ~ #profile_selection_slider { left: 275px; }
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(3).active ~ #profile_selection_slider { left: 480px; }
to this
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{ left: 71px; }
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider { left: 275px; }
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider { left: 480px; }
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider{ left: 71px; }
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider{ left: 275px; }
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider{ left: 480px; }
so the :hover can work even if other #profile_selection is .active
http://jsfiddle.net/5DTKH/2/

Categories