Help on replacing of some elements with new element using the DOM scripting on my JOIN-PAGE
2 views
Skip to first unread message
Udeme Samuel
Apr 1, 2013, 4:15:09 AM4/1/13
to weeke...@googlegroups.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Join</title>
</head>
<body>
<div id=maincontainer>
<div id="head">
</div>
<p id="usertxt"> Please to join click on one of the accounts that fits your proffesion.</p>
<div id="fatline"></div>
<div id="ceo" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="ceo_txt">C.E.O</p></div>
<div id="staff" onmouseout="offbckg()" onmouseover="showbckg()" onclick="staffform()"><p id="staff_txt">Staff</p></div>
<div id="student" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="student_txt">Student</p></div>
<div id="infobox">
<p id="ceoacc">C.E.O Account</p>
<p id="ceoinfo">The C.E.O account is an account that deals with people who have large business with branches nationwide or worldwide and are employers of Job/labour,and also who have large number of staff 100 and above.This account helps to link them to their staff,customers,business-partners,goverment-officials/organization that the C.E.O does business with.</p>
<p id="ceoacc">Staff Account</p>
<p id="ceoinfo">The Staff account is an account that deals with people who are employees in firm/establishments/organizations in various works of life.This account helps to link to their c.e.o,managers and other staff in their organization both national and international.other of the staff-self products can be sold here and more.
</p>
<p id="ceoacc">Student Account</p>
<p id="ceoinfo">The Student account is an account that deals with people who are (18) years of age and are in a collegde/university (tetary instituation) who after school will become job-seekers,This platform help them to submit their credentials and and let Jobpal search help them do the search for their dream jobs.with Jobpal's platform they can also be Jobpal-lancers
(Free-lancers).</p>
</div>
<style type="text/css">
#ceoinfo
{
color:#3CB3C3;
font-size:25px;
margin:5px;
background-color:#e7f2f4;
}
#ceoacc
{
font-size:20px;
background-color:#3CB3C3;
text-align:center;
color:white;
font-family:"Lucida Console", Monaco, monospace;
}
#infobox
{
width:28cm;
height:14cm;
border:thin solid #3CB3C3;
margin-top:-14.1cm;
margin-left:6.5cm;
}
#fatline
{
width:0.5cm;
height:20cm;
border:thin solid #3CB3C3;
margin-top:-0.7cm;
margin-left:3px;
background-color:#e7f2f4;
}
#usertxt
{
color:#3CB3C3;
font-size:24px;
font-family:Verdana, Geneva, sans-serif;
text-decoration:underline;
margin-left:10cm;
}
*
{margin:0cm;}
#head
{
width:auto;
height:2cm;
background-color:#3CB3C3;
}
#ceo,#staff,#student
{
width:5cm;
height:2cm;
background-color:#e7f2f4;
border:thin solid #3CB3C3;
margin-left:0.6cm;
}
#ceo
{
margin-top:-18cm;
}
#ceo:hover
{
border-left-width:0.5cm;
border-left-color:#3CB3C3;
}
#staff
{
margin-top:4cm;
}
#staff:hover
{
border-left-width:0.5cm;
border-left-color:#3CB3C3;
}
#student
{
margin-top:4cm;
}
#student:hover
{
border-left-width:0.5cm;
border-left-color:#3CB3C3;
}
#ceo_txt,#staff_txt,#student_txt
{
font-size:30px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#3CB3C3;
text-align:center;
margin-top:15px;
}
</style>
<script type="text/javascript">
function showbckg()
{
var longline=document.getElementById("fatline").style;
longline.backgroundColor="#3CB3C3";
}
function offbckg()
{
var longline=document.getElementById("fatline").style;
longline.backgroundColor="#e7f2f4";
}
function ceoform(x,y)
{
var delete_infobox=document.getElementById('infobox');
var refstudent=document.getElementById('student');
}
</script>
</div>
</body>
</html>
hello fellow web developers please i am writing my webapp but i have issues on this on my join page{register page} in the javascript section of the page i am actually using the DOM to remove the #infobox[div]element....now what i want to do is that i want a sitituation where by where my users click on the the three links the #infobox(id)and all its element are remove and replace with a set of div that is a form which the user will input their registration information in which i will ask them....now these i plan it to go...
from the elements.............
<div id="fatline"></div>
<div id="ceo" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="ceo_txt">C.E.O</p></div>
<div id="staff" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="staff_txt">Staff</p></div>
<div id="student" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="student_txt">Student</p></div>
***********************************************************************************************
the javascript section of the code...
function ceoform(x,y)
{
var delete_infobox=document.getElementById('infobox');
var refstudent=document.getElementById('student');
delete_infobox.parentNode.removeChild(delete_infobox);
}
but the problem is that after the elements in the #infobox are deleted.i try to use the document.createElement() function to add a new set of div element after the the info-box have been deleted but the new element are not showing in the browser is it that there some kind of control stucture i will use to create new element after the #infobox has been remove...please help...also please let me add this i want make a situation where by the before the form comes to the web-page like 5-7seconds a loading gif image will load befor the form display in the webpage how can i do that on javascript....
please i know this is javascript related but i need help on this...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Join</title>
</head>
<body>
<div id=maincontainer>
<div id="head">
</div>
<p id="usertxt"> Please to join click on one of the accounts that fits your proffesion.</p>
<div id="fatline"></div>
<div id="ceo" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="ceo_txt">C.E.O</p></div>
<div id="staff" onmouseout="offbckg()" onmouseover="showbckg()" onclick="staffform()"><p id="staff_txt">Staff</p></div>
<div id="student" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="student_txt">Student</p></div>
<div id="infobox">
<p id="ceoacc">C.E.O Account</p>
<p id="ceoinfo">The C.E.O account is an account that deals with people who have large business with branches nationwide or worldwide and are employers of Job/labour,and also who have large number of staff 100 and above.This account helps to link them to their staff,customers,business-partners,goverment-officials/organization that the C.E.O does business with.</p>
<p id="ceoacc">Staff Account</p>
<p id="ceoinfo">The Staff account is an account that deals with people who are employees in firm/establishments/organizations in various works of life.This account helps to link to their c.e.o,managers and other staff in their organization both national and international.other of the staff-self products can be sold here and more.
</p>
<p id="ceoacc">Student Account</p>
<p id="ceoinfo">The Student account is an account that deals with people who are (18) years of age and are in a collegde/university (tetary instituation) who after school will become job-seekers,This platform help them to submit their credentials and and let Jobpal search help them do the search for their dream jobs.with Jobpal's platform they can also be Jobpal-lancers
(Free-lancers).</p>
</div>
<style type="text/css">
#ceoinfo
{
color:#3CB3C3;
font-size:25px;
margin:5px;
background-color:#e7f2f4;
}
#ceoacc
{
font-size:20px;
background-color:#3CB3C3;
text-align:center;
color:white;
font-family:"Lucida Console", Monaco, monospace;
}
#infobox
{
width:28cm;
height:14cm;
border:thin solid #3CB3C3;
margin-top:-14.1cm;
margin-left:6.5cm;
}
#fatline
{
width:0.5cm;
height:20cm;
border:thin solid #3CB3C3;
margin-top:-0.7cm;
margin-left:3px;
background-color:#e7f2f4;
}
#usertxt
{
color:#3CB3C3;
font-size:24px;
font-family:Verdana, Geneva, sans-serif;
text-decoration:underline;
margin-left:10cm;
}
*
{margin:0cm;}
#head
{
width:auto;
height:2cm;
background-color:#3CB3C3;
}
#ceo,#staff,#student
{
width:5cm;
height:2cm;
background-color:#e7f2f4;
border:thin solid #3CB3C3;
margin-left:0.6cm;
}
#ceo
{
margin-top:-18cm;
}
#ceo:hover
{
border-left-width:0.5cm;
border-left-color:#3CB3C3;
}
#staff
{
margin-top:4cm;
}
#staff:hover
{
border-left-width:0.5cm;
border-left-color:#3CB3C3;
}
#student
{
margin-top:4cm;
}
#student:hover
{
border-left-width:0.5cm;
border-left-color:#3CB3C3;
}
#ceo_txt,#staff_txt,#student_txt
{
font-size:30px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#3CB3C3;
text-align:center;
margin-top:15px;
}
</style>
<script type="text/javascript">
function showbckg()
{
var longline=document.getElementById("fatline").style;
longline.backgroundColor="#3CB3C3";
}
function offbckg()
{
var longline=document.getElementById("fatline").style;
longline.backgroundColor="#e7f2f4";
}
function ceoform(x,y)
{
var delete_infobox=document.getElementById('infobox');
var refstudent=document.getElementById('student');
}
</script>
</div>
</body>
</html>
hello fellow web developers please i am writing my webapp but i have issues on this on my join page{register page} in the javascript section of the page i am actually using the DOM to remove the #infobox[div]element....now what i want to do is that i want a sitituation where by where my users click on the the three links the #infobox(id)and all its element are remove and replace with a set of div that is a form which the user will input their registration information in which i will ask them....now these i plan it to go...
from the elements.............
<div id="fatline"></div>
<div id="ceo" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="ceo_txt">C.E.O</p></div>
<div id="staff" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="staff_txt">Staff</p></div>
<div id="student" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="student_txt">Student</p></div>
***********************************************************************************************
the javascript section of the code...
function ceoform(x,y)
{
var delete_infobox=document.getElementById('infobox');
var refstudent=document.getElementById('student');
delete_infobox.parentNode.removeChild(delete_infobox);
}
but the problem is that after the elements in the #infobox are deleted.i try to use the document.createElement() function to add a new set of div element after the the info-box have been deleted but the new element are not showing in the browser is it that there some kind of control stucture i will use to create new element after the #infobox has been remove...please help...also please let me add this i want make a situation where by the before the form comes to the web-page like 5-7seconds a loading gif image will load befor the form display in the webpage how can i do that on javascript....
please i know this is javascript related but i need help on this...
vikas dwivedi
Apr 3, 2013, 9:36:01 AM4/3/13
to php
Hello Udeme,
you should use Jquery to achieve this functionality.
I think you can get some help from
https://code.google.com/p/b21-weekend/source/browse/trunk/jquery/dynamic-create-element.html
https://code.google.com/p/b21-weekend/source/browse/trunk/jquery/dynamic-create-element.html
regards !
vikas dwivedi
--
Manage your settings from http://groups.google.com/groups/mysubs?pli=1
---
You received this message because you are subscribed to the Google Groups "Weekend php classes" group.
To unsubscribe from this group and stop receiving emails from it, send an email to weekendphp+...@googlegroups.com.
To post to this group, send email to weeke...@googlegroups.com.
Visit this group at http://groups.google.com/group/weekendphp?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
Reply all
Reply to author
Forward
0 new messages