|
JavaScript - How To Implement Datepicker Into A Dynamic Add/remove Row Script
Hi, I got this two javascripts:
- Datepicker by Jason Moon (http://calendar.moonscript.com/dateinput.cfm) which can have multiple of this datepicker on a single form - Dynamic Add/Remove rows from http://viralpatel.net/blogs/2009/03/...avascript.html I would like to add rows of fields with each rows having it's individual datepicker. Code: <table id="billcmp_7" width="320" border="0">
<tr>
<td width="200" align="center"><script>DateInput('billcmp7_cycle', true)</script></td>
<td width="10"> </td>
<td width="100" align="center"><input name="billcmp7_name" type="text" /></td>
<td width="10"><INPUT type="checkbox" name="chk"/></td>
</tr>
</table>
<table width="320" border="0">
<tr>
<td colspan="4" align="center"><INPUT type="button" value="Add Row" onclick="addRow('billcmp_7')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('billcmp_7')" /></td>
</tr>
</table>
I just want this section Code: <script>DateInput('billcmp7_cycle', true)</script>
to work like Code: <script>DateInput('billcmp7_cycle_1', false)</script>
<script>DateInput('billcmp7_cycle_2', false)</script>
when click on the add button. Here's what i meant? Link cant get the time to be different as it is still read as single datepicker. Any1 has any idea how or any alternative? Similar TutorialsI have been using the following script for some time and it has only just been made known to me that it fails on todays date ! not sure if this is the case for other days but the days of the week are all messed up and do not show correctly for a date in June 2011. Code: var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();
// Get Element By Id
function ds_getel(id) {
return document.getElementById(id);
}
// Get the left and the top of the element.
function ds_getleft(el) {
var tmp = el.offsetLeft;
el = el.offsetParent
while(el) {
tmp += el.offsetLeft;
el = el.offsetParent;
}
return tmp;
}
function ds_gettop(el) {
var tmp = el.offsetTop;
el = el.offsetParent
while(el) {
tmp += el.offsetTop;
el = el.offsetParent;
}
return tmp;
}
// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');
// Output Buffering
var ds_ob = '';
function ds_ob_clean() {
ds_ob = '';
}
function ds_ob_flush() {
ds_oe.innerHTML = ds_ob;
ds_ob_clean();
}
function ds_echo(t) {
ds_ob += t;
}
var ds_element; // Text Element...
var ds_monthnames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]; // You can translate it for your language.
var ds_daynames = [
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
]; // You can translate it for your language.
// Calendar template
function ds_template_main_above(t) {
return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
+ '<tr>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Close]</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="7" class="ds_head">' + t + '</td>'
+ '</tr>'
+ '<tr>';
}
function ds_template_day_row(t) {
return '<td class="ds_subhead">' + t + '</td>';
// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}
function ds_template_new_week() {
return '</tr><tr>';
}
function ds_template_blank_cell(colspan) {
return '<td colspan="' + colspan + '"></td>'
}
function ds_template_day(d, m, y) {
return '<td class="ds_cell" onMouseout="this.style.background=\'#EEE\';" onMouseover="this.style.background=\'#999\';" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
// Define width the day row.
}
function ds_template_main_below() {
return '</tr>'
+ '</table>';
}
// This one draws calendar...
function ds_draw_calendar(m, y) {
// First clean the output buffer.
ds_ob_clean();
// Here we go, do the header
ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
for (i = 0; i < 7; i ++) {
ds_echo (ds_template_day_row(ds_daynames[i]));
}
// Make a date object.
var ds_dc_date = new Date();
ds_dc_date.setMonth(m - 1);
ds_dc_date.setFullYear(y);
ds_dc_date.setDate(1);
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
days = 31;
} else if (m == 4 || m == 6 || m == 9 || m == 11) {
days = 30;
} else {
days = (y % 4 == 0) ? 29 : 28;
}
var first_day = ds_dc_date.getDay();
var first_loop = 1;
// Start the first week
ds_echo (ds_template_new_week());
// If sunday is not the first day of the month, make a blank cell...
if (first_day != 0) {
ds_echo (ds_template_blank_cell(first_day));
}
var j = first_day;
for (i = 0; i < days; i ++) {
// Today is sunday, make a new week.
// If this sunday is the first day of the month,
// we've made a new row for you already.
if (j == 0 && !first_loop) {
// New week!!
ds_echo (ds_template_new_week());
}
// Make a row of that day!
ds_echo (ds_template_day(i + 1, m, y));
// This is not first loop anymore...
first_loop = 0;
// What is the next day?
j ++;
j %= 7;
}
// Do the footer
ds_echo (ds_template_main_below());
// And let's display..
ds_ob_flush();
// Scroll it into view.
//ds_ce.scrollIntoView();
}
// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
// Set the element to set...
ds_element = t;
// Make a new date, and set the current month and year.
var ds_sh_date = new Date();
ds_c_month = ds_sh_date.getMonth() + 1;
ds_c_year = ds_sh_date.getFullYear();
// Draw the calendar
ds_draw_calendar(ds_c_month, ds_c_year);
// To change the position properly, we must show it first.
ds_ce.style.display = '';
// Move the calendar container!
the_left = ds_getleft(t);
the_top = ds_gettop(t) + t.offsetHeight;
ds_ce.style.left = the_left + 'px';
ds_ce.style.top = the_top + 'px';
// Scroll it into view.
//ds_ce.scrollIntoView();
}
// Hide the calendar.
function ds_hi() {
ds_ce.style.display = 'none';
}
// Moves to the next month...
function ds_nm() {
// Increase the current month.
ds_c_month ++;
// We have passed December, let's go to the next year.
// Increase the current year, and set the current month to January.
if (ds_c_month > 12) {
ds_c_month = 1;
ds_c_year++;
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the previous month...
function ds_pm() {
ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
// We have passed January, let's go back to the previous year.
// Decrease the current year, and set the current month to December.
if (ds_c_month < 1) {
ds_c_month = 12;
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the next year...
function ds_ny() {
// Increase the current year.
ds_c_year++;
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the previous year...
function ds_py() {
// Decrease the current year.
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Format the date to output.
function ds_format_date(d, m, y) {
// 2 digits month.
m2 = '00' + m;
m2 = m2.substr(m2.length - 2);
// 2 digits day.
d2 = '00' + d;
d2 = d2.substr(d2.length - 2);
// YYYY-MM-DD
return d2 + '-' + m2 + '-' + y;
}
// When the user clicks the day.
function ds_onclick(d, m, y) {
// Hide the calendar.
ds_hi();
// Set the value of it, if we can.
if (typeof(ds_element.value) != 'undefined') {
ds_element.value = ds_format_date(d, m, y);
// this part is a personal bit of code to allow my page to update correctly and in time.
if("fireEvent" in ds_element)
ds_element.fireEvent("onChange");
else
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
ds_element.dispatchEvent(evt);
}
//
// Maybe we want to set the HTML in it.
} else if (typeof(ds_element.innerHTML) != 'undefined') {
ds_element.innerHTML = ds_format_date(d, m, y);
// I don't know how should we display it, just alert it to user.
} else {
alert (ds_format_date(d, m, y));
}
}
Hi, I have a regular expression which removes anything between <script> and </script> tags. The problem comes when there is more than one on a page, eg. Code: <script>lose this</script> content I want to keep <script>lose this</script> Everything in that string is removed... how can I limit it to complete tags only? I did a search but could only find ones that either remove tags only, or have the same problem as mine. Cheers, Gus I have a check box right now that calls an onClick event. Here is the Input: Code: <input name="usePad" type="checkbox" value="usePad" id="usePad" onclick="showBind('padShow','padOk')" />
Here is the Script: Code: var xmlhttpshowBind;
var showBindDiv;
function showBind(BindPage,BindDiv) {
xmlhttpshowBind=GetXmlHttpObject();
if (xmlhttpshowBind==null) {
alert ("Browser does not support HTTP Request");
return; }
var url="/scripts/"+BindPage+".php";
showBindDiv=BindDiv;
xmlhttpshowBind.onreadystatechange=showBindGet;
xmlhttpshowBind.open("GET",url,true);
xmlhttpshowBind.send(null); }
function showBindGet() {
if (xmlhttpshowBind.readyState==4) {
document.getElementById(showBindDiv).innerHTML=xmlhttpshowBind.responseText; } }
It works great to fill the div called for, but I would like it to remove the div contents if it's unchecked, I'm not sure how to do this?? Any help would be appreciated! Thank you in advance! I'm working on a webpage where I used this code to display random images. I used it for three images in a row and I keep getting white spacing in between them when they should be right up against each other. This is the code I'm using: Code: <script language="JavaScript">
<!--
/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
Over 400+ free JavaScripts here!
Keep this notice intact please
*/
function random_imglink(){
var myimagesblue=new Array()
//specify random images below. You can have as many as you wish
myimagesblue[1]="images/circles_blue/circle_bl_01.jpg"
myimagesblue[2]="images/circles_blue/circle_bl_02.jpg"
myimagesblue[3]="images/circles_blue/circle_bl_03.jpg"
myimagesblue[4]="images/circles_blue/circle_bl_04.jpg"
myimagesblue[5]="images/circles_blue/circle_bl_05.jpg"
myimagesblue[6]="images/circles_blue/circle_bl_06.jpg"
myimagesblue[7]="images/circles_blue/circle_bl_07.jpg"
myimagesblue[8]="images/circles_blue/circle_bl_08.jpg"
myimagesblue[9]="images/circles_blue/circle_bl_09.jpg"
myimagesblue[10]="images/circles_blue/circle_bl_10.jpg"
myimagesblue[11]="images/circles_blue/circle_bl_11.jpg"
var ry=Math.floor(Math.random()*myimagesblue.length)
if (ry==0)
ry=1
document.write('<img src="'+myimagesblue[ry]+'" border=0>')
}
random_imglink()
//-->
</script>
Is there a way to get the white space removed? Thanks Hello, I am new to Javascript. I copied this script from the web, but I get an error at this line: parent.removeChild(child); The error says "Invalid argument". Any suggestions are greatly appreciated. Code: <div id="parent" align=center>
<form name=mainfrm method=post>
<script language="JavaScript">
function doDelete(str1,str2) {
var parent = document.getElementById(str1);
var child = document.getElementById(str2);
parent.removeChild(child);
alert ("box removed");
}
</script>
<br><br>
<table>
<td class=stdbut1
onmouseover="this.className='stdbut1on'"
onClick="doDelete('parent','child');"
onmouseout="this.className='stdbut1'">Delete Box</td>
</table>
<br><br>
<div id="child" class=titlebox1>Box</div>
</form>
</div>
Hello Friend, I am using a javascript code installed with Dreamweaver for this page: http://www.alpinelakesair.com/newsite/charters.php When you open the page, (the script element is on the right), the first tab is already open. I would like none of the tabs to be open, so that you have to first click on a tab to open it. Also, when you start clicking on the tabs, a blue focus ring surrounds the active elements. I do not like the blue focus ring. Finally, you may notice that when you click on the tabs there is a slight jumping action that takes place among the tabs, a slight skip before the tab starts sliding up. So my questions a 1. how to not have any tabs open from the start. 2. how to get rid of the blue focus ring. (if you are seeing it) 3. not a big deal, but it would be nice to get rid of that skipping action so the sliding elements moved smoothly. My HTML is: Code: <div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">DHC-3 Turbo Otter Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">EADS Wilga 2000 Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Cessna 185 Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
</div>
My CSS is: Code: .Accordion {
overflow: hidden;
width: 250px;
height: 250px;
}
.AccordionPanel {
margin: 0px;
padding: 0px;
}
.AccordionPanelTab {
background-color: #000;
border: thin solid #363535;
margin: 0px;
margin-bottom: 5px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.9em;
text-transform: uppercase;
-moz-user-select: none;
-khtml-user-select: none;
}
.AccordionPanelContent {
overflow: auto;
margin: 0px;
margin-bottom: 5px;
padding: 5px 10px;
border: thin solid #363535;
}
.AccordionPanelOpen .AccordionPanelTab {
background-color: #7f0202;
margin-bottom: 0;
}
.AccordionPanelTabHover {
background-color: #7f0202;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}
.AccordionFocused .AccordionPanelTab {
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
}
And my JS is: Code: var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
{
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = true;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
this.attachBehaviors();
};
Spry.Widget.Accordion.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
if (!optionsObj)
return;
for (var optionName in optionsObj)
{
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
}
};
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
return false;
};
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
if (panel)
this.removeClassName(this.getPanelTab(panel), this.hoverClass);
return false;
};
Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
var panelA = this.currentPanel;
var panelB;
if (typeof elementOrIndex == "number")
panelB = this.getPanels()[elementOrIndex];
else
panelB = this.getElement(elementOrIndex);
if (!panelB || panelA == panelB)
return null;
var contentA = panelA ? this.getPanelContent(panelA) : null;
var contentB = this.getPanelContent(panelB);
if (!contentB)
return null;
if (this.useFixedPanelHeights && !this.fixedPanelHeight)
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
if (this.enableAnimation)
{
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
}
else
{
if(contentA)
{
contentA.style.display = "none";
contentA.style.height = "0px";
}
contentB.style.display = "block";
contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
}
if(panelA)
{
this.removeClassName(panelA, this.openClass);
this.addClassName(panelA, this.closedClass);
}
this.removeClassName(panelB, this.closedClass);
this.addClassName(panelB, this.openClass);
this.currentPanel = panelB;
return panelB;
};
Spry.Widget.Accordion.prototype.closePanel = function()
{
// The accordion can only ever have one panel open at any
// give time, so this method only closes the current panel.
// If the accordion is in fixed panel heights mode, this
// method does nothing.
if (!this.useFixedPanelHeights && this.currentPanel)
{
var panel = this.currentPanel;
var content = this.getPanelContent(panel);
if (content)
{
if (this.enableAnimation)
{
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
}
else
{
content.style.display = "none";
content.style.height = "0px";
}
}
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
this.currentPanel = null;
}
};
Spry.Widget.Accordion.prototype.openNextPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() + 1);
};
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() - 1);
};
Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
return this.openPanel(0);
};
Spry.Widget.Accordion.prototype.openLastPanel = function()
{
var panels = this.getPanels();
return this.openPanel(panels[panels.length - 1]);
};
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
if (panel != this.currentPanel)
this.openPanel(panel);
else
this.closePanel();
if (this.enableKeyboardNavigation)
this.focus();
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.Accordion.prototype.onFocus = function(e)
{
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.Accordion.prototype.onBlur = function(e)
{
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var panels = this.getPanels();
if (!panels || panels.length < 1)
return false;
var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
while (nextPanel)
{
if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
break;
nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
}
if (nextPanel && currentPanel != nextPanel)
this.openPanel(nextPanel);
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
if (!panel)
return;
var tab = this.getPanelTab(panel);
if (tab)
{
var self = this;
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
}
};
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
}
catch (e) {}
};
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
{
var content = this.getPanelContent(panel);
if (isDefault)
{
this.currentPanel = panel;
this.removeClassName(panel, this.closedClass);
this.addClassName(panel, this.openClass);
// Attempt to set up the height of the default panel. We don't want to
// do any dynamic panel height calculations here because our accordion
// or one of its parent containers may be display:none.
if (content)
{
if (this.useFixedPanelHeights)
{
// We are in fixed panel height mode and the user passed in
// a panel height for us to use.
if (this.fixedPanelHeight)
content.style.height = this.fixedPanelHeight + "px";
}
else
{
// We are in variable panel height mode, but since we can't
// calculate the panel height here, we just set the height to
// auto so that it expands to show all of its content.
content.style.height = "auto";
}
}
}
else
{
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
if (content)
{
content.style.height = "0px";
content.style.display = "none";
}
}
this.attachPanelHandlers(panel);
};
Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
var panels = this.getPanels();
for (var i = 0; i < panels.length; i++)
this.initPanel(panels[i], i == this.defaultPanel);
// Advanced keyboard navigation requires the tabindex attribute
// on the top-level element.
this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
if (this.enableKeyboardNavigation)
{
var self = this;
Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
}
};
Spry.Widget.Accordion.prototype.getPanels = function()
{
return this.getElementChildren(this.element);
};
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
return this.currentPanel;
};
Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
var panels = this.getPanels();
for( var i = 0 ; i < panels.length; i++ )
{
if( panel == panels[i] )
return i;
}
return -1;
};
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
return this.getPanelIndex(this.currentPanel);
};
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
if (!panel)
return null;
return this.getElementChildren(panel)[0];
};
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
if (!panel)
return null;
return this.getElementChildren(panel)[1];
};
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
{
var children = [];
var child = element.firstChild;
while (child)
{
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
}
return children;
};
Spry.Widget.Accordion.prototype.focus = function()
{
if (this.element && this.element.focus)
this.element.focus();
};
Spry.Widget.Accordion.prototype.blur = function()
{
if (this.element && this.element.blur)
this.element.blur();
};
/////////////////////////////////////////////////////
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
this.timer = null;
this.interval = 0;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;
this.onComplete = null;
this.panel = panel;
this.panelToOpen = accordion.getElement(panel);
this.panelData = [];
this.useFixedPanelHeights = accordion.useFixedPanelHeights;
Spry.Widget.Accordion.setOptions(this, opts, true);
this.interval = Math.floor(1000 / this.fps);
// Set up the array of panels we want to animate.
var panels = accordion.getPanels();
for (var i = 0; i < panels.length; i++)
{
var p = panels[i];
var c = accordion.getPanelContent(p);
if (c)
{
var h = c.offsetHeight;
if (h == undefined)
h = 0;
if (p == panel && h == 0)
c.style.display = "block";
if (p == panel || h > 0)
{
var obj = new Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.distance = obj.toHeight - obj.fromHeight;
obj.overflow = c.style.overflow;
this.panelData.push(obj);
c.style.overflow = "hidden";
c.style.height = h + "px";
}
}
}
};
Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
var self = this;
this.startTime = (new Date).getTime();
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
if (this.timer)
{
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow
// properties on the panels we were animating!
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
obj.content.style.overflow = obj.overflow;
}
}
this.timer = null;
};
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
{
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
if (obj.panel != this.panel)
{
obj.content.style.display = "none";
obj.content.style.height = "0px";
}
obj.content.style.overflow = obj.overflow;
obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
}
if (this.onComplete)
this.onComplete();
return;
}
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
}
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Thank you very much to whomever can help. and by the way I have no knowledge in javascript. Alex Hi, I am using this script Code: <script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=14;
var splittercolor="none";
var relatedpoststitle="Related Results";
</script>
As you can see it has a variable that lets me give a name to the results, in this case I have used Related Results. This code is used once at the back and in that way it used by my every page. So e-g if I change it to More Results it will changed everywhere on all pages. I don't want it like this, I want to be able to give a different name to every page like on one it is like 'More Images Results' while on 2nd it is something else. you can see a demo here at this page http://bloghutsbeta.blogspot.com/201...ng-slider.html hello, i am writing a script that will update a dropdown list based on the selection of a previous list. the script is run by a PHP script, so instead of posting the PHP, i will post an example client-side script. the hierachy is: category, sub category, brand (but sometimes there exists no sub category and the PHP script queries and adds brands instead) everything works correctly, except for one major issue: you can not change the selection of the third (brand) box this could be an easy fix for some coders, but i am not experienced in javascript and could really use some help. here is an example script, sorry it is so long Code: <script language="javascript">
function fillprodCat(){
// this function is used to fill the category list on load
addOption(document.prodCatSubCatBrand_list.add_prodCat, "1", "HD Video");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "2", "Components");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "3", "Audiophiles");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "4", "Speakers");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "5", "Whole House Audio");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "6", "Furniture");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "7", "Accessories");
}
function SelectprodSubCat(){
// on selection of category, this is called
removeAllOptions(document.prodCatSubCatBrand_list.add_prodSubCat);
if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"1", "HD Television");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"2", "HD Projectors");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"3", "Screens");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"4", "Turntables");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"5", "Receivers, amps & preamps");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"6", "DVD & CD players");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"8", "AV Furniture");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"7", "Armchairs");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"10", "Power Conditioning");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"9", "Remote Controls");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"11", "Mounts");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"12", "Cables & Interconnects");
}
}
function SelectprodBrand(){
// ON selection of category, sub category, or brand this is called
removeAllOptions(document.prodCatSubCatBrand_list.add_prodBrand);
if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "1"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"1", "Hitachi");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"2", "JVC");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"3", "Panasonic");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"4", "Pioneer");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"5", "Samsung");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"6", "Sharp");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "2"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"7", "Epson");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"8", "JVC");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "3"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"9", "Da-Lite");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "4"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"10", "Music Hall Audio");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "5"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"11", "Arcam");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"12", "Bose");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"13", "Integra");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"14", "Krell");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"15", "Pioneer");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "6"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"16", "Canton");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"17", "Dali");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"18", "Tru Audio");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"19", "Von Schweikert");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"20", "Elan");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "8"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"21", "BDI");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"22", "Bello");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "7"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "10"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"23", "Richard Gray's Power Company");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "9"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "11"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "12"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"24", "Analysis Plus");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"25", "Tributaries");
}
}
}
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
</script>
please let me know if this is too confusing to follow (because it certainly looks like it could be), and i will attempt to clean it up Total javascript noob here, but managed to get this working: Code: $(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect1024.css"});
}
else
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect800.css"});
}
if ((screen.width>=1280) && (screen.height>=1024))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detectlarge.css"});
}
});
Like i said, its working fine. However i was hoping to make it also work on the fly, so if the user resizes the window, the different stylesheets are used. Ive been told to: 1. Put the working gubbins into a separate function and 2. Call the function from both load and resize events - But i dont know how to do this. Any help would be really appreciated! something like this ( java ) http://www.jgraph.com/layout.html I'd like to place an AJAX call to load another SELECT menu in my form, and I'm having trouble finding a tutorial. Can someone point me to a good tute, or provide some guidance/examples here? For your Copying/Pasting pleasure , here's an example button for which I'd include the onclick(): Code: <button type="button" >Add</button> And here's an example SELECT menu: Code: <select id="idNumber" name="weekday_1['workPeriod_new'][] > <option value="1" >one</option> <option value="2" >2</option> </select> Thanks-a-bunch, ~ Mo NOTE: Overall, I'm pretty green in JS. Hi, I am making a widget to work on any site, that means not my site, so I have no control of what other libraries are used on the page. Thats why I am loading my own jQuery libraries dynamically and then execute my own code. An issue I have that some sites are loading fine and all is working as expected, but some sites are executing the code 2 times. I have made a page dump and put on my own server, so I can replicate the issue better. GOOD: here is a page that works OK: (see the button that says: send these contact details and map to your mobile.) Code: http://test.plustest.info/suffolk/contact.html BAD: here is the page that shows the button I am trying to load 2 times: Code: http://test.plustest.info/cream.html As you can see the button appears 2 times, which is wrong... Even it shows 2 times, the popup appears just ok when you click on the button. Would anyone be able to check what can be wrong here? the code is in the: Code: <div id="now_send_it_wrapper"> so its easier to find. Any help would be much appreciated. Thanks, Vladas I would like to use the jquery datepicker to populate 2 input fields with the same date. I need the 2 fields to display the date in different formats though. So for example one would be displayed as 2009-11-26 and the other as Thu 26 Nov 2009 Here's the code I have so far (which does not work)... Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtStartDate").datepicker({ dateFormat: 'D d M yy' });
$("#txtStartDate2").datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<p><input name="startDate" id="txtStartDate" type="text" value="" />Dept. date:</p>
<input name="startDate" id="txtStartDate2" value="" type="text" />
</body>
I am trying to extend my plug in by restricting the sunday from the calendar. I am not sure how to do this with my existing code. here is the code which is currently not working: <script type="text/javascript"> $(function() { // Tabs $('#datepicker1').datepicker({ beforeShowDay: function(date) { return [(date.getDay() > 1), ""]; } minDate: 0, maxDate: "+12M +0D", dateFormat: 'dd-mm-yy' }); }); </script> Can anyone see anything obvious?? Hello, i'm trying to insert a dynamic js file which contains multiple functions in it (for the example : function x, function y) and it seems that my google chrome doesn't really like it so much is there anyway you know i can bypass it and make it work and both web browsers code examples: // this is where the js file supposed to go <script id="ScriptFile"> </script> //1.js contains function x and function y document.getElementById('ScriptFile').src = "/Mysite/js/1.js" later on i need to preform some actions with function x & y. Couple more issues i need to explain first there are number of js files (1,2,3 .... n ) which all contain the same functions but with different data so i cant register them hard-coded if i type the function x into the "ScriptFile" block, it does work.. its not the function problem. same goes if i include it as source in the "ScriptFile" block (<script id="ScriptFile" src="/Mysite/js/1.js") this only gives me an error while using chrome, works perfectly fine under explorer the error says it cant find function x. thanks alot! Hello everyone! I am using a javascript datepicker for a form field, and I had not noticed this before someone brought it up. I dont remember where I got the script but I am wondering if this error can be fixed. I had a look though the code but I do not program javascript, so nothing sticks out to me. The problem comes when there is already a date in the field. Let me start by saying we format our dates as dd/mm/yyyy. When a user clicks the field and opens the calendar it automatically goes to the date that is in the field (if there is one). Everything works fine, but when there its a number in the dd/ position that is under 12, the calendar uses it as the month. If the number is over 12, it uses the /mm/ as the month, which is correct. So today for example, if the date in the field is 08/10/2010, and a user clicks the field to open the calendar, the calendar goes to August 2010... If the date is 15/10/2010 it will go to October which is correct. Sorry for the length. I am wondering if this can be fixed somehow because finding a new datepicker and switching it on all my pages would take a very long time. Below is the datepicker.js, thanks to anyone who has time to take a look! Code: /*
* DatePicker
* @author Rick Hopkins
* @modified by Micah Nolte and Martin Vašina
* @version 0.3.2
* @classDescription A date picker object. Created with the help of MooTools v1.11
* MIT-style License.
-- start it up by doing this in your domready:
$$('input.DatePicker').each( function(el){
new DatePicker(el);
});
*/
var DatePicker = new Class({
/* set and create the date picker text box */
initialize: function(dp){
// Options defaults
this.dayChars = 1; // number of characters in day names abbreviation
this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
this.format = 'dd/mm/yyyy';
this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
this.startDay = 7; // 1 = week starts on Monday, 7 = week starts on Sunday
this.yearOrder = 'asc';
this.yearRange = 10;
this.yearStart = (new Date().getFullYear());
// Finds the entered date, or uses the current date
if(dp.value != '') {
dp.then = new Date(dp.value);
dp.today = new Date();
} else {
dp.then = dp.today = new Date();
}
// Set beginning time and today, remember the original
dp.oldYear = dp.year = dp.then.getFullYear();
dp.oldMonth = dp.month = dp.then.getMonth();
dp.oldDay = dp.then.getDate();
dp.nowYear = dp.today.getFullYear();
dp.nowMonth = dp.today.getMonth();
dp.nowDay = dp.today.getDate();
// Pull the rest of the options from the alt attr
if(dp.alt) {
options = Json.evaluate(dp.alt);
} else {
options = [];
}
dp.options = {
monthNames: (options.monthNames && options.monthNames.length == 12 ? options.monthNames : this.monthNames) || this.monthNames,
daysInMonth: (options.daysInMonth && options.daysInMonth.length == 12 ? options.daysInMonth : this.daysInMonth) || this.daysInMonth,
dayNames: (options.dayNames && options.dayNames.length == 7 ? options.dayNames : this.dayNames) || this.dayNames,
startDay : options.startDay || this.startDay,
dayChars : options.dayChars || this.dayChars,
format: options.format || this.format,
yearStart: options.yearStart || this.yearStart,
yearRange: options.yearRange || this.yearRange,
yearOrder: options.yearOrder || this.yearOrder
};
dp.setProperties({'id':dp.getProperty('name'), 'readonly':true});
dp.container = false;
dp.calendar = false;
dp.interval = null;
dp.active = false;
dp.onclick = dp.onfocus = this.create.pass(dp, this);
},
/* create the calendar */
create: function(dp){
if (dp.calendar) return false;
// Hide select boxes while calendar is up
if(window.ie6){
$$('select').addClass('dp_hide');
}
/* create the outer container */
dp.container = new Element('div', {'class':'dp_container'}).injectBefore(dp);
/* create timers */
dp.container.onmouseover = dp.onmouseover = function(){
$clear(dp.interval);
};
dp.container.onmouseout = dp.onmouseout = function(){
dp.interval = setInterval(function(){
if (!dp.active) this.remove(dp);
}.bind(this), 500);
}.bind(this);
/* create the calendar */
dp.calendar = new Element('div', {'class':'dp_cal'}).injectInside(dp.container);
/* create the date object */
var date = new Date();
/* create the date object */
if (dp.month && dp.year) {
date.setFullYear(dp.year, dp.month, 1);
} else {
dp.month = date.getMonth();
dp.year = date.getFullYear();
date.setDate(1);
}
dp.year % 4 == 0 ? dp.options.daysInMonth[1] = 29 : dp.options.daysInMonth[1] = 28;
/* set the day to first of the month */
var firstDay = (1-(7+date.getDay()-dp.options.startDay)%7);
/* create the month select box */
monthSel = new Element('select', {'id':dp.id + '_monthSelect'});
for (var m = 0; m < dp.options.monthNames.length; m++){
monthSel.options[m] = new Option(dp.options.monthNames[m], m);
if (dp.month == m) monthSel.options[m].selected = true;
}
/* create the year select box */
yearSel = new Element('select', {'id':dp.id + '_yearSelect'});
i = 0;
dp.options.yearStart ? dp.options.yearStart : dp.options.yearStart = date.getFullYear();
if (dp.options.yearOrder == 'desc'){
for (var y = dp.options.yearStart; y > (dp.options.yearStart - dp.options.yearRange - 1); y--){
yearSel.options[i] = new Option(y, y);
if (dp.year == y) yearSel.options[i].selected = true;
i++;
}
} else {
for (var y = dp.options.yearStart; y < (dp.options.yearStart + dp.options.yearRange + 1); y++){
yearSel.options[i] = new Option(y, y);
if (dp.year == y) yearSel.options[i].selected = true;
i++;
}
}
/* start creating calendar */
calTable = new Element('table');
calTableThead = new Element('thead');
calSelRow = new Element('tr');
calSelCell = new Element('th', {'colspan':'7'});
monthSel.injectInside(calSelCell);
yearSel.injectInside(calSelCell);
calSelCell.injectInside(calSelRow);
calSelRow.injectInside(calTableThead);
calTableTbody = new Element('tbody');
/* create day names */
calDayNameRow = new Element('tr');
for (var i = 0; i < dp.options.dayNames.length; i++) {
calDayNameCell = new Element('th');
calDayNameCell.appendText(dp.options.dayNames[(dp.options.startDay+i)%7].substr(0, dp.options.dayChars));
calDayNameCell.injectInside(calDayNameRow);
}
calDayNameRow.injectInside(calTableTbody);
/* create the day cells */
while (firstDay <= dp.options.daysInMonth[dp.month]){
calDayRow = new Element('tr');
for (i = 0; i < 7; i++){
if ((firstDay <= dp.options.daysInMonth[dp.month]) && (firstDay > 0)){
calDayCell = new Element('td', {'class':dp.id + '_calDay', 'axis':dp.year + '|' + (parseInt(dp.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
} else {
calDayCell = new Element('td', {'class':'dp_empty'}).appendText(' ').injectInside(calDayRow);
}
// Show the previous day
if ( (firstDay == dp.oldDay) && (dp.month == dp.oldMonth ) && (dp.year == dp.oldYear) ) {
calDayCell.addClass('dp_selected');
}
// Show today
if ( (firstDay == dp.nowDay) && (dp.month == dp.nowMonth ) && (dp.year == dp.nowYear) ) {
calDayCell.addClass('dp_today');
}
firstDay++;
}
calDayRow.injectInside(calTableTbody);
}
/* table into the calendar div */
calTableThead.injectInside(calTable);
calTableTbody.injectInside(calTable);
calTable.injectInside(dp.calendar);
/* set the onmouseover events for all calendar days */
$$('td.' + dp.id + '_calDay').each(function(el){
el.onmouseover = function(){
el.addClass('dp_roll');
}.bind(this);
}.bind(this));
/* set the onmouseout events for all calendar days */
$$('td.' + dp.id + '_calDay').each(function(el){
el.onmouseout = function(){
el.removeClass('dp_roll');
}.bind(this);
}.bind(this));
/* set the onclick events for all calendar days */
$$('td.' + dp.id + '_calDay').each(function(el){
el.onclick = function(){
ds = el.axis.split('|');
dp.value = this.formatValue(dp, ds[0], ds[1], ds[2]);
this.remove(dp);
}.bind(this);
}.bind(this));
/* set the onchange event for the month & year select boxes */
monthSel.onfocus = function(){ dp.active = true; };
monthSel.onchange = function(){
dp.month = monthSel.value;
dp.year = yearSel.value;
this.remove(dp);
this.create(dp);
}.bind(this);
yearSel.onfocus = function(){ dp.active = true; };
yearSel.onchange = function(){
dp.month = monthSel.value;
dp.year = yearSel.value;
this.remove(dp);
this.create(dp);
}.bind(this);
},
/* Format the returning date value according to the selected formation */
formatValue: function(dp, year, month, day){
/* setup the date string variable */
var dateStr = '';
/* check the length of day */
if (day < 10) day = '0' + day;
if (month < 10) month = '0' + month;
/* check the format & replace parts // thanks O'Rey */
dateStr = dp.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
dp.month = dp.oldMonth = '' + (month - 1) + '';
dp.year = dp.oldYear = year;
dp.oldDay = day;
/* return the date string value */
return dateStr;
},
/* Remove the calendar from the page */
remove: function(dp){
$clear(dp.interval);
dp.active = false;
if (window.opera) dp.container.empty();
else if (dp.container) dp.container.remove();
dp.calendar = false;
dp.container = false;
$$('select.dp_hide').removeClass('dp_hide');
}
});
Hi, I have downloaded the datepicker code from the site http://www.javascriptkit.com/script/...calendar.shtml It's working fine with Firefox but when run the application on Safari/Chrome and when I load the calendar and try to expand the expansion is uneven... only the center column i.e Wednesday is getting expanded and others are remaining constant.. but in Firefox it's working fine... Can somebody help me in fixing it.. Thanks, Ram Hi I was playing around with the jQuery Multiple months plugin and was wondering if there was anyway I could display 4 months in it with 2 months on top and the other two months at bottom. OR If that is not possible then can we display 2 different instance of calendars something like this screenshot but changing the month on either one would change the other two months of the other calendar at the same time. If anyone can help, i will be greateful. Thanks in advance I currently am using the jQuery UI DatePicker for my page. For each date that has an "event" listed for that day, the date is highlighted. The other part of my page on the bottom has a "previous" and "next" button. This is basic record selection/navigation pretty much, but I am new to Javascript. Is there an easy way to navigate through these? Any help would be majorly appreciated. Thanks |
|||||||