|
JavaScript - Insert Datetimepicker On Each Row
Similar TutorialsHi there, I was searching on the Internet because i needed a datetimepicker for my textfield and then find this http://www.javascriptkit.com/script/...calendar.shtml If you open link, however, it shows three format of datetimepicker. what i want is to print date like this: 2012-2-17 i edit this from function FormatDate(pDate) like that return(this.Year+DateSeparator+(this.Month+1)+DateSeparator+pDate); However, i want also make month and day if less than 10 add 0 I mean 2012-2-12 i write a code: Code: if(this.Month < 10)
{
return(this.Year+DateSeparator+('0'+this.Month+1)+DateSeparator+pDate);
}
but it also add for months bigger than 10 How can i solve this problem? Hi, I am using datetimepicker from rainforest.From the code below The pCtrl value is open date but the exDateTime value is read undefined becoz of this the window is not opening....Can you please tell me what is wrong in this code? Here is the code: <script language="javascript" type="text/javascript" src="/js/datetimepicker.js"> </script> .. ,... ... <td width="25%" class="tableContainer" id="opendate">Open Date(mm/dd/yyyy) * </td> <td width="25%" ><input type="text" size="25" name="opendate" id="opendate" class="inputBox4"><a href="javascript:NewCal('opendate','mmddyyyy')"><img onmouseover="this.style.cursor='hand'" src="/ts/images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a> </td> And the javascript code: function NewCal(pCtrl,pFormat,pShowTime,pTimeMode) { Cal=new Calendar(dtToday); if ((pShowTime!=null) && (pShowTime)) { Cal.ShowTime=true; if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24'))) { TimeMode=pTimeMode; } } if (pCtrl!=null) Cal.Ctrl=pCtrl; if (pFormat!=null) Cal.Format=pFormat.toUpperCase(); alert("pCtrl-->"+pCtrl); //exDateTime=document.getElementById(pCtrl).value; exDateTime = "00/00/0000"; alert("exDateTime-->"+exDateTime); if (exDateTime !="")//Parse Date String { var Sp1;//Index of Date Separator 1 var Sp2;//Index of Date Separator 2 var tSp1;//Index of Time Separator 1 var tSp1;//Index of Time Separator 2 var strMonth; var strDate; var strYear; var intMonth; var YearPattern; var strHour; var strMinute; var strSecond; //parse month Sp1=exDateTime.indexOf(DateSeparator,0) Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1)); if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY")) { strMonth=exDateTime.substring(Sp1+1,Sp2); strDate=exDateTime.substring(0,Sp1); } else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY")) { strMonth=exDateTime.substring(0,Sp1); strDate=exDateTime.substring(Sp1+1,Sp2); } if (isNaN(strMonth)) intMonth=Cal.GetMonthIndex(strMonth); else intMonth=parseInt(strMonth,10)-1; if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12)) Cal.Month=intMonth; //end parse month //parse Date if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1)) Cal.Date=strDate; //end parse Date //parse year strYear=exDateTime.substring(Sp2+1,Sp2+5); YearPattern=/^\d{4}$/; if (YearPattern.test(strYear)) Cal.Year=parseInt(strYear,10); //end parse year //parse time if (Cal.ShowTime==true) { tSp1=exDateTime.indexOf(":",0) tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1)); strHour=exDateTime.substring(tSp1,(tSp1)-2); Cal.SetHour(strHour); strMinute=exDateTime.substring(tSp1+1,tSp2); Cal.SetMinute(strMinute); strSecond=exDateTime.substring(tSp2+1,tSp2+3); Cal.SetSecond(strSecond); } } winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height= 200,resizable=0,top="+cnTop+",left="+cnLeft); docCal=winCal.document; RenderCal(); } Thanks in Advance ** edit so i managed to find a thread that removed the time stamp, all i need now is to change the date format and i'll be finished. thanks to Phillip_M for his post on that thread.** ========= hello i found this script for a datetime picker for a class project, which you can see he http://www.javascriptkit.com/script/...imestamp.shtml I want the date to be displayed as MMDDYYY instead of day-month-year this is the script below- Quote: function show_calendar(str_target, str_datetime) { var arr_months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; var n_weekstart = 1; // day week starts from (normally 0 or 1) var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime)); var dt_prev_month = new Date(dt_datetime); dt_prev_month.setMonth(dt_datetime.getMonth()-1); var dt_next_month = new Date(dt_datetime); dt_next_month.setMonth(dt_datetime.getMonth()+1); var dt_firstday = new Date(dt_datetime); dt_firstday.setDate(1); dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7); var dt_lastday = new Date(dt_next_month); dt_lastday.setDate(0); // html generation (feel free to tune it for your particular application) // print calendar header var str_buffer = new String ( "<html>\n"+ "<head>\n"+ " <title>Calendar</title>\n"+ "</head>\n"+ "<body bgcolor=\"White\">\n"+ "<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+ "<tr><td bgcolor=\"#4682B4\">\n"+ "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+ "<tr>\n <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+ str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+document.cal.time.value);\">"+ "<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+ " alt=\"previous month\"></a></td>\n"+ " <td bgcolor=\"#4682B4\" colspan=\"5\">"+ "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">" +arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+ " <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('" +str_target+"', '"+dt2dtstr(dt_next_month)+"'+document.cal.time.value);\">"+ "<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+ " alt=\"next month\"></a></td>\n</tr>\n" ); var dt_current_day = new Date(dt_firstday); // print weekdays titles str_buffer += "<tr>\n"; for (var n=0; n<7; n++) str_buffer += " <td bgcolor=\"#87CEFA\">"+ "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+ week_days[(n_weekstart+n)%7]+"</font></td>\n"; // print calendar table str_buffer += "</tr>\n"; while (dt_current_day.getMonth() == dt_datetime.getMonth() || dt_current_day.getMonth() == dt_firstday.getMonth()) { // print row heder str_buffer += "<tr>\n"; for (var n_current_wday=0; n_current_wday<7; n_current_wday++) { if (dt_current_day.getDate() == dt_datetime.getDate() && dt_current_day.getMonth() == dt_datetime.getMonth()) // print current date str_buffer += " <td bgcolor=\"#FFB6C1\" align=\"right\">"; else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6) // weekend days str_buffer += " <td bgcolor=\"#DBEAF5\" align=\"right\">"; else // print working days of current month str_buffer += " <td bgcolor=\"white\" align=\"right\">"; if (dt_current_day.getMonth() == dt_datetime.getMonth()) // print days of current month str_buffer += "<a href=\"javascript:window.opener."+str_target+ ".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+ "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">"; else // print days of other months str_buffer += "<a href=\"javascript:window.opener."+str_target+ ".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+ "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">"; str_buffer += dt_current_day.getDate()+"</font></a></td>\n"; dt_current_day.setDate(dt_current_day.getDate()+1); } // print row footer str_buffer += "</tr>\n"; } // print calendar footer str_buffer += "<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+ "<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+ "Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+ "\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" + "</table>\n" + "</tr>\n</td>\n</table>\n" + "</body>\n" + "</html>\n"; var vWinCal = window.open("", "Calendar", "width=200,height=250,status=no,resizable=yes,top=200,left=200"); vWinCal.opener = self; var calc_doc = vWinCal.document; calc_doc.write (str_buffer); calc_doc.close(); } // datetime parsing and formatting routimes. modify them if you wish other datetime format function str2dt (str_datetime) { var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\\d+)\\d+)$/; if (!re_date.exec(str_datetime)) return alert("Invalid Datetime format: "+ str_datetime); return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6)); } function dt2dtstr (dt_datetime) { return (new String ( dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" ")); } function dt2tmstr (dt_datetime) { return (new String ( dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds())); } any help is appreciated ive been at this for two days with no result. thank you Hi all i have yet another problem: Code: function contextMenuWork(action, el, pos) {
switch (action) {
case "delete":
{
$(el).remove();
break;
}
case "insert":
{
$("#copiedElement").html($(el).outerHTML());
break;
}
case "pasteAfter":
{
var copiedElement = $("#copiedElement").html();
copiedElement.insertAfter($(el));
break;
}
case "edit":
{
var copiedElement = $("#copiedElement").html();
copiedElement.insertBefore($(el));
break;
}
}
}
Firebug says copiedElement.insertBefore is not a function but i cant understand why. any help much appreciated. hi, I am working on adding a datepicker on each row of the table grid using javascript . I have a done like below. Code: oCell.innerHTML = "<input type='text' name='DateTime' id='DateTime' size='18' class='maincontent1'>
<a href=javascript:NewCssCal('DateTime','yyyymmdd','arrow',true,24,false);><img src='images/cal.gif' width='16' height='16' border='0'alt='Pick a date'> </a> ";
Code: oCell = newRow.insertCell(); Is this correct way? with the above code , cursor control pointing to previous textbox not the current one. can anyone help me? thanks Hi I am working on PHP/javascript development. I want to insert a span code into DB how can i do? here is the code: Code: <html>
<head>
<script type="text/javascript">
var xScroll, yScroll, timerPoll, timerRedirect, timerClock;
function initRedirect(){
if (typeof document.body.scrollTop != "undefined"){ //IE,NS7,Moz
xScroll = document.body.scrollLeft;
yScroll = document.body.scrollTop;
clearInterval(timerPoll); //stop polling scroll move
clearInterval(timerRedirect); //stop timed redirect
timerPoll = setInterval("pollActivity()",1); //poll scrolling
//timerRedirect = setInterval("mySubmit()",100000); //set timed redirect
//timerRedirect = setInterval("mySubmit()",100000); //set timed redirect
timerRedirect = setTimeout("mySubmit()",60000);
//for tracking only
clearInterval(timerClock);
document.getElementById("clock").innerHTML="0";
timerClock=setInterval("document.getElementById('clock').innerHTML=parseInt(document.getElementById('clock').innerHTML,10)+1",1000);
//end tracking
}
else if (typeof window.pageYOffset != "undefined"){ //other browsers that support pageYOffset/pageXOffset instead
xScroll = window.pageXOffset;
yScroll = window.pageYOffset;
clearInterval(timerPoll); //stop polling scroll move
clearInterval(timerRedirect); //stop timed redirect
timerPoll = setInterval("pollActivity()",1); //poll scrolling
// timerRedirect = setInterval("location.href='newtask_process.php'",100000); //set timed redirect
// timerRedirect = setInterval("mySubmit()",100000); //set timed redirect
timerRedirect = setTimeout("mySubmit()",60000);
//for tracking only
clearInterval(timerClock);
document.getElementById("clock").innerHTML="0";
timerClock=setInterval("document.getElementById('clock').innerHTML=parseInt(document.getElementById('clock').innerHTML,10)+1",1000);
//end tracking
}
//else do nothing
}
function mySubmit()
{
document.forms.formdesc.submit2.click();
}
function pollActivity(){
if ((typeof document.body.scrollTop != "undefined" && (xScroll!=document.body.scrollLeft || yScroll!=document.body.scrollTop)) //IE/NS7/Moz
||
(typeof window.pageYOffset != "undefined" && (xScroll!=window.pageXOffset || yScroll!=window.pageYOffset))) { //other browsers
initRedirect(); //reset polling scroll position
}
}
document.onmouseout=initRedirect;
document.onmousemove=initRedirect;
document.onclick=initRedirect;
document.onkeydown=initRedirect;
window.onload=initRedirect;
window.onresize=initRedirect;
</script>
</head>
<body>
Time: <span id="clock" style="font-weight:bold">0</span>
</body>
</html>
I can see the clock on a page but i want to insert into DB. How can I do that?? My javascript knowledge is -10 out of 10. could someone please show me where to insert this javascript command in my header.php file? Code: <script type="text/javascript">
$('#query').autocomplete({
serviceUrl:'service/autocomplete.ashx',
minChars:2,
delimiter: /(,|;)\s*/, // regex or character
maxHeight:400,
width:300,
deferRequestBy: 0, //miliseconds
params: { country:'Yes' }, //aditional parameters
// callback function:
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
// local autosugest options:
lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
});
</script>
HEADER.PHP file Code: <?php
$timing_start = explode(' ', microtime());
if($PMDR->get('header_file')) {
$header = $PMDR->getNew('Template',PMDROOT.TEMPLATE_PATH.'/'.$PMDR->get('header_file'));
} else {
$header = $PMDR->getNew('Template',PMDROOT.TEMPLATE_PATH.'/header.tpl');
}
// Check for maintenance option and show header message bar if necesarry
if($PMDR->getConfig('maintenance') AND in_array('admin_login',$_SESSION['admin_permissions'])) {
$header->set('maintenance',true);
}
if($PMDR->getConfig('usershare') == 'FacebookConnect') {
$header->set('facebook',true);
}
if($PMDR->get('meta_description')) {
$header->set('meta_description',strip_tags($PMDR->get('meta_description')));
} else {
$header->set('meta_description',$PMDR->getConfig('meta_description_default'));
}
if($PMDR->get('meta_keywords')) {
$header->set('meta_keywords',$PMDR->get('meta_keywords'));
} else {
$header->set('meta_keywords',$PMDR->getConfig('meta_keywords_default'));
}
if($PMDR->getConfig('search_display_all') OR on_page('index.php')) {
$header->set('searchform',$searchform);
$header->set('search_display_all',($PMDR->getConfig('search_display_all') OR on_page('index.php')));
}
$PMDR->loadJavascript($PMDR->getConfig('head_javascript'));
$PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.'/includes/javascript_global.js"></script>');
$PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'jquery.autocomplete.js"></script>');
$PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'jquery.js"></script>');
$PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'jquery.jqtransform.js"></script>');
//if(is_object($xajax)) $javascript .= $xajax->getJavascript(BASE_URL.'/includes/xajax/');
$PMDR->setAdd('javascript_onload','
var headID = document.getElementsByTagName("head")[0];
if(headID) {
var newScript = document.createElement(\'script\');
newScript.type = \'text/javascript\';
newScript.src = \''.BASE_URL.'/cron.php?type=javascript\';
headID.appendChild(newScript);
}
');
if($PMDR->get('javascript_onload')) {
$onLoad = '<script language="javascript" type="text/javascript" charset="'.CHARSET.'">';
$onLoad .= "function onLoad() {\n";
$onLoad .= implode("\n",$PMDR->get('javascript_onload'));
$onLoad .= "\n}";
$onLoad .= 'window.onload=onLoad;'."\n";
$onLoad .= '</script>'."\n";
$PMDR->loadJavascript($onLoad);
unset($onLoad);
}
$javascript .= implode("\n",(array) $PMDR->get('load_javascript'));
$header->set('load_javascript',$javascript);
$header->set('load_css',implode("\n",(array) $PMDR->get('load_css')));
$header->set('css_file_path',BASE_URL.TEMPLATE_PATH.'css.css');
// Add title from configuration to end of array and display, seperated by a dash -
//$PMDR->set('page_title',array_merge(array_reverse($PMDR->get('page_title')),array($PMDR->getConfig('title'))));
$header->set('page_title',implode(' - ',array_merge(array_reverse($PMDR->get('page_title')),array($PMDR->getConfig('title')))));
if($PMDR->get('breadcrumb')) {
$header->set('breadcrumb',$PMDR->get('breadcrumb'));
}
?>
Thanks Hi, I have a BMI calculator that records my height / weight and BMI and I can change it then it updates, I'd like to be able to add one for each day and show all in a loop here is my current JavaScript: Code: /***
**** INSERT INTO TABLE **
***/
function prePopulate(){
BMIDB.transaction(
function (transaction) {
//Starter data when page is initialized
var data = ['1','','14','0','0',''];
transaction.executeSql("INSERT INTO page_settings(id, fname, age, height, weight, gender, date) VALUES (?, ?, ?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4], data[5], data[6]]);
}
);
}
/***
**** UPDATE TABLE **
***/
function updateSetting(){
BMIDB.transaction(
function (transaction) {
if($('#fname').val() != '') {
var fname = $('#fname').val();
} else {
var fname = '';
}
var age = $('#age').val();
var height = $('#height').val();
var weight = $('#weight').val();
var gender = $('#gender').val();
var date = $('#date').val();
transaction.executeSql("UPDATE page_settings SET fname=?, age=?, height=?, weight=?, gender=?, date=? WHERE id = 1", [fname, age, height, weight, gender, date]);
}
);
selectAll();
}
function selectAll(){
BMIDB.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM page_settings;", [], dataSelectHandler, errorHandler);
}
);
}
function dataSelectHandler(transaction, results){
// Handle the results
for (var i=0; i<results.rows.length; i++) {
var row = results.rows.item(i);
var newFeature = new Object();
newFeature.fname = row['fname'];
newFeature.age = row['age'];
newFeature.height = row['height'];
newFeature.weight = row['weight'];
newFeature.gender = row['gender'];
newFeature.date = row['date'];
newFeature.height2 = newFeature.height / 100
newFeature.BMI = newFeature.weight / (newFeature.height2 * newFeature.height2)
BMI = newFeature.BMI;
bmiresult = BMI.toFixed(3);
$('body').css('font-family',newFeature.height);
$('#content').html('<h4 id="your_weight">'+ newFeature.fname +' your BMI is: </h4><span>'+ bmiresult +'</span>');
if(newFeature.fname != '') {
$('#greeting').html('Hi '+newFeature.fname+'!');
$('#fname').val(newFeature.fname);
}
$('#height').val(newFeature.height);
$('select#age').find('option[value='+newFeature.age+']').attr('selected','selected');
$('#weight').val(newFeature.weight);
$('select#gender').find('option[value='+newFeature.gender+']').attr('selected','selected');
}
}
/***
**** Save 'default' data into DB table **
***/
function saveAll(){
prePopulate(1);
}
function errorHandler(transaction, error){
if (error.code==1){
// DB Table already exists
} else {
// Error is a human-readable string.
console.log('Oops. Error was '+error.message+' (Code '+error.code+')');
}
return false;
}
function nullDataHandler(){
console.log("SQL Query Succeeded");
}
/***
**** SELECT DATA **
***/
function selectAll(){
BMIDB.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM page_settings;", [], dataSelectHandler, errorHandler);
}
);
}
I am modifying a small online text editor. I have a series of dynamically generated fields: sub0 sub1 sub2 etc. I get stuck feeding the modified data back. subX.selection.setContent() - where X is the field number. how can I set X as a variable? Hi all, I use JS to dynamically generate HTML such as a <select> dropdown menu. I do it by placing an empty element where I want the dropdown to appear (i.e. <span id="dropdown"></span>) then getElementById('dropdown') and insert the HTML with innerHTML = html. But I could also do it by getting the empty element and then doing an "insertBefore" or "appendChild" call. Is one "preferred" over the other? Is one "better" than the other? Thanks. -- Roger Hi all, very new to Javascript, been searching the net for a simple script which has a text box with a button beside and when the visitor clicks the button the date is enter in to the text box automaticly. Easy, I guess if you know how. Thanks Hi guys! Hope you can help me out here - I found a script for a fairly neat little image gallery recently, and have successfully inserted it into my existing web page. Only problem is, it doesn't display in the browser until every last image is loaded, so when you have 20+ images (as I've modified the gallery to have), it takes a while to load, and might cause users to think nothing is happening on slower connections. So I'm basically just wondering if anyone could advise me on how to insert some code that would perhaps bring up a 'loading.gif' in its place until the gallery is loaded? I had a bash last night, but am a bit of a newbie to coding etc. and nothing I was trying was working. The code, which I shamelessly ripped from here, is as follows - Code: <html>
<head>
<title>Lightweight Image Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<style media="screen,projection" type="text/css">
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
</script>
</head>
<body>
<ul id="gallery">
<li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li>
<li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li>
<li><img src="images/cd_2.jpg" alt="CD Cover 2"></li>
<li><img src="images/cd_1.jpg" alt="CD Cover 1"></li>
<li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li>
<li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li>
<li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
<li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li>
<li><img src="images/inside_1.jpg" alt="Inside Magazine"></li>
<li><img src="images/oceanen_4.jpg" alt="Oceanen"></li>
</ul>
</body>
</html>
A working example in action can be seen here. Like I say I had a bash last night, where I tried a few different google-found methods, but most resulted in the loading.gif either being visible all the time, or invisible all the time, pretty useless. So, what do you guys reckon? Do-able? Any help will be very much appreciated! Thanks! Suppose I have the string 'ello'. I want to insert the letter 'h' in the beginning of that string. How do I do that without using a special function? I can only use the functions charAt and indexOf - anyone has any idea? hello people, can anyone help me with this? i have div element and picture inside it, and that picture is created with php gd (<img src="file.php"). What i need is a function which create new image and place it in that div. I don't know how to create new image with javascript when i call php file with header content type image. something like this?? function newImage(){ document.getElementById("foo").innerHtml = "<img src='file.php'/>"; } but of course this doesn't work so how to do that? thnx Hey I am looking for a better way of adding BBCode to a textarea. Here's the code I use right now: Code: function insertext(text){
document.addnews.userpost.focus(); document.addnews.userpost.value=document.addnews.userpost.value +" "+ text;
document.addnews.userpost.focus()
}
This adds the BBCode tag to the end of the text in the textarea. How can I make it insert the tags where the the textarea cursor is? And if possible too could I make it so if you were to highlight something and press the bold tag button it would add the tags around that automatically? Hey guys, I have a question about sending text to a textarea. What I want is, if I click on a button, a text has to be sent to my textarea, which I obtain from my mysql database. This last thing I can do myself, but I do not know how to send the text to my textarea. I don't know nothing from AJAX yet, so I think it can be done with AJAX, but also with javascript I guess. Could someone point me in the right direction? Thanks! Hello, Below I have my Small form: Code: <p id="join_our_mailing_list">Join our mailing list</p> <form method="post" name="join" action="#" /> <input type="text" class="input_text" name="join_us_email" id="join_us_email" /> <input type="submit" value="submit" class="button join_us_button" /> </form> Then I have my JS to process this... Code:
$(".join_us_button").click(function() {
var email = $("#join_us_email").val();
var dataString = 'join_us_email='+ email;
if(email=='')
{
$('p#join_our_mailing_list').replaceWith("<p>Provide email</p>");
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function()
{
$('p#join_our_mailing_list').replaceWith("<p>Thank you</p>");
}
});
}
return false;
});
});
How and what can I do to allow this form to insert into SQL Database? I'd like to insert into SQL their emailaddress, IP, date and referral page.... Thanks for anyone that can help! HI i have a complete web site . now , how can do the work that all the textboxes in the page have the style that when the users click on it , the background of them geta color . i don't want to insert this code one by one onclick="this.style.backgroundColor='#eeeeee';" thanks hi, On my mobile app, the 2nd input box isn't working as it should?! it's called weight1 can someone please help, here is my code: Code: <!doctype html>
<html>
<head>
<title>myBMI</title>
<script type="text/javascript" charset="utf-8">
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, added_on DATETIME)", []);
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var weight1 = document.getElementById("weight1");
var addedOn = new Date();
tx.executeSql("INSERT INTO bmical(height1, weight1, added_on) VALUES (?,?,?)",
[todoText, weight1, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM bmical", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>" + row.height1 + row.weight1 + row.added_on + " [<a href='javascript:void(0);' onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a>]</li>";
}
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
function addTodo() {
var height1 = document.getElementById("height1");
html5rocks.webdb.addTodo(height1.value);
height1.value = "";
}
</script>
</head>
<body onload="init();">
<p>Please enter daily your stats below</p>
<ul id="todoItems">
</ul>
<form type="post" onsubmit="addTodo(); return false;">
<ul class="individual">
<li><input type="text" class="submit" id="height1" name="height1" placeholder="Height" /></li>
<li><input type="text" class="submit" id="weight1" name="weight1" placeholder="Weight" /></li>
</ul>
<input type="submit" value="Add Todo Item"/>
</form>
</body>
</html>
|
|||||||