Why is my while loop overriding the if statement - javascript

I'm running into a problem with my current project. It's a Math Game with a start button which when pressed turns into a reset button and then displays the timer countdown.
The countdown needs to start at 60 and descend to 0 and once it hits 0, I want to display a game over message, which I have already made using CSS.
Currently my code is responding with the timer jumping all the way to 0 without showing anything in between. The timer worked before I made the while statement below it!
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="title">
The Matheroo
</div>
<div id="sunYellow">
<!--Because the score value is going to change as the user plays the game we need to place it in a span and refer to it later with some JAVA-->
<div id="score">
Score: <span id="scorevalue">0</span>
</div>
<div id="correct">
Correct!
</div>
<div id="wrong">
Try Again
</div>
<div id="question">
</div>
<div id="instruction">
Click on the Correct Answer
</div>
<div id="choices">
<div id="box1" class="boxes"></div>
<div id="box2" class="boxes"></div>
<div id="box3" class="boxes"></div>
<div id="box4" class="boxes"></div>
</div>
<div id="startreset">
Start Game
</div>
<div id="time-remaining">
Time Remaining: <span id="timer-down">60</span> sec
</div>
<div id="game-over">
</div>
</div>
<script src="Javascript.js"></script>
</body>
</html>
--------------------------------------
Here's the javascript:
`var gameOn = false;`
`var score;`
`var interval;`
//if we click on the start/reset
document.getElementById("startreset").onclick = function(){
//if we are playing
if(gameOn == true){
//reload page
location.reload(); //reload the page
}else{//if we are not playing
//change mode to playing
gameOn = true;
//set score to 0
score = 0;
document.getElementById("scorevalue").innerHTML = score;
//show countdown box
document.getElementById("time-remaining").style.display = "block";
//reduce time by 1sec in loops
if(counter > 0){
var counter = 60;
interval = setInterval(timeIt, 100);
function timeIt(){
document.getElementById("timer-down").innerHTML = counter;
counter--;
}
}
while (document.getElementById("timer-down").innerHTML = 0){
document.getElementById("game-over").style.display = "block";
}
document.getElementById("startreset").innerHTML = "Reset Game";
}
}
--------------------------------------
And I don't know if it's to relevant but here's the CSS Stylesheet:
html{
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
}
#title{
width: 400px;
padding: 0px 20px;
margin-left: 350px;
margin-top: 50px;
background-color: #84FFE3;
color: white;
border-radius: 10px;
font-size: 3em;
letter-spacing: 2.7px;
font-family: cursive, sans-serif;
text-align: center;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
/*The container for the game in the center of the page*/
#sunYellow{
height: 400px;
width: 550px;
background-color: #FFDC00;
/*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
margin: 90px 280px 0px 280px;
padding: 20px;
border-radius: 10px;
/* Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
position: relative;
}
#score{
background-color: #84FFE3;
color: #2F4F4F;
padding: 10px;
position: absolute;
left: 500px;
/*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#correct{
position: absolute;
left: 260px;
background-color: #00FF0D;
color: white;
padding: 11px;
display: none;
}
#wrong{
position: absolute;
left: 260px;
background-color: #EF0200;
color: white;
padding: 11px;
display: none;
}
#question{
width: 450px;
height: 150px;
margin: 50px auto 10px auto;
background-color: #00F5FF;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
}
#instruction{
width: 450px;
height: 50px;
background-color: #00FF0D;
margin: 10px auto;
text-align: center;
line-height: 50px;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#choices{
width: 450px;
height: 100px;
margin: 5px auto;
}
.boxes{
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
.boxes:hover, #startreset:hover{
background-color: #00F5FF;
color: white;
box-shadow: 4px 3px 0px 0px #266df2;
-moz-box-shadow: 4px 3px 0px 0px #266df2;
-webkit-box-shadow: 4px 3px 0px 0px #266df2;
}
.boxes:active, #startreset:active{
box-shadow: 0px 0px #266df2;
-moz-box-shadow: 0px 0px #266df2;
-webkit-box-shadow: 0px 0px #266df2;
top: 4px;
}
#box4{
margin-right: 0px;
}
#startreset{
width: 83px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0px auto;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
/*This doesnt allow a user to select text for all browsers*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#time-remaining{
width: 157px;
padding: 7px;
position: absolute;
top: 395px;
left: 400px;
background-color: #84FFE3;
border-radius: 3px;
box-shadow: 4px 3px 0px 0px #00ad99;
-moz-box-shadow: 4px 3px 0px 0px #00ad99;
-webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/* visibility: hidden;*/
display: none;
}
#game-over{
height: 200px;
width: 500px;
background: linear-gradient(#F8974A, #3EB8C5);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
/*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
z-index: 2;
display: none;
}
--------------------------------------


There were several things wrong with the code. Here is a cleaned up version.
var gameOn = false;
var score;
var interval;
function stopGame() {
gameOn = false;
if (interval) {
clearInterval(interval);
interval = null;
}
document.getElementById("startreset").innerHTML = "Start Game";
document.getElementById("time-remaining").style.display = "";
}
//if we click on the start/reset
document.getElementById("startreset").onclick = function () {
//if we are not playing
if (gameOn) {
stopGame();
} else {
//change mode to playing
gameOn = true;
//set score to 0
score = 0;
document.getElementById("scorevalue").innerHTML = score;
//show countdown box
document.getElementById("time-remaining").style.display = "block";
document.getElementById("startreset").innerHTML = "Reset Game";
var counter = 60;
interval = setInterval(timeIt, 100);
function timeIt(){
document.getElementById("timer-down").innerHTML = counter;
counter--;
if ( counter === 0) {
stopGame();
document.getElementById("game-over").style.display = "block";
}
}
}
}
html{
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
}
#title{
width: 400px;
padding: 0px 20px;
margin-left: 350px;
margin-top: 50px;
background-color: #84FFE3;
color: white;
border-radius: 10px;
font-size: 3em;
letter-spacing: 2.7px;
font-family: cursive, sans-serif;
text-align: center;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
/*The container for the game in the center of the page*/
#sunYellow{
height: 400px;
width: 550px;
background-color: #FFDC00;
/*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
margin: 90px 280px 0px 280px;
padding: 20px;
border-radius: 10px;
/* Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
position: relative;
}
#score{
background-color: #84FFE3;
color: #2F4F4F;
padding: 10px;
position: absolute;
left: 500px;
/*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#correct{
position: absolute;
left: 260px;
background-color: #00FF0D;
color: white;
padding: 11px;
display: none;
}
#wrong{
position: absolute;
left: 260px;
background-color: #EF0200;
color: white;
padding: 11px;
display: none;
}
#question{
width: 450px;
height: 150px;
margin: 50px auto 10px auto;
background-color: #00F5FF;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
}
#instruction{
width: 450px;
height: 50px;
background-color: #00FF0D;
margin: 10px auto;
text-align: center;
line-height: 50px;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#choices{
width: 450px;
height: 100px;
margin: 5px auto;
}
.boxes{
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
.boxes:hover, #startreset:hover{
background-color: #00F5FF;
color: white;
box-shadow: 4px 3px 0px 0px #266df2;
-moz-box-shadow: 4px 3px 0px 0px #266df2;
-webkit-box-shadow: 4px 3px 0px 0px #266df2;
}
.boxes:active, #startreset:active{
box-shadow: 0px 0px #266df2;
-moz-box-shadow: 0px 0px #266df2;
-webkit-box-shadow: 0px 0px #266df2;
top: 4px;
}
#box4{
margin-right: 0px;
}
#startreset{
width: 83px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0px auto;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
/*This doesnt allow a user to select text for all browsers*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#time-remaining{
width: 157px;
padding: 7px;
position: absolute;
top: 395px;
left: 400px;
background-color: #84FFE3;
border-radius: 3px;
box-shadow: 4px 3px 0px 0px #00ad99;
-moz-box-shadow: 4px 3px 0px 0px #00ad99;
-webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/* visibility: hidden;*/
display: none;
}
#game-over{
height: 200px;
width: 500px;
background: linear-gradient(#F8974A, #3EB8C5);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
/*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
z-index: 2;
display: none;
}
<div id="title">
The Matheroo
</div>
<div id="sunYellow">
<!--Because the score value is going to change as the user plays the game we need to place it in a span and refer to it later ith some JAVA-->
<div id="score">
Score: <span id="scorevalue">0</span>
</div>
<div id="correct">
Correct!
</div>
<div id="wrong">
Try Again
</div>
<div id="question">
</div>
<div id="instruction">
Click on the Correct Answer
</div>
<div id="choices">
<div id="box1" class="boxes"></div>
<div id="box2" class="boxes"></div>
<div id="box3" class="boxes"></div>
<div id="box4" class="boxes"></div>
</div>
<div id="startreset">
Start Game
</div>
<div id="time-remaining">
Time Remaining: <span id="timer-down">60</span> sec
</div>
<div id="game-over">
Game Over
</div>
</div>
I added a function called stopGame that does everything to stop the game and call it from the correct locations.
I added code to change the text of the Start Game/Reset Game button which I assume you wanted.
This code still needs a lot to clean it up, but it is a good start.


If you check your while statement while (document.getElementById("timer-down").innerHTML = 0) you can notice you have innerHTML = 0 and it is wrong because with = you assign the value 0 to innerHTML. Instead you should use innerHTML == 0 where == is a comparison operator.


i think its abouth "=" :)
change this
while (document.getElementById("timer-down").innerHTML = 0)
to
while (document.getElementById("timer-down").innerHTML == 0 | document.getElementById("timer-down").innerHTML == '0')


This is a very simplistic implementation of a game loop. Personally, I'd use some library to help me out with the event listeners and use other events to propagate changes around. Doing to many things on tick is not very efficient and a waste of JavaScript's power.
But, hopefully, this will illustrate how you'd tackle some points for your game. It can also help you transition to a proper game engine in the future.
// This allows us to keep track
// of how much time has passed between each "tick"
var lastTimestamp = performance.now()
// This is the main loop.
// It leverages the `requestAnimationFrame` method
// to keep in sync with the browser's refresh rate
function loop(timestamp) {
window.requestAnimationFrame(loop)
var delta = timestamp - lastTimestamp
lastTimestamp = timestamp
var event = new CustomEvent('tick', {
detail: delta
})
document.dispatchEvent(event)
}
// Starting the main loop for the first time
loop(lastTimestamp)
// This is used to store game state
// Ideally, it should be somewhere more reliable
// than just a global variable
var gameData = {}
// When your game gets large enough,
// it'd be wise to split different aspects of it
// in different files.
// In this case, each "tick" event listener
// could be in a different file
document.addEventListener('tick', (event) =>{
var timer = document.getElementById('time-remaining')
var timeDown = document.getElementById('timer-down')
if (gameData.state === 'started'){
time = gameData.counter - event.detail
if (time < 0){
gameData.state = 'over'
} else {
timer.style.display = 'block'
timeDown.textContent = Math.floor(time / 1000)
gameData.counter = time
}
} else {
timer.style.display = 'none'
}
})
document.addEventListener('tick', (event) =>{
var startButton = document.getElementById('startreset')
if (gameData.state === 'started'){
startButton.style.display = 'none'
} else if (gameData.state === 'over') {
startButton.style.display = 'block'
startButton.innerHTML = 'Reset Game'
}
})
document.getElementById('startreset').onclick = function () {
gameData.state = 'started'
gameData.counter = 60 * 1000
}
document.addEventListener('tick', (event) =>{
var gameOver = document.getElementById('game-over')
if (gameData.state === 'over') {
gameOver.style.display = 'block'
} else {
gameOver.style.display = 'none'
}
})
html{
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
}
#title{
width: 400px;
padding: 0px 20px;
margin-left: 350px;
margin-top: 50px;
background-color: #84FFE3;
color: white;
border-radius: 10px;
font-size: 3em;
letter-spacing: 2.7px;
font-family: cursive, sans-serif;
text-align: center;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
/*The container for the game in the center of the page*/
#sunYellow{
height: 400px;
width: 550px;
background-color: #FFDC00;
/*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
margin: 90px 280px 0px 280px;
padding: 20px;
border-radius: 10px;
/* Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
position: relative;
}
#score{
background-color: #84FFE3;
color: #2F4F4F;
padding: 10px;
position: absolute;
left: 500px;
/*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#correct{
position: absolute;
left: 260px;
background-color: #00FF0D;
color: white;
padding: 11px;
display: none;
}
#wrong{
position: absolute;
left: 260px;
background-color: #EF0200;
color: white;
padding: 11px;
display: none;
}
#question{
width: 450px;
height: 150px;
margin: 50px auto 10px auto;
background-color: #00F5FF;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
}
#instruction{
width: 450px;
height: 50px;
background-color: #00FF0D;
margin: 10px auto;
text-align: center;
line-height: 50px;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#choices{
width: 450px;
height: 100px;
margin: 5px auto;
}
.boxes{
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
.boxes:hover, #startreset:hover{
background-color: #00F5FF;
color: white;
box-shadow: 4px 3px 0px 0px #266df2;
-moz-box-shadow: 4px 3px 0px 0px #266df2;
-webkit-box-shadow: 4px 3px 0px 0px #266df2;
}
.boxes:active, #startreset:active{
box-shadow: 0px 0px #266df2;
-moz-box-shadow: 0px 0px #266df2;
-webkit-box-shadow: 0px 0px #266df2;
top: 4px;
}
#box4{
margin-right: 0px;
}
#startreset{
width: 83px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0px auto;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
/*This doesnt allow a user to select text for all browsers*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#time-remaining{
width: 157px;
padding: 7px;
position: absolute;
top: 395px;
left: 400px;
background-color: #84FFE3;
border-radius: 3px;
box-shadow: 4px 3px 0px 0px #00ad99;
-moz-box-shadow: 4px 3px 0px 0px #00ad99;
-webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/* visibility: hidden;*/
display: none;
}
#game-over{
height: 200px;
width: 500px;
background: linear-gradient(#F8974A, #3EB8C5);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
/*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
z-index: 2;
display: none;
}
<div id="title">The Matheroo</div>
<div id="sunYellow">
<div id="score">
Score:
<span id="scorevalue"></span>
</div>
<div id="correct">Correct!</div>
<div id="wrong">Try Again</div>
<div id="question"></div>
<div id="instruction">
Click on the correct answer
</div>
<div id="choices">
<div class="boxes" id="box1">1</div>
<div class="boxes" id="box2">2</div>
<div class="boxes" id="box3">3</div>
<div class="boxes" id="box4">4</div>
</div>
<div id="startreset">Start Game</div>
<div id="time-remaining">
Time remaining:
<span id="timer-down"></span> sec
</div>
<div id="game-over">Game Over</div>
</div>

Related

Emoji don't display properly or don't display at all

I made a game I use at the school I teach, it has some emojis that display fine in my computer :
but at the school computer I get only their outline(sorry for the photo):
I also use the hurricane emoji 🌪️ that is not showing at all.
Is there a way to make sure the emojis will be shown properly or is there a way to set a fallback in case the emoji can't be displayed?
:root {
--blue: #5519ff;
--dark-blue: rgb(1, 6, 77);
--blue-outline-shadow: #3872b5;
--blue-outline-highlight: #35a3cc;
--yellow-outline-shadow: #c4bb00;
--yellow-outline-highlight: #fff64d;
}
.emoji {
text-shadow: none;
padding-left: 1vw;
font-family: apple color emoji, segoe ui emoji, noto color emoji,
android emoji, emojisymbols, emojione mozilla, twemoji mozilla,
segoe ui symbol;
color: none;
-webkit-text-stroke-width: 0px !important;
}
.Rtable-cell {
box-sizing: border-box;
flex-wrap: nowrap;
flex-grow: 0;
padding: 1vw;
overflow: hidden;
list-style: none;
font-size: 4vw;
place-items: center;
}
.letters {
display: flex;
flex-direction: row;
justify-content: center;
place-items: center;
text-align: center;
color: var(--dark-blue);
border-bottom: 3px solid var(--dark-blue);
font-size: 4vw !important;
/* padding-bottom: 0; */
}
.blue {
color: var(--blue-outline-highlight) !important;
font-size: 5vw !important;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--dark-blue);
text-shadow: 0 1px 0px var(--yellow-outline-shadow),
1px 0 0px var(--yellow-outline-highlight),
1px 2px 1px var(--yellow-outline-shadow),
2px 1px 1px var(--yellow-outline-highlight),
2px 3px 2px var(--yellow-outline-shadow),
3px 2px 2px var(--yellow-outline-highlight),
3px 4px 2px var(--yellow-outline-shadow),
4px 3px 3px var(--yellow-outline-highlight),
4px 5px 3px var(--yellow-outline-shadow),
5px 4px 2px var(--yellow-outline-highlight),
5px 6px 2px var(--yellow-outline-shadow),
6px 5px 2px var(--yellow-outline-highlight),
6px 7px 1px var(--yellow-outline-shadow),
7px 6px 1px var(--yellow-outline-highlight),
7px 8px 0px var(--yellow-outline-shadow),
8px 7px 0px var(--yellow-outline-highlight),
-12px -12px 2px rgba(49, 206, 99, 0);
}
.place {
background-color: #fee140;
background-image: linear-gradient(to bottom, 0%, #ffff7a #fff500 100%);
border: 3px solid var(--dark-blue);
text-shadow: var(--dark-blue) 0px -2px 0;
box-shadow: inset 0px -5px 10px 1px rgba(1, 6, 77, 0.6);
font-size: 4vw;
font-weight: bolder;
color: white;
text-align: center;
height:100px;
}
.disabled {
pointer-events: none;
background-image: linear-gradient(to top, #fee140 0%, #fa709a 100%);
box-shadow: inset 0px 5px 10px 1px rgba(1, 6, 77, 0.6);
}
<div class="Rtable-cell letters blue">A <span class="emoji">🐜</span></div>
<div class="Rtable-cell place disabled" >🌪️</div>

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 :(

How to make right arrow clickable so that , it should simulate pressing the enter key

Hello I have this login page form with and after enterting name and pressing enter button password input box is coming I am trying to make right arrow clickable so that , it should simulate pressing the enter key.Please guide me how I can so this.

You could use a span or other element instead of the pseudo-element and use a click event on that.
$(document).ready(function() {
var userInput = $('#username-input'),
userWrap = $('.username-wrap'),
user = $('#name');
userInput.keyup(function(event) {
if (event.which == 13) {
var name = $(this).val();
user.text(name);
userInput.addClass('hidden');
userWrap.addClass('hidden');
user.removeClass('hidden');
user.parent().addClass('pw-active');
$('.password').focus();
return false;
}
});
$(".username-wrap span").click(function() {
var name = userInput.val();
user.text(name);
userInput.addClass('hidden');
userWrap.addClass('hidden');
user.removeClass('hidden');
user.parent().addClass('pw-active');
$('.password').focus();
return false;
})
user.click(function(event) {
user.addClass('hidden');
user.parent().removeClass('pw-active');
userInput.removeClass('hidden');
userWrap.removeClass('hidden');
});
});
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.gradient,
.login,
.outer {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhkZGRmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA1NjZhOSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -moz-radial-gradient(#8dddff, #0566a9);
background: -webkit-radial-gradient(#8dddff, #0566a9);
background: radial-gradient(#8dddff, #0566a9);
background-size: 360px 600px;
background-position: center -90%;
}
.preloader {
animation: none;
transition: none;
}
.login {
display: inline-block;
width: 180px;
height: 300px;
padding: 30px 25px;
margin: -180px -115px;
position: absolute;
top: 50%;
left: 50%;
text-align: left;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
border: 1px solid #5c5c5c;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px 1px, rgba(0, 0, 0, 0.25) 0 2px 55px 3px;
}
.login:before {
content: "";
width: 100%;
height: .1em;
position: absolute;
top: 0px;
left: 0;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.16) 70%);
background-size: 100% 150%;
background-position: center center;
}
.login .photo {
width: 88px;
height: 88px;
overflow: hidden;
position: relative;
margin: 0 auto;
margin-top: 10%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.7);
box-shadow: 0 -2px 0px 2px rgba(255, 255, 255, 0.15), 0 2px 2px 2px rgba(0, 0, 0, 0.15), 0 -4px 20px 0px rgba(255, 255, 255, 0.4), 0 0px 140px 0px rgba(0, 120, 120, 0.8), 0 -45px 90px 0px rgba(255, 255, 255, 0.3), 0 4px 39px 0px rgba(0, 0, 0, 0.4);
}
.login .photo:before {
content: '';
width: 90px;
height: 90px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512_3.jpg");
background-size: 100%;
position: absolute;
border-radius: 50%;
}
.login .name {
width: 100%;
line-height: 1;
text-align: center;
font-size: 0.89em;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: all 300ms ease;
position: absolute;
left: 0;
margin-top: 34px;
}
input {
box-sizing: border-box;
width: 100%;
margin-top: 15px;
padding: 5px 2px;
font-size: 0.8em;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(0, 0, 100, 0.3) 0 1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(0, 0, 100, 0.3) 0 1px 0 0;
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(0, 0, 100, 0.3) 0 1px 0 0;
}
input:focus {
outline: 0;
border: 1px solid #77a7c0;
-moz-box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
-webkit-box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
}
input::input-placeholder {
color: rgba(20, 20, 20, 0.5);
}
.username-wrap {
position: relative;
}
.username-wrap span {
content: "\f18e";
display: inline-block;
font-smoothing: antialiased;
font-family: 'FontAwesome';
position: absolute;
right: 5px;
top: 5px;
color: rgba(40, 51, 53, 0.4);
font-size: 1.25em;
cursor:pointer;
}
.username {
margin-bottom: 10px;
margin-top: 30px;
transition: all 300ms ease;
display: block;
opacity: 1;
}
.hidden {
opacity: 0;
transition: all 300ms ease;
visibility: hidden;
}
.inner,
.outer,
.spine,
.shadow {
position: absolute;
width: 100%;
}
.inner:after,
.outer:after {
content: '\f023';
top: 33%;
left: 42%;
font-size: 1em;
line-height: 1.7em;
padding: .125em;
width: 2em;
height: 2em;
border-radius: 50%;
border: 1px solid white;
position: absolute;
font-smoothing: antialiased;
font-family: 'FontAwesome';
box-sizing: border-box;
}
.inner:after {
content: "\f09c";
}
.inner {
background-color: #283335;
text-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
height: 100%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.spine {
top: .25em;
background: #282d2d;
height: .25em;
transform: rotateX(90deg);
transform-origin: center top;
}
.outer {
height: 100%;
background-position: center -117%;
transform: translateZ(0.25rem);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pw-box {
height: 80px;
width: 228px;
background: rba(0, 0, 0, 0.9);
position: absolute;
left: 1px;
padding: 10px;
transition: all .55s ease;
box-shadow: inset 0px -60px 70px rgba(0, 0, 0, 0.9);
box-sizing: border-box;
perspective: 320px;
}
.pw-active .pw-box {
background: rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.pw-box .flap {
position: absolute;
color: white;
text-align: center;
pointer-events: none;
z-index: 100;
background-color: rgba(255, 0, 0, 0.3);
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
transition: all 0.6s cubic-bezier(0.2, 0.7, 0.1, 1.1);
transform-origin: center bottom;
transform-style: preserve-3d;
}
.pw-active .pw-box .flap {
transform: rotateX(-110deg);
}
body {
text-align: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-color: #dcdcdc;
background: url(data:image/png;base64,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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<div class="login">
<div class="photo"></div>
<p class="name hidden" id="name">Hans Engebretsen</p>
<div class="username-wrap"><input type="username" class="username" placeholder="Type name & hit enter" id="username-input" />
<span></span></div>
<div class="pw-box">
<span class="flap">
<div class="inner"></div>
<div class="spine"></div>
<div class="outer"></div>
</span>
<span class="shadow"></span>
<input type="password" class="password" placeholder="Password" />
</div>
</div>
<!--Inspiration taken from both Steven Shobert: https://codepen.io/stevenschobert/pen/kpcBK
and of course Bennet Feely: https://codepen.io/bennettfeely/pen/ErFGv-->

Horizontal navigation menu - how to increase size of <li> on hover

I'm working on a navigation menu. I'm trying to achieve something like that the one on this website: www.fizjoterapia-domkrakow.pl/
I've been searching a lot and I couldn't find a way to increase the size of the when hovering over it. I'm using jquery(mouseover) to add new class to that would have a greater size.
Also, there is a ribbon shadow effect on the hovered element that I have no idea how to implement it.
The other problem I have is the opacity of the elements inside the header. I keep the logo inside one div and menu inside the other one. Both of them are in the that has a background set to opacity:0.9. Unfortunately my logo and menu are also set to such value. Any ideas how to get rid of it?
Here is the code sample.
<script>
$(function () {
$("#about2 li").mouseover(function () {
$(this).addClass("liOnHover")
});
$("#about2 li").mouseleave(function () {
$(this).removeClass("liOnHover")
});
})
</script>
</head>
<body>
<header>
<div id="logo">
<img src="~/Content/Images/logo.png" />
</div>
<div id="menuItems">
<ul id="about2">
<li id="contact">#Html.ActionLink("Home", "Home", "Home")</li>
<li id="about">#Html.ActionLink("About", "About", "About")</li>
<li id="priceList">#Html.ActionLink("PriceList", "PriceList", "Home")</li>
<li id="reviews">#Html.ActionLink("Reviews", "Reviews", "Home")</li>
</ul>
</div>
</header>
<section id="main">
CSS:
header {
height: 200px;
opacity: 0.9;
background: #527F9D;
box-shadow: 1px 1px 2px black;
}
#logo
{
padding: 30px 0 20px 70px;
float: left;
}
#main
{
margin:20px 210px 20px 210px;
background-color: #ffffff;
border-radius: 4px;
}
.liOnHover
{
background-Color:#0099FF;
color: white;
min-height: 100px;
-webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
-moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
text-align: center;
display:inline-block
}
#menuItems {
width: 900px;
height: 36px;
position: absolute;
bottom:18px;
right:20px;
top:150px;
left:350px;
font-size: 23px;
font-family: Enriqueta-Bold;
font-weight: bold;
text-align: center;
background-color: #86ADED;
-webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
-moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
}
#menuItems ul {
padding: 2px 0;
margin: 0;
}
#menuItems li {
display: inline;
padding: 4px;
}

Instead of using Javascript to achieve this you could simply use the :hover attribute in CSS
#menuItems li {
display: inline;
padding: 4px;
}
#menuItems li:hover {
background-Color:#0099FF;
color: white;
min-height: 100px;
-webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
-moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
text-align: center;
display:inline-block
}
regarding your second issue, opacity is always influencing the children of the element, if you just want to use a transparent background you could set the color using background-color: rgba(82,127,157,.9)

You need to use the selector #menuItems li.liOnHover or #menuItems li:hover for the hover changes to work.
Additionally, you should set the display of #menuItems li to inline-block.
Hope this helps.

javascript not working in I.E. 9 as well as Firefox

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.

Categories