|
JavaScript - Using Images To Cycle Through Jquery Ui's Datepicker
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 Similar TutorialsHi I have a built this Jquery code: http://blog.mehdi.biz/2010/02/vertic...ry-lovers.html I want the buttons to auto cycle insted of hovering can anyone help please? 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>
Hi, Does anyone know how to make the cycle function in jquery unobtrusive? I've got the following code and when I disable javascript, I get a nasty long list of images Jquery code: $(document).ready(function() { $('.homepage-slideshow').cycle({ fx: 'fade', befo onAfter, pause: 1, timeout: 0, pager: '#nav' }); }); function onAfter() { var cycle_href = this.href; var brokenstring = this.title.split(" :: "); var cycle_title = brokenstring[0]; var cycle_descr = brokenstring[1]; $('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>'); $('#output-descr').html(cycle_descr); } Html code: <div class="homepage-slideshow"> <a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a> <a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a> </div> <div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div> <div class="homepage-metadata"> <p id="output-descr"></p> <h3 id="output"></h3> </div> Hello all I have a problem implementing too JQuery tools; Cycle and Fullsize (together). I have uploaded an example over at: http://lawrencebrown.eu/jquery/index.html The problem is that only the first image pics up the Full size script, I have bene told by a friend to add the following into code into the cycle script: Code: after: function () {
*$("div.album img").fullsize();
}
I have tried putting this in different places from lines 19 to 43 on index.html with no winning results yet. Any help you can offer to the mark up between lines 19 to 43 would be great. I appreciate that their are plenty of other lightbox solutions that can solve this problem - I have even had a few up and running, however this is a specific request on this job to use Fullsize. Full size docs: http://www.addfullsize.com/ Cycle docs: http://malsup.com/jquery/cycle/ Thanks for you time Lawrence Can someone please tell me how I can make the datepicker pick a date that is after a certain date I choose. <script type="text/javascript"> $(document).ready(function() { $( "#date" ).datepicker({ minDate: new Date(<?php echo $split_date[2];?>, <?php echo $split_date[0] - 1;?>, <?php echo $split_date[0];?>)}); }); </script> <?php /* I am trying to get the date from a dynamic php variable. For eg: */ $date='03/08/2011'; $split_date=explode("/",$date); echo $split_date[0]; echo $split_date[1]; echo $split_date[2]; ?> but nothing i tried so far works! Hi, I am using jQuery datepicker's date range, I have a dynamic form where date range fields are added dynamically, for this reason I have set the two selectors for jQuery date range to classes. Below is my code: Code: $( ".datepicker_start_date, .datepicker_end_date" ).livequery(function() {
var dates = $( ".datepicker_start_date, .datepicker_end_date" ).datepicker({
defaultDate: "+1w",
changeMonth: false,
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var getclass = $(this).attr("class");
var option = getclass.indexOf("datepicker_start_date") != -1 ? "minDate" : "maxDate",
instance = $(this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
The above works perfect if I have just two field to range the date such as fields with class .datepicker_start_date and .datepicker_end_date. But if I have multiple fields like have 3-4 more date range fields, it will just mess the dates and add dates of field1 to field 3 and vice versa. I would appreciate if someone could help. Many Thanks Hi, I have 2 calendars using jquery UI datepicker. The first calendar is default to todays date. What I need to happen is for the second calendar default date to change to default date (of first calendar) + 1 day. I'm really not too sure how to do this... So any help would be great! This is the code I have so far: [CODE] $(document).ready(function(){ $("#startDate").datepicker({ dateFormat: "dd/mm/yy" }).val() $('#startDate').datepicker('setDate', new Date()); }); $(document).ready(function(){ $("#endDate").datepicker({ dateFormat: "dd/mm/yy" }).val() }); $('#startDate').datepicker({onSelect: function(dateStr) { $('#endDate').datepicker('option', 'defaultDate', dateStr); }}); $('#endDate').datepicker(); [/ICODE] i want to know how to Upload images or videos through drag and drop (jquery or html5 tools)
hi, I am fairly new to jquery and would like som direction on how to complete this menu. I have a list which has 6 bg images which have on and active state images. these are are currenly changing when you hover using the a:hover css. my question is i have a fairly large page and as you scroll down the menu follows the top of the screen but what i would like to happen is when the menu reaches a certain point on the page the menu item that it corrosponds to becomes active (changes to the on state bg image). i have an idea that as you scroll down the page and you get to a certain position on the page you would remove the classes for all of them. use the selecter to select my id and add a special class with that specific bg image on it. the only part i am struggling with is how would i determin how far down the page i am i know theres a function called .position() and you can use position.top. but not sure how i can use that to help me. if you could point me in the direction or just a hint that would be really helpful. thanks in advance I have 4 images and these images are changing automatically with duration of 2 seconds with show hide animation. and there are 4 bullets with mentioned above 4 images. these bullets are highlighting for example if image number 1 is showing than bullet number 1 is highlighting. same thing for other 3 bullets and images please send me the code for it I am trying to set up a jQuery carousel on my home page. I want it to operate by mouse - also auto scrolling, be horizontal, be circular, show one image at once. I currently have three images to show one at a time in a containing div. All three images are showing together. One is in the container, in the right place, two others are shown below it. These two should be hidden in the carousel. The carousel itself, does not work. Please can anyone tell me what I am doing wrong?! I would like to keep, at least some, of my hair! Here is my code in the head; Code: <link rel="stylesheet" type="text/css" href="css/deestyle.css" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<!-- Optional -->
<script type="text/javascript" src="js/mousewheel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$(".carousel").jCarouselLite({
mouseWheel: true,
auto: 800,
speed: 500,
vertical: false,
circular: true,
visible: 1
});
});
});
</script>
This is the code in the body;
<div class="carousel">
<ul id="slides">
<li><img src="images/imagered.jpg" alt="" width="650" height="350" ></li>
<li><img src="images/imageblue.jpg" alt="" width="650" height="350" ></li>
<li><img src="images/imagegreen.jpg" alt="" width="650" height="350" ></li>
</ul>
</div>
Here is the CSS code;
.carousel {
position: absolute;
top: 200px;
right: 0px;
width: 650px;
height: 350px;
margin: 0px;
padding: 0px;
border: 1px solid #00ff00;
}
#slides {
list-style-type:none;
float: left;
padding: 0;
margin: 0;
}
Big thank you's for any help, in advance Hello, I have this short script he Code: function resizeImages() { //Function will be ran onload in the <body> tag
var img = document.images; //Puts all the images in an array
for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
var parentElement = img[i].parentNode; //Gets parent element of image
var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
var imgWidth = img[i].width(); //Gets image width
var parentHeight = parentElement.height(); //Gets height of parent element
var imgHeight = img[i].height();//Gets image height
if (parentWidth < imgWidth){
img[i].width(parentWidth); //Sets width of image to width of parent element
img[i].style.height = "auto"; //Scales height
}
if (parentHeight > imgHeight){
img[i].height(parentHeight); //Sets height of image to height of parent element
img[i].style.width = "auto"; //Scales width
}
alert(parentWidth); //To test if parentNode is working correctly. Should return an integer.
}
}
It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage. Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed. The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder. Thank you, Jared Hey all, Hopefully I can explain this so it makes sense. I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it. Thanks for any help! We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are greatly appreciated. Code: <style type="text/css">
.al {display:none}
.ca {display:none}
.ct {display:none}
.ga {display:none}
.il {display:none}
.la {display:none}
.ma {display:none}
.mi {display:none}
.mn {display:none}
.mo {display:none}
.ms {display:none}
.nc {display:none}
.ne {display:none}
.nh {display:none}
.nv {display:none}
.ny {display:none}
.or {display:none}
.sc {display:none}
.tn {display:none}
.tx {display:none}
.va {display:none}
.vt {display:none}
.wa {display:none}
.wi {display:none}
</style>
<script type="text/javascript">
function showHide(cls, show) {
for (var i=0; i<document.styleSheets.length; i++) {
// browser-compatibility
var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].cssRules;
for (var j = 0; j < rule.length; j++) {
if (rule[j].selectorText == "." + cls) { //find css selector
rule[j].style.display = (show) ? 'block' : 'none';
}
}
}
}
function selAction(sel) {
for (var i = 0; i < sel.options.length; i++) {
showHide(sel.options[i].value, i == sel.selectedIndex);
}
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="3">
<select name="type" onchange="selAction(this);">
<strong><option value="et">
Please Select Your State:
</option>
<option value="al">Alabama</option>
<option value="ca">California</option>
<option value="ct">Connecticut</option>
<option value="ga">Georgia</option>
<option value="il">Illinois</option>
<option value="la">Louisiana</option>
<option value="ma">Massachusetts</option>
<option value="mi">Michigan</option>
<option value="mn">Minnesota</option>
<option value="mo">Missouri</option>
<option value="ms">Mississippi</option>
<option value="nc">North Carolina</option>
<option value="ne">Nebraska</option>
<option value="nh">New Hampshire</option>
<option value="nv">Nevada</option>
<option value="ny">New York</option>
<option value="or">Oregon</option>
<option value="sc">South Carolina</option>
<option value="tn">Tennessee</option>
<option value="tx">Texas</option>
<option value="va">Virginia</option>
<option value="vt">Vermont</option>
<option value="wa">Washington</option>
<option value="wi">Wisconsin</option></strong> </select>
</td>
</tr>
<tr class="al">
<td>
No issues in your state at this time.</td>
</tr>
<tr class="ca">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ct">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ga">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="il">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="la">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ma">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mi">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mn">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mo">
<td> No issues in your state at this time. </td>
</tr>
<tr class="ms">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nc">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ne">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nh">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nv">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ny">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="or">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="sc">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="tn">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="tx">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="va">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="vt">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="wa">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="wi">
<td>
No issues in your state at this time.
</td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
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 figure out a way of having + and - buttons which cycle through the options in a select box such as: <select name="distance" id="jr_radius"> <option value="0.5">0.5 Miles</option> <option value="1">1 Mile</option> <option value="3" selected="selected">3 Miles</option> <option value="5">5 Miles</option> <option value="10">10 Miles</option> </select> So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right. Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5". Does that make sense? Any help will be greatly appreciated! Hi, I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located: Code: // create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
"header/images/tankimage2.gif",
"header/images/tankimage3.gif",
"header/images/tankimage4.gif")
Here is the code in the master page which finds the javascript: Code: <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script>
Here is the function call in the masterpage to fade and cycle the images: Code: <body onload="FadeAndCycleImages()"> Here is the code in the masterpage which references the cycling images: Code: <span class="fadingimages">
<img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" />
</span>
Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated. Thank you, petela Hello everybody, I'll quit new as it comes to programming, so please forgive this nono on forehand. I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout. Thanks for your help. Code: <html>
<head>
<script language='javascript'>
function blink(elementid){
colorarray = Array(
'#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3',
'#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786',
'#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122',
'#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f',
'#9c1c0f');
i=0;
setInterval ("changecolor('"+elementid+"')",200);
}
function changecolor(x) {
var x= document.getElementById(x);
if (x != null){
x.style.color = colorarray[i];
if (i==24){ i= 0;
colorarray = colorarray.reverse();
}
}
i++;
}
var text=new Array();
text[0] = "text 1";
text[1] = "text 2";
text[2] = "text 3";
</script>
</head>
<body bgcolor="#ECFFEC">
<script language="javascript">blink('fade');</script>
// INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY
<div id="fade">TEXT</div>
</body>
</html>
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');
}
});
I want to loop through a form containing various fields and replace them with values I have in a JS object. E.g. (1) <form id="theform"> <input type="text" name="field_1" value="" /> <input type="checkbox" name="field_2" value="" /> </form (2) object.field_1 = "Dave"; object.field_2 = ""; // empty as not checked, else holds value of checked one -- The problem is: what about checkboxes and <select> drop downs, and radios?? Is there a script like this around as I'm guessing this could be useful for Ajax to populate input boxes in some situations (depending on the content etc.) so I'm guessing I'm not the only one who needs this? |
|||||||