Add Percent Sign To Progress Bar - javascript

I have a very simple progress bar im making and everything works except for one thing...the percent sign. My code is below and my question is how would add a percent sign to this without messing up the script. - JsFiddle
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" href="Assets/IMG/Roz.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apache Testing Server</title>
<style type="text/css">
#ProgressWrap {
height:30px;
width:300px;
border:1px solid #222;
text-align:center;
position:relative;
}
#ProgressStat {
height:30px;
width:0%;
background-color:#9CF;
position:absolute;
top:0px;
left:0px;
}
#ProgressPer {
width:100%;
height:30px;
line-height:30px;
position:absolute;
top:0px;
left:0px;
z-index:1000;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('ProgressPer').innerHTML = 0;
var Change = setInterval(function() {
var Per = document.getElementById('ProgressPer').innerHTML;
++Per
if(Per == 101)
{
clearInterval(Change);
}
else
{
document.getElementById('ProgressPer').innerHTML = Per;
var Bar = document.getElementById('ProgressStat');
Bar.style.width = Per + '%';
}
}, 50);
}
</script>
</head>
<body>
<div id="ProgressWrap">
<div id="ProgressPer"></div>
<div id="ProgressStat"></div>
</div>
</body>
</html>

You need to change these two lines:
var Per = document.getElementById('ProgressPer').innerHTML.replace('%','');
and
document.getElementById('ProgressPer').innerHTML = Per.toString() + '%';
See the fiddle.
There's nothing wrong with your code but it doesn't really follow javascript style guidelines. Also, it's not necessary to take the innerHTML value in your calculations. Here's another version to consider going forward.
var pct = 0,
change = setInterval(function () {
++pct;
if (pct == 101) {
clearInterval(change);
} else {
document.getElementById('ProgressPer').innerHTML = pct.toString() + '%';
var bar = document.getElementById('ProgressStat');
bar.style.width = pct + '%';
}
}, 50);

Related

word limiter of text box not working properly when code write in child page of master

