Custom Dropdown Search Bar working everywhere but IE - javascript

I am just getting into javascript and Web Development as a former .NET Desktop App guy and I am struggling with figuring out what is causing issues for me with Internet Explorer (Not working on 11). Can anyone shed some light on this?
Greatly Appreciate any help! Also and advice on what to avoid to support IE.
When Debugging in IE11 Im getting an error on my search filter:
"Object doesn't support property or method 'includes'"
// check for min length
if (filter.length < 3) {
$('#dropdownItems').append("<li><a>Please input at least 3 characters.</a></li>");
} else {
for (i = 0; i < count; i++) {
if (playerDatabase[i].name.toUpperCase().includes(filter)) {
$('#dropdownItems').append("<li><a href='playerPage.html?playerID=" + playerDatabase[i].playerID +"'>" + playerDatabase[i].name + " - " + playerDatabase[i].pos + "</a></li>");
}
}
}
Full Snippet
var playerDatabase = [];
var count;
// Data Load Event
function showModal() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
playerDatabase = JSON.parse(this.responseText);
count = $(playerDatabase).toArray().length;
}
};
var requestURL = 'https://raw.githubusercontent.com/maat7043/sportssabermetrics/master/playerDatabase.json';
xmlhttp.open("GET", requestURL, true);
xmlhttp.send();
};
// Search Bar Filter Logic
function searchPlayers() {
var input, filter, ul, li, a, i;
input = document.getElementById("searchBarInput");
filter = input.value.toUpperCase();
div = document.getElementById("dropdownItems");
li = div.getElementsByTagName("li");
// remove all current items
for (i = li.length - 1; i > -1; i--) {
div.removeChild(li[i]);
}
// check for min length
if (filter.length < 3) {
$('#dropdownItems').append("<li><a>Please input at least 3 characters.</a></li>");
} else {
for (i = 0; i < count; i++) {
if (playerDatabase[i].name.toUpperCase().includes(filter)) {
$('#dropdownItems').append("<li>" + playerDatabase[i].name + " - " + playerDatabase[i].pos + "</li>");
}
}
}
}
// Search Bar focus lost
$(document).on("focusout", "#searchBarInput input", function() {
var div = document.getElementById("dropdownItems");
var li = div.getElementsByTagName("li");
// remove all current items
for (i = li.length - 1; i > -1; i--) {
div.removeChild(li[i]);
}
});
/* * Copyright (c) 2012 Thibaut Courouble
* Licensed under the MIT License
================================================== */
a {
color: #1e7ad3;
text-decoration: none;
font-size: 12px;
}
a:hover {
text-decoration: underline
}
input {
font-size: 13px;
color: white;
}
.search {
position: relative;
margin: 0 auto;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
background: #555860;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus+.results,
.search .results:hover {
display: block
}
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block;
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
text-color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span {
font-weight: 200
}
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input {
line-height: 26px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Sports Sabermetrics</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/ico" href="http://www.sportssabermetrics.net/html/images/icon.png">
<!-- W3 Schools CSS -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.0.0-18/css/ionicons.min.css" rel="stylesheet">
</head>
<body onpageshow="showModal()" style="background-color: black;">
<div class="top-bar no-padding" style="height: 100vh; background-image: url(http://www.sportssabermetrics.net/html/images/header_image.jpg); background-size: cover;">
<div class="w3-display-middle w3-center" style="width:60%;">
<!-- Search Bar -->
<section class="main">
<div id="myDropdown" style="margin: auto; font-size: 14px;">
<form class="search" method="post"><input type="text" id="searchBarInput" placeholder="Search for NFL Player" onkeyup="searchPlayers()"/>
<ul id="dropdownItems" class="results">
</ul>
</form>
</div>
</section>
</div>
</div>
</body>
</html>


As per the docs, IE does not support the includes method. You can use indexOf instead:
if (playerDatabase[i].name.toUpperCase().indexOf(filter) >= 0) { ... }
Welcome to the wonderful world of browser compatability issues ;)

Related

Why is the "myText1" and "myText3" id and function interfering with one another?

Im making this website as a school project and I need it done real quick. When I use the save function for a contenteditable data table, one cell saves how it should but it also changes the value of another cell. I want to split these two cells into unique cells that are both editable and saveable and are distinct from one another. Here is my code.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
</body>
</html>
<html>
<style>
table.GeneratedTable {
width: 100%;
background-color: #ffffff;
border-collapse:
collapse;
border-width: 2px;
border-color: #000000;
border-style: solid;
color: #000000;
}
table.GeneratedTable td,
table.GeneratedTable th {
border-width:
2px;
border-color: #000000;
border-style: solid;
padding: 3px;
}
table.GeneratedTable thead {
background-color: #ffa500;
}
</style>
<table class="GeneratedTable">
<thead>
<tr>
<th> Book Name </th>
<th> Author </th>
<th> Teacher Name </th>
<th> Number of Books </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> <style>
p {
margin: 1em;
color: #777;
}
p.changed {
color: black;
}
button {
margin:
0 1em;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 13px;
line-height:
18px;
*line-height: 20px;
color: #333333;
text-align: center;
text-shadow:
0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image:
-ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear,
0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top,
#ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image:
-moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius:
4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',
endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255,
255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255,
255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
background-color:
#cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover {
color:
#333333;
text-decoration: none;
background-color: #e6e6e6;
*background-color:
#d9d9d9;
/* Buttons in IE7 don't get borders, so darken on hover */
background-position:
0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition:
background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image:
none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,
0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary {
background-color:
#0074cc;
*background-color: #0055cc;
background-image: -ms-linear-gradient(top,
#0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%,
from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top,
#0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image:
linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
border-color:
#0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0,
0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',
endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #0055cc;
*background-color:
#004ab3;
}
.btn-primary:active,
.btn-primary.active {
background-color:
#004099 \9;
}
.btn-warning {
background-color: #faa732;
*background-color:
#f89406;
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450),
to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image:
-moz-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top,
#fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0,
0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450',
endColorstr='#f89406', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
background-color: #f89406;
*background-color:
#df8505;
}
.btn-warning:active,
.btn-warning.active {
background-color:
#c67605 \9;
}
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: #ffffff;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
</style>
<p id="myText" contenteditable> fafa </p>
<button class="btn btn-primary" onclick="saveChanges()"> Save </button>
<script>
var text = document.Document.getElementsById('myText');
var myData;
var postData = window.localStorage.getItem("save");
var reset = text.innerHTML;
// if no data
if (postData == null || postData == '') {
myData = text.innerHTML;
// store default value
window.localStorage.setItem("save", myData);
// make it placeholder style
text.classList.remove('changed');
} else {
// if there is a value post it
text.innerHTML = postData;
// make dark text
text.classList.add('changed');
}
function saveChanges() {
// store the current value
myData = text.innerHTML;
// local store the value
window.localStorage.setItem("save", myData);
text.classList.add('changed');
}
function clearStorage() {
text.classList.remove('changed');
// clear storage
window.localStorage.clear("save");
// return to default text
text.innerHTML = reset;
}
</script>
</td>
<td>
<div> <style>
p {
margin: 1em;
color: #777;
}
p.changed {
color: black;
}
button {
margin:
0 1em;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 13px;
line-height:
18px;
*line-height: 20px;
color: #333333;
text-align: center;
text-shadow:
0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image:
-ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear,
0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top,
#ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image:
-moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius:
4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',
endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255,
255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255,
255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
background-color:
#cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover {
color:
#333333;
text-decoration: none;
background-color: #e6e6e6;
*background-color:
#d9d9d9;
/* Buttons in IE7 don't get borders, so darken on hover */
background-position:
0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition:
background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image:
none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,
0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary {
background-color:
#0074cc;
*background-color: #0055cc;
background-image: -ms-linear-gradient(top,
#0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%,
from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top,
#0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image:
linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
border-color:
#0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0,
0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',
endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #0055cc;
*background-color:
#004ab3;
}
.btn-primary:active,
.btn-primary.active {
background-color:
#004099 \9;
}
.btn-warning {
background-color: #faa732;
*background-color:
#f89406;
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450),
to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image:
-moz-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top,
#fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0,
0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450',
endColorstr='#f89406', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
background-color: #f89406;
*background-color:
#df8505;
}
.btn-warning:active,
.btn-warning.active {
background-color:
#c67605 \9;
}
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: #ffffff;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
</style>
<p id="myText2" contenteditable> Book Name </p>
<button class="btn btn-primary" onclick="saveChanges()"> Save </button>
<script>
var text = document.getElementById('myText2');
var myData;
var postData = window.localStorage.getItem("save");
var reset = text.innerHTML;
// if no data
if (postData == null || postData == '') {
myData = text.innerHTML;
// store default value
window.localStorage.setItem("save", myData);
// make it placeholder style
text.classList.remove('changed');
} else {
// if there is a value post it
text.innerHTML = postData;
// make dark text
text.classList.add('changed');
}
function saveChanges() {
// store the current value
myData = text.innerHTML;
// local store the value
window.localStorage.setItem("save", myData);
text.classList.add('changed');
}
function clearStorage() {
text.classList.remove('changed');
// clear storage
window.localStorage.clear("save");
// return to default text
text.innerHTML = reset;
}
</script>
<td>
<div contenteditable>
<p id="myText3" contenteditable > Book Name </p>
<button class="btn btn-primary" onclick="saveChanges()"> Save </button>
<script>
var text = document.getElementById('myText3');
var myData;
var postData = window.localStorage.getItem("save");
var reset = text.innerHTML;
// if no data
if (postData == null || postData == '') {
myData = text.innerHTML;
// store default value
window.localStorage.setItem("save", myData);
// make it placeholder style
text.classList.remove('changed');
} else {
// if there is a value post it
text.innerHTML = postData;
// make dark text
text.classList.add('changed');
}
function saveChanges() {
// store the current value
myData = text.innerHTML;
// local store the value
window.localStorage.setItem("save", myData);
text.classList.add('changed');
}
function clearStorage() {
text.classList.remove('changed');
// clear storage
window.localStorage.clear("save");
// return to default text
text.innerHTML = reset;
}
</script>
</td>
</tr>
</table>
</body>
</html>
So I tried to copy and paste the same code of the working saveable cell, into the new cell, but instead it made the two cells interlinked and by editing one and saving it, it changed itself and the other one.

adding autocomplete to search input

I have search input along with dropdown stored as li element .How Can I add a autocomplete feature to search tag to fetch data from li tag and show the corresponding result in search input.
The autocomplete should fetch the contents from ul li tag and do the operation.Can it be done by li search input tag?
$(".search-input").on("click", function(e) {
$(".results").css({
"display": "block"
});
})
$(".search .search-list").on("click", function(e) {
console.log('clicked')
$('.search-input').val($(this).first().text())
})
.search {
position: relative;
margin: 0 auto;
/* width: 300px; */
}
.search input {
height: 30px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
cursor: pointer;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li { display: block }
.search .results li:first-child { margin-top: -1px }
.search .results li:first-child:before, .search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search .results li:last-child { margin-bottom: -1px }
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span { font-weight: 200 }
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results">
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

you must set <a href="#" ...> and after click on each item that offered from your auto complete, hide the .results in your js ... I think its ok.
$(".search-input").on("click", function(e) {
$(".results").css({
"display": "block"
});
})
$(".search .search-list").on("click", function(e) {
console.log('clicked')
$('.search-input').val($(this).first().text());
$(".results").css({
"display": "none"
});
})
.search {
position: relative;
margin: 0 auto;
/* width: 300px; */
}
.search input {
height: 30px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
cursor: pointer;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li { display: block }
.search .results li:first-child { margin-top: -1px }
.search .results li:first-child:before, .search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { }
.search .results li:last-child { margin-bottom: -1px }
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span { font-weight: 200 }
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results">
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

Anchor tag not working inside List Item

https://jsfiddle.net/1exbczjy/
<body>
<section class="main">
<form class="search" action="">
<input type="search" id ="searchit" placeholder="search.." />
<ul class="results" id="searchlist">
</ul>
</form>
</section>
</body>
This is a demo of the code that I am trying to run , my original code contains js file which is dynamically populating my ul class using the innerHTML function but the output is same as the dummy list data I have provided.
I am not able to understand why my list tag does not work . I have tried to resolve it using other answers provided on this site , checking for z index and absolute and relative position of a and li tag.

The reason is because on click, the input loses its :focus (as pointed out by shaochuancs) and the content is hidden before the click on the anchor is registered. A click event consists of mousedown and mouseup event. The loss of focus is triggered on mousedown anywhere on the page. So just prevent the loss of :focus on mousedown on the anchor tags. The rest of the code would function as expected, because the anchor tag click is triggered on mouseup.
So the issue can be dealt with some basic javascript/jQuery, by simply preventDefault() on mousedown on the anchor tags.
$("a").mousedown(function(ev) {
ev.preventDefault();
}
Note that in this code snippet the link doesn't load because it is blocked by the frame. But you can see in the console that the link is clicked.
$("a").mousedown(function(ev) {
ev.preventDefault();
console.log($(this).attr("href"));
console.log("Click triggered");
});
/* * Copyright (c) 2012 Thibaut Courouble
* Licensed under the MIT License
================================================== */
body {
background: #f7f7f7;
color: #404040;
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 20px;
}
a {
color: #1e7ad3;
text-decoration: none;
}
a:hover {
text-decoration: underline
}
.container,
.main {
width: 640px;
margin-left: auto;
margin-right: auto;
height: 300px;
}
.main {
margin-top: 50px
}
input {
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #555860;
}
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus+.results {
display: block
}
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10000;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results li a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results li a span {
font-weight: 200
}
.search .results li a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
}
.search .results li a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.search li {
padding: 0px;
}
.search li a {
margin: 0px;
display: block;
width: 100%;
height: 100%;
}
.lt-ie9 .search input {
line-height: 26px
}
/*adding effect when the mouse is hovered over list item*/
/*adding effect when the mouse is hovered over list item*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Input Autocomplete Suggestions Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<body>
<section class="main">
<form class="search" action="">
<input type="search" id="searchit" placeholder="search.." />
<ul class="results" id="searchlist">
<li>Tag A</li>
<li>Tag B</li>
</ul>
</form>
</section>
</body>

The root cause is: when anchor tag is clicked, .search input lose its :focus status, which makes .search input:focus + .results { display: block } disabled and .search .results's display as none again -- As the <a> tag does not exist on page anymore, nothing happens. It has nothing to do with ul or li.
Here is a simplified example: https://jsfiddle.net/cshao/rtonLr4z/, the <a> won't work as in the question.

There is also another possibility. If you set the decoration of the Anchor to none and change the background of the li on hovering the Achor link only works when you are hovering on the text of the Anchor but what you want is that the Anchor activates on the whole surface of the li, but how you can make that work is another thing.

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

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