ELATED: Authoring and Programming http://www.elated.com/ The nitty-gritty of coding websites. Get help with HTML, CSS, JavaScript, PHP, Perl, or any other Web programming problem. en-us Sun, 26 Mar 2017 05:20:00 GMT Sun, 26 Mar 2017 05:20:00 GMT http://blogs.law.harvard.edu/tech/rss ELATED.com feeder Re: Mobie App vs Mobile Browser Site http://www.elated.com/forums/topic/6238/#post26466 From: stewartcristan


When it comes to deciding whether to build a mobile app or a mobile website, the most appropriate choice really depends on your goals. If you are developing an interactive game an app is probably the way to go.But if your goal is to offer mobile-friendly content to audience then a mobile website is probably going to be your best option.

[Edited by stewartcristan on 21-Mar-17 00:44]

View » | Reply »

]]>
Tue, 21 Mar 2017 05:43:48 GMT http://www.elated.com/forums/topic/6238#post26466
Re: I need some help! http://www.elated.com/forums/topic/6286/#post26461 From: chrishirst


A background what?

Image?

or

Colour?

Also "screen" may not apply to the display of a web page, as the user may not be using their browser at 'full screen', on "mobile" devices generally browsers do run at full screen width but desktop machines probably not.

So you have to consider the viewport width rather than the 'screen width'

http://www.quirksmode.org/mobile/viewports.html

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sun, 19 Mar 2017 18:21:23 GMT http://www.elated.com/forums/topic/6286#post26461
Re: I need some help! http://www.elated.com/forums/topic/6286/#post26460 From: MikeFich62


I don't know how to explain it, but I don't know an effective way to cut off a background so that it doesn't go the whole way across the screen. I don't know if it's a good way to explain. I'll check those links to see if there's a solution!

Thanks

View » | Reply »

]]>
Sun, 19 Mar 2017 13:18:06 GMT http://www.elated.com/forums/topic/6286#post26460
Re: I need some help! http://www.elated.com/forums/topic/6286/#post26459 From: chrishirst


Sure, it's the kind of thing I do by answering questions at a couple of websites (my own included), though knowing what you are stuck on would make it easier.

However, here are two things everybody needs to know when starting out so I wrote an 'article' on.

Positioning, http://webmaster-talk.eu/articles/8-website-development-and-design/13-css-positioning

and

Document/Element 'flow', http://webmaster-talk.eu/cat-quick-tips/14-qt-webdev-and-site-management/16-qt-document-flow

The two are closely related and their effects and their use are what many developers, both old and new do not quite understand so do use inappropriately.
Positioning is also something that the majority of popular "visual" (drag 'n' drop) editors do quite badly.

And to be fair, I know much more about the 'mechanics' of CSS that I do about the aesthetics, so I leave 'design' to others while I stick to development issues, the two are often confused and conflated into the one thing as being 'design', so I differentiate, by using "design" as being the 'look and feel' of the pages with "development" being the underlying structure of elements and styling.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sun, 19 Mar 2017 13:04:35 GMT http://www.elated.com/forums/topic/6286#post26459
Re: Build a CMS in an Afternoon with PHP and MySQL http://www.elated.com/forums/topic/5114/#post26458 From: chrishirst


Cool, I'm actually working on a comments system for myself, don't hold your breath until it's ready though

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 18 Mar 2017 21:56:57 GMT http://www.elated.com/forums/topic/5114#post26458
Re: I need some help! http://www.elated.com/forums/topic/6286/#post26457 From: MikeFich62


Alright, thanks!
I don't know if it would be asking too much, but could you teach me a little CSS? I know some basics but I would like to learn more!

Thanks!

[Edited by MikeFich62 on 18-Mar-17 16:53]

View » | Reply »

]]>
Sat, 18 Mar 2017 21:53:17 GMT http://www.elated.com/forums/topic/6286#post26457
Re: I need some help! http://www.elated.com/forums/topic/6286/#post26456 From: chrishirst


Okay, javascript is not particularly a requirement for 'professional' websites but something you do need are design skills.

Making "moving, flashing, things" with javascript is not really professional. UNLESS it is a website for the local Bordello of course.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 18 Mar 2017 21:44:22 GMT http://www.elated.com/forums/topic/6286#post26456
Re: I need some help! http://www.elated.com/forums/topic/6286/#post26455 From: MikeFich62


I really just need to get better with CSS and javascript. Youtube videos just can't answer questions instantly, and I want my pages to look more proffesional. Thanks!

View » | Reply »

]]>
Sat, 18 Mar 2017 20:55:38 GMT http://www.elated.com/forums/topic/6286#post26455
Re: I need some help! http://www.elated.com/forums/topic/6286/#post26453 From: chrishirst


" Can anyone help me out? "

With what??


"but I don't think it's enough to design a nice good looking Web page"

It might be, ... and then again it might not be. ... It really depends on what your goal actually is.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 18 Mar 2017 20:34:16 GMT http://www.elated.com/forums/topic/6286#post26453
I need some help! http://www.elated.com/forums/topic/6286/#post26452 From: MikeFich62


I recently got into programming after I saw my friend's father make an app, so I decided to start with Javascript. I watch some tutorials on youtube about JS, HTML and CSS, but I don't think it's enough to design a nice good looking Web page. Can anyone help me out? I've already made a very simple page but I have not hosted it yet.

View » | Reply »

]]>
Sat, 18 Mar 2017 20:12:53 GMT http://www.elated.com/forums/topic/6286#post26452
Re: Mobie App vs Mobile Browser Site http://www.elated.com/forums/topic/6238/#post26451 From: saintdavid


Hi,
As per discussion with lot of people on this topic, I have reached at point is that Mobile app is more easier to mobile browser site. Through mobile app any client or visiter can buy or download product or their features.

Link dropping removed

[Edited by chrishirst on 17-Mar-17 09:54]

--
Web Design Houston

View » | Reply »

]]>
Fri, 17 Mar 2017 06:58:32 GMT http://www.elated.com/forums/topic/6238#post26451
Re: HTML Table FilterJavaScript http://www.elated.com/forums/topic/6285/#post26448 From: chrishirst


javascript will only change CSS properties that have already been set by javascript, so you will need to first set the property you want to change on ALL the table cells using javascript when the document first loads.


Plus:

Toggling the display property on a table cell WILL 'break' the table structure because "display: none;" effectively removes the element from the row. To 'hide' the cell content use the 'visibility' property instead.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Wed, 15 Mar 2017 18:43:19 GMT http://www.elated.com/forums/topic/6285#post26448
Re: Build a CMS in an Afternoon with PHP and MySQL http://www.elated.com/forums/topic/5114/#post26447 From: Gascogne


Great tutorial.

Would very much like to see a follow-up tutorial for:
"A user comments system".

The same way you did with the tutorial:
"An image upload facility (I've written a follow-up tutorial on adding an image upload feature to the CMS)".

View » | Reply »

]]>
Wed, 15 Mar 2017 18:40:11 GMT http://www.elated.com/forums/topic/5114#post26447
HTML Table FilterJavaScript http://www.elated.com/forums/topic/6285/#post26444 From: Hopeless


Firstly I'm extremely new to Javascript and HTML so please bear with me.

I'm trying to create a filter on a pre-populated HTML table. The table is generated from a CSV file, using Powershell.

I found a piece of JS code in w3 schools which seems to do what I want, but it doesn't seem to run. My HTML code is as follows:


Code:
--------------------
<!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>Table</title>
<script type="text/javascript">
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementsByTagName("Table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script><style>

Body {

background-color:#FFFFFF;
color:#000000;
font-family:Arial Narrow,sans-serif;
font-size:17px;

}


table {

border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;


}

Table th, Table td {
text-align: left;
padding: 12px;
}

td {

border-width: 1px;
padding: 8px
border-style: solid
border-color: black;
background-color:#FFFFFF


}

tr {

border-bottom: 1px solid #ddd;
}

Table tr.header, Table tr:hover {

background-color: #f1f1f1;
}


</style>
</head><body>
<h1>History</h1><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table>
<colgroup><col/><col/><col/><col/><col/><col/></colgroup>
<tr><th>Date</th><th>Time</th><th>Machine</th><th>Username</th><th>Session</th><th>Logon Server</th></tr>
<tr><td>00/00/2017</td><td>53:56.4</td><td>Machine Name</td><td>Username</td><td>Session Name</td><td>\\Logon Server </td></tr>
</table>
</body>
</html>
--------------------


The table etc displays as I want, but the filter just doesn't seem to run.

Any help is greatly appreciated.

Thanks,

A Hopeless Scripter.

View » | Reply »

]]>
Wed, 15 Mar 2017 10:26:49 GMT http://www.elated.com/forums/topic/6285#post26444
Re: Javascript homework help http://www.elated.com/forums/topic/6283/#post26442 From: ruebumble


Here's the CSS


Code:
--------------------


.canvasBox{
width: 800px;
height: 500px;
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #888;
}
--------------------


Here's the HTML



Code:
--------------------
<!DOCTYPE HTML>

<html>



<head>

<title>Webpage Title</title>

<link rel="stylesheet" type="text/css" href="styles/styles.css" />

</head>



<body>

<div class="canvasBox">

<canvas id="myCanvas" width="800" height="500">
This text is displayed by browsers that do not support the HTML5 canvas.
</canvas>

</div>

<script src="scripts/scripts.js"></script>

</body>



</html>

--------------------


View » | Reply »

]]>
Mon, 13 Mar 2017 01:05:38 GMT http://www.elated.com/forums/topic/6283#post26442
Re: Javascript homework help http://www.elated.com/forums/topic/6283/#post26441 From: chrishirst


No idea, ... ....


... Does your HTML code have a 'canvas' element with an ID of myCanvas?????

Does it exist before the javascript is called???


Plus several other questions that you have not provided code or context for.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sun, 12 Mar 2017 19:20:47 GMT http://www.elated.com/forums/topic/6283#post26441
Javascript homework help http://www.elated.com/forums/topic/6283/#post26440 From: ruebumble


I'm at the point of pulling my hair out over this assignment, any help is appreciated.

"This code is broken. Currently, when you load the website in a web browser, it appears to do nothing. It’s JavaScript file is crippled by a single ‘bug’ or programming error. You must de-bug the script by finding and fixing that error. If you do, when you load the webpage in a browser, you will see something cool (ie. visually interesting) as your reward.

The JavaScript is actually fundamentally okay. In fact, nothing that is currently in the JavaScript needs to be removed or even modified to make it work. You need only add some new JavaScript to fix everything."
Here's the script below



Code:
--------------------
// ** initializations

// reference the canvas element
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// initialize variables
var blobArray = [];



// ** functions

function Init() {

for (x = 0; x<100; x++) {

var blob = {
x: canvas.width/2,
y: canvas.height/2,
size: Math.random() * 50,
xSpeed: Math.random() * 10 - Math.random() * 10,
ySpeed: Math.random() * 10 - Math.random() * 10,
color: '#' + Math.floor(Math.random()*16777215).toString(16)
}

blobArray.push(blob);
}

}


function MainLoop() {

// update the canvas
DrawCanvas();

// repeat this function every 10 microseconds
window.setTimeout(MainLoop, 10);

}


function DrawCanvas() {

context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < blobArray.length; i++) {

blob = blobArray[i];
context.fillStyle = blob.color;
context.fillRect(blob.x, blob.y, blob.size, blob.size);

blob.x = blob.x + blob.xSpeed;
blob.y = blob.y + blob.ySpeed;

if (blob.x > canvas.width || blob.x < 0 || blob.y > canvas.height || blob.y < 0) {
blob.x = canvas.width/2;
blob.y = canvas.height/2;
blob.xSpeed = Math.random() * 10 - Math.random() * 10;
blob.ySpeed = Math.random() * 10 - Math.random() * 10;
}

}

}



// ** start

Init();

--------------------


View » | Reply »

]]>
Sun, 12 Mar 2017 01:00:01 GMT http://www.elated.com/forums/topic/6283#post26440
Re: Javascript help http://www.elated.com/forums/topic/6282/#post26439 From: chrishirst


"and i only try 2 times which i want no max tries"

This;

if (parameterNumTries <= 2) {

says, in English;

If number of tries is equal to or less than a value of two ... ...



And;

"its not showing the result that in entered"

you do not 'print' out the value of the variable 'guess' anywhere in the code.

All the variable 'msg' has is 'guesses'.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 11 Mar 2017 10:59:01 GMT http://www.elated.com/forums/topic/6282#post26439
Re: Javascript help http://www.elated.com/forums/topic/6282/#post26438 From: sp1


its not showing the result that in entered and i only try 2 times which i want no max tries

View » | Reply »

]]>
Fri, 10 Mar 2017 18:43:51 GMT http://www.elated.com/forums/topic/6282#post26438
Re: Javascript help http://www.elated.com/forums/topic/6282/#post26437 From: chrishirst


Define "not working completely."

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Fri, 10 Mar 2017 17:26:01 GMT http://www.elated.com/forums/topic/6282#post26437
Javascript help http://www.elated.com/forums/topic/6282/#post26436 From: sp1


I am trying to create a guessing game but it not working completely.



Code:
--------------------
// Setup a random number between 1 and 100
var minValue = 1;
var maxValue = 100;
var argumentNumToGuess = Math.floor((Math.random() * maxValue) + 1);


// This function is the main game loop.
function playgame (parameterNumToGuess) {
"use strict";
var numToGuess = parameterNumToGuess;
var guessed = false;
var message = "Guess a number between 1 and 100.";

var guesses = [];
var guess = parseInt(prompt(message));
guesses.push(guess);

do {
numToGuess
if (guess === numToGuess) {

message = successMessage(guesses.length);

message = "You guessed the number in " + guesses.length + " tries. It was " + numToGuess + "!";
alert(message);
guessed = true;
} else if (guess < numToGuess) {
message = "You have guessed " + guesses + ". ";
message += "Your guess is too low. Try again!";
guess = parseInt(prompt(message));
guesses.push(guess);
} else {
message = "You have guessed " + guesses + ". ";
message += "Your guess is too high. Try again!";
guess = parseInt(prompt(message));
guesses.push(guess);
}
// Exit the game immediately if an out of range value is entered.
if ((guess < minValue) || (guess > maxValue)) {

guessed = true;
message = "Game aborted! The number was " + numToGuess + ".";
alert(message);
break;
}
} while (guessed);
}

playgame (argumentNumToGuess);


function successMessage (parameterNumTries) {
"use strict";
var msg;
if (parameterNumTries <= 2) {
msg = "Unbelievable! Are you psychic?\n";
} else if (parameterNumTries <= 6) {
msg = "Congratulations! Great job!\n";
} else if (parameterNumTries <= 9) {
msg = "Good try?!?\n";
} else {
msg = "Ouch! Did you increment each guess by 1?!?\n";
}
return msg;

}


--------------------


[Edited by sp1 on 09-Mar-17 11:46]

View » | Reply »

]]>
Thu, 09 Mar 2017 17:44:02 GMT http://www.elated.com/forums/topic/6282#post26436
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26434 From: chrishirst


Okay, sounds like you might be using ASP.NET then, this being the default framework for IIS

So http://www.tek-tips.com/threadminder.cfm?pid=855

And there are several languages supprted by the framework, VB.NET and C# (Csharp) being two of them.

http://www.tek-tips.com/threadminder.cfm?pid=796
http://www.tek-tips.com/threadminder.cfm?pid=732

You may need an account to access those links.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Mon, 06 Mar 2017 22:49:04 GMT http://www.elated.com/forums/topic/6281#post26434
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26433 From: daeidon


Thank you for the very thorough explanation of how to approach this. You are the first person to suggest anything helpful.

I'm using IIS on the server and I already have PHP/MySQL running for Mediawiki. Anything that can be run on IIS I'm open to trying. I've never used PHP and in the past I've only attempted javascript, if at all, for anything.

So you basically answered my original question of, "how do I make this happen?" Now I just need to figure out the coding and comeback to you guys if it works... or doesn't work.

View » | Reply »

]]>
Mon, 06 Mar 2017 18:42:46 GMT http://www.elated.com/forums/topic/6281#post26433
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26432 From: chrishirst


"If so, what coding can I use to alter the content on the webpage without having to manually alter the code in an editor?"

Assuming the time is coming from a server being accessed via HTTP you would use the standard method of POSTing 'form' values to a URL that updates the parameters the server system uses to generate the data.

You seem to be stuck with the idea that this has to be done via a browser context, which is only true when a system has to be 'publicly accessible', on many disparate system, whereas I would surmise this is a closed system that is only available to 'in-house' operators.

You cannot ask "what language should this be developed in" until you have defined ALL the operating parameters.

Personally I would avoid the browser idea simply because of this;

"It should update automatically (no need to refresh the page)"

This is not something that browsers do very well, simply because they are designed to operate via HTTP, which is what is known as a "disconnected protocol". Meaning that it operates without the client having to be connected to a server continuously. The way it works is that the client makes a GET request to the server, then waits until the correct number of bytes have been delivered (or a timeout occurs) then 'drops' the connection so no matter what happens on the server no more communication will occur until a new request is made such as being 'refreshed'. When you try to make javascript continually refresh (server polling) 'bad things happen', and within a few iterations the browser (and probably the computer) WILL become unresponsive in a rather short space of time.

Now in HTML5 there is a feature called "Server-Sent Events" also known as 'Push Notifications' (https://www.w3schools.com/html/html5_serversentevents.asp) which are probably of no use at all, because as per usual Microsoft are WAY behind the evolutionary process of the Internet and Infernet Exploder does NOT really support this currently.


Depending of what operating systems this application has to run on would define what language(s) you could actually use to poll the server and display the data. Plus given the reason for this you may have to meet certain legal requirements, and or regulatory body requirements for the operation.

Personally I would be looking at using a Python client (https://www.python.org/) and a PHP/MySQL server application. (http://php.net/ https://www.mysql.com/), but if your environment is M$ Windows you may have to use a DOT NET Framework client (https://www.microsoft.com/net).

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sun, 05 Mar 2017 18:58:03 GMT http://www.elated.com/forums/topic/6281#post26432
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26431 From: daeidon


Okay if Javascript isn't the way, what code should I use to make this happen?

Would this code work for pulling newly altered content?


Code:
--------------------
setInterval(function(){
$('#my_div').load('/path/to/server/source');
}, 2000) /* time in milliseconds (ie 2 seconds)*/
--------------------


If so, what coding can I use to alter the content on the webpage without having to manually alter the code in an editor?

View » | Reply »

]]>
Sun, 05 Mar 2017 00:35:58 GMT http://www.elated.com/forums/topic/6281#post26431
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26430 From: chrishirst


"If you're asking what code am I attempting to use to do this I don't even have one because I don't know how to code it."

The problem there is; javascript is all client side and what one user does will not be reflected in what other users see. So you need some server code. Plus as this seems to be a "mission critical" operation, javascript is far from ideal to handle it.
javascript runs in a browser context and because js is single threaded it does NOT continually refresh a URL as it tends to run out of resources rather quickly and crash the browser.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 04 Mar 2017 22:48:45 GMT http://www.elated.com/forums/topic/6281#post26430
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26429 From: daeidon


You've given me plenty of advice. So far I have a clock that will updated automatically with AJAX/NTP.

If it makes it any easier I will try and show you the logic behind what I'm attempting to do.

read (time module)
if ((time module) > (current time+1hour)) -> show altered time
else
show (current time)+ 1 hour

if (button A) is press -> alter (time module) to AA:AA
if (button B) is press -> alter (time module) to BB:BB


If you're asking what code am I attempting to use to do this I don't even have one because I don't know how to code it. My knowledge of Javascript sucks and I'm trying to learn it to make this work.

View » | Reply »

]]>
Sat, 04 Mar 2017 20:53:32 GMT http://www.elated.com/forums/topic/6281#post26429
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26428 From: chrishirst


That article IS for a client side clock, written in javascript, and like any programming language, you periodically check the output data (called polling) and your code takes appropriate actions based on the values.

For example (pseudo-code)

Code:
--------------------
read(x)
if (x==some value) then
do this
else
do something else
end
--------------------


