Develop Reference

object contents lost when opening new page within window

I am making the transition over from Desktop .NET development to Web Development and I have just run into something that I don't understand. I was under the impression that when defining global variables if you opened a new webpage in the sane session the variable would still be accessible in memory to prevent the need to reload it. Can someone please clarify this matter?
I am loading a JSON database into memory as an array of objects var PlayerDatabase. I created an intelligent search bar to select a player and open a page with information about them. When opening the new page the PlayerDatabase is undefined.
Initial Search Bar page:
/*
window.fn = {};
var playerDatabase = [];
var count = 0;
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var menu = document.getElementById('menu');
var navi = document.getElementById('navi');
menu.close();
navi.resetToPage(page, { animation: 'fade' });
};
// Data Load Event
function showModal() {
var modal = document.querySelector('ons-modal');
modal.show();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
playerDatabase = JSON.parse(this.responseText);
count = $(playerDatabase).toArray().length;
modal.hide();
console.log(count);
}
};
var requestURL = 'dataURL';
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 {
// Here I add filtered items to the drop dwon
$('#dropdownItems').append("<li><a href='playerPage.html?playerID=" + "playerID" + "'>" + "Player Name" + " - " + "Player Position" + "</a></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: #555860;
}
.search {
position: relative;
margin: 0 auto;
}
.search input {
height: 26px;
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,
.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;
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
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Page Content -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image w3-black" src="http://www.sportssabermetrics.net/html/images/header_image.jpg" alt="Header Image" width="100%">
<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>
</div>
</section>
</div>
</header>
</body>
Seperate Javascript file to handle New Page
// Load full HTML page prior to making calls
$(function() {
// check to see if data has loaded
if (count > 0) {
// query URL parameters
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("playerID");
var player;
for (i=0; i < count; i++) {
if (playerDatabase[i].playerID = c) {
player = playerDatabase[i];
{ break; }
}
}
} else {
// Load Data
showModal();
console.log(count);
}
});

Here I'll do it since he originally beat me by a couple seconds (I upvoted) and expand. Variables do not persist in the browser from session to session. you need cookies or localStorage for that.
HOWEVER, note there are differences between the two. If you are planning to support a wide variety of browsers and users, you'll need to check that local storage is available or else your user will be toast. If you are planning on sending this data ever back to the server, then cookies is still the preferred method if you really need it to persist.
I, like you, moved from ASP .Net into the web, and something to consider is, do you really need the front end to remember and store this data? For some things that is a security issue as well. Many times it can actually be preferable to pass the data you need back and forth, and when you are done it's disposed rather than physically caching it. I would argue in full web you should be polling for data every page load from the server even if it's redundant. That way you control what the user has, the front end is dumb, and you are sure the data is not tampered with which becomes very important...
I would say, tread lightly with storage outside of session tokens etc on the front end, it can get to be a mess very quickly and is very un-webby. How are you going to insure that the data is not stale, what if modifications are made? How long are you going to have the data persist without a refresh, when you get a large number of users, if they don't wipe their cache and you let them store something for x-length of time, you're going to run into this and it's a fundamental design flaw. Even if you refresh the data every few minutes, when you get to scale that is an eternity and you will get data conflicts. Decide if you really, really, really need this stored on the (and each) user's machine.

How to make a progress bar that fills every time a textbox is filled

Today i'm trying to put a progress bar that fills every time the user fills a textbox, like this : let's say i have 10 textbox on the screen if none is filled i want the progress bar to be at 0% but if the user fills 5 of them i want it to be 50%. I found how to make the progress bar but can't figure how to make this condition to work with a TextBoxFor
If someone could help

Lets say yours textbox (input type=text ?).
<input type="text" class="check-fill">
You can add the jQuery keyup event on each input field, to check the number of input fields already done.
$(function(){ //When document is ready
$(".check-fill").keyup(function(){ //Prefer keyup so you check after, in case the user delete his entry.
var $fields = $(".check-fill");
var count = 0;
$fields.each(function(){
if($(this).val().length > 0)
count++;
});
});
var percentage = Math.floor(count * 100 / $fields.length);
//Here you have your percentage;
});
You can replace the keyup event by the "focusout" one, to reduce the numbers of verifitcations, but it will only check when the user click out of the input field.

If you are using JQuery you could use Progressbar. Then you can apply a certain class to all inputs OR a selector that apply to all of them, and finally attach an event to capture when they are not empty.
Example:
The form can be something like this:
<form class="progessform" ...>
<input type="text" ..../>
<input type="text" ..../>
</form>
And you can select these by using .progressform input[type=text] in a jquery script:
$('.progressform input[type=text]').on('change', function (e) {
var total = count all .progressform input[type=text] within the same form
var filled = count all .progressform input[type=text] values that are not empty
modify your progressbar according to the count: filled * 100 / total
}
This event is attached to every input text inside your form with class progressform, and it is called anytime the input text is changed.
Note that you might need to do extra things on this to distinguish if the input is validated correctly or not (ie, not to count some input in the progressbar if the value is not correct, like an invalid email or alphab characters in a numerical phone input)

** **PROGRESS BAR FILLUP ACCORDING TO TIME SET IN SECOUNDS ** **
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100); // set time ex: 100 as 10s & 1000 as 1min
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
return false;
}
<style>
<body>
#label {
text-align: center;
line-height: 22px;
color: white;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
width:1%;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 1s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
</style>
<body onload="move()">
<div id="myProgress" class="meter">
<span id="myBar">
<center><div id="label">1%</div></center>
</span>
</div>
<br>
</body>

CSS curved gradients and box-shadow

Can CSS be used to make a left and right edges of a content container look like this image? I have been trying to figure out a way to do this without using an image, if that is possible.
Here is jsFiddle that I have been working on. The CSS for the "top" class never gets applied. The CSS for the "bottom" class seems to work ok though.
http://jsfiddle.net/kXuQY/
HTML:
<div class="drop-shadow top bottom">
Content here.
</div>
CSS:
.drop-shadow {
/** Create container. Box-shadow here is to color the inside of the container **/
position:relative;
width:50%;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding:3em;
margin: 2em 20px 4em;
text-align:center
}
.top:before,
.top:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-1;
top:20px;
left:0;
width:40%;
height:1em;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
.top:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
transform:rotate(-70deg);
}
.bottom:before,
.bottom:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-2;
top:90px;
left:0;
width:10%;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(99deg);
-moz-transform:rotate(99deg);
-o-transform:rotate(99deg);
transform:rotate(99deg);
}
.bottom:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-99deg);
-moz-transform:rotate(-99deg);
-o-transform:rotate(-99deg);
transform:rotate(-99deg);
}

