JavaScript - Disabling Elements Within Draggable Iframe Using Overlaying Div

I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/#

so far i have recreated the top left and right edges using
Code:

var window_width = $(window).width();
    var window_height = $(document).height();
    var image_height = $("#background").height(); (2914px)
    var image_width = $("#background").width(); (3920px)


    $("#background").draggable({
        scroll: false,
        stop: function (event, ui) {
            var animate_to = {};
            var window_width_resized = $(window).width();

            if (ui.position.left > 0) {
                animate_to.left = '0px';
            }
            if (ui.position.top > 0) {
                animate_to.top = '0px';
            }

            //initial size for width
            var image_width_gap = window_width - (image_width + ui.position.left);
            if (image_width_gap > 0) {
                animate_to.left = (0 - (image_width - window_width)) + 'px';
            }

            //after window gets resized for width
            var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
            if (image_width_gap_resized > 0) {
                animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
            }


$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });

then i am using the same logic to do the bottom edge but it doesnt work any ideas

here is how i thought the bottom would work

Code:

//initial size for height
            var image_height_gap = window_height - (image_height + ui.position.top);
            if (image_height_gap > 0) {
//                animate_to.top = (0 - (image_height - window_height)) + 'px';
            }

help would be greatly appreciated

fixed.. my bg image was infact smaller

Hi guys
I need help on sorting out a drag&drop script
I'm a bit of a rookie with programming, so I found this script somewhere and I managed to implement it in my code...unfortunately now I need to slightly modify the code, and I'm completely lost

I have this drag&drop script that moves some images around the screen, but I'd like to assign an event document.getElementById("XXXXX").onclick = blablabla to each of those images.
The problem is that, of course, every time I click on the image to drag it around, this activates the link. With a doubleclick event everything works smooth, however it's a solution I don't quite like.

I was thinking about a way to control the code so that while the image moves the link is somehow "not active", but if the user simply clicks without dragging then it activates the .onclick function


I have the following piece of code in the head section of my page, which is the actual code for dragging the elements
Code:

function Browser() {

var ua, s, i;
var ln = 1;

this.isIE = false;
this.isNS = false;
this.version = null;

ua = navigator.userAgent;

s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

// Treat any other "Gecko" browser as NS 6.1.

s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

var el;
var x, y;

// If an element id was given, find it. Otherwise use the element being
// clicked on.

if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;

// If this is a text node, use its parent element.

if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

// Save starting positions of cursor and element.

dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);

if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;

// Update element's z-index.

dragObj.elNode.style.zIndex = ++dragObj.zIndex;

// Capture mousemove and mouseup events on the page.

if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}

function dragGo(event) {

var x, y;

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

// Move drag element by the same amount the cursor has moved.

dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";

if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}

function dragStop(event) {

// Stop capturing mousemove and mouseup events.

if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}

then in the Body, I have the DIV that can be dragged around through the "onmousedown" event
Code:

<div id="milano" class="aBar" style="width:auto; height:auto;" onmousedown="dragStart(event, 'milano')">
    <?php 
		print '<a href="#"><img border="0" src="images/works/thumbnails/milano.jpg" alt="" style="float:left; position:absolute; top:'.rand(50,300).'px; left:'.rand(100,500).'px"/></a>'
	?>
  </div>

then, in the Body as well, I have the javascript that I'd like to activate only if the image is clicked on BUT not dragged around
Code:

<script> 
		window.onload = function () { 
		
			document.getElementById("milano").onclick = function () {
				alert('AAAAA');
			}
		}
</script>

I'm really sorry the code is REALLY messy, but as I said I'm just a rookie and I know this is not an elegant solution at all
Thank you very much for your time, I really hope you can help me out with that as I spent the last 2 weeks tying to find a solution...

Cheers,
Mattia

Hi everyone,

I have some images that I want the user to be able to move around the page. So far, this script in the header allows me to do this:
Code:

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
	
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;	
    return false;
  }
  
}

function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
	fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
		isdrag = true;
		dobj = fobj;
		tx = parseInt(dobj.style.left+0);
		ty = parseInt(dobj.style.top+0);
		x = nn6 ? e.clientX : event.clientX;
		y = nn6 ? e.clientY : event.clientY;
		document.onmousemove=movemouse;

    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

The body has this:
Code:

<img src="images/balloons.gif" class="dragme">

Now, to be able to use this image as a link, I would have to find the displacement between the mousedown and mouseup coordinates. If the displacement is below say 10px, then the mouseup would bring them to another page.
I also wanted to make it so that if the mouseup occurs in a certain area of the page, that the image would move itself to a certain spot.
I've programmed a lot before, but not in JavaScript. Any help would be much appreciated. (Note: I need this done in JavaScript, not Flash, even though it might be easier).