So if you need to synchronise all the network client clocks, set up a NTP (Network Time Protocol) synch on your server and have the read() function be an AJAX call to the server and read the time from a local URL.

However; to offer any advice we first need to know what code the server runs.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 04 Mar 2017 19:28:25 GMT http://www.elated.com/forums/topic/6281#post26428
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26427 From: daeidon


I can create a clock, that is not the issue.

For the sake of argument let's say I used the coding that you posted. How do I then change what that clock shows on the client side and prevent it from continuing to count until it reaches current time +1 hour?

View » | Reply »

]]>
Sat, 04 Mar 2017 16:07:28 GMT http://www.elated.com/forums/topic/6281#post26427
Re: CSS - Help with my website footer http://www.elated.com/forums/topic/6280/#post26426 From: chrishirst


Again, that uses absolute positioning INCORRECTLY.

Using the 'position' property for alignment of elements is a lazy way of solving a non-issue and applying position: relative to the body element is a 'hack' to get around a problem that should not exist in a properly thought out CSS layout.

Do NOT get into the very bad habit of 'fixing' things with 'hacks' or short cuts. Because it WILL come back to haunt you at some future time.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 04 Mar 2017 13:52:52 GMT http://www.elated.com/forums/topic/6280#post26426
Re: CSS - Help with my website footer http://www.elated.com/forums/topic/6280/#post26425 From: ojoaolima


Thank you chrishirst, but someone solved me in a easy way (I guess), like this:


Hi,

If you give the “body” element a relative position, it can then catch any absolute positioned child elements. Try these changes in your css inspector:

body {
background: #f2f2f2;
color: #000000;
font-family: 'CircularStd-Book', helvetica, sans-serif;
font-size: 14px;
line-height: 1.3;
letter-spacing: 0.3px;
width: 100%;
font-weight: normal;

position: relative;
}

#search_form {
position: absolute;
left: 48px;
bottom: -54px;
z-index: 99999;
}

#site_footer_email_phone {
clear: both;

position: absolute;

bottom: -80px;
left: 298px;
text-align: left;
color: #969696;
font-family: 'CircularStd-Book', helvetica neue, helvetica, sans-serif;
font-size: 19px;
font-weight: normal;
letter-spacing: 0.3px;
z-index: 1;
}
And of course, you can change the “bottom” and “left” positions to your liking.

--
Joao Lima

View » | Reply »

]]>
Sat, 04 Mar 2017 12:36:27 GMT http://www.elated.com/forums/topic/6280#post26425
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26424 From: chrishirst


Have you read this ... http://www.elated.com/articles/creating-a-javascript-clock/ ... ?

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 04 Mar 2017 01:53:53 GMT http://www.elated.com/forums/topic/6281#post26424
Re: clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26423 From: chrishirst


"I've tried to mash a few scripts together but they don't work together for one reason or another. "

Using what code

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 04 Mar 2017 01:48:37 GMT http://www.elated.com/forums/topic/6281#post26423
Re: CSS - Help with my website footer http://www.elated.com/forums/topic/6280/#post26422 From: chrishirst


Just thrown this code live on my dev server


demos.chrishirst.co.uk/html5-footer-example.html

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 04 Mar 2017 01:46:24 GMT http://www.elated.com/forums/topic/6280#post26422
clock manipulation in realtime http://www.elated.com/forums/topic/6281/#post26421 From: daeidon


I work for an ambulance company and I would like to create a clock that I can manipulate to show the next available time we would be able to do a non-emergency pickup. The server and the client are all in the same location so we don't have to deal with time zones. Here is a list/idea of how I want it to work.

The time should always show as current time+1 hour (if we're able to round up to the nearest 15 minute integer that would be a bonus XX:15, XX:30, XX:45, XX:00)
It should update automatically (no need to refresh the page)
When the time is manipulated it should say that time until the current real life time reaches current time +1 hour (ex. It's now 1200, the time was manipulated to 1330. The clock will show 1330 until the time is 1231 at which time the clock will show as 1331.)

As far as how to manipulate the time, buttons that say +15 minutes, +30 minutes, +1 hour or a drop down menu of times with submit on the same page would work fine.

I've tried to track down something like this but I can't find anything. I've tried to mash a few scripts together but they don't work together for one reason or another.

Any help at all in trying to get this to work would be appreciated.

View » | Reply »

]]>
Sat, 04 Mar 2017 01:34:18 GMT http://www.elated.com/forums/topic/6281#post26421
Re: CSS - Help with my website footer http://www.elated.com/forums/topic/6280/#post26420 From: chrishirst


Remove the absolute positioning; ... ... I [b]GUARANTEE[/B] that it does NOT do what you think it does.
THIS;


Code:
--------------------
position: absolute;
bottom: 50px;
--------------------

Will NOT set the element 50 pixels from the bottom of the 'page'.


http://webmaster-talk.eu/en/articles/8-website-development-and-design/13-css-positioning

