sorry, I1M not an experient jquery developer, so i need some help ! why does'nt work this app ????
<html>
<head>
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#container {
padding: 0px;
position: relative;
display: block;
height: 450px;
width: 420px;
margin: 100px auto;
border: 5px solid black;
border-radius: 15px;
}
#gameside {
position: relative;
diplay: block;
float: left;
width: 300px;
height: 450px;
background-color: #f2f2f2;
}
#menuside {
position: relative;
display: block;
float: left;
width: 120px;
height: 450px;
background-color: #a0a0a0;
}
#gameinfo {
position: relative;
display: block;
padding: 0px;
width: 100%;
height: 165px;
}
#gamearea {
position: relative;
display: block;
margin-left: 10px;
box-sizing: border-box;
width: 280px;
height: 280px;
border: 3px solid #808080;
background-color: #b3b3b3;
}
.btn {
position: relative;
cursor: pointer;
width: 100px;
height: 35px;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
border-radius: 5px;
border: 2px solid black;
}
#userlistcontainer {
position: absolute;
display: none;
box-sizing: border-box;
width: 280px;
left: 10px;
font-family: sans-serif;
font-size: 20px;
text-align: center;
border: 3px solid black;
background-color: #afafaf;
}
#userlistarea {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
#userlist {
position: absolute;
display: flex;
box-sizing: border-box;
float: left;
top: 20px;
left: 0px;
height: 50px;
}
.userlistarrow {
position: absolute;
display: block;
box-sizing: border-box;
width: 10px;
height: 20px;
top: 50%;
cursor: default;
background-color: yellow;
}
.userlistarrowleft {
left: 5px;
border-top: 10px solid transparent;
border-right: 10px solid #808080;
border-bottom: 10px solid transparent;
border-left: 0px solid #808080;
}
.userlistarrowright {
left: calc( 100% - 15px );
border-top: 10px solid transparent;
border-right: 0px solid #808080;
border-bottom: 10px solid transparent;
border-left: 10px solid #808080;
}
</style>
<script>
$(document).ready(function() {
var i = 0;
var meret = 5;
var tablestart = 1;
var titleDb = meret * meret;
var gamePatternVek = [];
makeGamePatternVek();
function setUserListArrow() {
if ( parseInt( $("#userlist").css( "left" ) ) < 0 ) { $(".userlistarrowleft").show() }
else { $(".userlistarrowleft").hide() }
if ( parseInt( $("#userlist").css( "right" ) ) < 0 ) { $(".userlistarrowright").show() }
else { $(".userlistarrowright").hide() }
return;
}
function makeUserList( dim ) {
var titleWidth = $( "#gamearea" ).innerWidth() / dim;
$( "#userlistcontainer" )
.css( { "top" : 20 + "px",
"height" : titleWidth + 20 + "px" } );
for ( i = 0; i < dim * dim - 1; i++ ) {
$( "<div>" )
.attr( { "id" : "title" + ( i + 1 ),
"class" : "title" } )
.css( { "position" : "relative",
"float" : "left",
"width" : titleWidth + "px",
"height" : titleWidth + "px",
"box-sizing" : "border-box",
"display" : "inline-block",
"background-color" : "white",
"color" : "black",
"cursor" : "default",
"overflow" : "hidden",
"text-align" : "center",
"line-height" : titleWidth + "px",
"font-size" : titleWidth * 0.75 + "px",
"border" : 1 + "px solid black" } )
.appendTo( "#userlist" )
.text( gamePatternVek[ i ] );
}
return;
}
function makeGamePatternVek() {
for ( i = 0; i < meret * meret; i++ ) { gamePatternVek.push( tablestart + i ); }
return;
}
function toggleShowUserList( showYesNo ) {
if ( showYesNo ) { $( "#userlistcontainer" ).show(); }
else { $( "#userlistcontainer" ).hide(); }
}
$( document ).on( "click", ".userlistarrowleft", function() {
var listTitleWidth = parseInt( $(".title").width() );
if ( parseInt( $("#userlist").css( "left" ) ) < 0 ) {
$("#userlist").animate( { left : "+=" + listTitleWidth + "px" }, 300, setUserListArrow );
} else { setUserListArrow() }
});
$( document ).on( "click", ".userlistarrowright", function() {
var listTitleWidth = parseInt( $(".title").width() );
if ( parseInt( $("#userlist").css( "right" ) ) < 0 ) {
$("#userlist").animate( { left : "-=" + listTitleWidth + "px" }, 300, setUserListArrow );
} else { setUserListArrow() }
});
$( "#manual" ).click( function() {
makeUserList( meret );
toggleShowUserList( true );
setUserListArrow();
});
$("#userlistcontainer").on( "click", ".title", function() {
var titleID = parseInt( $( this ).attr( "id" ).replace( "title", "" ) );
var fieldWidth = $( "#gamearea" ).innerWidth() / meret;
$( this ).css( "display", "none" );
if ( $( "#userlist" ).outerWidth() < $( "#userlistcontainer" ).innerWidth() ) {
$( "#userlist" ).css( "left", ( ( $( "#userlistcontainer" ).innerWidth() - $( "#userlist" ).outerWidth() ) / 2 ) + "px" );
} else { if ( parseInt( $( "#userlist" ).css( "right" ) ) > 0 ) {
$( "#userlist" ).css( "left", "+=" + ( parseInt( $( ".title" ).outerWidth() ) ) + "px" );
}
}
$( "#title" + titleID ).hide();
if ( titleID != "" ) {
$( "#elem" + titleID ).css( {
"top" : ( placeRow - 1 ) * fieldWidth + "px",
"left" : ( placeCol - 1 ) * fieldWidth + "px" } ).show();
}
titleDb -=1;
if ( titleDb == 0 ) {
$( "#userlistcontainer" ).hide();
$("#gameinfo").show();
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="gameside">
<div id="userlistcontainer">
<div id="userlistarea">
<span>Válasszon a listából</span>
<div id="userlist"></div>
<div class="userlistarrow userlistarrowleft"></div>
<div class="userlistarrow userlistarrowright"></div>
</div>
</div>
<div id="gameinfo"></div>
<div id="gamearea"></div>
</div>
<div id="menuside">
<button id="manual" class="btn">felhasználói</button>
</div>
</div>
</body>
</html>