|
JavaScript - Mootools Datepicker Ignores Accents
Similar TutorialsI'm currently trying to make a contact form using mootools FormCheck and mootools Form.Send in conjunction with each other. Each one will function correctly individually, but once I have all three: mootools.js (required by form.send) mootools-more.js (required by FormCheck) mootools-core.js (required by FormCheck) linked in my header, the form.send becomes dominant and my formcheck doesn't function at all. I'm specifically using form.send so that I can post a success (or failure) message without reloading the contact page. I'm using FormCheck - obviously to check that required fields are filled out. I have stripped the form from the website itself here. and here are the two pieces of code I'm using: FormCheck Code: <script type="text/javascript">
window.addEvent('domready', function(){
new FormCheck('myform');
});
</script>
Form.Send Code: <script type="text/javascript">
var fx = {
'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
};
var showHide = function( el ){
fx.loading.set(0);
(fx[ el ]).start(0,1);
(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
}
$('submit').addEvent( 'click', function(evt){
new Event(evt).stop();
$('myform').send({
onRequest: function(){
fx.loading.start( 1,0 );
},
onSuccess: function(){
showHide( 'success' );
},
onFailu function(){
showHide( 'fail' );
}
});
} );
</script>
I have no idea what I'm doing with javascript, but I imagine I need a line that tells the script if FormCheck is successful, run Form.Send ? Anything would help at this point. --Eric Hi all, I have found a nice mootools script and it's using the 1.2.4 version of mootools. The problem is that my website is already using the 1.12 version. Is it possible to change the code and make it compatible with 1.12? My knowledge in javascript is poor and I can't spot the changes that need to be done here. Can you help me please? Code: window.addEvent('domready',function() {
(function($) {
/* for keeping track of what's "open" */
var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent;
/* hides the current menu */
var hideMenu = function() {
if(showingDropdown) {
showingDropdown.removeClass(activeClass);
showingMenu.setStyle('display','none');
}
};
/* recurse through dropdown menus */
$$('.dropdown').each(function(dropdown) {
/* track elements: menu, parent */
var menu = dropdown.getNext('div.dropdown-menu'), parent = dropdown.getParent('div');
/* function that shows THIS menu */
var showMenu = function() {
hideMenu();
showingDropdown = dropdown.addClass('dropdown-active');
showingMenu = menu.setStyle('display','block');
showingParent = parent;
};
/* function to show menu when clicked */
dropdown.addEvent('click',function(e) {
if(e) e.stop();
showMenu();
});
/* function to show menu when someone tabs to the box */
dropdown.addEvent('focus',function() {
showMenu();
});
});
$$('#close').addEvent('click',function(e) {
hideMenu();
});
})(document.id);
});
Gonna be asking a few Q's about a quiz javascript i'm making. I'm pretty new to JS. I have this, a select box, in the body. Code: <div align="center"><center><p><strong>Your response:</strong> <select
name="theresponse" size="1" onChange="responses()">
<option value="-----">----</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
Then the relevant bit of script lower down Code: var loop=0
function responses(){
loop++
var temp2=document.instantquiz.theresponse
var temp3=temp2.options[temp2.selectedIndex].text
if (temp3!=solution[whichone]&&temp2.selectedIndex!=0)
document.instantquiz.thesolution.value="Sorry, the correct answer is "+solution[whichone];
else if(temp2.selectedIndex!=0)
document.instantquiz.thesolution.value=compliments[whichone];
}
I want to add 1 to 'loop' (so that people can't score twice etc.). The problem I have here is that loop just doesn't want to go up. I've tried all sorts of things like doing it under a new variable, and even putting a new function up, all in vain. Why doesn't it work? =s Hey there guys, i've been having a problem lately and i can't seem to find any solution for that. I know you guys could help me, so here it goes: I have a javascript promt box (as you can see in the code below) it works perfectly fine with internet explorer however it's NOT working in firefox. I tried everything i can think of, but still its not working! Please check the code below and give me the solution for firefox. Thank You! <%@LANGUAGE="VBSCRIPT" CODEPAGE="28592"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Choose Your Language</title> <script language="javascript" type="text/javascript"> function checklang() { var lang = prompt('Choose A Language:'+'\n' + "(Ex: Armenian, Arabic, English, French, Greek, Russian)",'English'); if (lang==null || lang=="") {lang=""; return;} if (lang=="Armenian" || lang=="Arabic" || lang=="English" || lang=="French" || lang=="Greek" || lang=="Russian") {location.href = "sermon-section.asp?lang="+lang}; else location.reload(); } </script> </head> <body> <a href="#" onclick="checklang()">Choose Your Language</a> </body> </html> the script below should open a new window with a url specified in the select area. However, my script ignores the changes in the select area. it keeps opening the same page. I was wondering could someone take a look and tell me why? Thank you very much. <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Jump Menu</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> function jump_menu() { var i=document.getElementById("page_select").selectedIndex; document.getElementById("jump_to_page").onclick=function() { (i==0) ? alert("Please select a page to go"):window.open("http://www."+document.getElementById("page_select").options[i].value); } } window.onload=jump_menu; </script> </head> <body> <select id="page_select"> <option>Select a Page</option> <option value="yahoo.ca">Yahoo</option> <option value="topnews.ru">Top News</option> <option value="google.com">Google</option> <option value="amazon.com">Amazon</option> </select> <button type="button" id="jump_to_page">Go</button> </body> </html> </code> 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?? 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, I'm trying to build this site that has an accordion styled navigation but there's one little issue. As each div is resizing, they're jittering (take a look at the site: http://balancehair.matcamp.com/) The code I'm using to achieve it is as follows: Code: var all_fields = new Array('home','about','services','gallery','promos','contact');
function hoverRun(fieldName) {
for(var t=0;t<all_fields.length;t++) {
if(all_fields[t]!=fieldName) {
$('box_'+all_fields[t]).style.backgroundImage = 'url(/images/img_'+all_fields[t]+'_inactive.jpg)';
$('tab_'+all_fields[t]).src = '/images/tab_inactive.png';
$('text_'+all_fields[t]).src = '/images/tab_'+all_fields[t]+'_inactive.png';
$('box_'+all_fields[t]).set('morph', {duration: 500, transition: 'linear'});
$('box_'+all_fields[t]).morph({width: 144});
}
}
$('box_'+fieldName).style.backgroundImage = 'url(/images/img_'+fieldName+'_active.jpg)';
$('tab_'+fieldName).src = '/images/tab_active.png';
$('text_'+fieldName).src = '/images/tab_'+fieldName+'_active.png';
$('box_'+fieldName).set('morph', {duration: 500, transition: 'linear'});
$('box_'+fieldName).morph({width: 240});
}
Possibly I'm going about it the wrong way? Any suggestions would be greatly appreciated! I only dabble in a little bit of MooTools so I'm not the greatest at it Thanks! mb89 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 am trying to get these Mootool Tooltips to work: http://demos111.mootools.net/Tips Nothing on the internet seems up to date or valid. I can NOT get these to work. I have been consistently trying for two days. I'm not an expert at coding, but I'm good enough to produce something like this: http://www.starforge.us/apply/ Okay, so what I need this for is a module. When you hover over the image, a description will come up. It needs to follow the mouse, as long as it is inside the image. I need the style to look just like what is provided. It gives you the JS code, the HTML code, and a CSS code. They have a webpage that tells you what things do, but I've tried. I've called their core framework, and nothing happens, added the JS code to the framework, nothing, added css framework, nothing. I can NOT get this to work. If anyone knows ANYTHING or has a functioning download of that, ALL FILES INCLUDED. So I can just switch the cow to my stupid image and change the text, it would be most appreciated. I need this for a website my boyfriend is doing. I've looked at buying other tooltips but NONE of them have the functionality that Mootools has. Complete list of the codes would be great. All I need is one image with descriptive text, please. We have standards, so I will accept nothing of less quality than what is above. It doesn't have to be mootools, it just has to look like it and function like it. I can't get ANYTHING to work, protools, etc. etc. People only link code EXAMPLES. I need a file I can sift through that actually WORKS. Something I can play around with, and if it works, I can THEN FIGURE OUT WHY. For some reason, when it comes to tooltips, I'm handed a bunch of crap files that DON'T WORK and at that point, I don't know how to fix them... Thank you VERY much for ANY help. If you have a link to the code that I can BUY it with I will. Willing to pay $5.00 for them if you can produce one that looks EXACTLY like the mootools or whatever. (that's what they're going for on codecanyon.net). Please help. I'm really sick of these stupid tooltips. :P im currently using a prototype add on for one of my sites and id like to convert it to mootools... problem is, i dont know the first thing about prototype! i stumbled upon this before i learned any javascript and ive gotten to know mootools and like using it... heres the code, let me know if anyone can help! Code: /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.scrolling = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.sections = this.wrapper.getElementsBySelector('div.section');
this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
this.sections.each( function(section, index) {
section._index = index;
});
this.events = {
click: this.click.bind(this)
};
this.addObservers();
if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load
if(this.options.autoGlide) this.start();
},
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('div.controls a');
controls.invoke('observe', 'click', this.events.click);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });
Event.stop(event);
},
moveTo: function(element, container, options){
this.current = $(element);
Position.prepare();
var containerOffset = Position.cumulativeOffset(container),
elementOffset = Position.cumulativeOffset($(element));
this.scrolling = new Effect.SmoothScroll(container,
{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
return false;
},
next: function(){
if (this.current) {
var currentIndex = this.current._index;
var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;
} else var nextIndex = 1;
this.moveTo(this.sections[nextIndex], this.scroller, {
duration: this.options.duration
});
},
previous: function(){
if (this.current) {
var currentIndex = this.current._index;
var prevIndex = (currentIndex == 0) ? this.sections.length - 1 :
currentIndex - 1;
} else var prevIndex = this.sections.length - 1;
this.moveTo(this.sections[prevIndex], this.scroller, {
duration: this.options.duration
});
},
stop: function()
{
clearTimeout(this.timer);
},
start: function()
{
this.periodicallyUpdate();
},
periodicallyUpdate: function()
{
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
}
});
Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute'
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});
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 the jQuery UI Datepicker - Event Search. as a booking-system. I want to automatically disable days from my MYSQL table in my booking-system (datePicker). So, here is the deal: In my website, there is booking-system, you can reserve a room from datePicker. I have successfully created a PHP, which sends the information (name, room, date etc.) to my MYSQL. Then I have successfully created a datesonly.php, which prints only a dates from my MYSQL. So now I have to make javascript (?) which reads dates from datesonly.php and draws a booked-note to my datePicker at website (so people can see which days are booked --> no double-books!). Booked-note should be something like that day in datePicker is red. Thank you! And sorry for my bad english, I'm from Finland. EDIT: Sorry, the title should be: Disabling days from datePicker via JavaScript 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 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 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 Hello, I have a problem with my code which only appears in ie (more specifically on ie8, I haven't tested it on any other versions yet). I have absolutely no problems with firefox (v4) or Chrome (v10). I am trying to use the standalone version of the RokBox plugin (http://www.rockettheme.com/extensions-joomla/rokbox), which uses mootools-release-1.11.js. The use of rokbox in my application is necessary for me in order to easily display some linked files with a fancy pop-up box and more importantly to use the "gallery" property so that my links can be grouped together and shown in order by just clicking some "next" button... To explain this (I 'll try to be as thorough as possible so that you get what happens): 1)I am using an index.php file which is as you can guess of course the "index". 2)I am calling some functions to compose a query for my database. 3)I am using AJAX to send those queries in another file called values.php. 4)This file takes the data from my database and echoes them. 5)The echoed values are returned and echoed in index.php as options (dropdown list). 6)When the user selects a value on a field some new queries are composed and AJAX is called again but this time it sends data to another file called results.php which echoes back the found matches to a specified div on index.php. (And also calls values.php again to pass new queries). 7) The data returned from the results contain a link to another file called details.php. 8)I am using RokBox to make these links open in a fancy pop-up box with arrows that point to the next or previous link based on the gallery that was generated by RokBox. Now here's some parts of my code: index.php header section (attention:some of this code is commented): [HTML] <script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script> <!--<script type="text/javascript" src="../rokbox/mootools-core-1.3.1-full-compat.js"></script>--> <!--<script type="text/javascript" src="../rokbox/mootools-1.2.5-core-nc.js"></script>--> <script type="text/javascript" src="../rokbox/rokbox.js"></script> <link href="../rokbox/themes/mynxx/rokbox-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../rokbox/themes/mynxx/rokbox-config.js"></script> <script type="text/javascript" src="myscript.js"></script> <script type="text/javascript" src="allfields.js"></script> [/HTML]myscript.js (part of it): Code: function AJAX(i,query){
/* Establish AJAX connection */
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
try{
xmlhttp[i]=new XMLHttpRequest();
}catch(err){ alert("ERROR IN AJAX["+i+"]: "+err)}
}
else
{// code for IE6, IE5
xmlhttp[i]=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp[i].onreadystatechange=function() //line 21
{//alert("check");
if (xmlhttp[i].readyState==4 && xmlhttp[i].status==200)
{
document.getElementById("opt"+i).innerHTML=xmlhttp[i].responseText;
if(i==-1) mybox(); //I'm re-calling RokBox here so that it can recognize the new items
}
}
/* Send data to php file */
// alert("Field: "+obj[i].field+" \n Query: "+query);
if(i!=-1){
xmlhttp[i].open("POST","values.php",true);
xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp[i].send('query='+query+'&field='+obj[i].field+'&i='+i);
}else{
xmlhttp[i].open("POST","../results.php",true);
xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp[i].send('query='+query);
}
}
Now the problem: On every first run of this webpage using ie I get the following error generated by the try-catch commands: Code: ERROR IN AJAX[0]: TypeError: Object doesn't support this property or method Then everything freezes... IE itself throws me the following error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C) Timestamp: Sat, 2 Apr 2011 12:34:07 UTC Message: 'xmlhttp[...]' is null or not an object Line: 21 Char: 4 Code: 0 URI: http://.............../advanced/myscript.js Line 21 is marked on the script code with comments. These errors do not reoccur when the page is reloaded (and as I already said it only happens with ie). So, by this error (and after some debugging) I get that for some reason the AJAX methods are not called as ought to be when I use the tag: [HTML]<script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script>[/HTML]on my index's head section. So... AJAX cannot work with using mootools? After some research, I found that mootools which uses the $ sign to start it's operations, conflicts with other libraries (such as jQuery) using the same sign ($) for their own reasons. Now I found that the way to fix this is by using jQuery.noconflict() after your jQuery script. There's only one little thing: I DON'T use jQuery, so where is the conflict? I also tried updating mootools to a newer release (as you can see from the comments in head section) but I realized that RokBox can't work with other versions. I am pretty desperate with this, and I would really appreciate any solutions you can offer with your experience or any suggestions you think would help. You can check the issue your self by visiting my link: http://e-tech.ath.cx/ares/project%20...nced/index.php Hi All, I had to switch to Mootools, because the current company I am working for uses MooTools. Till thus far I haven't had any problems with MooTools until about 10min ago. I am using a plug in called noobSlide, You can check it out here http://www.efectorelativo.net/laboratory/noobSlide/ My problem is that for some or other reason it displays 5 images instead of 4 images(the amount I am using), leaving the lastly displayed image blank. Code: Head: <link rel="stylesheet" type="text/css" href="./css/liquidstyle.css" /> <link rel="stylesheet" type="text/css" href="./css/screen.menumatic.css" /> <link rel="stylesheet" type="text/css" href="./css/jd.gallery.css" /> <script src="../root/scripts/core.js" type="text/javascript"></script> <script src="../root/scripts/mootools-1.2.1-core.js" type="text/javascript"></script> <script src="../root/scripts/mootools-1.2-more.js" type="text/javascript"></script> <script src="../root/scripts/menumatic.js" type="text/javascript"></script> <script src="../root/scripts/com_form.js" type="text/javascript"></script> <script src="../root/scripts/com_list.js" type="text/javascript"></script> <script src="../root/scripts/com_panel.js" type="text/javascript"></script> <script src="../root/scripts/com_tab.js" type="text/javascript"></script> <script src="../root/scripts/roar.js" type="text/javascript"></script> <script src="../root/scripts/jd.gallery.js" type="text/javascript"></script> <script src="../root/scripts/jd.gallery.transitions.js" type="text/javascript"></script> <script src="../root/scripts/_class.noobSlide.packed.js" type="text/javascript"></script> Code: page:
<script type="text/javascript">
window.addEvent('domready',function(){
var nS2 = new noobSlide({
box: $('box2'),
size: 945,
items: [0,1,2,3,4],
interval: 3000,
fxOptions: {
duration: 2500,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $('prev1'),
next: $('next1')
}
});
});
</script>
Code: HTML: <div class="mask2"> <div id="box2"> <span class="sShow"><img src="images/branding_your_website/img_1.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_2.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_3.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_4.jpg" alt="Photo" /></span> </div> </div> <p class="buttons"> <span id="prev1"><< Previous</span> <span id="next1">Next >></span> </p> Thanks in advance Hi, I am needing some help with the mootools script. I have uploaded a test page at http://74.52.32.68/~tempcom/slider/ Here is what I am attempting to do. When I click on one of the items (say Landscapes), I want some corresponding text to appear in the green box above. Is this possible? Would it be a javascript? Any sample codes or assistance would be greatly appreciated. Thanks in advance! 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 |
|||||||