To have a 'real' footer (real in the print sense of 'footer'.

You need a 'wrapper' element that is the first child of the body element, set clear:both on the 'wapper' element. Place your 'footer' (block level) element as a sibling of the 'wrapper' and last child of the body.

For example;


Code:
--------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<meta charset="UTF-8">
<script type="text/javascript">

</script>
<style type="text/css">
body, html {
width: 100;
height: 100%;
background-color: orange;
}
body {
height: 95%;
clear: both;
}
#wrapper {
border: solid 1px black;
width: 100%;
height: 100%
}
footer {
height:4%;
text-align: left;
font-family: 'Griffy', cursive;
}

</style>
<link href="https://fonts.googleapis.com/css?family=Griffy" rel="stylesheet">

</head>
<body>
<div id="wrapper"> </div>
<footer>&copy; Chris Hirst</footer>

</body>
</html>
--------------------



No positioning necessary.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Fri, 03 Mar 2017 22:50:08 GMT http://www.elated.com/forums/topic/6280#post26420
CSS - Help with my website footer http://www.elated.com/forums/topic/6280/#post26419 From: ojoaolima


Hi!

I'm trying to move my email and phone on my website to the end of the page (end of scrolling) but it doesn't move.

Right now it's like this:

#site_footer_email_phone {
position: absolute;
bottom: 50px;
left: 48px;
text-align: left;
color: #969696;
font-family: 'CircularStd-Book', helvetica neue, helvetica, sans-serif;
font-size: 19px;
font-weight: normal;
letter-spacing: 0.3px;

}


I wanted it to be like the my ”©2017 João Lima. All rights reserved.” but on the left side of the website.

My web is:
www.joaolima.pt


Can anyone help me with this?

--
Joao Lima

View » | Reply »

]]>
Fri, 03 Mar 2017 12:47:00 GMT http://www.elated.com/forums/topic/6280#post26419
Re: CSS Problem on mobile end http://www.elated.com/forums/topic/6279/#post26418 From: jbloss


I removed the image sizing info thinking that would help but still doing it. Any ideas on what to try?

View » | Reply »

]]>
Thu, 02 Mar 2017 23:11:37 GMT http://www.elated.com/forums/topic/6279#post26418
Re: CSS Problem on mobile end http://www.elated.com/forums/topic/6279/#post26417 From: chrishirst


It looks like the widths for 'portrait' and 'landscape' are not correctly set, so the screen has a horizontal scroll that puts the 'f' off screen.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Thu, 02 Mar 2017 15:40:17 GMT http://www.elated.com/forums/topic/6279#post26417
CSS Problem on mobile end http://www.elated.com/forums/topic/6279/#post26415 From: jbloss


Hi there.
This site works fine in desktop mode, even shrinking the window it works great.
In mobile mode the "F" menu on the right is partially missing and the background graphic does not seem to load all the way. It's driving me crazy.

www.motoear.com

Anyone?

View » | Reply »

]]>
Thu, 02 Mar 2017 12:36:45 GMT http://www.elated.com/forums/topic/6279#post26415
Re: Trying to (unsuccessfully) Build a HTMLCSS Table http://www.elated.com/forums/topic/6277/#post26414 From: chrishirst


Well, validation is only a spell/grammar check for HTML and CSS and is not a guarantee of working code


But more importantly is, it definitely won't do what might be expected


For future and current readers;

If you really do want '1/2 a column in a table structure there are a few ways to accomplish that without resorting to scripting.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Wed, 01 Mar 2017 13:34:38 GMT http://www.elated.com/forums/topic/6277#post26414
Re: Jump to list item on keypress http://www.elated.com/forums/topic/6278/#post26413 From: chrishirst


A couple options are possible;

Give each list element an id attribute and write a javascript function for the parent element using the "onKeyPress", "onKeyDown" or "onKeyUp" event handler that captures the keycode of the key that triggered the event and sets focus to that element ID.

https://www.w3schools.com/jsref/dom_obj_event.asp
https://www.w3schools.com/jsref/event_key_keycode.asp

or a more accessibility friendly method would be to use the accesskey attribute on each list element.

https://www.w3schools.com/tags/att_global_accesskey.asp

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Wed, 01 Mar 2017 13:27:57 GMT http://www.elated.com/forums/topic/6278#post26413
Re: Trying to (unsuccessfully) Build a HTMLCSS Table http://www.elated.com/forums/topic/6277/#post26412 From: tlm2408


Apart from what was metioned by Chris this should line everything up the way you want:


Code:
--------------------
<table border="1">
<caption>
02.24.17 Tables Homework
</caption>
<tr>
<th colspan="2" rowspan="1.5">Country</th>
<td colspan="4" rowspan="1.5">Region</td>
</tr>
<tr>
<th colspan="2" rowspan="14">United States</th>


</tr>
<tr>
<th colspan="2" rowspan="3">Western</th>
<td>Product</td>
<td>Profit</td>
</tr>
<tr>
<td>Monitor</td>
<td>10</td>
</tr>
<tr>
<td>Desk Lamp</td>
<td>20</td>
</tr>
<tr>
<th colspan="2" rowspan="4">Central</th>
<td>Product</td>
<td>Profit</td>
</tr>
<tr>
<td>Monitor</td>
<td>30</td>
</tr>
<tr>
<td>Desk Lamp</td>
<td>25</td>
</tr>
<tr>
<td>Telephone</td>
<td>28</td>
</tr>
<tr>
<th colspan="2" rowspan="4">Atlantic</th>
<td>Product</td>
<td>Profit</td>
</tr>
<tr>
<td>Monitor</td>
<td>31</td>
</tr>
<tr>
<td>Desk Lamp</td>
<td>17</td>
</tr>
<tr>
<td>Telephone</td>
<td>22</td>
</tr>
</table>
--------------------


