You are here: Re: div's and tables problem (with a bit of javascript for good measure) « HTML « IT news, forums, messages
Re: div's and tables problem (with a bit of javascript for good measure)

Posted by Jonathan N. Little on 11/27/34 11:57

alex.kemsley wrote:
> 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
....

<!-- first test form we'll float left -->
<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 ...


<!-- 2nd test form we'll float right -->
<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>

....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

 

Navigation:

[Reply to this message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация