Jump to content

Please help a beginner


Melissa
 Share

Recommended Posts

Hi,first of all i would like to say that i will appreciate any help that will be given to me, even though some of you professional web builders and programmers might laugh at the problems i got myself intoI am just a beginner as far as making websites, ive had some experience with some very basic html using frontpageMy problem is that i promised someone to make a webpage that includes a form, not knowing how complex this would turn out to be.. :) I thought i could just download a template and replace some of the questions on the form and edit and change it here and theresee, the form doesnt actually need to work, it will just be some sort of demoBut there are some things that also needs to be done that i just dont know how to do it...Ive tried to find the appropriate, understandable documentation on the web to fix my problem but the template i have downloaded comes with such enormous and complex coding, that i just dont know where to startIf anyone is willing to help, i would really appreciate it!What i need to do is the following:1) One of the questions on the form has a checkbox. When the box is checked, other questions need to appear which wont be seen when the box is not checked2) When pointing at a certain image with the mouse, an explanation needs to appear on the left side from the page. And it also needs to be floating on the same position since the form scrolls downI hope these two things can still be added on my templateAnd i apoligise if i posted in the incorrect forumAgain, any help is greatly appreciatedi would also be happy to send it over if someone is willing to take a look at itthanks in advance

Link to comment
Share on other sites

My problem is that i promised someone to make a webpage that includes a form, not knowing how complex this would turn out to be..  :)

Lesson to be learned there :) 1)
<head><script>function check(){if (document.getElementById("agree").checked)document.getElementById("mydiv").style.display="block";else document.getElementById("mydiv").style.display="none";}</script></head><body><form name="input" action="html_form_action.asp" method="post">Do you agree? <input type="checkbox"  id="agree" onclick="check()" /><br /><br /><div id="mydiv" style="display:none">Your Name<input type="text" /><br />Your Address<input type="text" /></div></form></body>

Link to comment
Share on other sites

2) When pointing at a certain image with the mouse, an explanation needs to appear on the left side from the page. And it also needs to be floating on the same position since the form scrolls down

2) Text appears when over an image and is in a fixed position. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head><title> CSS position:fixed; for IE6</title><style type="text/css">body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto;}body {font-family: georgia, serif; font-size:16px;}#menu {display:block; top:10px; left:50%; width:130px; position:fixed;}* html #menu {position:absolute;}</style><!--[if lte IE 6]>   <style type="text/css">   /*<![CDATA[*/ html {overflow-x:auto; overflow-y:hidden;}   /*]]>*/   </style><![endif]--></head><body style="overflow:none"><div id="menu"></div><img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" onmouseover="menu.innerHTML='Hi, i am google'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://eur.i1.yimg.com/eur.yimg.com/i/eu/hp/yuk1.gif"  onmouseover="menu.innerHTML='yahoo here, hello'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" onmouseover="menu.innerHTML='Hi, i am google'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://eur.i1.yimg.com/eur.yimg.com/i/eu/hp/yuk1.gif"  onmouseover="menu.innerHTML='yahoo here, hello'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" onmouseover="menu.innerHTML='Hi, i am google'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://eur.i1.yimg.com/eur.yimg.com/i/eu/hp/yuk1.gif"  onmouseover="menu.innerHTML='yahoo here, hello'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" onmouseover="menu.innerHTML='Hi, i am google'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://eur.i1.yimg.com/eur.yimg.com/i/eu/hp/yuk1.gif"  onmouseover="menu.innerHTML='yahoo here, hello'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" onmouseover="menu.innerHTML='Hi, i am google'" onmouseoot="menu.innerHTML=''" /><br /><img src="http://eur.i1.yimg.com/eur.yimg.com/i/eu/hp/yuk1.gif"  onmouseover="menu.innerHTML='yahoo here, hello'" onmouseoot="menu.innerHTML=''" /><br /></body></html> 

only checked with IE

Link to comment
Share on other sites