Also a rowspan of 1.5 won't validate as far as I know.

View » | Reply »

]]>
Wed, 01 Mar 2017 10:53:58 GMT http://www.elated.com/forums/topic/6277#post26412
Jump to list item on keypress http://www.elated.com/forums/topic/6278/#post26411 From: tlm2408


I have a large list in a scrollable div.

I want to use the keyboard number keys to jump to the text that matches the key pushed as per a phone keypad, for example if I press number 8 on my keyboard I would jump to text starting with the letter t. If press number 5 I'd go to j and so on. I have this script to jump to items via a text link.


Code:
--------------------
<html>
<head>

</head>
<body>
<a class="text-navi" href="a">A</a>
<a class="text-navi" href="b">B</a>
<a class="text-navi" href="c">C</a>
<a class="text-navi" href="d">D</a>
<a class="text-navi" href="e">E</a>
<a class="text-navi" href="f">F</a>
<a class="text-navi" href="g">G</a>
<a class="text-navi" href="h">H</a>
<a class="text-navi" href="i">I</a>
<a class="text-navi" href="j">J</a>
<a class="text-navi" href="k">K</a>
<a class="text-navi" href="l">L</a>
<a class="text-navi" href="m">M</a>

<div class="wrapper">

<div class="left" style="float: left;">
Menu item 1<br>
Menu item 2<br>
and so on.
</div>

<div class="play" style="float: right; width: 70%; height: 300px; overflow: auto;">

<ul>
<li class="animal-name">Agami/Chestnut Bellied Heron</li>
<li class="animal-name">Amazon Kingfisher</li>
<li class="animal-name">Amazonian Umbrella Bird</li>
<li class="animal-name">Bananaquit</li>
<li class="animal-name">Band-tailed Manakin</li>
<li class="animal-name">Band-tailed Nighthawk</li>
<li class="animal-name">Caica Parrot</li>
<li class="animal-name">Campo Flicker</li>
<li class="animal-name">Canary-wingedParakeet</li>
<li class="animal-name">Double Collard Seedeater</li>
<li class="animal-name">Double Toothed Kite</li>
<li class="animal-name">Drab Water Tyrant</li>
<li class="animal-name">Epalet Oriole</li>
<li class="animal-name">Fasciated Antshrike</li>
<li class="animal-name">Ferruginous Pygmy Owl</li>
<li class="animal-name">Festive Parrot</li>
<li class="animal-name">Giant Cowbird</li>
<li class="animal-name">Glittering-throated Emerald</li>
<li class="animal-name">Golden-collared Woodpecker</li>
<li class="animal-name">Harpy Eagle</li>
<li class="animal-name">Helmeted Manakin</li>
<li class="animal-name">Helmeted Pygmy Tyrant</li>
<li class="animal-name">Jabiru Stork</li>
<li class="animal-name">King Vulture</li>
<li class="animal-name">Klage’s Antwren</li>
<li class="animal-name">Ladder-tailed Nightjar</li>
<li class="animal-name">Large-billed Tern</li>
<li class="animal-name">Laterallus sp.</li>
<li class="animal-name">Macconnelis Flycatcher</li>
<li class="animal-name">Magpie Tanager</li>
<li class="animal-name">Maguari Stork</li>
</ul>

</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('a.text-navi').click(function (e) {
e.preventDefault();
var letter = $(this).attr('href');
//scroll to first h1.name element that begins with "letter"
var target = $('.animal-name').filter(function () {
return $.trim($(this).text()).toLowerCase().indexOf(letter) == 0
});
$('html,body,div').animate({scrollTop: $(target).offset().top}, 700);
});
</script>

</body>
</html>
--------------------


But I would like to be able to jump to the list item via the number buttons as described above. I also only want to scroll the div that the list is in, not the whole page.
Any help would be greatly appreciated.

[Edited by tlm2408 on 01-Mar-17 03:56]

View » | Reply »

]]>
Wed, 01 Mar 2017 08:42:51 GMT http://www.elated.com/forums/topic/6278#post26411
Re: image map not working http://www.elated.com/forums/topic/6276/#post26409 From: chrishirst


Okay, I'm sure that your website visitors will also thank you.


And to be honest I cannot recall the last time I actually used an "image map"... Come to think of it I can't even recall EVER using an image map on a page.

Though I did only start developing websites around 1993, so maybe I missed their heyday.


:HINT: HTML Image maps are very, very much outdated.


http://www.cssplay.co.uk/articles/imagemap/

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 25 Feb 2017 19:40:46 GMT http://www.elated.com/forums/topic/6276#post26409
Re: image map not working http://www.elated.com/forums/topic/6276/#post26408 From: absolom


Sorry. I'm NEW at this.
I reduced the file size.

