php - struggling with jQuery popup -
i have working pop codes below , wanted transform this "simple" tutorial found here stunning smooth pop using jquery i've been struggling on this.
here's html being generated by php script:
<!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> <title>web calendar</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="lcal.ico" /> <link rel="stylesheet" type="text/css" href="css/css.php" /> <script type="text/javascript"> var dformat = 1; var dsepar = "."; var time24 = 1; var wstart = 1; var dptoday = "today"; var dpclose = "close"; var dpmonths = new array("january","february","march","april","may","june","july","august","september","october","november","december"); var dpwkdays = new array("su","mo","tu","we","th","fr","sa","su"); function resizewin() { neededh = math.min(700,document.getelementbyid('bodyarea').offsetheight + 6); //max height: 700px currenth = window.innerheight ? window.innerheight : document.documentelement.clientheight; window.resizeby(0,neededh-currenth); } </script> <script type="text/javascript" src="common/dtpicker.js"></script> <script type="text/javascript" src="common/cpicker.js"></script> <script type="text/javascript" src="common/poptext.js"></script> <script type="text/javascript" src="common/general.js"></script> </head> <body onload="resizewin();" class="scroll"> <div id="bodyarea"> <div class="toptext"> <h4 class="floatl">create schedule</h4> </div> <div class="contents"> <script type="text/javascript"> function hide_times(t) { if (t.checked) { document.getelementbyid("dtimes").style.visibility = "hidden"; document.getelementbyid("dtimee").style.visibility = "hidden"; } else { document.getelementbyid("dtimes").style.visibility = "visible"; document.getelementbyid("dtimee").style.visibility = "visible"; t.form.start_time.value = t.form.end_time.value = ""; } } </script> <form id="event" name="event" method="post" action="index.php?xp=10"> <input type="hidden" name="id" value="0" /> <input type="hidden" name="mode" value="add" /> <table class="evtform"> <col width='100px' /><col width='100px' /><col width='150px' /><col /> <tr> <tr><td>services:</td> <td><select id="svc" name="svc"><option value="1" style="color: #000000; background: #00ff00;">value1</option> <option value="3" style="color: #000000; background: #ffffff;">value1</option> <option value="4" style="color: #000000; background: #33ffff;">value2</option> <option value="6" style="color: #000000; background: #ff9999;">value3</option> </select></td></tr><tr><td>contact number:</td> <td><input type=text name=ven id=ven value='' size=28 style=width:150% /></td> </tr><tr><td>initials:</td> <td><input type=text name=pri id=pri value='' size=28 style=width:150% /></td> </tr><td>barber:</td> <td><select id="cat" name="cat"><option value="1" style="color: #000000; background: #00ff00;">dmitriy</option> <option value="3" style="color: #000000; background: #ffffff;">user1</option> <option value="4" style="color: #000000; background: #33ffff;">user2</option> <option value="6" style="color: #000000; background: #ff9999;">user3</option> </select></td><tr><td>start:</td> <td><input type="text" name="sda" id="sda" value='01.07.2011' size="8" /><input class="button" type="button" title="select date" value="..." onclick="dpicker('nill','sda','eda');" /></td> <td id="dtimes"><input type="text" name="sti" id="sti" value='08:00' size="6" /><a href="#" onclick="tpicker('sti')"><img src="images/time.png" alt="time picker" /></a></td> <tr><td>end:</td> <td><input type="text" name="eda" id="eda" value="" size="8" /><input class="button" title="select date" type="button" value="..." onclick="dpicker('nill','eda','sda');" /></td> <td id="dtimee"><input type="text" name="eti" id="eti" value='08:30' size="6" /><a href="#" onclick="tpicker('eti')"><img src="images/time.png" alt="time picker" <td/></a> </tr> <tr><td colspan="4"><hr /></td></tr> <tr> <td>send mail:</td> <td colspan="3"> <input type="checkbox" name="non" value="yes" /> and/or <input type="text" name="not" maxlength="2" style="width:20px" value="" /> day(s) before event to: </td> </tr> <tr> <td colspan="4"> <input type="text" name="nml" id="nml" style="width:100%" value="email1@yahoo.com" /> <div class="fonts">(email addresses separated semicolon - max. 255 chars.)</div> </td> </tr> </table> <div class='repbox' id='repbox'> <div class="floatc"><b>set repetition</b><hr /></div> <div> <input type="radio" name="r_t" id="r_t" value="0" checked="checked" /> no repeat <br /> <input type="radio" name="r_t" id="r_t" value="1" /> repeat <select name="ri1" id="ri1"> <option value="1">every</option> <option value="2">every other</option> <option value="3">every third</option> <option value="4">every fourth</option> </select> <select name="rp1" id="rp1"> <option value="1">day</option> <option value="2">week</option> <option value="3">month</option> <option value="4">year</option> </select> *)<br /> <input type="radio" name="r_t" id="r_t" value="2" /> repeat every <select name="ri2" id="ri2"> <option value="1">first</option> <option value="2">second</option> <option value="3">third</option> <option value="4">fourth</option> <option value="5">last</option> </select> <select name="rp2" id="rp2"> <option value="1">monday</option> <option value="2">tuesday</option> <option value="3">wednesday</option> <option value="4">thursday</option> <option value="5">friday</option> <option value="6">saturday</option> <option value="7">sunday</option> </select> of month *)<br /><br /> *) until <input type="text" name="rul" id="rul" value="" size="8" /> <input class="button" title="select date" type="button" value="..." onclick="dpicker('nill','rul','sda');" /> (blank: no end) </div> <div class="floatc"><hr /><input class="button" type="submit" name="refresh" value="ok" /></div> </div> <div class="floatc"> <input class="button" type="submit" name="add_exe_cls" value="add" /> <input class="button" type="button" onclick="javascript:self.close()" value="close" /> </div> </form> <script type="text/javascript">document.getelementbyid("tit").focus();</script></div> </body> </html>
i'd recommend checking out colorbox if having troubles converting code make own.
Comments
Post a Comment