You can use ::before and ::after pseudo elements to achieve the effect, see here.
Example: (Demo)
HTML:
<div id="box">
<h1>css-3-box-shadow</h1>
<p>some text</p>
</div>
CSS:
#box:before, #box:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
content: "";
left: 10px;
max-width: 300px;
position: absolute;
top: 80%;
transform: rotate(-3deg);
width: 50%;
z-index: -1;
}
#box:after {
left: auto;
right: 10px;
transform: rotate(3deg);
}
#box {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 4px 4px 4px 4px;
color: rgba(0, 0, 0, 0.8);
line-height: 1.5;
margin: 60px auto;
padding: 2em 1.5em;
position: relative;
text-shadow: 0 1px 0 #FFFFFF;
width: 60%;
}

jQuery - Set style of object with '::' in name

I am customising the look of an input-range and the slider object which I have done successfully with this CSS:
input[type="range"] {
-webkit-appearance: none !important;
background: rgba(1,1,1,0.3);
height:6px;
border: solid 1px #000;
border-bottom: solid 1px #1d1d1d;
border-radius: 6px;
width: 48px;
margin: 0;
margin-bottom: 4px;
display: block;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: -webkit-linear-gradient(top, #a2a2a2 0%,#8b8b8b 50%,#7b7b7b 100%);
height:10px;
width:10px;
box-shadow: inset 0 1px 0 #C4C4C4;
border-radius: 10px;
}
This code works 100%, however what I want to do I be able to change the background color of the slider (input[type="range"]::-webkit-slider-thumb) with jQuery.
I've been able to change the border of the main box with:
$('input#volume').css('background', '#FFFFFF');
But I can't figure out how to get the slider with jQuery.
Thanks
(FYI I am only targeting Safari (WebKit) on a Mac hence the lack of other browser support, its for an application)

Javascript custom scrollbar

I am having the below code for display custom scrollbar. Here some background is showing, instead of this I need display a 1px thin line image.. How can I do this? I am using the TinyScroller
Css:
#wrapper_1 {width:99%; height:600px; padding:2px}
#scroll_1 {position:relative; width:99%; height:600px; overflow:auto}
#scrollcontent_1 {position:absolute; width:94%; z-index:200}
#scrollbar_1 {float:right; position:relative; border:0; display:none; width:15px; height:600px; z-index:100; background:url(images/scroll-bg.png)}
.scroller_1 {position:relative; top:0; cursor:pointer; border:0; width:15px; background-image:url(images/scroller.png); background-position:50% 50%; background-repeat:no-repeat}
.buttonclick_1 {}
Code:
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller_1" class="scroller_1"></div>
</div>
</div>
</div>
<script type="text/javascript">
TINY.scroller.init('scroll_1','scrollcontent_1','scrollbar_1','scroller_1','buttonclick_1');
</script>

Well if you are in Chrome you can use plain ol' CSS:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 4px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-button {
display: none;
}
Demo: http://jsfiddle.net/maniator/ysgBy/
Site to check out: http://css-tricks.com/custom-scrollbars-in-webkit/

According to the doc
http://www.scriptiny.com/2009/09/javascript-scrollable-div/
I think your html is not correct. Try something like :
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller"></div>
</div>
</div>