JavaScript - How To Handle Gui Interaction Using Javascript

I'm not sure what this is called to google it,

ok so i have 3 divs
Code:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Now say my page is 800x600

So when the page loads #div1 and #div3 height = 390px
and #div2 height = 20px;

What i want is when #div2 is draged it resized #div1 and #div3

E.G
(#div2 is draged up so top = -100px)

so when that happens i want #div1 = 290px and #div3 = 490px

And vice versa now this is the code i have for my site

So #div1 = ".torrents-list"
#div2 = "#dragBar"
#div3 = "#torrent_info"

PHP Code:
$("#dragBar").draggable({
        axis: 'y',
        drag: function(event, ui){
            var heightString= $("#dragBar").css("top");
            var height = parseInt(heightString.replace("px", ""));
            $("#dragBar").css("top", "0px");
            $(".torrent-list").height($(".torrent-list").height() + heightString);
            $("#torrent_info").height($("#torrent_info").height() - heightString);
        }    
    }); 


But this dose not work for me its never setting #dragBar top to 0px and not resizing any thing if some one can tell me what this is called so i can google for a prebuilt one if not help me write one please?

Hi ,

I am very new to HTML,CSS,Javascript coding.
I have to add some check box in the page and there are multiple tabs in the same single page.

If I select or deselect any check box, checkbox checks from all the places should be changed.

Can anybody tell me how to do so using HTML,CSS, Javascript?

Dear friends,

My Function code is:
[code]
<script language="javascript" type="text/javascript">
//function to create the printer and take variable from button pressed by user
function RunEXE(prn)
{
var oShell = new ActiveXObject("WScript.Shell");
oShell.Run ("%comspec% /k c:\windows\system32\rundll32 PRINTUI.DLL,PrintUIEntry /in /n "+prn+"",2,true);
}
</script>

the variable is passed properly to the function with spaces using below form button. But, the command in the function doesnot execute after the space, that is printer name is taken as "5E-" only.

How do i pass prn variable with additional double quotes, so that command in function takes it in full including spaces.

thanks so much.
[code]
<input name="button2132" type="button" id="button213" onClick="RunEXE('\\\\printsrv.test.com\\5E- KMC451-SS AC')" value="Install" />

Hi

I am generating a report on submit click.Due to size of data query execution takes some time to display result, in mean time if user press reload button on browser toolbar consequently same query request going to database and the performance become slow down. I am able to restrict user from clicking F5 and ctrl+R button but not reload button. I there any way to handle event on reload button? or can we disable reload button on submit?

Thanks in advance!

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);

Hello all,

I have a requirement where i need to take an IPv4 address as an input, my web page has 4 text boxes. If i have a address like this 255.255.255.255, my program jumps into the next text box without any problem as soon as i enter the 3 digits. i dont need to press any tab or any other key to go to next text box.

In case of an address like 12.24.12.3, i have to press <tab> to jump into the next text box, My project requirement says that it should work with '.' (dot) char as well.

SO here is my actual requirement i need to jump into the next text box as soon as user enters a dot (.) char without displaying the dot into the text box.


I am writing this program in perl CGI.

Thanks,
Vaibhav

Hi to all,

I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear.

How do I get all this data to PHP?

Code:

<script type="text/javascript">
			var counter = 3;
			function addNew() {
				// Get the main Div in which all the other divs will be added
				var mainContainer = document.getElementById('mainContainer');
				// Create a new div for holding text and button input elements
				var newDiv = document.createElement('div');
				// Create a new text input
				var newText = document.createElement('input');
				newText.type = "text"; 
				newText.value = "DD/MM/AAAA"; 
				newText.name = counter++;
				
				var newText1 = document.createElement('input');
				newText1.type = "text"; 
				newText1.value = "DD/MM/AAAA";
				newText1.name = counter++;
				
				var newText2 = document.createElement('input');
				newText2.type = "text";
				newText2.value = "0"; 
				newText2.name = counter++;

				// Create a new button input
				var newDelButton = document.createElement('input');
				newDelButton.type = "button";
				newDelButton.value = "Delete";

				// Append new text input to the newDiv
				newDiv.appendChild(newText);
				newDiv.appendChild(newText1);
				newDiv.appendChild(newText2);

				
				// Append new button input to the newDiv
				newDiv.appendChild(newDelButton);
				// Append newDiv input to the mainContainer div
				mainContainer.appendChild(newDiv);
				counter++;
				
				// Add a handler to button for deleting the newDiv from the mainContainer
				newDelButton.onclick = function() {
						mainContainer.removeChild(newDiv);
				}
			}
		</script>