Thanks

I set out to do a little exercise in creating draggable divs that look like app windows in pure javascript, with very little html. Problem is my mouseup event isn't always triggering and will never drop the div in the new spot.

I have a global variable to determine whether or not the div is being dragged. This is toggled on the mouseup and mousedown events on the titlebar div.

I have a mouesmove event on the body so that it can determine if the global dragging variable is true or false. If true then it moves the div to the x/y coordinates of the mouse

Same thing with the mouseup event. It should move the div to the x/y coordinates of the mouse

Sometimes it works, sometimes it doesnt. Most of the time it acts like it just wants to select text while I'm dragging (which i thought my selectstart event would take care of)

Code:

<html>
<head>
<title>testjs</title>
<script>
var dragging = false;
function Window(title,top,left,width,height)
{
	this.title = (typeof title == 'undefined')?'New Window':title;
	this.x = (typeof top == 'undefined')?0:top;
	this.y = (typeof left == 'undefined')?0:left;
	this.width = (typeof width == 'undefined')?600:width;
	this.height = (typeof width == 'undefined')?400:height;
	this.borderStyle = 'solid';
	this.windowPanel = null;
	
	this.Open = 
	function()
	{		
		var windowPanel = document.createElement('div');
		windowPanel.setAttribute('id','windowPanel');
		windowPanel.setAttribute('z-index', '2');
		windowPanel.style.position='absolute';
		windowPanel.style.left = this.x+'px';
		windowPanel.style.top = this.y+'px';
		windowPanel.style.width = this.width + 'px';
		windowPanel.style.height = this.height + 'px';
		windowPanel.style.border = 'thin solid black';
		
		var titleBar = document.createElement('div');
		titleBar.setAttribute('id','titleBar');
		titleBar.setAttribute('z-index', '4');
		titleBar.style.position = 'absolute';
		titleBar.style.left = '0px';
		titleBar.style.top = '0px';
		titleBar.style.width = this.width + 'px';
		titleBar.style.height = '22px';
		titleBar.style.borderBottom = 'thin solid black';
		titleBar.innerHTML = "<span style=position:absolute;>"+this.title+"</span>";
		titleBar.addEventListener('mousedown', function(e){MouseDown(e,this)}, false);
		titleBar.addEventListener('mouseup', function(e){MouseUp(e,this)}, false);
		titleBar.addEventListener('selectstart', function(e){return false}, false);
		
		var closeButton = document.createElement('div');
		closeButton.style.position = 'absolute';
		closeButton.style.left = this.width - 30 + 'px';
		var cbimg = document.createElement('img');
		cbimg.setAttribute('src', 'close_button_red.png');
		cbimg.setAttribute('width', '16');
		cbimg.setAttribute('height', '16');
		closeButton.appendChild(cbimg);
		closeButton.addEventListener('click', function(event){CloseWindow('windowPanel')}, false);
		
		document.body.addEventListener('mousemove', Mover, false);
		
		titleBar.appendChild(closeButton);
		windowPanel.appendChild(titleBar);
		document.body.appendChild(windowPanel);				
	}
}
function Mover(e)
{
	if(dragging == true) {
		console.log(e.pageX);
		document.body.style.cursor = 'move';
		document.getElementById('windowPanel').style.x = e.pageX + 'px';
		document.getElementById('windowPanel').style.y = e.pageY + 'px';
	}
	else
		document.body.style.cursor = 'auto';
}
function MouseUp(e,ele)
{
	dragging = false;
	ele.parentNode.style.top = e.pageY + 'px';
	ele.parentNode.style.left = e.pageX + 'px';
}
function MouseDown(e,ele)
{
	dragging = true;
}
function CloseWindow(wnd)
{
	document.body.removeChild(document.getElementById(wnd));
}
function init()
{
	wnd = new Window('A new approach', 100, 150, 1024, 768);
	wnd.Open();
}
</script>
</head>
<body onLoad='javascript:init()'>
	<a href="#" onClick="javascript:init();">Open</a>
</body>
</html>

Hi Guys,
I've been searching the net for both examples and pluggins to create draggable divs and although I've found many, I cant find the effect I'm after. I want the div to slow down to a stop after it has been release like when you are scrolling on one of apples mobile devices. If anybody can point me in the right direction ill be very great full.

I currently am using a mootools popup on www.Hope1st.com

to play his music videos.....and its working really well...only thing is on some computers (mac with firefox browser) when someone pauses the video ...the draggable box gets stuck on their mouse

