I'm having some trouble with my countdown page for WinXP.
My code works fine if I open the webpage stored on my local client, even if I open it on the IIS server it shows fine but not when browsing it through it's URL.
It works fine in chrome though.
The problem is that the text-shadow doesnt work, as said before it works on the same browser on same client just not browsed through the IIS.
The code is a little messy but my HTML skills are not what you call "Professional", somebody maybe can help me to locate the problem? :)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="refresh" content="120">
<title> XP COUNTDOWN!!! </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="bg">
<div id="Wrapper">
<script type="text/javascript">
dateFuture1 = new Date(2014,3,8,1,0,00);
function GetCount(ddate,iid){
dateNow = new Date();
amount = ddate.getTime() - dateNow.getTime();
delete dateNow;
if(amount < 0){
document.getElementById(iid).innerHTML="Now!";
}
else{
days=0;hours=0;mins=0;secs=0;out="";
amount = Math.floor(amount/1000);
days=Math.floor(amount/86400);
amount=amount%86400;
hours=Math.floor(amount/3600);
amount=amount%3600;
mins=Math.floor(amount/60);
amount=amount%60;
secs=Math.floor(amount);
if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
out += mins +" "+((mins==1)?"min":"mins")+", ";
out += secs +" "+((secs==1)?"sec":"secs")+", ";
out = out.substr(0,out.length-2);
document.getElementById(iid).innerHTML=out;
setTimeout(function(){GetCount(ddate,iid)}, 1000);
}
}
window.onload=function(){
GetCount(dateFuture1, 'countbox1');
};
</script>
<div id="Shadow">
<script type="text/javascript">
var OSName="Unknown OS";
var johan=navigator.appVersion
if (navigator.appVersion.indexOf("Windows NT 6.3")!=-1) {
OSName="Windows 8.1";
var str = "Du kör " +OSName + " du kanske skulle nedgradera";
var str = str.fontsize(70);
var str = str.fontcolor("red");
document.write(str)
}
if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1) {
OSName="Windows XP";
var str = "Du kör " +OSName + " du borde uppgradera!!!";
var str = str.fontsize(70);
var str = str.fontcolor("red");
document.write(str)
}
if (navigator.appVersion.indexOf("Windows NT 6.1")!=-1) {
OSName="Windows 7";
var str = "Du kör Windows 7, du behöver inte uppgradera"
var str = str.fontsize(70)
var str = str.fontcolor("green")
document.write(str)
}
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
// var str = "You are running" +OSName;
// var str = str.fontsize(70);
// var str = str.fontcolor("red");
// document.write(str)
</script><br>
</div>
<div id="countbox1" style="font:80pt Arial;color:#ffffff;text-shadow: 1px 1px 1px #120D0D;"></div>
<div id="Shadow">
<font size="50" face="Arial" color="white">Tills XP DÖR!!!</font> <br>
<font face="Arial" size="50" color="white">XP LEFT in domain</font> <br>
<img src="ripxp.png" alt="" height="395" width="377"><br>
<font face="Arial" size="40" color="white">Countdown by Johan L</font> <br>
</div>
</div>
</div>
</body>
</html>
CSS (style.css):
/* CountdownXP */
#WhiteSpace
{
margin-top:70;
}
#Wrapper
{
height: 980px;
text-align:center;
padding-top:100px;
}
#bg
{
background-image:url("wpxp.jpg");
background-repeat:repeat-x;
height: 1200;
}
#Header
{
}
#RipXP
{
background-image:url("ripxp.JPG");
}
#Shadow
{
font-color: white;
font-family: Arial;
text-shadow: 1px 1px 1px #120D0D;
}
Related
Before I linked bootstrap to html file, the buttons were working. I got "uncaught typeerror cannot read property addeventlistener" error. after linking to bootstrap. I fixed the error after reviewing previous suggestions by linking jQuery and using $(document).ready() method. There are three buttons. First one to change color. The second one is to switch the list. The last one is to do a multiplication. Both first one and the third buttons are working except the second one. The style.css is saved in a separate file.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<div class="container">
<div class="row">
<body>
<div id="col1" class="col-md-4">
<p>Lorem Ipsum</p>
<button id="change-color">Change Color</button>
</div>
<div id="col2" class="col-md-4">
<ul id="colorlist">
<li>Red</li>
<li>Green</li>
</ul>
<ul id="animalist">
<li>dog</li>
<li>cat</li>
</ul>
<button type="button" id="switch-list">Switch</button>
</div>
<div class="col-md-4">
<input id="value1" type="text" value="5">
<input id="value2" type="text" value="6">
<button id="multiply">Multiply</button>
<hr>
<!--empty paragraph-->
<p id="result"></p>
</div>
<hr>
<div class="col-md-12">
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var btnSwitch = document.body.children[1].children[2];
var colorlist = document.body.children[1].children[0];
var animallist = document.body.children[1].children[1];
$(document).ready(function () {
btnSwitch.addEventListener("click", function (e) {
if (colorlist.style.display != "none") { // If #colorlist is displayed
colorlist.style.display = "none"; // Hide #colorlist
animallist.style.display = "block"; // Show #animallist
} else { // Else
animallist.style.display = "none"; // Hide #animallist
colorlist.style.display = "block"; // Show #colorlist
}
});
});
$(document).ready(function () {
var btnChange = document.getElementById("change-color");
btnChange.addEventListener("click", function (e) {
var col1 = document.getElementById("col1");
switch (col1.style.color) {
case "red":
col1.style.color = "green";
break;
case "green":
col1.style.color = "blue";
break;
case "blue":
col1.style.color = "black";
break;
case "black":
col1.style.color = "purple";
break;
default:
col1.style.color = "red";
break;
}
});
});
var btnMultiply = document.getElementById("multiply");
var inputValue1 = document.getElementById("value1");
var inputValue2 = document.getElementById("value2");
btnMultiply.addEventListener('click', function (e) {
var val1 = inputValue1.value;
var val2 = inputValue2.value;
if (isNaN(val1) || isNaN(val2)) {
//replace alert box with DOM manipulation
//alert("At least one of the values is not a number");
result.innerHTML = "one or both of the input values is invalid";
result.style.color = "red";
} else {
//alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
result.style.color = "green";
}
});
function validateNumber() {
if (isNaN(this.value)) {
this.style.border = "2px solid red";
} else {
this.style.border = "";
}
}
inputValue1.addEventListener("keyup", validateNumber)
inputValue2.addEventListener("keyup", validateNumber)
</script>
</body>
</html>
I appreciate your feedback.
Thanks
I used $(documnent).ready() to fix 2 errors out of three. I couldn't solve the third error by using the same method.
In your code snippet you only loaded the CSS of Bootstrap and this should not interfere with your JQuery. I don't know what did cause your issue, but my guess is you made some changes in your HTML structure and this interfered with how you have set up the manner in which to return page elements:
var btnSwitch = document.body.children[1].children[2];
The danger of selecting your elements this way is that a small change in your HTML can break it. Unless you specifically want to target a child or parent of a given element, the better way would be to use:
var btnSwitch = document.getElementById('switch-list')
It's also much easier to read code! Since you already use getElementById() in other parts of your code, I assume you know how it works.
Moving on.
You use $(document).ready(function () { ... }) twice in your code. Shouldn't be an issue, but if the first ready() method throws an error, the second block will not be executed. So if there is no specific need for it, just declare it once. And define your vars inside the (nameless) function, if you're using it.
You also have a mistake in your HTML, having div elements before the open <body> tag, but this might happened when you copied your code in your question.
Fixed example
$(document).ready(function() {
var btnSwitch = document.getElementById('switch-list')
var colorlist = document.getElementById('colorlist')
var animallist = document.getElementById('animalist')
var btnChange = document.getElementById("change-color")
var btnMultiply = document.getElementById("multiply")
var inputValue1 = document.getElementById("value1")
var inputValue2 = document.getElementById("value2")
btnSwitch.addEventListener("click", function(e) {
if (colorlist.style.display != "none") { // If #colorlist is displayed
colorlist.style.display = "none"; // Hide #colorlist
animallist.style.display = "block"; // Show #animallist
} else { // Else
animallist.style.display = "none"; // Hide #animallist
colorlist.style.display = "block"; // Show #colorlist
}
});
btnChange.addEventListener("click", function(e) {
var col1 = document.getElementById("col1");
switch (col1.style.color) {
case "red":
col1.style.color = "green";
break;
case "green":
col1.style.color = "blue";
break;
case "blue":
col1.style.color = "black";
break;
case "black":
col1.style.color = "purple";
break;
default:
col1.style.color = "red";
break;
}
});
btnMultiply.addEventListener('click', function(e) {
var val1 = inputValue1.value;
var val2 = inputValue2.value;
if (isNaN(val1) || isNaN(val2)) {
//replace alert box with DOM manipulation
//alert("At least one of the values is not a number");
result.innerHTML = "one or both of the input values is invalid";
result.style.color = "red";
} else {
//alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
result.style.color = "green";
}
});
function validateNumber() {
if (isNaN(this.value)) {
this.style.border = "2px solid red";
} else {
this.style.border = "";
}
}
inputValue1.addEventListener("keyup", validateNumber)
inputValue2.addEventListener("keyup", validateNumber)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="col1" class="col-md-4">
<p>Lorem Ipsum</p>
<button id="change-color">Change Color</button>
</div>
<div id="col2" class="col-md-4">
<ul id="colorlist">
<li>Red</li>
<li>Green</li>
</ul>
<ul id="animalist">
<li>dog</li>
<li>cat</li>
</ul>
<button type="button" id="switch-list">Switch</button>
</div>
<div class="col-md-4">
<input id="value1" type="text" value="5">
<input id="value2" type="text" value="6">
<button id="multiply">Multiply</button>
<hr>
<!--empty paragraph-->
<p id="result"></p>
</div>
<hr>
<div class="col-md-12">
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
I have some code (as below) that allows me to open and display a csv file in Firefox from a location on my hard drive. I'd like to add a search box so it will filter the list when text is entered. I've seen some other working examples that had the table data stored between tags, but I can't get this to work when it's pulling the data from an external file location. I'm really new to JavaScript and this is a bit over my head so if anyone has any pointers i'd appreciate it..
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Try this solution :
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
var searchKey = "";
function myFunction(e){
searchKey = e.value;
}
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
if(!cell_data[cell_count].includes(searchKey) && cell_count == 0){
break;
}
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Keep in mind that this solution only works if you're going to search within the first column only
I have 2 divs and I am trying to swap them around automatically every Sunday at 11:59. My divs:
Could anyone help please?
<html>
<head>
<title>HTML Title</title>
<script>
function changeDiv(){
var d = new Date();
if (d.getDay == 0 && d.getHours == 11 && d.getMinutes == 59) {
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
}
</script>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
This brother will be the right answer. The first code I have given you will only change the name of the div container but do not swap two divs to which one will display.
Give it a try by running this snippet (in this example it changes the div to display and indicate which div is displayed.
function changeDiv(){
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
<html>
<head>
<title>HTML Title</title>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
So I was adding the blinking text widget in the sidebar of my website.
I am using the following code to do it,
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Blink Text using JavaScript</title></style>
<script language="javascript">
setInterval(blinktext, 500);
var txt = "";
var count = 0;
function blinktext() {
var cntrl = document.getElementById("txtblinkingtext");
if (count == 0)
txt = cntrl.value;
if (count % 2 == 0)
cntrl.value = "";
else
cntrl.value = txt;
count++;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin: auto; text-align: center;">
<input type="text" id="txtblinkingtext" name="txtblinkingtext" value="NEWS STREAM"
readonly="readonly" style="height: 20px; width: 300px; background-color: #E64946;
color: White; border: 0px none; text-align: center;">
</div>
</form>
</body>
</html>
I just wanted to know how to use Bold or Strong method on "NEWS STREAM" text value
You have a </style> tag hanging, remove it.
In your input style, add font-weight:bold. But, you'd rather have a CSS file with that rather than style in the HTML like this, it's not too pretty.
Html- i am writing a program so that the user clicks on an image and is linked to another image and to another i can do it for one image but am struggling with the code to make the second image link to the third and so on any suggestions greatly appreciated?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript">
var clockID = 0;
function UpdateClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
var tDate = new Date();
document.theClock.theTime.value = ""
+ tDate.getHours() `enter code here`+ ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();
clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
clockID = setTimeout("UpdateClock()", 500);
}
function KillClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
}
</script>
<body onload="StartClock()" onunload="KillClock()">
<form name="theClock">
<input type=text name="theTime" size=8 style="text-align: center">
</form>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecodes.com/"><span style="font-size: 8pt; text-decoration: none"></span></a></font>
<A HREF = "img2.png">
<img src= "img1.png">
<!--<A HREF = "img4.png">
<img src= "img3.png"> </a>-->
</body>
</html>