JavaScript - Changing Div Height

Hey all,

for some reason, I can't get the margin-top property to change
using
Code:

jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);

also tried
jQ(this.centerPiece).attr('margin-top', this.imgSrcs[ this.srcs[5] ].top);

any help would be great

townsendwebdd.com is the site

Code:

/**Scroller*/

function Scroller(){
	//grab the img elements
	//this.imgs = new Array( '#img0', '#img1', '#img2', '#img3', '#img4', '#centerImg', '#img5', '#img6', '#img7', '#img8', '#img9' );
	this.imgs = new Array( '#img0', '#img1', '#img2', '#img3', '#centerImg', '#img6', '#img7', '#img8', '#img9' );
	
	this.centerPiece = '#centerImg';
	this.centerPieceLink = '#centerA';
	
	
	//set the image locations
	this.imgSrcs = new Array();
	this.imgSrcs.push(new imgSrc('gx/tiltedNMInvestigates.png', 'gx/tiltedNMInvestigatesRight.png', 'gx/nmInvestigates.jpg', 'http://nminvestigates.townsendwebdd.com', 100 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedChess.png', 'gx/tiltedChessRight.png', 'gx/chess.jpg', 'http://townsendwebdd.com/chess', 200 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedFiveInARow.png', 'gx/tiltedFiveInARowRight.png', 'gx/fiveInARow.jpg', 'http://fiveinarow.townsendwebdd.com', 0 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedGaelsong.png', 'gx/tiltedGaelsongRight.png', 'gx/gaelsong.jpg', 'http://gaelsong.townsendwebdd.com', 100 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedGreenBay.png', 'gx/tiltedGreenBayRight.png', 'gx/greenBay.jpg', 'http://townsendwebdd.com/gx/GreenBaySite.jpg', 0 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedMillarSmith.png', 'gx/tiltedMillarSmithRight.png', 'gx/millarSmith.jpg', 'http://townsendwebdd.com/gx/millarSmith.jpg', 100 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedNanoMeds.png', 'gx/tiltedNanoMedsRight.png', 'gx/nanomeds.jpg', 'http://townsendwebdd.com/gx/nuBots2.jpg', 0 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedAlegro.png', 'gx/tiltedAlegroRight.png', 'gx/alegro.jpg', 'http://townsendwebdd.com/gx/alegro2.jpg', 300 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedApnm.png', 'gx/tiltedApnmRight.png', 'gx/apnm.jpg', 'http://townsendwebdd.com/gx/apnm.jpg', 0 ) );
	//this.imgSrcs.push(new imgSrc('gx/tiltedNanoMeds.png', 'gx/tiltedNanoMedsRight.png', 'gx/nanomeds.jpg', 'http://townsendwebdd.com/gx/nuBots2.jpg') );
	//this.imgSrcs.push(new imgSrc('gx/tiltedNMInvestigates.png', 'gx/tiltedNMInvestigatesRight.png', 'gx/nmInvestigates.jpg', 'http://nminvestigates.townsendwebdd.com') );
	
	//which srcs are currently in use
	this.srcs = new Array();
	for(var i = 0; i < this.imgSrcs.length; i++){ this.srcs.push(i); }
}

/** reset the current images*/
Scroller.prototype.populate = function(){
	//populate imgs
	for(var i = 0; i < 4; i++){
		jQ( this.imgs[i] ).attr('src', this.imgSrcs[ this.srcs[i] ].left );
		jQ( this.imgs[i + 5] ).attr('src', this.imgSrcs[ this.srcs[i + 5] ].right);
	}
	
	//set the centerPiece
	jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[i] ].center);
	jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[i] ].href);
	jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[i] ].top);
}



/** move everything to the Left*/
Scroller.prototype.moveLeft = function(){
	//increment srcs
	this.incrementSrcsUp();
	
	//animate
	for(var i = 0; i < this.imgs.length; i++){
		if(this.imgs[i] != this.centerPiece) 
			animate(this.imgs[i], -30);
	}
	
	//set the centerPiece
	jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[5] ].center);
	jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[5] ].href);
	jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);/** here is the stumper*/
	
	
	//move back
	for(i = 0; i < this.imgs.length; i++){
		if(this.imgs[i] != this.centerPiece)
			move( this.imgs[i], 30);
	}
	
	//repopulate
	this.populate();
}
	 
	
/** move everything to the right*/
Scroller.prototype.moveRight = function(){
	//increment srcs
	this.incrementSrcsDown();
	
	//animate
	for(var i = 0; i < this.imgs.length; i++){
		if(this.imgs[i] != this.centerPiece) 
			animate(this.imgs[i], 30);
	}
	
	//set the centerPiece
	jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[5] ].center);
	jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[5] ].href);
	jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);/** here is the stumper*/
	
	
	//move back
	for(i = 0; i < this.imgs.length; i++){
		if(this.imgs[i] != this.centerPiece)
			move( this.imgs[i], -30);
	}
	
	//repopulate
	this.populate();
}


Scroller.prototype.incrementSrcsUp = function(){
	for(var i = 0; i < this.srcs.length; i++){
		this.srcs[i] += 1;
		if(this.srcs[i] >= this.srcs.length)
			this.srcs[i] = 0;
	}
}

Scroller.prototype.incrementSrcsDown = function(){
	for(var i = 0; i < this.srcs.length; i++){
		this.srcs[i] -= 1;
		if(this.srcs[i] < 0)
			this.srcs[i] = this.imgSrcs.length - 1;
	}
}

Scroller.prototype.preload = function(){
	try{
	for(var i = 0; i < this.imgSrcs.length; i++){
		jQ('#container').append("<img src='" + this.imgSrcs[i].center + "' style='display:none;'/>");
	}
	}catch(err){alert(err.message);}
}






/**the sources of the piece*/
function imgSrc(leftSrc, rightSrc, centerImg, location, topped){
	this.left = leftSrc;
	this.right = rightSrc;
	this.center = centerImg;
	this.href = location;
	this.top = topped;
}





function animate(imgId, offsetX){
	var x = jQ( imgId ).offset().left;
	var y = jQ( imgId ).offset().top;
	jQ( imgId ).offset({left: x + offsetX, top: y});
}

/**
function animate(imgId, offsetX){
  var startLeft;
  
  var timer = setInterval(function() {
  imgId.style.left = ( imgId.style.left + offsetX / 10 ) + "px";
  
  if ( imgId.style.left == startLeft + offsetX ) {
    clearInterval( timer );
  }
}, 1000);
}*/

function move(imgId, offsetX){
	var x = jQ( imgId ).offset().left;
	var y = jQ( imgId ).offset().top;
	jQ( imgId ).offset({left: x + offsetX, top: y});
}

Hi

I am opening a child window with the following href.

If it is a completly new window, it is opened and the focus shifts to it,
... but ...

if that href has been clicked on before and the window exists, the focus stays with the parent window and does NOT shift to the child

How can I make the focus shift ?

here is my href:


PHP Code:
echo "<a href='$Ad_detail' rel=\"external\" onclick=\"window.open (this.href, '$Ad_detail', 'height=800,width=960,scrollbars');  return false\" > 


I guess I need a "window. ??? focus();" in there somewhere - but I don't know what the ??? should be.

If you can help - many thanks

I've got this script that spins an image for me but it dont stop spinning, in other words when i press startspinning with onclick it dont change it to stopspinning function it just keeps spinning, it works fine with href but not onclick.

Code:

function StartSpinning() {
		
		int = setInterval( 'SpinChange()', 100 );
		$( 'SpinButton' ).innerHTML = "Spinning (Click to Stop)";
		$( 'SpinButton' ).onclick = "StopSpinning();";
		Effect.Fade( 'turns', {duration: 0.3} );
	
	}
	
	function StopSpinning() {
		
		clearInterval( int );
		$( 'SpinButton' ).innerHTML = "Spin it";
		$( 'SpinButton' ).onclick = "StartSpinning();";
		UpdateFigure();
		Effect.Appear( 'turns', {duration: 0.3} );
	
	}

Can anyone help thanks.

I would like to have a code on my page that causes two or more photos to change between each other. For example, photo 1 is shown for a little while, then it switches to photo 2, etc. I would also like to switch text that goes along with the photos. I would like my layout to look like this:

Photo / Text about Photo

and have both switch after a little while, to the next photo and text.

Hope this makes sense. Thanks in advance!

ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script

Code:

function scope(e)
{
var popin = document.getElementById('popin');
popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>";
popin.style.display = "block";
}

this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area

so what i would need is sumthing that can look for
Code:

id="sum text"

and maybe amend it to
Code:

id="sum textP"

or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed

How can i edit the following html/javascript so that when a user submits the form the element with id #container is updated with the value from #name

<form action="" method="post" name="form_name" id="form_name" onsubmit="return update_name(this)">
<fieldset>
<label for="your_name">Enter Your Name</label>
<input type="text" name="your_name" id="your_name" />
<input type="submit" />
</fieldset>
</form>

Ok so i'm trying to write a Greasemonkey script to change all the hrefs on a single page.

The href by default looks like this:

Code:

<a href="javascript:get('246154895')" class="postid">ID</a>

What i'm trying to do is make the number from get() appear in stead of "ID".
How should i get this done?

I started up with this:

Code:

var posts = document.getElementsByClassname('postid');

for (i=0; i<posts.length; i++) {
	//Replacing
}

But i doubt it will work, since there are other items with the class "postid" that aren't related to these tags i'm trying to change.

P.S. I'm new to JS so yeah :P

I'm working at masking my fantasy football site hosted by my provider onto my own subdomain, since they can't allow me point a dns at their servers.

I did manage to mask the webaddress to my sub doman with a php script. But it also only masks the initial visit, and th link name.

And now i'm trying to learn how mask the various url/links in the menus.

As I little about javascript, can someone show me a way to mask the url address when a user mouses over them? The links themselves wont' change, I'm just trying to mask the link names on the mouseover to look like their on my own domain.

Hope that all made some sense

hi all,

when key pressed, in IE i can use this code:

event.keyCode=somenumber;

and it works. Is this possible in Netscape - Firefox - ..... ?

I need to controll the input, I want to allow users to use only keys I want them to use.

Thanks

Right then!

I have a drop down list. The titles are really long. What I want to happen is, end user to click on a selection, i.e.

"This is a really really long title"

And then by the power of voodoo just the abbreviated is shown in the field.

"TIARRLT"

Can this be done by JUST HTML? Or am I looking at some JS here? If anyone could point me to a tutorial that would be great. Or if you have the code you don't mind sharing... amazing!!!

Thanks all!

Hello guys I have a questions:
How can I use javascript to change the CSS the page uses?
I'm a noob to javascript so please help me out =D

Regards,

Thunderofnl

I have my code set up so whenever I hover over a picture it changes the background image and I want it so that when I leave the picture the background changes back to a black background but the background just stays as the image. I cant find out why its not changing back when I leave, it looks like everything should work.

Code:

var bgImage = new Array()
		bgImage[0] = "url(../Pictures/RM/Iker.jpg)";
		bgImage[1] = "url(../Pictures/RM/Arbeloa.jpg)";
		 
		
		parseInt(event.clientX) - parseInt(movingDiv.style.left)
		
		function into(whoseCalling)
		{
			num =(document.getElementById(whoseCalling).id).substr(3);
		    document.getElementById(whoseCalling).style.borderStyle = "double";
			document.getElementById(whoseCalling).style.borderTopColor = "blue";
			document.getElementById(whoseCalling).style.borderBottomColor = "red";
			document.getElementById(whoseCalling).style.borderLeftColor = "yellow";
			document.getElementById(whoseCalling).style.borderRightColor = "green";
			document.getElementById(whoseCalling).style.borderWidth = "8px";
			
			
			for (i=0; i<30; i++)
			{
				document.getElementById("img" + i).style.opacity = ".1";
			}
			document.getElementById(whoseCalling).style.opacity = "1";
			document.body.style.backgroundImage = bgImage[num]
		}
		function out(whoseCalling)
		{
			document.getElementById(whoseCalling).style.borderStyle = "solid";
			document.getElementById(whoseCalling).style.borderColor = "red";
			document.getElementById(whoseCalling).style.borderWidth = "3px";
			document.body.style.backgroundColor = "black";
			
			for (i=0; i<30; i++)
			{
				document.getElementById("img" + i).style.opacity = "1";
			}
		}