weird right? yea i know... so i thought of a solution...instead of the whole box being draggable

why not just the black titlebar be draggable? i have absolutely no idea on how to do this....but i do have the entire JS code....are you ready?

its a mouthful....a million thanks to whoever is talented enough to help me


Code:

var mooSimpleBox = new Class({
	options: {
		width: 		300,
		height: 	200,
		opacity:	'0.8',
		btnTitle:	"Ok",
		closeBtn:	null,
		boxTitle:	"messageBox",
		boxClass:	'mainBox',
		id:			'myID',
		fadeSpeed:	500,
		box:		null,
		addContentID:null,
		addContent:  null,
		boxTxtColor: '#000',
		isVisible:	false,
		isDrag:		true
	},
		
	initialize: function(options){
		this.isVisible = false;
		if(options['isDrag']) this.isDrag = options['isDrag'];
		if(options['width']) this.width = options['width'];
		if(options['height']) this.height = options['height'];
		if(options['opacity']) this.opacity = options['opacity'];
		if(options['btnTitle']) this.btnTitle = options['btnTitle'];
		if(options['boxTitle']) this.boxTitle = options['boxTitle'];
		if(options['boxClass']) this.boxClass = options['boxClass'];
		if(options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor'];
		if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
		if(options['id']) this.id = options['id'];
		if(options['closeBtn']) this.closeBtn = $(options['closeBtn']);
		if(options['addContentID']) this.addContentID = options['addContentID'];
		
		if(options['addContentID']) {
			this.addContent = $(this.addContentID).innerHTML;
			$(this.addContentID).setStyle('visibility','hidden');
			$(this.addContentID).remove();
		}		
		
		this.createBox();	
	},
		
	createBox: function(){
		this.box = new Element('div');
		this.box.addClass(this.boxClass);
	},
	
	clickClose: function(){
		$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
		}).start(this.opacity,0); this.box.setStyle('display','none');
			this.isVisible = false;
		},
		
		fadeOut: function(){
			if(this.isVisible){
				$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
			}).start(this.opacity,0);
			this.isVisible = false;
		}
			
	},
		
	fadeIn: function(){	
		if (document.documentElement && document.documentElement.clientWidth) {
			theWidth=document.documentElement.clientWidth;
		}else if (document.body) {
			theWidth=document.body.clientWidth;
		}
		if (window.innerHeight) {
			theHeight=window.innerHeight;
		}else if (document.documentElement && document.documentElement.clientHeight) {
			theHeight=document.documentElement.clientHeight;
		}else if (document.body) {
			theHeight=document.body.clientHeight;
		}
		var top = window.getScrollTop();
		var boxTop =  (theHeight - this.height) / 2 ;
        boxTop = (boxTop + top);
		var boxLeft = (theWidth - this.width) / 2;			
		this.box.setStyle('top',boxTop);
		this.box.setStyle('left',boxLeft);
		this.box.setStyle('position','absolute');
		this.box.setStyle('width',this.width);
		this.box.setStyle('height',this.height);
		this.box.setStyle('opacity',this.opacity);
		this.box.setStyle('cursor','move');
		this.box.setStyle('z-index','999990000');
		this.box.setAttribute('id', this.id);
		this.box.setStyle('visibility','hidden');
		this.box.injectInside(document.body);
		if(this.isVisible == false){
			this.box.effect('opacity',{ wait:true, duration: this.fadeSpeed, transition: Fx.Transitions.linear }).start(0,this.opacity);
			this.addHT();
			this.isVisible = true;
		}
	},
		
	addHT: function(){
		this.closeBtn = new Element('button', {
			styles: {
				'border': 'none',
				'background-image':'url(modules/mod_moopopup/moopopup/images/bg_button.gif)',
				'color':'#fff',
				'position':'absolute',
				'bottom':'3px',
				'right':'3px',
				'width':'44px',
				'height':'19px',
				'font-size':'13px',
				'font-weight':'bold',
				'font-family':'arial',
				'cursor':'pointer'
			}				
		})
		
	  var width = this.width.toInt() + 5;
		if(window.ie){
			var titleBar = new Element('div', {
				styles: {
					'width' : 				width,
					'height': 				'auto',
					'background-repeat':	'repeat-x',
					'background-position':	'right top',
					'line-height':			'20px',
					'padding':				'5px 5px 5px 10px',
					'position':				'absolute',
					'clear':				'both',
					'margin-bottom':		'10px',
					'top':					'0px',
					'left':					'0px',
					'color':				'#eee'
				}
		  })
		}else{
			var titleBar = new Element('div', {
				styles: {
					'width' : 				width,
					'height': 				'auto',
					'background-repeat':	'repeat-x',
					'background-position':	'right top',
					'line-height':			'auto',
					'padding':				'5px 5px 5px 10px',
					'position':				'absolute',
					'clear':				'both',
					'margin-bottom':		'10px',
					'top':					'0px',
					'left':					'0px',
					'color':				'#eee'
				}
			})
		}
		
  	$(titleBar).innerHTML = this.boxTitle;
	
		var insideDiv = new Element('div',{
			styles: {
				'padding':'10px'
			}
		});
			
		insideDiv.setAttribute('id','myContent');
		this.box.innerHTML = "";
		insideDiv.injectInside(this.box);
	
		insideDiv.innerHTML = this.addContent;	
		this.closeBtn.innerHTML = this.btnTitle;	
		$(this.closeBtn).addEvent('click',this.clickClose.bindWithEvent(this)); 			
		titleBar.injectInside(this.box);
		this.closeBtn.injectInside(this.box);
			
		if(this.isDrag == 'true'){
			this.box.makeDraggable();
		}
	}
});

