div's and tables problem (with a bit of javascript for good measure)

alex.kemsley · Sep 5, 2006

Hi all,

I have just implemented a image verification script to stop the bots
sending me crap. I tested it out on a few users but they got confused
so i put in a help window that pops up on a div layer. The only thing
is i cant get my quick question box to stay in the same place on every
page so i can absolutly position the div. The table is driving me crazy
which i think is whats causing it. If you can sort the table or
recomend a way to position the div so it attaches itself to the quick
question box i would be greatful.

To try it out goto http://www.hottubs2buy.co.uk/faq.html and look down
the left hand side for quick question. Then try and submit typing
nothing in any of the box's (javascript enabled)

Oh and if you have time find a way to make the shaded div layer fill
100% of every page not just the browsers window hight.

As ever you help is always apreciated.

Many thanks

Alex Kemsley
HotTubs2Buy.co.uk

Jonathan N. Little · Sep 5, 2006

alex.kemsley said:
Hi all,

I have just implemented a image verification script to stop the bots
sending me crap.

I can see why, your other email form appears to have no checking
whatsoever. It will even allow you to send an empty message, bet its a
real spam relay! You need to do a little Googling on how to secure form
to email scripts!

I tested it out on a few users but they got confused

so i put in a help window that pops up on a div layer. The only thing
is i cant get my quick question box to stay in the same place on every
page so i can absolutly position the div. The table is driving me crazy
which i think is whats causing it. If you can sort the table or
recomend a way to position the div so it attaches itself to the quick
question box i would be greatful.

Well, I can think of an easier way and it can work for multiple form
wherever on the page. Just style your warning DIV to be big enough to
cover your forms then place markup just within your FORM but styling has
the FORM positioned absolute with a left value of say -999em, then all
you have to do is toggle between left as -999em and 'auto'

Here is a slapped together demo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo</title>
<style type="text/css">

FORM { margin: .5em; padding: 1em; border: 1px solid #aaa;
background-color: #ddd; }
..warn {
position: absolute;
/* init out of sight and size to cover largest form*/
left: -999em; width: 20em; height: 20em;

/* set margin to offset whatever your form's padding is... */
margin: -1.5em auto auto -1.5em;
padding: 1em; border: 1px solid #f00;
color: #f00; background-color: #fcc;
}

</style>

<script type="text/javascript">
// Quick & Dirty test JS

function testIt(id){
var me=document.getElementById(id);
me.onclick=resetIt;
me.style.left="auto";
}

function resetIt(){
var me=this;
me.style.left="-999em;"
}

</script>
</head>
<body>

<p>
Lorem ipsum dolor sit amet, consectetuer ... some filler
....


<form style="float: left;">
<div class="warn" id="warn1">This will be your warning box</div>
<div>
EMAIL: <input type="text" size="34"><br>
<input type="button" onclick="testIt('warn1')" value="Test">
</div>
</form>

<p>
Pellentesque eros purus, consequat sit amet, more filler ...


<form style="float: left;">
<div class="warn" id="warn2">This will be your 2nd warning box</div>
<div>
EMAIL: <input type="text" size="34"><br>
<input type="button" onclick="testIt('warn1')" value="Test">
</div>
</form>

....

sorting of div's using javascript	1	Nov 22, 2006
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
Javascript and div's with style.display=none or block bugging in IE 5.5 and 6.0	2	Feb 17, 2006
Creating Calendars for a Web Archive Help Request	3	Dec 27, 2011
having trouble with lining tables up	8	Jan 24, 2006
problem with background and table inside a styled box	3	Jun 24, 2009
help with a div/span problem	3	Aug 6, 2006
problem with a form-select shown in a layer with low z-index	1	Mar 26, 2005

div's and tables problem (with a bit of javascript for good measure)

alex.kemsley

Jonathan N. Little

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads