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>
Related
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.
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;
}
The image should resize (up to max) but I need the navigation div to always be visible. At the moment it is being hidden when I resize the browser. Ideally it should move up with the image.
here is the code I have already. Also, is there a way of placing the image in the centre of the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
This can be rectified using some scripting
<html>
<head>
<script type = "text/javascript">
window.onload = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
window.onresize = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img id="test" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
I hope it works...!