mooSimpleBox.implement(new Options, new Events);

irst post here, i'll try to be simple: I need to create a form where participants of a medical convention register to classes, each class lasts 3 hours, so a person who wants to attend to class starting at 10 am cannot register to 11 am, 12pm and 1pm classes, but he can register to 2pm and so on.

There are 3 different classes per hour.

i thought doing this using javascript, but i'm absolutely lost.

Can you please give me a hint on how to do this?

Thanks!!

this is the part of the form that has the checkboxes.

<form method="post" action="process.php"></form>
<input type="checkbox" value="101" name="convention1"> 10 am: Cariovascular desease<br>
<input type="checkbox" value="102" name="convention2"> 10 am: Changes on toracic surgeon<br>
<input type="checkbox" value="103" name="convention3"> 10 am: New drugs on heart<br>
<input type="checkbox" value="111" name="convention4"> 11 am: New drugs on heart (II)<br>
<input type="checkbox" value="112" name="convention5"> 11 am: Dynamic process on blood pressure<br>
<input type="checkbox" value="113" name="convention6"> 11 am: Aortic disease<br>
<input type="checkbox" value="121" name="convention7"> 12 am: Pulmonar Pressure<br>
<input type="checkbox" value="122" name="convention8"> 12 am: Open table<br>
<input type="checkbox" value="131" name="convention9"> 1 pm: Neurological aspects on heart rate<br>
<input type="checkbox" value="132" name="convention10"> 1 pm: Cardiovascular disease (II)<br>
<input type="checkbox" value="133" name="convention11"> 1 pm: Mioresponse on heart failure<br>
<input type="checkbox" value="141" name="convention12"> 2 pm<br>
<input type="checkbox" value="142" name="convention13"> 2 pm<br>
<input type="checkbox" value="143" name="convention14"> 2 pm<br>
<input type="checkbox" value="151" name="convention15"> 3 pm<br>
<input type="checkbox" value="152" name="convention16"> 3 pm<br>
<input type="checkbox" value="153" name="convention17"> 3 pm<br>
<input type="submit"></input>
</form>

So I've been working on this code for the day, and when I choose one radio button and click convert, it gives me the value and disables the box that shows the value. When I go to click the other radio button to do another conversion, it freezes up. I really am just trying to figure out how to make this code functionable whether you choose one radio button and do the conversion, or you want to do the other conversion without stalling out. I can't seem to find the bugs since I'm a newbie.

Code:

var $ = function (id) {//enables you to use $ instead of all the blah blah blah nonsense
    return document.getElementById(id);
}


var temperature = function (){//This function converts the value the user provides


if($("to_celcius").checked == true)//if checked, then do this conversion
	{
		$("degrees_celcius").disabled = true;
		var far = parseFloat($("degrees_fahrenheit").value );
		
		if(isNaN(far))//if its not a number then it gives the alert to enter a valid temperature
		{
		alert("Please enter a valid temperature.")
		return;
		}
		
		
		var far_cel =Math.round((far-32) * 5/9);//conversion assigned to variable
		
		$("degrees_celcius").value = far_cel;
		
		
		}else  ($("to_fahrenheit").checked ==true)//if the other radio button isn't clicked, then this conversion
		{
		$("degrees_fahrenheit").disabled = true;
		var cell = parseFloat($("degrees_celcius").value);
		
		if(isNaN(cell))//if its not a number then it gives the alert to enter a valid temperature
		{
		alert("Please enter a valid temperature.")
		return;
		}
		
		var cel_far = Math.round(cell * 9/5 + 32);
		
		$("degrees_fahrenheit").value = cel_far;//conversion variable equals the value of text box "degrees_fahrenheit"
		
	}
}

