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/
Related
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.
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>
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.
Greetings fellow stackoverflow members,
I am having quite the dilemma as of late. The code provided below is quite lengthy, however, most of it is duplicate code for each 3 main containers labeled (General, Kills, and Scores).
I am having issues with the javascript I have written up which coincides with jquery 1.9.1 - the slider doesn't slide - it works perfectly in Chrome, but doesn't in I.E.9 as well as Firefox for some reason...I've revised it all countless of times, but do not see any issues as to why it's not working in those browsers. If you can look it over and provide me with what or where I am going wrong in my javascript I'd greatly appreciate it as I'm thinking it will be easier for you guys/gals to spot the issue since it's fresh to your eyes.
DEMO: http://jsfiddle.net/aeJtx/3/
JAVASCRIPT:
/* ===== Start of 'Slider - My Statistics (Achievements - General)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_general .buttons_achievements_general span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_general:eq(0)').find('.fragment_achievements_general').length;
var fragment_width = $(this).parents('#slider_achievements_general:eq(0)').find('.fragment_achievements_general').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_general:eq(0)').find('.con_achievements_general');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
/* ===== Start of 'Slider - My Statistics (Achievements - Kills)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_kills .buttons_achievements_kills span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_kills:eq(0)').find('.fragment_achievements_kills').length;
var fragment_width = $(this).parents('#slider_achievements_kills:eq(0)').find('.fragment_achievements_kills').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_kills:eq(0)').find('.con_achievements_kills');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
/* ===== Start of 'Slider - My Statistics (Achievements - Scores)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_scores .buttons_achievements_scores span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_scores:eq(0)').find('.fragment_achievements_scores').length;
var fragment_width = $(this).parents('#slider_achievements_scores:eq(0)').find('.fragment_achievements_scores').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_scores:eq(0)').find('.con_achievements_scores');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
CSS:
/* ===== Start of 'Achievement Details - (General)' ===== */
#general_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 20px;
}
#general_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_general {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-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;
position: relative;
top: 40px;
}
.buttons_achievements_general {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_general span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_general span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_general span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_general {
width: 577px;
height: 96px;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_general {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_general {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'General Medals Wrapper inside Fragment' ===== */
#general_medals_wrapper {
width: 576px;
height: 96px;
float: left;
}
/* ===== Start of 'Achievement Details - (Kills)' ===== */
#kills_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 50px;
}
#kills_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_kills {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-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;
position: relative;
top: 40px;
}
.buttons_achievements_kills {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_kills span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_kills span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_kills span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_kills {
width: 577px;
height: 96px;
padding: 0;
margin: 0;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_kills {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_kills {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'Kills Medals Wrapper inside Fragment' ===== */
#kills_medals_wrapper {
width: 650px;
height: 150px;
float: left;
}
/* ===== Start of 'Achievement Details - (Scores)' ===== */
#scores_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 80px;
}
#scores_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_scores {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-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;
position: relative;
top: 40px;
}
.buttons_achievements_scores {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_scores span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_scores span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_scores span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_scores {
width: 577px;
height: 96px;
padding: 0;
margin: 0;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_scores {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_scores {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'Kills Medals Wrapper inside Fragment' ===== */
#scores_medals_wrapper {
width: 650px;
height: 150px;
float: left;
}
HTML:
<div id="general_wrapper">
<h2>General</h2>
<div id="slider_achievements_general">
<div class="buttons_achievements_general"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_general">
<div class="con_achievements_general">
<div class="fragment_achievements_general">
<div id="general_medals_wrapper">
<p>Hi</p>
</div>
</div>
<div class="fragment_achievements_general">
<div id="general_medals_wrapper">
<p>World</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="kills_wrapper">
<h2>Kills</h2>
<div id="slider_achievements_kills">
<div class="buttons_achievements_kills"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_kills">
<div class="con_achievements_kills">
<div class="fragment_achievements_kills">
<div id="kills_medals_wrapper">
<p>Hello</p>
</div>
</div>
<div class="fragment_achievements_kills">
<div id="kills_medals_wrapper">
<p>World</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scores_wrapper">
<h2>Scores</h2>
<div id="slider_achievements_scores">
<div class="buttons_achievements_scores"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_scores">
<div class="con_achievements_scores">
<div class="fragment_achievements_scores">
<div id="scores_medals_wrapper">
<p>New</p>
</div>
</div>
<div class="fragment_achievements_scores">
<div id="scores_medals_wrapper">
<p>Slider</p>
</div>
</div>
</div>
</div>
</div>
</div>
I believe I may have the solution to this. I ended up adding the above code to my site on a different script to see where the issue may be and think that this may be where you are having that issue of where it doesn't work in either FF or IE - as it happened to me as well in the past and sure enough once I implemented your above code it did the same thing.
Check how your html page is referencing your javascript page(s) if you have multiple js pages located in different folders/directories.
For example, Do THIS:
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/Your_Script.js"></script>
<script type="text/javascript" src="/js/My_Script.js"></script>
Rather than THIS:
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/My_Script.js"></script>
<script type="text/javascript" src="js/Your_Script.js"></script>
If you have multiple folders/directories using JS on your site, you need to make sure whatever page you are working on can check the JS script for the page you are working on first opposed to any other JS scripts you may be using in other folders/directories. So if you use the first example above that I have provided you, it should work with no problem at all in all browsers. This happened to me several months ago and it literally took me forever to figure out what was going on.
You want to make sure any jquery you are using is written up and be referenced first on all html pages, then any js scripts you may have should follow that, but make sure they are in the correct order on whatever html page you are working on.
Example of a setup:
Main directory:
--> css folder
-------> Your_css_Script.css
--> images folder
--> js folder (inside 'js folder' you have:)
-------> Your_js_Script.js
-------> JQuery folder
------------> jquery-1.9.1.min.js
--> index.html
--> Another folder - (inside 'Another folder' you have:)
-------> css folder
------------> Your_css2_Script.css
-------> images folder
-------> js folder
------------> Your_js2_Script.js
-------> index2.html
I apologize for the bad diagram above, but hopefully that helps you understand the structure. So, if you are working on index2.html, and also Your_js2_Script.js, but also need to reference what you have on Your_js_Script.js as well as your jquery script on your index2.html, you would need to reference those scripts on your index2.html page like so:
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/Your_js2_Script.js"></script>
<script type="text/javascript" src="/js/Your_js_Script.js"></script>
By the way, that's a pretty slick looking setup you got going on! And I hope what I provided helps.
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/