<table style="margin-left:200px" border="0">
  <tr><!-- Row 1 -->
     <td width="140"><b>Start Date</b></td><!-- Col 1 -->
     <td width="142"><b>End Date</b></td><!-- Col 2 -->
     <td width="140"><b>Price per week</b></td><!-- Col 3 -->
  </tr>
  </table>
  
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>

help me!

im have 2 file .js
file 1.js code:
document.write("<script src=2.js></script>")
document.write(f)

file 2.js code:
var f="hello"

im want run 1.js get variable of file 2.js by 3.html but don't run!

code 3.html

<script src=1.js></script>

Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once.

Does anyone know how to do this please?

Thanks so much for your help.

I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free.

I have Googled, but there are so many that I am almost dizzy with the choices.

Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic.

Frank

Does anyone know how to make URL links that use Javascript still work when
users have Javascript disabled on their browser?

The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version.

I tried the <script><noscript> tags, but I'm not sure if I'm using it
correctly, as my URL completely disappears.

Below is my HTML/Javascript code:

<p class="download">
<script type="text/javascript">document.write("<span
style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\"
onclick=\"window.open(
'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+
Math.floor( Math.random()*11 ) );\" >The Child Magazines Media
Kit</a></span> (PDF 1 MB) ");</script>
<noscript><span style="text-decoration: underline;"><a
href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf"
>The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript>
</p>


Thanks for any help,
Michael

Hi Guys,
I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled!
I create the following code but it did not work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script language="JavaScript" type="">
function changeColor(){
document.bgColor = "Gray";
}
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var person = "";
person = prompt('What is Your Name:');
if (person == "Foo") {
document.write("<h1 />Welcome " + person);
document.bgColor = "Yellow";
}
else {
document.write("<h1 />Access Denied!!!!");
document.bgColor = "Red";
document.getElementById("gree").disabled = true;
}
</script>

<div>
<p/><input id="gree" type="button" value="Gray " onClick="changeColor();">
</div>
</body>
</html>

as you can see I used the:
document.getElementById("gree").disabled = true;
but it did not work , could you please give an idea how I can solve this problem?
Thanks

Hi,

I have the following code snippet:
test.html
======
<script language="javascript" type="text/javascript">
var testVariable = "test";
</script>
<script language="javascript" type="text/javascript" src="test.js">
</script>

test.js
=====
var testVariable = window.top.testVariable;

In firefox, I'm able to access testvariable defined within test.html in test.js.

But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html.

Can any one please let me know how i can make it work in chrome?. Am i missing something here?.

Hey,
I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it,

Here is my form with the two textboxes and submit button:
<form>
x: <input type="text" name="x" /><br />
y: <input type="text" name:"y" /><br />
<input type="submit" value="Submit"/><br />
</form>

And i need it so that they change the values of these:

//this shows where my sprite will start on the canvas
var block_x;
var block_y;
searched the internet for hours and cant really find anything i understand or works.
any help is much appreciated

I want to insert this js snippet
Code:

function addText(smiley) {
    document.getElementById('message').value += " " + smiley + " ";
    document.getElementById('message').focus();
    return false;
}

to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like:

Code:

 $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');

....
Code:

parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'

but how do I insert js in the head of loaded iframe?