I have a chat, and I have a problem, I want the user's name to be on top of the message box, just as it is in Messenger, but I can't, I've tried some ways and it didn't work, I don't have a wide knowledge about CSS, so it becomes difficult for me
Which property should I use to align the name right above the message box? Margin, position? What should I do, I have no idea to solve this
Also, I want to know how to create these elements by using JS, you know, I'm using PHP and JS, so I want to use JS to create the message every time a user click in a button, it is a public chat and will have lot of users
My JS:
var conn = new WebSocket("ws://localhost:8080");
conn.onmessage = function(e){
SendMessage('him', e.data); //It is using the him class
};
conn.onclose = function(e){
console.log("Connection is closed!");
}
var content = document.getElementById('chat');
var name = '<?php echo $_SESSION['username']; ?>';
var message = document.getElementById('message'); //It takes the user message
var button = document.getElementById('send');
button.addEventListener('click', function(){
var msg = {
name: name,
message: message.value
};
msg = JSON.stringify(msg);
conn.send(msg);
SendMessage('me', msg); //It uses the me class
message.value = '';
});
function SendMessage(who, data){
data = JSON.parse(data);
var div = document.createElement('div');
div.setAttribute('class', who); //It means, who is sending? Me or him?
var span = document.createElement('span'); //It is used to the message
span.textContent = data.message;
div.appendChild(span);
content.appendChild(div); //Then the div class will append everything
}
A simple image from Messenger chat:
image of example with name of the user on the top of the message box
My code snippnet, I want something like this, but with the name on the top, as the image from messenger:
ul li{
display:inline-block;
clear: both;
padding: 10px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
}
.him{
background: yellow;
float: left;
}
.me{
float: right;
background: #0084ff;
color: #fff;
}
.him + .me{
border-bottom-right-radius: 5px;
}
.me + .me{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.me:last-of-type {
border-bottom-right-radius: 25px;
}
.him .user {
font-size:0.6em;
color: grey;
margin: 0px 0px 0px 10px;
}
.me .user {
font-size:0.6em;
color: grey;
margin: 0px 10px 0px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<ul>
<li class="him">
<div class="user">Username</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="me">
<div class="user">Username</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="him">
<div class="user">Username</div>
<div class="msg">
<span>How to put the name on the top</span>
</div>
</li>
</ul>
</body>
</html>
Well, you can simply achieve this with position: absolute;. Then to make its position relative to its parent you need to assign position: relative; to its parent also.
So your final code should be something like this:
ul li {
display: inline-block;
clear: both;
padding: 10px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
}
.him, .me {
position: relative;
}
.him {
background: yellow;
float: left;
}
.me {
float: right;
background: #0084ff;
color: #fff;
}
.him+.me {
border-bottom-right-radius: 5px;
}
.me+.me {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.me:last-of-type {
border-bottom-right-radius: 25px;
}
.him .user {
font-size: 0.6em;
color: grey;
}
.me .user {
font-size: 0.6em;
color: grey;
}
.user {
position: absolute;
top: -15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<ul>
<li class="him">
<div class="user">Username</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="me">
<div class="user">Username</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="him">
<div class="user">Username</div>
<div class="msg">
<span>How to put the name on the top</span>
</div>
</li>
</ul>
</body>
</html>
Update
As #ChrisG mentioned in comments to remove the next same sibling username you can simply do it with Adjacent sibling combinator like this:
ul li {
display: inline-block;
clear: both;
padding: 10px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
}
.him,
.me {
position: relative;
}
.him {
background: yellow;
float: left;
}
.me {
float: right;
background: #0084ff;
color: #fff;
}
.him+.me {
border-bottom-right-radius: 5px;
}
.me+.me {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.me:last-of-type {
border-bottom-right-radius: 25px;
}
.him .user {
font-size: 0.6em;
color: grey;
}
.me .user {
font-size: 0.6em;
color: grey;
}
.user {
position: absolute;
top: -15px;
}
.him+.him .user,
.me+.me .user {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<ul>
<li class="him">
<div class="user">Username</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="me">
<div class="user">Username</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="me">
<div class="user">Username</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="him">
<div class="user">Username</div>
<div class="msg">
<span>How to put the name on the top</span>
</div>
</li>
<li class="him">
<div class="user">Username</div>
<div class="msg">
<span>How to put the name on the top</span>
</div>
</li>
<li class="him">
<div class="user">Username</div>
<div class="msg">
<span>How to put the name on the top</span>
</div>
</li>
</ul>
</body>
</html>
Since your template for both sides is like the same you simply create a string template then replace the data inside it then you can append it to your HTML with insertAdjacentHTML like this:
var chat = document.getElementById('chat');
var send = document.getElementById('send');
function SendMessage(who, data) {
var html = '<li class="' + who + '">' +
'<div class="user">Username</div>' +
'<div class="msg">' +
'<span>' + data.message + '</span>' +
'</div>' +
'</li>';
chat.insertAdjacentHTML('beforeend', html);
}
send.addEventListener('click', function() {
SendMessage('him', {
message: 'hi'
});
});
ul li {
display: inline-block;
clear: both;
padding: 10px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
}
.him,
.me {
position: relative;
}
.him {
background: yellow;
float: left;
}
.me {
float: right;
background: #0084ff;
color: #fff;
}
.him+.me {
border-bottom-right-radius: 5px;
}
.me+.me {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.me:last-of-type {
border-bottom-right-radius: 25px;
}
.him .user {
font-size: 0.6em;
color: grey;
}
.me .user {
font-size: 0.6em;
color: grey;
}
.user {
position: absolute;
top: -15px;
}
.him+.him .user,
.me+.me .user {
display: none;
}
#send {
position: fixed;
bottom: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<ul id="chat"></ul>
<button id="send">Send</button>
</body>
</html>
While there is no major advantage for using create elements in these days and working with string in easier and simpler in this particular case I encourage to use the first approach instead but as you request this approach also I will add it, and it should be like this:
var chat = document.getElementById('chat');
var send = document.getElementById('send');
function SendMessage(who, data) {
var li = document.createElement('li');
li.classList.add(who);
var userName = document.createElement('div');
userName.classList.add('user');
userName.textContent = 'Username';
li.appendChild(userName);
var msg = document.createElement('div');
msg.classList.add('msg');
var span = document.createElement('span');
span.textContent = data.message;
msg.appendChild(span);
li.appendChild(msg);
chat.appendChild(li);
}
send.addEventListener('click', function() {
SendMessage('him', {
message: 'hi'
});
});
ul li {
display: inline-block;
clear: both;
padding: 10px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
}
.him,
.me {
position: relative;
}
.him {
background: yellow;
float: left;
}
.me {
float: right;
background: #0084ff;
color: #fff;
}
.him+.me {
border-bottom-right-radius: 5px;
}
.me+.me {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.me:last-of-type {
border-bottom-right-radius: 25px;
}
.him .user {
font-size: 0.6em;
color: grey;
}
.me .user {
font-size: 0.6em;
color: grey;
}
.user {
position: absolute;
top: -15px;
}
.him+.him .user,
.me+.me .user {
display: none;
}
#send {
position: fixed;
bottom: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<ul id="chat"></ul>
<button id="send">Send</button>
</body>
</html>
NOTE: I just hardcode the message and the owner of it for more illustration, you should replace them with actual data.
You could use flexbox to align items more effectivly.
Only the message portion should be filled in with color; not the entire list item.
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
list-style-type: none
}
ul li {
font-family: Helvetica, Arial, sans-serif;
display: flex;
flex-direction: column;
}
ul li .user {
font-size: 0.6em;
color: grey;
}
.him { align-self: flex-start; }
.me { align-self: flex-end; }
.msg {
padding: 10px;
border-radius: 30px;
margin-bottom: 2px;
}
.him .user { text-align: left; margin-left: 10px; }
.me .user { text-align: right; margin-right: 10px; }
.him .msg { background: yellow; }
.me .msg { background: #0084ff; color: #fff; }
<ul>
<li class="him">
<div class="user">Bob</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="me">
<div class="user">Me</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="him">
<div class="user">Bob</div>
<div class="msg">
<span>How to put the name on the top</span>
</div>
</li>
</ul>
i am designing an interface or an controller and i need to make it accessible to various languages. The interface is safed locally on the device it self.
I managed to translate the first couple of pages and made it work like i wanted it. except of one Issue:
so if you are on page one and set the language to english, it changes page one to english. If you are going to the next page which has an english translation it is back in the default language and you need to click english again.
is there a way to fix that within the function i used?
here is a fiddle so you can have a look at my code:
https://jsfiddle.net/v29Lfar6/
if i need to provide anything else or clarify the problem in more depth just let me know. Thank you in advance![JsFiddle
.container_buttonp1{
text-align: center;
margin-left: -20px;
margin-right: -20px;
}
.button{
display:inline-block;
background-color: #f4f4f4;
color: #105ea6;
border-radius: 8px;
padding: 5px 2,5px;
width: 100px;
text-align: center;
font-size: 12px;
border: 2px grey solid;
text-decoration: none;
margin: 0 20px;
}
.button:hover{
border: 2px grey solid;
padding: 5px 2,5px;
width: 100px;
background-color: #105ea6;
color: #f4f4f4;
border-radius: 8px;
}
footer {
position: absolute;
height: 10%;
width: 100%;
background-color: #f4f4f4;
}
p.copyright{
position: absolute;
width: 100%;
color: #105ea6;
line-height: 30px;
font-size: 1.0em;
text-align: center;
bottom:0;
}
.form{
text-align: center;
}
.nav{
height: 40px;
background-color: #105ea6;
height: 100px;
width: 100px;
}
nav ul{
color: #105ea6;
list-style: none;
text-align: center;
font-size: 25px;
}
nav ul li a{
color: #105ea6;
display:inline-block;
text-decoration: none;
text-align: center;
border: 2px grey solid;
width: 250px;
padding: 20px;
border-radius: 8px;
cursor: pointer;
}
nav ul li a:hover{
border: 2px grey solid;
padding: 20px;
width: 250px;
background-color: #105ea6;
color: #f4f4f4;
border-radius: 8px;
}
.header_navbar{
font-size: x-large;
text-align: center;
padding-left: 40px;
}
<!DOCTYPE html>
<html lang="de">
<div id="content">
<img src="IMAGES_AYNU/elsner_logo1.svg" width="150" height="150"/>
</div>
<br>
<br>
<br>
<br>
<body>
<head>
<script src="https://kit.fontawesome.com/9cef10a72a.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hauptmenü</title>
<link rel="stylesheet" type="text/css" href="CSS_AYNU/AYNU.Style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var arrLang = {
'en': {
'wateringzones': 'Wateringzones',
'sensors': 'Sensors',
'back': 'Back',
'mainmenue': 'Main menu',
'help': 'Help'
},
'de': {
'wateringzones': 'Bewässerungszonen',
'sensors': 'Sensoren',
'back': 'Zurück',
'mainmenue':'Hauptmenü',
'help': 'Hilfe'
}
};
// Process translation
$(function() {
$('.translate').click(function() {
var lang = $(this).attr('id');
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('key')]);
});
});
});
</script>
</head>
<div class="header_navbar">
<header>
<button id="en" class="translate">English</button>
<button id="de" class="translate">Deutsch</button>
<br>
<h1><span class="lang" key="mainmenue">Hauptmenü</span> <i class="fas fa-bars"></i></h1>
</header>
</div>
<br>
<div class="navebar">
<nav>
<ul>
<li class="navbar"><a class="lang" href="AYNU_WATERINGZONES.html" key="wateringzones">Bewässerungszonen</a></li>
<br>
<li class="navbar"><a class="lang" href="AYNU_SENSORS.html" key="sensors">Sensoren</a></li>
<br>
<li class="navbar"><a class="lang" href="AYNU.Structure.html" key="back">Zurück</a></li>
</ul>
</nav>
</div>
<br>
<br>
</body>
</html>
I want the user to insert his name and when he submits function y() runs.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> XXX </title>
<link rel="stylesheet" type="text/css" href="css0.css">
</head>
<body>
<div class="loginbox">
<h1 >Qual o teu nome?</h1>
<input type="text" placeholder="Username" id="a">
<input type="submit" value="Ok" onclick="y();">
</div>
<div id="select" class="menu" >
<ul>
<li>XXX</li>
<li>O Fenómeno do Apocalypse</li>
<li>O Fenómeno do IMPE</li>
<li>O Fenómeno do RT</li>
</ul>
</div>
<style>
</style>
<script src="js.js"></script>
<footer>
<script>
function y() {
let name = document.getElementById("a").value;
sessionStorage.setItem("user",name);
document.getElementById("preventDefault").addEventListener("click", function(event){
event.preventDefault();
})
document.getElementById("select").style.opacity="1";
}
</script>
</footer>
</body>
</html>
.loginbox {
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
.loginbox h1 {
margin:0;
padding: 0 0 20px;
text-align: center;
font-size: 32px;
color: red;
}
.loginbox input {
width: 100%;
margin-top: 50px;
}
.loginbox input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: #ffc107;
color: #000;
}
All of this was working till I decided I wanted to put some style into the form, so I cointained everything inside the div with the class of "loginbox".
When I did that the form got the style from the class loginbox but doesn't submit anything nor runs function y(). Hover effect also is not working.
In the input type text where the user is suposed to write his name it's not even possible to write anything nor submit.
All this stoped working when the div was added.
I want to understand why and fix this issue.
You need your submit input to be of type="button" in order to execute a custom function on click instead of submitting the form. So your button would be in your case:
<input type="button" value="Ok" onclick="y();">
Personally I would prefer to define it as a button:
<button type="button" value="Ok" onclick="y();"></button>
Hope this helps.
I am trying to make an iframe which shows text putted in the textarea.
How can I do that? Am I missing something here?
<html>
<head>
<title>Code Player</title>
<script type="text/javascript" src="jquery.min.js"></script>
<!--i am using the latest jquery-->
<style type="text/css">
body{
font-family: sans-serif;
margin: 0;
padding: 0;
}
#header{
width: 100%;
background-color: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo{
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer{
width: 240px;
margin: 0 auto;
}
.toggleButton{
float: left;
border: 1px solid gray;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid gray;
}
.active{
background-color: #E8F2FF;
}
.highlightedButton{
background-color: gray;
}
textarea{
resize: none;
border-top: none;
border-color: gray;
}
.panel{
float: left;
width: 49%;
border-left: none;
}
iframe{
border: none;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<!--I want to get iframe data from the textarea section-->
<textarea id="htmlPanel" class="panel">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
$(".toggleButton").hover(function () {
$(this).addClass("highlightedButton");
}, function () {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function () {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width($((window).width() / 2));
$("iframe").contents().find("html").html($("#htmlPanel").val());
$("textarea").on('change keyup paste', function() {
$("iframe").contents().find("html").html($("#htmlPanel").val());
});
</script>
</body>
</html>
Everything in this code works expect the iframe. I can't get the data from textarea.
You have a syntax error, otherwise it works fine. Demo
$(".panel").width($((window).width() / 2));
should be
$(".panel").width($(window).width() / 2);
I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
Here's the code (it's pretty messy):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
#media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li>Home</li>
<li>Componente</li>
<li>Periferice</li>
<li>Contact</li>
<li class="Login"><span class="glyphicon glyphicon-log-in" ></span>Login</li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
</span>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
The site is only for full hd monitor so in smaller monitors it won't look ok.
JavaScript is not a stylesheet
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
use a script tag like all of the other includes in the page
<script src="ScrollBar.js"></script>