View » | Reply »

]]>
Sat, 25 Feb 2017 19:10:36 GMT http://www.elated.com/forums/topic/6276#post26408
Re: image map not working http://www.elated.com/forums/topic/6276/#post26407 From: chrishirst


Firstly you need to reduce the byte size of your image as it locked up my browser for 3 minutes while it FAILED to load.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 25 Feb 2017 15:03:34 GMT http://www.elated.com/forums/topic/6276#post26407
Re: Trying to (unsuccessfully) Build a HTMLCSS Table http://www.elated.com/forums/topic/6277/#post26406 From: chrishirst


For a start, table headings (th) should not be in the same row as table cells (td) that they are supposed to be column headings for, headings belong in a row (tr) ABOVE and BEFORE the cell (td) elements.

Example

Code:
--------------------
<table>
<tr><th>Heading1</th></tr>
<tr><td>data cell 1<td></tr>
<tr><td>Data cell 2</td></tr>
</table>
--------------------


Then whatever column span attributes are applied to the heading elements will apply to the entire length of that column of the table.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/


View » | Reply »

]]>
Sat, 25 Feb 2017 14:53:30 GMT http://www.elated.com/forums/topic/6277#post26406
Trying to (unsuccessfully) Build a HTMLCSS Table http://www.elated.com/forums/topic/6277/#post26405 From: eichel15



Code:
--------------------
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<style>
th, td { padding: 5px; }
</style>
<table border="1">
<caption>
02.24.17 Tables Homework
</caption>
<tr>
<th colspan="2" rowspan="1.5">Country</th>
<td colspan="4" rowspan="1.5"></td>
</tr>
<tr>
<th colspan="2" rowspan="14">United States</th>
<td colspan="2" rowspan="2">Region</td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<th colspan="2" rowspan="3">Western</th>
<td>Product</td>
<td>Profit</td>
</tr>
<tr>
<td>Monitor</td>
<td>10</td>
</tr>
<tr>
<td>Desk Lamp</td>
<td>20</td>
</tr>
<tr>
<th colspan="2" rowspan="4">Central</th>
<td>Product</td>
<td>Profit</td>
</tr>
<tr>
<td>Monitor</td>
<td>30</td>
</tr>
<tr>
<td>Desk Lamp</td>
<td>25</td>
</tr>
<tr>
<td>Telephone</td>
<td>28</td>
</tr>
<tr>
<th colspan="2" rowspan="4">Atlantic</th>
<td>Product</td>
<td>Profit</td>
</tr>
<tr>
<td>Monitor</td>
<td>31</td>
</tr>
<tr>
<td>Desk Lamp</td>
<td>17</td>
</tr>
<tr>
<td>Telephone</td>
<td>22</td>
</tr>
</table>
</body>
</html>
--------------------


So I'm trying to make a table with different sized rows/columns and for some reason I've incorrectly coded it. After the blank cell next to the 'region' cell, the table doesn't create a new row below it, instead the "new row" is placed right next to the blank cell. It has something to do with the height of the region cell, but it doesn't seem to occur after the 'western', 'central', or 'atlantic' cells, all which are taller than the standard cell in the table. Any help is fantastically appreciated. I have mac screenshots of what it looks like/what it's supposed to look like that I will gladly email if that would make solving this issue more helpful.

View » | Reply »

]]>
Sat, 25 Feb 2017 02:34:34 GMT http://www.elated.com/forums/topic/6277#post26405
image map not working http://www.elated.com/forums/topic/6276/#post26404 From: absolom


I haven't been able to get the image map on my website to work. It's been 4 days.

The website is www.cheaptherapy.creataholic.ca

This is the code on the page:


Code:
--------------------
<img class="alignnone wp-image-38 size-full" src="http://cheaptherapy.creataholic.ca/wp-content/uploads/cover-image.jpg" width="764" height="508" alt="cheap-therapy-crochet" />

&nbsp;

<img class="alignnone wp-image-47 size-full" src="http://cheaptherapy.creataholic.ca/wp-content/uploads/navigation.jpg" width="4469" height="1152" alt="navigation" usemap="#image-map" />

<map name="image-map">
<area target="_self" alt="lessons" title="lessons" href="www.cheaptherapy.creataholic.ca/lessons" coords="998,233,773,535,811,1087,1363,1087,1411,502,1166,233" shape="poly">

<area target="_self" alt="patterns" title="patterns" href="www.cheaptherapy.creataholic.ca/patterns" coords="1545,12,1444,410,1497,1073,2087,1078,2163,137" shape="poly">

<area target="_self" alt="projects" title="projects" href="www.cheaptherapy.creataholic.ca/projects" coords="2528,170,2159,391,2341,1082,2916,1082,3036,353" shape="poly">

<area target=href="www.cheaptherapy.creataholic.ca/_self" alt="contact" title="contact" href="www.cheaptherapy.creataholic.ca/contact" coords="3238,209,3161,1087,3837,1082,3846,497,3688,156,3448,118" shape="poly">

</map>
--------------------


Thanking you in advance. I'll hold off on throwing my computer out of the window for a bit longer lol.

View » | Reply »

]]>
Fri, 24 Feb 2017 21:08:37 GMT http://www.elated.com/forums/topic/6276#post26404