I'm currently developing a web application in Samsung Smart TV IDE, I've been testing it on the IDE emulator and it works fine. But when I try it on a real TV (Model: UE32H4500AW), the performance slow down a lot, it takes a lot to process the input events when it needs to translate a huge amount of simple divs.
Here's the code where it slow down:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
border: 0;
color: white;
background: black;
}
body{
overflow: hidden;
}
#wrapper {
position: relative;
width: 70vw;
height: 70vw;
overflow: hidden;
}
#EPG-channel-wrapper {
vertical-align: top;
width: 20%;
box-sizing: border-box;
display: inline-block;
}
.EPG-channel {
height: 50px;
width: auto;
padding: 15px;
border: 2px solid white;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
text-overflow: ellipsis;
}
.EPG-channel-title-wrapper {
display: inline-block;
vertical-align: top;
}
.EPG-channel-title {
vertical-align: top;
}
#EPG-program-wrapper {
vertical-align: top;
display: inline-block;
position: relative;
width: 75%;
left: 3%;
box-sizing: border-box;
overflow-x: hidden;
}
.EPG-channel-programs {
height: 84px;
box-sizing: border-box;
border: 2px solid yellow
}
.EPG-program {
border: 2px solid cyan;
height: 100%;
width: 30%;
box-sizing: border-box;
display: inline-block;
}
.EPG-program-context {
display: inline-block;
}
</style>
<script type="text/javascript">
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main = {};
Main.onLoad = function()
{
// Enable key event processing
document.onkeydown = Main.keyDown(event);
widgetAPI.sendReadyEvent();
Main.loadDivs();
};
Main.loadDivs = function() {
var addChannels = [];
var addPrograms = [];
var width = 0;
for(var i = 0; i< 140; i++){
addChannels[addChannels.length] = "<div class='EPG-channel'>";
addChannels[addChannels.length] = "<img alt='' src='' class='EPG-channel-img'>";
addChannels[addChannels.length] = "<div class='EPG-channel-title-wrapper'><div class='EPG-channel-title'>Test " + i +" </div></div></div>";
addPrograms[addPrograms.length] = "<div class='EPG-channel-programs'>";
for( var j = 0; j< 100; j++){
width = 200;
addPrograms[addPrograms.length] = "<div class='EPG-program' style='width:"+width+"px'>";
addPrograms[addPrograms.length] = "<div class='EPG-program-title'>Test program "+ i + " - " + j + " </div>";
addPrograms[addPrograms.length] = "<div class='EPG-program-duration'>00.00 - 00.00</div></div>";
};
addPrograms[addPrograms.length] = "</div>";
};
document.getElementById("EPG-channel-wrapper").innerHTML = addChannels.join('');
document.getElementById("EPG-program-wrapper").innerHTML = addPrograms.join('');
};
Main.translate = 0;
Main.keyDown = function(event)
{
var keyCode = event.keyCode;
switch(keyCode)
{
case tvKey.KEY_LEFT:
var elements = document.getElementsByClassName("EPG-program");
for (var i = 0; i < elements.length; i++){
elements[i].style.display = "";
}
break;
case tvKey.KEY_RIGHT:
var elements = document.getElementsByClassName("EPG-program");
for (var i = 0; i < elements.length; i++){
elements[i].style.display = "none";
}
break;
case tvKey.KEY_UP:
var translate = --Main.translate * document.getElementsByClassName("EPG-channel")[0].offsetHeight;
document.getElementById("EPG-channel-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
document.getElementById("EPG-program-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
break;
case tvKey.KEY_DOWN:
var translate = ++Main.translate * document.getElementsByClassName("EPG-channel")[0].offsetHeight;
document.getElementById("EPG-channel-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
document.getElementById("EPG-program-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
break;
default:
break;
}
};
</script>
</head>
<body onkeydown="Main.keyDown(event)" onload="Main.onLoad();">
<div id="wrapper">
<div id="EPG-channel-wrapper"></div>
<div id="EPG-program-wrapper"></div>
</div>
</body>
</html>
When right key is pressed, it hide all the programs and the performance works fine.
Is there any memory leak I might be missing or other way to translate that amount of divs more efficiently?
Thanks in advance!
Related
The expected result is that when you click on each panel, the panel you clicked on moves, then moves back when you click it again.
The result with my current code is that no matter which panel you click it is always panel4 that toggles.
The reason these need to be added dynamically to each is because this list of panels will be auto populated and have the target ids dynamically generated too.
The Code....
var plbelements = document.getElementsByClassName("panel");
for (var l = 0; l < plbelements.length; l++) {
targetPanel = document.getElementById(plbelements[l].id);
actionSwipeAmount = "160px";
console.log("Target Panel before event listener = " + targetPanel.id);
targetPanel.addEventListener("click", (e) => {
left = window.getComputedStyle(targetPanel).getPropertyValue("left");
console.log(targetPanel.id);
if (left != actionSwipeAmount) {
targetPanel.style.left = actionSwipeAmount;
} else {
targetPanel.style.left = "0px";
}
});
}
body {
margin: 0;
}
.panelsContainer {
display: block;
max-width: 360px;
width: 100%;
min-height: 50px;
border: 1px solid black;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.underPanel {
display: block;
width: 360px;
min-height: 50px;
border: 1px solid black;
background-color: #6c6c6c;
color: white;
padding: 5px;
box-sizing: border-box;
position: relative;
color: white;
}
.panel {
display: block;
width: 360px;
min-height: 50px;
border: 1px solid black;
background-color: #141414;
color: white;
padding: 5px;
box-sizing: border-box;
position: absolute;
right: 0px;
top: 0px;
}
.underPanel:nth-child(even) > .panel {
background-color: #303030;
}
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<div class="panelsContainer">
<div class="underPanel">Hello
<div id="panel1" class="panel">1</div>
</div>
<div class="underPanel">Hello
<div id="panel2" class="panel">2</div>
</div>
<div class="underPanel">Hello
<div id="panel3" class="panel">3</div>
</div>
<div class="underPanel">Hello
<div id="panel4" class="panel">4</div>
</div>
</div>
For solving your problem, you need to redefine the target variable in for loop using const like this:
const targetPanel = document.getElementById(plbelements[l].id);
And you'd better use const and let instead of var. The entire JavaScript code is as follows:
const plbelements = document.getElementsByClassName("panel");
for (let l = 0; l < plbelements.length; l++) {
const targetPanel = document.getElementById(plbelements[l].id);
const actionSwipeAmount = "160px";
console.log("Target Panel before event listener = " + targetPanel.id);
targetPanel.addEventListener("click", (e) => {
left = window.getComputedStyle(targetPanel).getPropertyValue("left");
console.log(targetPanel.id);
if (left != actionSwipeAmount) {
targetPanel.style.left = actionSwipeAmount;
} else {
targetPanel.style.left = "0px";
}
});
}
The title says it all. To see the issue, copy this code to the following online compiler: https://www.w3schools.com/php/phptryit.asp?filename=tryphp_compiler
<!DOCTYPE HTML>
<html>
<style>
/*MAIN*/
* {
margin: 0;
padding: 0;
user-select: none;
overflow: hidden;
}
body {
background-color: #FF0000;
margin: 0;
padding: 0;
}
/*ELEMENTS*/
div {
width: 100vw;
height: 100vh;
float: left;
margin-left: 0vw;
}
h1 {
font-family: verdana;
font-size: 5vh;
text-transform: uppercase;
}
h1.white {
color: #F4F4F4;
}
</style>
<body>
<div id = "main" style = "width: auto; margin-left: 0vw;">
<div id = "home" class = "container" style = 'background-color: #000000;'>
<h1 class = "white">click arrow to see how the next page doesn't appear until after the transition is complete</h1>
<!--ARROW BUTTON-->
<p id = 'arrowButton' style = 'color: #FFFFFF; position: absolute; height: 10vh; width: auto; margin: 45vh 0 0 75vw; font-size: 3vh;' onMouseDown = 'NextButtonClick();'>--></p>
</div>
<div id = "welcome" class = "container" style = 'background-color: #FFFFFF;'>
<h1 style = 'margin: 47.5vh 0 0 50vw'>welcome to my portfolio</h1>
</div>
</div>
<script>
var mainDiv, welcomeDiv;
var transitionSeconds = 0.5;
var isTransitioning = false;
function NextButtonClick() {
if(!isTransitioning) {
isTransitioning = true;
i = 0;
thisInterval = setInterval(function() {
mainDiv.style.marginLeft = (100 / i) - 101 + "vw";
i++;
if(i == 100) {
clearInterval(thisInterval);
mainDiv.style.marginLeft = "-100vw";
isTransitioning = false;
}
}, transitionSeconds);
}
}
window.onload = function() {
mainDiv = document.getElementById("main");
welcomeDiv = document.getElementById("welcome");
var arrowButton = document.getElementById("arrowButton");
var arrowButtonX, arrowButtonY;
var arrowButtonGlowDistance = 100;
arrowButtonX = arrowButton.getBoundingClientRect().left + arrowButton.getBoundingClientRect().width/2;//center
arrowButtonY = arrowButton.getBoundingClientRect().top + arrowButton.getBoundingClientRect().height/2;//center
document.onmousemove = function(e) {
x = e.clientX; y = e.clientY;
};
};
</script>
</body>
</html>
The background is red on purpose so that you can see how, even though the "welcome" div should be rendered over top the background, it is not being rendered until the very last second after the transition is completed and 100% of the element is on the screen.
I am stumped, and I'm not sure why this is since HTML usually doesn't seem to behave this way. Even when I highlight the element in Inspect Element, the Inspector doesn't show me where the element is on the screen until the final moment when it is rendered.
Any help would be greatly appreciated, and I look forward to hearing your feedback!
The problem here is that your DIVs are placed under each other and while one is moving horizontally, the next div is still underneath of it until first one is completely out of the way (just like Jenga game in reverse).
To solve this, you can try add display: flex, to place them horizontally instead:
var mainDiv, welcomeDiv;
var transitionSeconds = 0.5;
var isTransitioning = false;
function NextButtonClick() {
if (!isTransitioning) {
isTransitioning = true;
i = 0;
thisInterval = setInterval(function() {
mainDiv.style.marginLeft = (100 / i) - 101 + "vw";
i++;
if (i == 100) {
clearInterval(thisInterval);
mainDiv.style.marginLeft = "-100vw";
isTransitioning = false;
}
}, transitionSeconds);
}
}
window.onload = function() {
mainDiv = document.getElementById("main");
welcomeDiv = document.getElementById("welcome");
var arrowButton = document.getElementById("arrowButton");
var arrowButtonX, arrowButtonY;
var arrowButtonGlowDistance = 100;
arrowButtonX = arrowButton.getBoundingClientRect().left + arrowButton.getBoundingClientRect().width / 2; //center
arrowButtonY = arrowButton.getBoundingClientRect().top + arrowButton.getBoundingClientRect().height / 2; //center
document.onmousemove = function(e) {
x = e.clientX;
y = e.clientY;
};
};
* {
margin: 0;
padding: 0;
user-select: none;
overflow: hidden;
}
body {
background-color: #FF0000;
margin: 0;
padding: 0;
}
/*ELEMENTS*/
div {
width: 100vw;
height: 100vh;
float: left;
margin-left: 0vw;
display: flex; /* added */
}
h1 {
font-family: verdana;
font-size: 5vh;
text-transform: uppercase;
}
h1.white {
color: #F4F4F4;
}
<div id="main" style="width: auto; margin-left: 0vw;">
<div id="home" class="container" style='background-color: #000000;'>
<h1 class="white">click arrow to see how the next page doesn't appear until after the transition is complete</h1>
<!--ARROW BUTTON-->
<p id='arrowButton' style='color: #FFFFFF; position: absolute; height: 10vh; width: auto; margin: 45vh 0 0 75vw; font-size: 3vh;' onMouseDown='NextButtonClick();'>--></p>
</div>
<div id="welcome" class="container" style='background-color: #FFFFFF;'>
<h1 style='margin: 47.5vh 0 0 50vw'>welcome to my portfolio</h1>
</div>
</div>
The script creates a random number of divs (in range 20-40) and puts some text in every single div. The script calculates the width of divs so that they fit in a single row. The height should be equal to the width - every div must be a square. Here's the code:
var quantity = Math.floor(Math.random() * (40 - 20 + 1)) + 20;
for (var i = 0; i < quantity; i++) {
var elem = document.createElement("div");
elem.className = "part";
elem.id = 'p' + i;
document.getElementById("scale").appendChild(elem);
}
var parts = document.getElementsByClassName("part");
for (var i = 0; i < parts.length; i++) {
parts[i].style.fontSize = (500 / quantity) + 'px';
parts[i].style.lineHeight = (460 / quantity) + 'px';
parts[i].textContent = ("block #" + (i + 1));
}
for (var i = 0; i < parts.length; i++) {
parts[i].style.height = parts[i].style.width;
}
let text = document.getElementById('txt');
text.textContent = 'BLOCKS: ' + quantity;
body {
margin: 0;
}
#scale {
position: absolute;
display: table;
width: 100%;
top: 50%;
transform: translateY(-100%);
table-layout: fixed;
border-spacing: 1px;
}
.part {
display: table-cell;
background-color: #a9cce3;
padding: 3px;
box-sizing: border-box;
border: 1px solid black;
border-radius: 2px;
overflow: hidden;
}
#txt {
position: absolute;
top: 50%;
left: 50%;
margin-top: 20px;
transform: translateX(-50%);
font-size: 18px;
font-family: 'Arial', sans-serif;
}
<div id="scale"> </div>
<div id='txt'> </div>
The first problem is the divs are not always square. The second problem is I can't properly set the font size depending on a div size, so text fits a div. I think that's the worst solution
parts[i].style.fontSize = (500 / quantity) + 'px';
parts[i].style.lineHeight = (460 / quantity) + 'px';
There were two problems with the code:
To get element with use .clientWidth because style.width can be accessed when you have set that but in your code, I couldn't see you are doing so.
Second use font size in per cent, I don't think line-height is required. To make it centre use CSS as in example follows.
Use following:
var quantity = Math.floor(Math.random() * (40 - 20 + 1)) + 20;
for (var i = 0; i < quantity; i++) {
var elem = document.createElement("div");
elem.className = "part";
elem.id = 'p' + i;
document.getElementById("scale").appendChild(elem);
}
var parts = document.getElementsByClassName("part");
for (var i = 0; i < parts.length; i++) {
parts[i].style.fontSize = (500 / quantity) + '%';
parts[i].style.lineHeight = (460 / quantity) + '%';
parts[i].textContent = ("block #" + (i + 1));
}
for (var i = 0; i < parts.length; i++) {
parts[i].style.height = parts[i].clientWidth + "px";
}
let text = document.getElementById('txt');
text.textContent = 'BLOCKS: ' + quantity;
body {
margin: 0;
}
#scale {
position: absolute;
display: table;
width: 100%;
top: 50%;
transform: translateY(-100%);
table-layout: fixed;
border-spacing: 1px;
}
.part {
display: table-cell;
background-color: #a9cce3;
padding: 3px;
box-sizing: border-box;
border: 1px solid black;
border-radius: 2px;
overflow: hidden;
vertical-align: middle;
text-align: center;
}
#txt {
position: absolute;
top: 50%;
left: 50%;
margin-top: 20px;
transform: translateX(-50%);
font-size: 18px;
font-family: 'Arial', sans-serif;
}
<div id="scale"> </div>
<div id='txt'> </div>
Or if you don't want to use your text font to be reduced like this use following:
.part {
display: table-cell;
background-color: #a9cce3;
padding: 3px;
box-sizing: border-box;
border: 1px solid black;
border-radius: 2px;
overflow: hidden;
vertical-align: middle;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
I am trying to learn by creating a chat bar. I have created a side nav bar with users and once I click the chat pop up box will open at the bottom. I want to add input field to that chatbox.
I tried to add the input field but I just got half success; it just gets added to the body not at the bottom of the chat box.
chat.html
<script>
//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
var total_popups = 0;
//arrays of popups ids
var popups = [];
function close_popup(id)
{
for(var iii = 0; iii < popups.length; iii++)
{
if(id == popups[iii])
{
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
function display_popups()
{
var right = 220;
var iii = 0;
for(iii; iii < total_popups; iii++)
{
if(popups[iii] != undefined)
{
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for(var jjj = iii; jjj < popups.length; jjj++)
{
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
element = element + '<div class="popup-bottom"><div class="popup-bottom"><div id="'+ id +'"></div><input id="field"></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups()
{
var width = window.innerWidth;
if(width < 540)
{
total_popups = 0;
}
else
{
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width/320);
}
display_popups();
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);
</script>
style.css
<style>
#media only screen and (max-width : 540px)
{
.chat-sidebar
{
display: none !important;
}
.chat-popup
{
display: none !important;
}
}
body
{
background-color: #e9eaed;
}
.chat-sidebar
{
width: 200px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
}
.sidebar-name
{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 4px;
font-size: 12px;
}
.sidebar-name span
{
padding-left: 5px;
}
.sidebar-name a
{
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.sidebar-name:hover
{
background-color:#e1e2e5;
}
.sidebar-name img
{
width: 32px;
height: 32px;
vertical-align:middle;
}
.popup-box
{
display: none;
position: absolute;
bottom: 0px;
right: 220px;
height: 285px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
}
.popup-box .popup-head
{
background-color: #009688;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
clear: both;
}
.popup-box .popup-head .popup-head-left
{
float: left;
}
.popup-box .popup-head .popup-head-right
{
float: right;
opacity: 0.5;
}
.popup-box .popup-head .popup-head-right a
{
text-decoration: none;
color: inherit;
}
.popup-box .popup-bottom .popup-head-left
{
position:absolute;
left: 0px;
bottom: 0px
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 100%;
overflow-y: scroll;
}
</style>
posting relevant parts hopw you can make sense of it.
HTML
<div class="popup-box chat-popup">
<div class="popup-head">
<div class="popup-head-left">name</div>
<div class="popup-head-right">✕</div>
<div style="clear: both"></div>
</div>
<div class="popup-messages"></div>
<div class="popup-bottom-container">
<div class="popup-bottom">
<div id="'+ id +'"></div>
<input type="text" id="field">
</div>
</div>
</div>
CSS
.popup-bottom
{
position:absolute;
left: 0px;
bottom: 10px;
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 200px;
overflow-y: scroll;
}
It is always better to try out your layout in plain html before testing with js
I want make a multiply chating system like facebook. So I collect this script from this webpage
In this script they are passing 2 variable in register_popup function as id and name. Now if I pass any numerical value as id for twice or more, this script not working. But for a new numerical value work well.
So I want to sand my usersID as ID and UserNAME as NAME for further process. How can I solve this? Here is this script:
<a class="content" href="#" id="Aaa" data-name="aaa">AAA</a><br>
<a class="content" href="#" id="1013" data-name="bbb">BBB</a><br>
<a class="content" href="#" id="1014" data-name="ccc">CCC</a>
<script>
$(document).on('click', 'a.content', function() {
var ID = $(this).attr("id");
var NAME = $(this).data("name");
register_popup(ID, NAME);
});
//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
//this variable represents the total number of popups can be displayed according to the viewport width
var total_popups = 0;
//arrays of popups ids
var popups = [];
//this is used to close a popup
function close_popup(id) {
for (var iii = 0; iii < popups.length; iii++) {
if (id == popups[iii]) {
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
//displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
function display_popups() {
var right = 220;
var iii = 0;
for (iii; iii < total_popups; iii++) {
if (popups[iii] != undefined) {
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for (var jjj = iii; jjj < popups.length; jjj++) {
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
//creates markup for a new popup. Adds the id to popups array.
function register_popup(id, name) {
for (var iii = 0; iii < popups.length; iii++) {
//already registered. Bring it to front.
if (id == popups[iii]) {
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="' + id + '">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">' + name + '</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups() {
var width = window.innerWidth;
if (width < 540) {
total_popups = 0;
} else {
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width / 320);
}
display_popups();
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);
</script>
<style>
#media only screen and (max-width: 540px) {
.chat-sidebar {
display: none !important;
}
.chat-popup {
display: none !important;
}
}
.chat-sidebar {
width: 200px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
}
.sidebar-name {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 4px;
font-size: 12px;
}
.sidebar-name span {
padding-left: 5px;
}
.sidebar-name a {
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.sidebar-name:hover {
background-color: #e1e2e5;
}
.sidebar-name img {
width: 32px;
height: 32px;
vertical-align: middle;
}
.popup-box {
display: none;
position: fixed;
bottom: 0px;
right: 220px;
height: 285px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
}
.popup-box .popup-head {
background-color: #6d84b4;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
clear: both;
}
.popup-box .popup-head .popup-head-left {
float: left;
}
.popup-box .popup-head .popup-head-right {
float: right;
opacity: 0.5;
}
.popup-box .popup-head .popup-head-right a {
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages {
height: 100%;
overflow-y: scroll;
}
</style>
You could use ajax call to handle the data.
function sendData() {
$.ajax({
context:this,
type:"POST",
dataType:"json",
data: { ID: userID, NAME: UserNAME },
success: function(response){
//something
},
error: function(errorData){alert(errorData);}
});