<head><script>function check(){if (document.getElementById("agree").checked)document.getElementById("mydiv").style.display="block";else document.getElementById("mydiv").style.display="none";}</script></head><body><form name="input" action="html_form_action.asp" method="post">Do you agree? <input type="checkbox" id="agree" onclick="check()" /><br /><br /><div id="mydiv" style="display:none">Your Name<input type="text" /><br />Your Address<input type="text" /></div></form></body>

Scott,about that codewhat if i want two more collapsing questions like thati tried to copy and paste them right under them but that dont seem to work properlydo i need to label three different "mydiv" ?just a guess..thanks

Link to comment
Share on other sites

Yes you cannot use any id more than once on a page, you need to label them differentlydivs = mydiv1, mydiv2, mydiv3checkboxes = agree1, agree2, agree3I have used a loop to check if the checkboxes are checked then display the corresponding div. If you need to add any more just use mydiv4, mydiv5 etc and change the size of the loop i<=4, i<=5 etc

<head><script>function check(){for(var i=1;i<=3;i++){if (document.getElementById("agree"+i).checked)document.getElementById("mydiv"+i).style.display="block";else {document.getElementById("mydiv"+i).style.display="none";}}}</script></head><body><form name="input" action="html_form_action.asp" method="post"><table border="0" width="100%"><tr><td width="33%" valign="top">Is it morning? <input type="checkbox" id="agree1" onclick="check()" /><br /><br /><div id="mydiv1" style="display:none">Breakfast: <input type="text" /></div></td><td width="33%" valign="top">Is it afternoon? <input type="checkbox" id="agree2" onclick="check()" /><br /><br /><div id="mydiv2" style="display:none">Lunch: <input type="text" /></div></td><td width="33%" valign="top">Is it evening? <input type="checkbox" id="agree3" onclick="check()" /><br /><br /><div id="mydiv3" style="display:none">Dinner: <input type="text" /></div></td></tr></table></form></body>

Link to comment
Share on other sites

again thanks Scottit workedi will look into the code for 'text appearing when over image and in a fixed position' later but im sure i will post again to get your help if needed! :)thanks!

No problem :) If you need any help with the other part then just give me a shout :)
Link to comment
Share on other sites

Hi,I'm probably butting in a bit here, but you could change the function call to include parameters which take the control id, and add an attribute to the control - like an section number:

<input type="checkbox" id="check1" divsection="mydiv1" onclick="check(this.id, this.divsection)" />

Then change your function to:

function check(checkboxid, divid){if (document.getElementById(checkboxid).checked)document.getElementById(divid).style.display="block";else {document.getElementById(divid).style.display="none"};}

This also means that you don't have to change the number in the loop if you add new sections to the page.Sorry if that makes me seem like a smartarse, just offering some help. :)Dooberry.

Link to comment
Share on other sites

a form and a fourm are 2 very different things...fourms easy the basicsjust incase u dont know

<form><p>username:<input type="text" name="user"><br>password:<input type="text" name="password"><br>date of birth:<input type="number" name="DOB"></p><p>######:<input type="radio" name="######" value="male">male<br><input type="radio" name="######" value="female">female</p><p>i have passed in ECDL<br> <br>powerpoint <input type="checkbox" name="powerpoint"><br><br>excel <input type="checkbox" name="excel"><br><br>word <input type="checkbox" name="word"><br><br>database <input type="checkbox" name"database"><br><br>concepts of ict <input type="checkbox" name="COict"><br><br>internet <input type="checkbox" name="internet"></p><p>  <select name="where_did_you_here_about_us?">    <option value="internet">internet</option>    <option value="friend">friend</option>  </select></p><input name="button" type="button" value="submit"></form>

Link to comment
Share on other sites

This is an<b onmouseout="this.style.color = 'black';" onmouseover="this.style.color = 'red';" align="justify"> example </b>of changing the color of text using a MouseOver.

Link to comment
Share on other sites

@abyssXX - what is that code for? what are you on about? :) @Starwon - Welcome to the forums, if you have a question to ask please create a new topic, not hijack another thread. thanks :)

Link to comment
Share on other sites

Also, I just have to ask..

a form and a fourm are 2 very different things...fourms easy the basics
What exactly is a "fourm"? I thought it was a misspelling of something else, but you used it twice. What are you talking about?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...