JavaScript - Changing Id Containers

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

If you wanted to change an ids onclick would int you just do this

document.getElementById("").onclick = "";

Is there a way to do it?

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!

Can DIV located in the MasterPage be resized depending on the screen resolution?

<tr style="vertical-align: top;"><td>
<div id="mainArea">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" />
</div></td></tr>

I've tried unsuccessfully -
var height = screen.height;
var area1 = document.getElementById('ctl00_mainArea');
if (height == 1024) {
area1.setAttribute("height", "700px");
}
else if (height == 864) {
area1.setAttribute("height", "540px");
}

Also tried area1.style.height = 700 + "px"; (no luck as well)

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

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

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

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

I go to a page and have this in the URL

http://beta.pigskinempire.com/boxscore.asp?w=6&s=5&yr=

I want to create a link on that page that when you click it it changes the URL to

http://beta.pigskinempire.com/game.asp?gnum=6&gslot=5

as you can see the numbers 6 and 5 are about the only things that are similar in the substring. I will have this on multiple pages so it will be taking different numbers from the same spots of the URL and plugging them into the new URL into the correct location.

Thank you very much if you can help me, I am thinking regEx will be needed but I am not very comfortable with it. Thanks again.

Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function.

I think I am overthinking the process - as always!

Any help pointing out my mistake(s) would be greatly appreciated.

Code:

function show_color()

{
var show_prompt = prompt("Please enter a color name");

var change_body = document.getElementById("body");;

show_prompt = change_body;

change_body = change(this.id);


}


function change(id)
    {

        switch (id)
        {
            case 'red':
                document.body.bgColor = "red";
                break;

            case 'green':
                document.body.bgColor = "green";
                break;

            case 'yellow':
                document.body.bgColor = "yellow";
                break;    

            case 'blue':
                document.body.bgColor = "blue";
                break;

             case 'pink':
                document.body.bgColor = "pink";
                break;
        }
    }

hey there. im currently working on a page that has three links in the left element that all bring up different content in the right. its a two column page.
ive looked into achieving this and while innerHTML is mentioned extensively, its only cited for simple changes (a name, a date, etc) and not necessarily for more involved ones.

ive actually tried just plugging in the markup in its entirety in the innerHTML property, but the script seems to quit working after the markup becomes too comprehensive.

for instance.

Code:

function ourReach() {
     document.getElementById('rightpane').innerHTML = '<img src="ourreach.gif"'>
}

while

Code:

function ourReach() { 
 document.getElementById('rightpane').innerHTML = '
<div id="rightpane">
<ul style="position:absolute; top:-15px; left:-30px">
 <li class="header" style="margin-top:-10px; margin-bottom:20px">AS A COMPANY</li>
              	<li class="header" style="margin-bottom:5px">What we do</li>
               	<li style="width:500px" class="font1">View Scan Labs is a company founded under the singular belief that the quality of its product
               										 not come at the cost of its integrity.
                </li>
               	<li class="header" style="margin-bottom:5px; margin-top:15px">Who we are</li>
                <li class="font1" style="width:400px; color:grey">
                Content
	        </li>
                <li style="margin-left:0px; margin-top:30px;color:grey;" class="header" onclick="environment()"><a href="#">Environmental Goals</a></li>
                <li style="margin-left:0px;margin-top:2px; color:grey " class="header"><a href="#">Our Reach</a></li>
             </ul>
             
            <div style="position:absolute; top:340px; left:30px; width:600px;">
              <p class="header" style="position:absolute; left:-20px; top:-75px" >Mailing Address:</span></p>
              	<ul style="margin-left:-59px;margin-top:-40px">
                	<li class="font1">Bleh Bleh Bleh</li>
                	<li class="font1">309 Bleecker St.</li>
                    <li class="font1">Brooklyn, New York 11231</li>
                    <li class="font1">USA, +1 1339 6525</li>
                </ul>    </div>'
}

does not.

is there a better way to handle this than the innerHTML property. can i put the markup in a separate script and just have that script called up in innerHTML, if anything just so it looks more succinct. thanks.

Hi everyone,

So I know enough to make an image change when you click on something, but not enough to do what I want to do.

Code:

<img name="ImageState" src="Image1.jpg" alt="Image">
<A HREF="javascript:void(0)" onclick="ImageState.src='Image1.jpg'">Link 1</A>
<A HREF="javascript:void(0)" onclick="ImageState.src='Image2.jpg'">Link 2</A>
<A HREF="javascript:void(0)" onclick="ImageState.src='Image3.jpg'">Link 3</A>
<A HREF="javascript:void(0)" onclick="ImageState.src='Image4.jpg'">Link 4</A>
<A HREF="javascript:void(0)" onclick="ImageState.src='Image5.jpg'">Link 5</A>

The problem is that I want the images to only advance in the proper order. For example, if "Image2.jpg" is currently displayed, I want to make it so that only clicking on "Link 3" will advance it to "Image3.jpg" while the other links are still there but do nothing if you click on them. Can anyone tell me how to do this please?

I have the index page which contains the menus with hrefs.


Now i have to generate the hrefs dynamically and the problem is the menus are created by the plugin so i can edit that file


So i was thinking of loading the new url in hidden elemenst and when the page loads then chnage the hrefs of those menus.



I want to ask that where on the page should i display the hidden elements so that when the page loads then by using JS i can chnage the href of few menu items

I was thinking of doing that on the top of page but that does not look nice to have any element before body

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";
			}
		}

First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link).

I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked.

Help please...


Code:

<script type="text/javascript">
		<!--Hide from incompatible browsers
		/* <![CDATA[ */
				
		function changeText()
		{
			document.getElementById('link').innerHTML = 'View Smaller Image';
			return false;		
		}
		
		function changeImage()
		{			
			var newImage = new Image();
			newImage.src = "images/cottage_large.jpg";
			document.getElementById('thumbnail').src = newImage.src;	
			return false; 											
		}
				
		/**/
		/* ]]> */
		
		// Stop hiding from incompatible browsers -->
	</script>

</head>

<body>
	
	<h3>Real Estate</h3>
		 
	<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
    
	<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
	

</body>

</html>