Okay, I have this code,

Code:

<script type="text/javascript">
function changeText2(){
	var userInput = document.getElementById('userInput').value;
	document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

A fairly simple one, and it is great, but I want to change it so that the text you type in stays there! Forever! For example, a person visits the site and types in "Hello" then the option of changing the text again disappears, and every visitor after that sees "Hello" (or whatever the first person types).

Is this possible? Can anyone help me out!

I'm used to other languages so forgive me for this dumb question. I have a double array of divs and I want to change the background color of a div.

Say something like this.squares[3][4].style.backgroundColor = "blue";
obviously this doesn't work is there something that does. I don't want to make a new div

So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there)

Code:

<script>
var change = new Array
change [0] = [0,0,0,0,0];
change [1] = [0,0,0,0,0];
change [2] = ["",0];
change [3] = [0,0,0,0,0];
function equipaa(){
change [0][0] = 1
change [0][4] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipab(){
change [0][1] = 1
change [0][0] = 0
change [0][4] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipac(){
change [0][2] = 1
change [0][0] = 0
change [0][1] = 0
change [0][4] = 0
change [0][3] = 0
changea();
}
function equipad(){
change [0][3] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][4] = 0
changea();
}
function equipae(){
change [0][4] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}



function equipba(){
change [1][0] = 1
change [1][4] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function equipbb(){
change [1][1] = 1
change [1][0] = 0
change [1][2] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbc(){
change [1][2] = 1
change [1][0] = 0
change [1][1] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbd(){
change [1][3] = 1
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
changefinal();
}
function equipbe(){
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}

function changea(){
if(change [0] [0] = 1){
change [2] [0] = document.getElementById("is1i").src;
change [2] [1] = change [3] [0];
}
else if(change [0] [1] = 1){
change [2] [0] = document.getElementById("is2i").src;
change [2] [1] = change [3] [1];
}
else if(change [0] [2] = 1){
change [2] [0] = document.getElementById("is3i").src;
change [2] [1] = change [3] [2];
}
else if(change [0] [3] = 1){
change [2] [0] = document.getElementById("is4i").src;
change [2] [1] = change [3] [3];
}
else if(change [0] [4] = 1){
change [2] [0] = document.getElementById("is5i").src;
change [2] [1] = change [3] [4];
}
}
function changefinal(){
if(change [1] [0] = 1){
document.getElementById("i1").src = change [2] [0];
}
else if(change [1] [1] = 1){
document.getElementById("i2").src = change [2] [0];
}
else if(change [1] [2] = 1){
document.getElementById("i3").src = change [2] [0];
}
else if(change [1] [3] = 1){
document.getElementById("i4").src = change [2] [0];
}
else if(change [1] [4] = 1){
document.getElementById("i5").src = change [2] [0];
}
clear();
}
function clear(){
change [0] [0] = 0;
change [0] [1] = 0;
change [0] [2] = 0;
change [0] [3] = 0;
change [0] [4] = 0;
change [1] [0] = 0;
change [1] [1] = 0;
change [1] [2] = 0;
change [1] [3] = 0;
change [1] [4] = 0;
}
</script>
<html>
<body>
<table  border="0">
<tr>
<td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
</tr>
</table>
<div id="invent">
<table  border="o">
<tr>
<td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is1n"></div></td>
<td><div id="is1d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is2n"></div></td>
<td><div id="is2d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is3n"></div></td>
<td><div id="is3d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropd()" onclick="equipad();"><img  id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is4n"></div></td>
<td><div id="is4d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="drope()" onclick="equipae();"><img  id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is5n"></div></td>
<td><div id="is5d"></div></td>
<td></td>
</tr>
</table>
</body>
</html>