function reset()//resets the text box fields
{
	$("foofoo").reset();
	
}

	
window.onload = function(){//handles all the onload activities
$("convert").onclick = temperature;
$("convert").onchange = temperature;
//$("to_celcius").onchange = reset;
//$("to_fahrenheit").onchange = reset;

}

Code:

<body>
<form id="foofoo" name="foofoo">
  <div id="content">
    <h1>Convert temperature</h1>
	
       
    <input type="radio"   name="conversion_type" id="to_celcius"  />From Fahrenheit to Celcius<br />
    <input type="radio"   name="conversion_type" id="to_fahrenheit"  />From Celcius to Fahrenheit<br />
	
	
	
	
    <br />
     
    <label>Degrees Fahrenheit:</label>
    <input type="text" id="degrees_fahrenheit" name="cat"  class="disabled"  /><br />
    <label>Degrees Celcius:</label>
    <input type="text" id="degrees_celcius" name="poo"   class="disabled" /><br />
    <br />

    <input type="button" id="convert" value="Convert" /><br />
    <br />        
  </div>
   </form>  
</body>

Ok I just gota ask... I read this originally and nearly killed my self laughing... then my brain got the best of me and my curiosity took over...

is it possible to write a javascript code that makes your web browser disable javascript?

is it even possible for Javascript to access a web browser in that sort of fashion? Like can a script have that much control? ... or rather lack of control and self suicidal... but anyways

Is it possible?

I need to disable some keys from their default behaviour in Google Chrome on Windows with javascript.
The script below works for most keys but not for F10, left Windows key, right Windows key, NumLock and left Alt. (which are the keys I need to disable)

Code:

<script type="text/javascript">
addEventListener("keydown", function (event) {
if(KeyID == 121 KeyID == 91 || KeyID == 92 || KeyID == 144|| KeyID == 18 ){
    event.preventDefault();
}
}, true);
</script>

I have also without luck tried event.stopPropagation () - event.cancelBubble = true - return false og void().

I would like to know if their is a solution or it simply isn't possible to disable the mentioned keys.

What have I done wrong here?


<INPUT id="purchase" onclick="document.getElementById("purchase").disabled = true;" type="submit" value="PURCHASE">

Hey all i have this piece of code before that disables the given dates i put into an array. This works great for day 2-30 (out of a 31 day month) but it does not seem to work when i select either day 1 or day 31.

For day 1 it blocks out day 1 and i do not want that. The user should be able to select that day since it was selected. It does not do this for any other day. If the user selects day 2 then day 2 is selected on the calender and is not blocked.

As for day 31, i don't know whats wrong with it because it never shows me an error. It's the type of error that shuts down the website with "System Unavailable" for about a minute before i can connect to the page again.

Here is my code:
Code:

var disabledDays = ['3-31-2010','3-30-2010','3-29-2010','3-28-2010','3-27-2010','3-26-2010','3-25-2010','3-24-2010','3-23-2010','3-22-2010','3-21-2010','3-20-2010','3-19-2010','3-18-2010','3-17-2010','3-16-2010','3-15-2010','3-14-2010','3-13-2010','3-12-2010','3-11-2010','3-10-2010','3-9-2010','3-8-2010','3-7-2010','3-6-2010','3-05-2010'];
 
	function nationalDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

	//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
				
	for (i = 0; i < disabledDays.length; i++) {
		if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
			//console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
			return [false];
		}
	}
		//console.log('good:  ' + (m+1) + '-' + d + '-' + y);
		return [true];
	}
		
	function noWeekendsOrHolidays(date) {
		return nationalDays(date);
	}
 
	function ArrayIndexOf(array,item,from){
	var len = array.length;

	for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
		if (array[i] === item) return i;
	}
		return -1;
	}
			
	function ArrayContains(array,item,from){
		return ArrayIndexOf(array,item,from) != -1;
	}

Any help would be great!

David

Hi,

I have a checkbox on a page which I have styled using some jquery code. I want the textbox underneath the checkbox to be disabled if the checkbox is ticked and enabled if it is unticked. I tried using javascript to do this but I beleive it didn't work because I have existing javascript/ jquery code on the page. Any help/advice would be fantastic, here is a link to the page :

http://recipesuggester.co.uk/index.php



Thankyou

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 a HTML table in a form with a submit button.In HTML table I have links present in first three rows for each columns of HTML table.I want to disable those links when user submit the form.How can I handle this in javascript? Please help.

Thanks in advance.

Anil.