i'm facing very unexpected problem,before this i can't expect that such type of problem also occurs...i wrote word limiter code of text box in single page ,it working 100% well ,word limiter work and also remaining words are displayed by label named"remaining6"...when i paste same code in child page of master then word limiter work but remaining word are not displayed:
<input type="text" id="TextBox5" placeholder="latest" runat="server" onkeyup="countChar(this)" />
<h5 >Characters Left <span id="remaining6">20</span></h5>
<script type="text/javascript" >
function countChar(val) {
var len = val.value.length;
if (len >= 10) {
val.value = val.value.substring(0, 10);
}
else
{
$('.numbersofChart').text(10 - len);
alert("before");
var textEntered = document.getElementById('TextBox5').value;
alert("after");
var msg = document.getElementById('remaining6');
var counter = (10 - (textEntered.length));
msg.textContent = counter;
}
};
</script>
when i debug this code by alert then alert("before") is display and alert("after") is not display.it means error in the following line:
var textEntered = document.getElementById('TextBox5').value;
i don't know why code not execute from this line ...remember when i run same code in single page(without master) then working well...the problem occurs when paste the code in child page of master....i include liberaries in child page properly....how i can solve this problem?
Here is a word limit example:
//<![CDATA[
/* js/external.js */
var doc, bod, dE, I, wordLimit; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; dE = doc.documentElement;
I = function(id){
return doc.getElementById(id);
}
wordLimit = function(context, remainElement, limit){
var s = context.value.split(/[ ]+/), max = limit || 20;
var n = max-s.length;
if(n < 1)n = 0;
remainElement.innerHTML = n;
if(n === 0){
context.value = s.splice(0, max).join(' ');
}
}
var remain = I('remain');
I('textBox').onkeyup = function(){
wordLimit(this, remain);
}
}); // end load
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px 5px;
}
#textBox{
width:100%; height:38px; background:#fff; color:#000; font:22px Tahoma, Geneva, sans-serif; padding:5px;
}
h5{
text-align:center;
}
h5>span{
color:#a00;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Word Limiter</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
<input id='textBox' type='text' />
<h5>Words Left <span id='remain'>20</span></h5>
</div>
</body>
</html>

Changing Div oppacity on scroll

First off, please don't yell at me for asking this question. I know there is already a million topics on this, and sadly I have read through them all and I STILL can't figure out what I am doing wrong.
I created just a simple site to try understand how this works so that I can implement it on a more complex site.
I am just using one of the many scripts I have found and tried. All of them didn't have any effect.
The HTML File:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> </title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://www.queness.com/js/bsa.js"></script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
$(document).ready(function() {
var colordivs = $('#fade div');
$(document).scroll(function(e) {
var scrollPercent = ($(window).scrollTop() / $('#fade').outerHeight()) * 100;
if (scrollPercent > 0) {
if (scrollPercent < 33) {
var opacity = 1 - (scrollPercent / 33);
$(colordivs[0]).css('opacity', opacity);
}
else if (scrollPercent > 66) {
var opacity = 1 - (scrollPercent / 100);
$(colordivs[0]).css('opacity', 0);
$(colordivs[1]).css('opacity', 0);
$(colordivs[2]).css('opacity', opacity);
}
else if (scrollPercent > 33) {
var opacity = 1 - (scrollPercent / 66);
$(colordivs[0]).css('opacity', 0);
$(colordivs[1]).css('opacity', opacity);
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="fade">
</div>
</div>
</body>
</html>
The CSS file:
body {
background-color: #ffcc00;
}
.container {
height: 6000px;
width: 100%;
margin: 0 auto;
}
#fade {
background-image: url("skyline.png");
width: 100%;
height: 600px;
position: fixed;
overflow: hidden:
}
So I guess my first question is do I have everything? Am I missing a jquery script or something. and second does it matter where the css file is as along as its linked correctly in the html file? Like I said, I don't completely understand how the changing opacity works if it has anything to do with the css file.
I understand HTML and CSS completely and I understand what is going on in the script just fine, I just can't figure out why they aren't talking with each other and causing a change.
Thanks in advance for any guidance!
Change
var colordivs = $('#fade div');
to
var colordivs = $('#fade');

clientHeight not working in JavaScript?

I'm learning JavaScript and created a countdown timer HTML page in which javascript code seems to be returning a wrong clientHeight of the body. I want to show my countdown HTML <div> in middle (vertically) of the body even when browser is re-sized. Please tell me where I am wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CountDown Timer</title>
<script type="text/javascript" >
function countdown(){
if(isNaN(document.getElementById("time").value))
{
document.getElementById("time").value = "Enter Valid Number";
return;
}
else
{
var i = document.getElementById("time").value;
var j=setInterval(function (){document.getElementById("new").innerHTML = i; i--;
if(i == -2){
document.getElementById("new").innerHTML = "Welcome";
clearInterval(j);}},1000);
}
}
function heightadjust(){
document.getElementById("main1").style.top = ((document.body.clientHeight/2)+54).toString() + "px";
}
</script>
</head>
<body onresize="heightadjust();" onload="heightadjust();">
<div style="margin:0 auto;" id="main1">
<center>
<div id="new" style="display:inline-block; padding:3px; font-size:60px; text-align:center; border:3px solid #000000; background-color:#CC3300; color:#FFFFFF; border-radius:6px;">Enter Time Below</div>
<br />
<input type="text" id="time" onfocus="this.value = ''; this.style.color = '#000000';" value="Enter Time here" style="color:#999999;" />
<button onclick="countdown();" >Start</button>
</center>
</div>
</body>
</html>
Please, give me some tips how to keep <div> vertically centred even if browsers are re-sized.
You don't need JS for that.
#in_the_middle {
position:fixed;
left:50%;
top:100%;
width:200px;
margin-left:-100px; /* MUST be equal to width * -0.5 */
height:50px;
margin-top:-25px; /* SHOULD equal height * -0.5, but can vary for different fx */
line-height:50px; /* Remove if there may be more than one line inside */
}

Javascript inside of iframe. Scraping with watir

I'm trying to figure out WATIR.
Here is a situation. I want to monitor ads in few websites, but scraping them is not easy task because they are in iframe, then there is another iframe links which is generated with javascript. Only then comes the page which I would like to get.
Here is the code in main page:
<iframe width="300" height="250" scrolling="no" frameborder="0"
id="adbottomleft" src="/ad/left1" name="adbottomleft"></iframe>
Here is what the iframe says:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
background-color: black;
margin:0;
padding:0;
}</style>
</head>
<body>
<!-- Rubicon Project Tag -->
<!-- Site: MangaReader Zone: ROS_BTF_LEFT Size: Medium Rectangle -->
<div id="adfooter" style="width:300px;height:250px;"></div>
<script language="JavaScript" type="text/javascript">
function tl(){
var loaded = 0;
try {
loaded = parent.document['adver'];
} catch(e) { loaded = 0; }
if (loaded != 1) {
setTimeout(tl, 25);
} else {
var dest = document.getElementById('adfooter');
var lframe = document.createElement('iframe');
lframe.setAttribute('id','adbleft');
lframe.setAttribute('width','300');
lframe.setAttribute('height','250');
lframe.setAttribute('scrolling','no');
lframe.setAttribute('frameborder', '0');
lframe.setAttribute('src', 'http://ad.mangareader.net/btleft1');
dest.appendChild(lframe);
}
}
(function (){
tl();
}());
</script>
</body>
</html>
It does generate another iframe which looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
</head>
<body>
<!-- Rubicon Project Tag -->
<!-- Site: MangaReader Zone: ROS_BTF_LEFT Size: Medium Rectangle -->
<script language="JavaScript" type="text/javascript">
var cb = Math.random();
var d = document;
var iframe = "&fr=" + (window != top);
var ref = "";
try {
if (window != top) {
ref = "&rf="+escape(d.referrer);
}
} catch (ignore) { }
d.write("<iframe id='25504.15' name='25504.15' src='' framespacing='0' frameborder='no' scrolling='no' align='middle' width='300' height='250' marginheight='0' marginwidth='0'></iframe>");
d.getElementById('25504.15').src='http://optimized-by.rubiconproject.com/a/8240/13310/25504-15.html?cb='+cb+ref;
</script>
</body>
</html>
Only then comes the final page which I'm interested to scrape.
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css"> body {margin:0px; padding:0px;} </style>
<script type="text/javascript">
rubicon_cb = Math.random(); rubicon_rurl = document.referrer; if(top.location==document.location){rubicon_rurl = document.location;} rubicon_rurl = escape(rubicon_rurl);
window.rubicon_ad = "3260765" + "." + "js";
window.rubicon_creative = "3299047" + "." + "js";
</script>
</head>
<body>
<img src="http://assets.rubiconproject.com/campaigns/100/91/16/5/1325630095ap_300.jpg" border="0" alt="AnimePremium.net" /><script defer="defer" type="text/javascript">
{
if (Math.floor(Math.random()*100) < 1)
{
var url;
var iframe = (window != top);
url = "http://tap.rubiconproject.com/stats/iframes?pc=8240/13310&ptc=25504&upn="+iframe;
setTimeout(function(){ new Image().src = url }, 1000);
}
}
</script>
<script>var _comscore = _comscore || []; _comscore.push({ c1: "8", c2: "6135404", c3: "28", c4: "13310", c10: "3299047" }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })();</script><DIV STYLE="height:0px; width:0px; overflow:hidden"><IFRAME SRC="http://tap2-cdn.rubiconproject.com/partner/scripts/rubicon/emily.html?rtb_ext=1&pc=8240/13310&geo=eu" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="0" HEIGHT="0" style="height:0px; width:0px"></IFRAME></DIV>
</body>
</html>
Impossible task?
here is what I'm doing.
irb
require "watir-webdriver"
browser = Watir::Browser.new :ff
browser.goto "mangareader.net"
browser.frame(:id, "adbottomleft").html - Works!
If I want to get one more layer down I get error
irb
require "watir-webdriver"
browser = Watir::Browser.new :ff
browser.goto "mangareader.net"
browser.frame(:id, "adbottomleft").frame(:id, "adleft").html -> Don't work.
Element belongs to a different frame than the current one - switch to it's containing frame to use it.
What should I change in the 2nd code to make it read the next iframe?
I have been searching for days. Started with selenium then htmunit with c# then tried mechanize with python, but couldn't achieve wanted results.
I keep jumping. I finally thought that I will be able to achieve what I wanted with WATIR.
I need some help to get this done. Any tips?
The ID of the frame created by the script is "adbleft" not "adleft" that might be your problem
browser.frame(:id => "adbottomleft").frame(:id => "adbleft").html
If the id of the final frame is not static, you might have to select it by index
browser.frame(:id => "adbottomleft").frame(:id => "adbleft").frame(:index => 0)

Using JavaScript to "animate" my webpage

I thought I'd write a simple script to animate my webpage a little.
The basic idea was to make a div grow bigger, when I push a button once and then shrink to it's original size, when I push it again. I handled the growing part well, but I can't get it to shrink again.
I'm including a complete example, could you help me fix it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="Estonian" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
</head>
<body>
<script type="text/javascript">
var i;
var increasing = new Boolean("true");
var height;
function testFunction() {
height = parseInt(document.getElementById("testDiv").offsetHeight);
if( increasing == true ) {
i = height + 4;
document.getElementById("testDiv").style.height = i + "px";
if( height >= 304 ) {
increasing = false;
}
else {
pause(30);
}
}
else {
i = height - 4;
document.getElementById("testDiv").style.height = i + "px";
if( height <= 104 ) {
increasing = true;
}
else {
pause(30);
}
}
}
function pause(ms) {
setTimeout("testFunction()", ms);
}
</script>
<button id="button" type="button" onclick="testFunction();">Do it!</button.
<div id="testDiv" style="border: 2px solid black; width: 400px; height: 100px; text-align: center;">
Hello!
</div>
</body>
</html>
Use a standard library like jQuery to do this, don't do it yourself as it won't be cross-browser for sure.
With jQuery, you can do things like this:
$("#div-id").animate({"height": 300}, 1000);
That'll change the div height to 300 px in 1000 ms = 1 second.

Categories

Resources