Learn VBA & Macros in 1 Week!

JavaScript - Moving Pictures And Text Across The Page

Full Excel VBA Course - Beginner to Expert

Moving Pictures And Text Across The Page	View Content

Hi. Stuck on an assignment, inserting 3 files that i am working with, unable to get the unhide or move functions working. Thanks for all your help.

***Index.htm
Code:

01.<html>
02.<head>
03.<!-- 
04.   New Perspectives on JavaScript
05.   Tutorial 4
06.   Review Assignment
07. 
08.   Avalon Books
09.   Author: Rexdreamer
10.   Date:   08/12/09
11. 
12.   Filename:       index.htm
13.   Supporting files: ab.gif, ablogo.gif, avalon2.htm
14.-->
15.<title>Avalon Books</title>
16.<script type="text/javascript" >								   //insert embedded script that uses an if statement to test for W3C DOM
17.  if (document.getElementById) location.href="avalon2.htm"	   //if supported browser load avalon2.htm using the href prop of the location obj
18.</script>												    
19. 
20.</head>
21. 
22.<body style="background-color: black">
23.<p style="text-align: center">
24.<img src="ablogo.jpg" alt="Avalon Books" /><br />
25.<img src="ab.gif" alt="" />
26.</p>
27.</body>
28.</html>

***Avalon.htm

Code:

<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 4
   Review Assignment

   Avalon Books
   Author: Chris Veal
   Date:   08/12/09

   Filename:         avalon2.htm
   Supporting files: kids.jpg, fiction.jpg, nfiction.jpg, scripts2.js, styles2.css
-->
<title>Avalon Books</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script2.js"></script> 	
<script type="text/javascript">
function placeObjects() {	   								//insert function named placeObj
var w = winWidth/2;		 	   								//declare variable named w that is =1/2 of the value returned by the winWidth function
placeit("avalon2", W-75, 0);
placeit("kids", W-75, 100);									//place kids coordiantes at w75,100
placeit("fiction", W-75, 100);
placeit("nfiction", W-75, 100);
setZ("kids",z3)			  	   								//use setZ functionto set zindex for kids object to 3
setZ("fiction",z2)											//use setZ functionto set zindex for fiction object to 2
setZ("nfiction",z1)											//use setZ functionto set zindex for nfiction object to 1
moveAvalon();												//call the moveAvalon function
}
function moveAvalon() {
var x = xc
if (x <= w-125);
shiftIt("avalon",10);
setTimeout("moveAvalon",50);
}
if (x > w-125) {
  												
}
}
function swapImages() {										//insert swapimages function, purpose to change the stacking order of the 3image obj
setTimeout("showIt('kids')");
setTimeout("showIt('fiction')");
setTimeout("showIt('nfiction')");
setTimeout("swapIt()", 2000);
}
</script>
</head>

<body onload="placeObjects()">

<div id="kids">
   <img src="kids.jpg" alt="" /><br />
   Sale this month on children's books
</div>

<div id="fiction">
   <img src="fiction.jpg" alt="" /><br />
   Fiction selection of the month
</div>

<div id="nfiction">
   <img src="nfiction.jpg" alt="" /><br />
   Non-fiction selection of the month
</div>

<div id="avalon">
   Avalon <span id="books">Books</span>
</div>

</body>
</html>

***script.js
Code:

/* 
   New Perspectives on JavaScript
   Tutorial 4
   Review Assignment

   Avalon Books
   Name: Chris Veal
   Date: 08/12/09

   Function List:
   xCoord(id)
      Returns the x-coordinate of the object with id with the value id

   placeIt(id, x, y)
      Places the id object at the coordinates (x,y)

   shiftIt(id, dx, dy)
      Moves the id object dx pixels to the right and dy pixels down

   showIt(id)
      Hides the id object by setting its visibility style to "visible"

   winWidth()
      Returns the width of the interior browser window in pixels

   winHeight()
      Returns the height of the interior browser window in pixels 

   setZ(id, z)
      Sets the z-index value of the id object

   swapIt(id1, id2, id3)
      Swaps the z-index values of id1, id2, id3

*/
function setZ(id, z) {					    // create new function called setZ with 2 parameters
object=document.getElementById(id);         // use the value of the id parameter to select the obj in the document with that id value
object.style.zIndex=z;						// set the z index of the object to the z parameter
}
function swapIt(id1, id2, id3) {			// create new function called swapIt with 3 parameters
var object1=document.getElementById(id1);	//getObj function to create the 3 variables named obj 1-3
var object2=document.getElementById(id2);	
var object3=document.getElementById(id3);

var z1=object1.style.zIndex;				//create 2 variables named z1-z3 set variables=to zIndex values of obj1-3
var z2=object2.style.zIndex;
var z3=object3.style.zIndex;

object1.style.zIndex=z3;					//change the zIndex value of obj1 to z3thus moving it to the bottom of the stack
object2.style.zIndex=z1;					//change the zIndex value of obj2 to z1thus moving it to the top of the stack
object3.style.zIndex=z2;					//change the zIndex value of obj3 to z2thus moving it to the middle of the stack
}

function placeIt(id, x, y) {
   var object=document.getElementById(id);
   object.style.left=x+"px";
   object.style.top=y+"px";
}

function shiftIt(id, dx, dy) {
   var object=document.getElementById(id);
   object.style.left=parseInt(object.style.left)+dx+"px";
   object.style.top=parseInt(object.style.top)+dy+"px";
}

function xCoord(id) {
   object=document.getElementById(id);
   xc=parseInt(object.style.left);
   return xc;
}

function showIt(id) {
   var object=document.getElementById(id);
   object.style.visibility="visible";
}

function winWidth() {
   if (window.innerWidth) return window.innerWidth;
   else if (document.documentElement) return document.documentElement.offsetWidth;
   else if (document.body.clientWidth) return document.body.clientWidth;
}

function winHeight() {
   if (window.innerHeight) return window.innerHeight;
   else if (document.documentElement) return document.documentElement.offsetHeight;
   else if (document.body.clientHeight) return document.body.clientHeight;
}

Full Excel VBA Course - Beginner to Expert

Moving The Curser From Text Box To Text Box Automatically When A Condition Is Met

Similar Tutorials

View Content

Hello there, this is my first post on this forum.

I have learned a good bit of PHP and have implemented it for use in my work as a math tutor.

My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper.

I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met.

For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct.

The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically.

Code:

<SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
if(fldobj.value.length>3)
{document.forms[0].elements[nbox].focus()}
}
</SCRIPT>
</head>
<body onLoad="document.myform.txt1.focus()">
<CENTER>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">

Thank you for the help.

Rotating 2 Sets Of Pictures On The Same Page

Similar Tutorials

View Content

please help, it's driving me crazy.
I have been trying to get the rotating pictures to work. I am using dreamweaver 8. If I put one rotator on the page it works fine but when I add the second they both don't work. here is my page code

[<!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 name="google-site-verification" content="Ygobmtk4ksdYJZlIYpBAGC8rxkufPW--Lzmia27qUsc" />

<title>The Beach House Hotel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_2.css" type="text/css" />
<style type="text/css">

</style>
<meta http-equiv="" content="the beach house hotel,pak nam pran,paknampran,pranburi,hua hin" />
</head>
<body bgcolor="#0066cc" onload="imgOne();">
<table width="73%" height="514" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#99ccff">
<td height="60" colspan="4" nowrap="nowrap"><div align="center"><img src="images/hotelheader.jpg" alt="header" width="900" height="125" /></div></td>
</tr>

<tr bgcolor="#003399">
<td height="36" colspan="4" bgcolor="#0066CC"><div align="center"><a href="javascript:;"></a><span class="style13"><a href="index.html" class="style8">HOME </a>     <a href="location.html" class="style8">LOCATION</a>       <a href="menu.html" class="style8">MENU </a>     <a href="reviews.html" class="style8">REVIEWS</a>      <a href="specialevents.html" class="style8">SPECIAL EVENTS</a>      <a href="roomrate.html" class="style8">ROOM RATES</a>      <a href="kiteboarding.html" class="style8">KITEBORDING</a>    <strong> <strong><a href="toursandrentals.html" class="style8">TOURS AND RENTALS</a></strong> </strong> <a href="contacts.html" class="style8">     CONTACT US</a></span></div></td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="2" valign="top">

<body onload="imgOne();">
<table width="200" height="166">
<tr>
<td><span class="style9"><img src="http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_11.jpg" name="myimg" width="168" height="187" align="left" /></span></td>
</tr>
</table>
<h1> </h1>
</td>
<td width="701" valign="top"><div align="center"><br />
<table border="0" cellspacing="0" cellpadding="2" width="440">
<tr>
<td class="pageName"><p align="center" class="style10"><em>Welcome to</em></p>
<p align="center" class="style10"> The Beach House Hotel</p>
<p align="center" class="style10">KITEBOARDING PARADISE </p></td>
</tr>

<tr>
<td class="bodyText">
<p align="center"><span class="style10">The Beach House</span><span class="style12"> <span class="style11">is located 25 Klms south of Hua Hin on the beach at Pak nam pran, on the beautiful West Coast of the Gulf of Siam. The hotel has a bamboo beach bar on the beach. The bars name is the Downwind Bar, many kiteboardes down wind to have a relaxing drink after a good days kiting. There</span></span> <span class="style12">are constant thermal winds</span>, <span class="style12">the strong wind begins November and carries on through to May, we get 2 types of wind here in Pranburi, the winds run from January to around end of February blowing between 12 – 25 knots then the Thermal wind kicks in March onward generating afternoon sea breeze winds between 12 – 20 knots. Most common wind sites such as windfinder and windguru do not forecast or show thermal winds. The forecast for the area would show 1 – 2 knots yet the thermal will be generating 18 knots in the afternoon. </span></p>
<p align="center"><br />
</p></td>
</tr>
</table>
<br />
 <br />
</div></td>
<td width="156" valign="top"><span class="style9">
<meta http-equiv="Content-Type" content="text/html; charset=" />
</span>
<table width="200" height="186">
<tr>
<td height="180"></script><script language="javascript" type="text/javascript">img2 = new Image()

seconds = "2";

function imgOne()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_1.jpg'; //needed to be added
setTimeout("imgTwo()", seconds * 2000);
}
function imgTwo()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_2.jpg';
setTimeout("imgThree()", seconds * 2000);
}
function imgThree()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_3.jpg';
setTimeout("imgFour()", seconds * 2000);
}
function imgFour()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_4.jpg';
setTimeout("imgFive()", seconds * 2000);
}
function imgFive()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_5.jpg';
setTimeout("imgSix()", seconds * 2000);
}
function imgSix()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_6.jpg';
setTimeout("imgSeven()", seconds * 2000);
}
function imgSeven()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_7.jpg';
setTimeout("imgEight()", seconds * 2000);
}
function imgEight()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_9.jpg';
setTimeout("imgNine()", seconds * 2000);
}
function imgNine()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_10.jpg';
setTimeout("imgTen()", seconds * 2000);
}
function imgTen()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_11.jpg';
setTimeout("imgOne()", seconds * 2000);
}
</script>
<img src="http://thebeachhouse-hotel.com/images/sea_view_room.jpg" name="myimg" width="171" height="193" align="right" /></td>
</tr>
</table>
</script>
<script language="javascript" type="text/javascript">img2 = new Image()

seconds = "2";

function imgOne()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/beach_left.jpg'; //needed to be added
setTimeout("imgTwo()", seconds * 2000);
}
function imgTwo()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/beach_right.jpg';
setTimeout("imgThree()", seconds * 2000);
}
function imgThree()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/bed.jpg';
setTimeout("imgFour()", seconds * 2000);
}
function imgFour()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/fountians.jpg';
setTimeout("imgFive()", seconds * 2000);
}
function imgFive()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/full_beach_left.jpg';
setTimeout("imgSix()", seconds * 2000);
}
function imgSix()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/garden_view_rooms.jpg';
setTimeout("imgSeven()", seconds * 2000);
}
function imgSeven()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/hotel-at-night.jpg';
setTimeout("imgEight()", seconds * 2000);
}
function imgEight()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/main_bedroom8.jpg';
setTimeout("imgNine()", seconds * 2000);
}
function imgNine()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/pool_elephants.jpg';
setTimeout("imgTen()", seconds * 2000);
}
function imgTen()
{
document.myimg.src = 'http://thebeachhouse-hotel.com/images/sea_view_room.jpg';
setTimeout("imgOne()", seconds * 2000);
}
</script></td>
</tr>

<tr>
<td width="20" height="22"> </td>
<td width="161"> </td>
<td width="701"><div align="center"></div></td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6798030-3");
pageTracker._trackPageview();
} catch(err) {}</script></body>
</html>]

Thanks for any help.
regards Martin

Help Making Pictures Move On A Page

Similar Tutorials

View Content

Hello everyone! I'm a complete newb to Javascript. I'm currently working on something that I am quite stuck with. Basically, I have a hexagon of pictures displayed on an HTML page. I need these pictures to rotate counter clockwise every 3000 ms. I have the code below and have made some adjustments, but how would I modify the functions to get the pictures to move?
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript Fun!</title>
<script type="text/javascript">
	<!--
	var pixArray = Array(6);

	function shiftPix(element, count, index) {
		var pi = 3.1415926535;  

		y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
	  	x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);


	  	element.style.left = x + "px";
	  	element.style.top = y + "px";

	}
	function display() {

	  	for (j = 0; j < 6 ; j++) {
			shiftPix(pixArray[j], counter, j);
		}
		setTimeout("display()",3000);
	}
	// -->
</script>
</head>

<body onload="display();">

  <div id="Picture1" style="position:absolute;left:300px;top:450px">
	  <img src="picture1.jpg"  width="90" height="120" />
  </div>
  <div id="Picture2" style="position:absolute;left:430px;top:375px">
	  <img src="picture2.jpg"  width="90" height="120" />
  </div>
  <div id="Picture3" style="position:absolute;left:430px;top:225px">
	  <img src="picture3.jpg"  width="90" height="120" />
  </div>
  <div id="Picture4" style="position:absolute;left:300px;top:150px">
	  <img src="picture4.jpg"  width="90" height="120" />
  </div>
  <div id="Picture5" style="position:absolute;left:170px;top:225px">
	  <img src="picture5.jpg" width="90" height="120" />
  </div>
  <div id="Picture6" style="position:absolute;left:170px;top:375px">
	  <img src="picture6.jpg"  width="90" height="120" />
  </div>

  <script type="text/javascript">
	<!--
	  var counter = 0;

	  pixArray[0] = document.getElementById("Picture1");
	  pixArray[1] = document.getElementById("Picture2");
	  pixArray[2] = document.getElementById("Picture3");
	  pixArray[3] = document.getElementById("Picture4");
	  pixArray[4] = document.getElementById("Picture5");
	  pixArray[5] = document.getElementById("Picture6");

	  display();
	// -->
  </script>
</body>
</html>

Thanks in advance!!

Moving Text

Similar Tutorials

View Content

I already looked at this http://codingforums.com/showthread.p...ht=moving+text thread and I know it's similar. I just don't know what I am doing wrong. My css puts the text where it needs to go, then the script is supposed to alter it's pixel position and so it should move, right?
Code:

<html>
<head>
<style>
item1 {position: absolute; left:20px; top:280px;}
item2 {position: absolute; right:20px; top:280px;}
</style>
</head>
<body>
<item1 id="item1" >item1</item1>
<item2 id="item2" >item2</item2>

<script type="text/javascript">
var i=0; var j=0;
var obj1=document.getElementById(item1);
var obj2=document.getElementById(item2);
obj1.style.visibility="visible";
obj2.style.visibility="visible";

//if (typeof obj1.style.left!="undefined" && obj2.style.right!="undefined")
//{
	//loop from ParseInt to coordinates in center of screen
	for (i=0;i<100;i++)
		{
		obj1.style.left=parseInt(obj.style.left) + i + "px";
		document.write("<item1 id="item1">item1</item1>");
		document.close();
		}

	//for (j=0;j<100;j++)
	//	{
	//	obj2.style.right=parseInt(obj2.style.right) + j + "px";
	//	document.write("<item2 id="item2" >item2</item2>");
	//	}
		alert(i);
//}
</script>
</body>
</html>

Am I anywhere close? I am trying this on IE6 (I only have Windows 2000) and on Firefox 3.5.3.

Psn Store Style Moving Text?

Similar Tutorials

View Content

If anyone has a PS3 and goes on the PSN Store (PlayStation Network Store) you will get what i'm on about but does anyone know how I can use Javascript to make it when a user hovers over some text it will marquee but start from the position it was?

Example:
A string like this wouldn't need to have a scroller when someone hovers over it: Hello but a string like this would: Hello i'm bob and how are you doing today?. as it would be to long to stay on one line in the div.

So what i'm looking for is some sort of marquee that doesn't start off screen but calls the current texts position and then starts from there and then reverse itself to go from right-to-left to left-to-right when it's at the end of the text and when the user's mouse moves off the text it will just go back to its normal state.

All text's which are to big for the div will have three dots added to the end and once mouse over they will go and the full text will start to scroll.

If anyone can help me this would be a massive help.

Thank You
DJCMBear

Alert When Moving Out Of Web Page

Similar Tutorials

View Content

Hi Guys,

seen some pages who give alerts or Warnings mentioning that i'm moving away from my webpage. Best example is hotmail when you are on the compose mail screen and when click another link it is asking for confirmation.

Can you one please shed some light on how to do this.

Your help is greatly appreciated.

Cheers
Dileep

Moving Div Down With Page Scroll

Similar Tutorials

View Content

I am trying to find some examples of something I know I have seen in the past, but I am unable to put together a search that is coming up with anything.

What I have is a div of content that I need to always be visible on the screen. The page needs to be scrolled to read through it all so I need a way for the div to move down the page as I scroll.

Can anyone point me in the right direction?

Moving The Cursor/carat To End Of Text In Editable Iframe?

Similar Tutorials

View Content

Hi all,

I'm trying to get the cursor position to move to the end of the text within an editable iframe or div.
I've been pointed to something called TextRange and have been reading up on it for days yet couldnt make sense of much (i'm still very new).

what i'm trying to do is on a button click, the cursor will move to the end of the text in the iframe.

any help or pointers would be greatly appreciated. thanks.

Crossbrowser Moving Layers Around A Page

Similar Tutorials

View Content

Usually I can find what I need by doing a Googlesearch.

This time, I can't seem to find anything.

I need a crossbrowser method for moving layers around the screen. So simple an idea!

If it helps answer my query, here is the js for what I have already (a sort of horrible mess that works in IE):

PS - I can live with a jquery solution!

Code:

<!--
function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
  //Copyright 1998 Macromedia, Inc. All rights reserved.
  var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
  if (!document.all && !document.layers) return false;
  retVal = true; if(!NS && event) event.returnValue = true;
  if (MM_dragLayer.arguments.length > 1) {
    curDrag = MM_findObj(objName); if (!curDrag) return false;
    if (!document.allLayers) { document.allLayers = new Array();
      with (document) if (NS) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
        for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
          with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
      } else for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
    curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
    curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
    curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
    curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
    curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
    curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
    curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
    curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
    curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
    curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
    curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
    document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
    if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  } else {
    var theEvent = ((NS)?objName.type:event.type);
    if (theEvent == 'mousedown') {
      var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
      var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
      var maxDragZ=null; document.MM_maxZ = 0;
      for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
        var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
        if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
        var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
        if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
          var parentL=0; var parentT=0;
          if (!NS) { parentLayer = aLayer.parentElement;
            while (parentLayer != null && parentLayer.style.position) {
              parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
              parentLayer = parentLayer.parentElement; } }
          var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
          var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
          var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
          var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
          if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
              || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
      if (curDrag) {
        document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
        curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
        curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
        MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
        document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
        if(curDrag.MM_toFront) {
          eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
          if (!curDrag.MM_dropBack) document.MM_maxZ++; }
        retVal = false; if(!NS) event.returnValue = false;
    } } else if (theEvent == 'mousemove') {
      if (document.MM_curDrag) with (document.MM_curDrag) {
        var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
        var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
        newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
        if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
        if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
        if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
        if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
        MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
        if (NS) {left = newLeft; top = newTop;}
        else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
        if (MM_dragJS) eval(MM_dragJS);
        retVal = false; if(!NS) event.returnValue = false;
    } } else if (theEvent == 'mouseup') {
      document.onmousemove = null;
      if (NS) document.releaseEvents(Event.MOUSEMOVE);
      if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
      if (document.MM_curDrag) with (document.MM_curDrag) {
        if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
            (Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
             Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
          if (NS) {left = MM_targL; top = MM_targT;}
          else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
          MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
        if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
        if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
        retVal = false; if(!NS) event.returnValue = false; }
      document.MM_curDrag = null;
    }
    if (NS) document.routeEvent(objName);
  } return retVal;
}
//-->

Onclick Adds Text Field To Page (limit 3, Each Text Field Displays Different Text)

Similar Tutorials

View Content

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.

Swap Pictures

Similar Tutorials

View Content

All,
I have the following code:

Code:

              
<div class="col-1">
    <div id="swap">
        <img src="images/gallery-img3-big.jpg" alt="" />
    </div>
</div>
<div class="col-2">
    <div class="list3">
       <ul>
          <li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
        </ul>
    </div>
</div>

When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated.

Thanks in advance.

Javascript And Pictures

Similar Tutorials

View Content

All,
I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case.

An example of a similar desired result is a link he
http://qrayg.com/experiment/hig/

Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well.

Thanks for any guidance you could provide me on this.

Thanks in advance!

Scheduled Pictures On Website

Similar Tutorials

View Content

i look everywhere for html and Java snip its and all seem to be different, can somebody please tell me how to code something like this,

also can the code be easy ish for example.

if show is 5pm till 6pm an image appears

if show is 6pm till 7pm an image appears

i know this is possible but there are so many codes out there,

thank you for your help

Table Of Rotating Pictures Help!

Similar Tutorials

View Content

Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh.

i found this code that refreshes the pictures:
Code:

<script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);


img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>

and to come up with the tables i made this code:

Code:

<table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>

but if you see the home page he

http://celulardepot.squarespace.com

you can see that something is DEFINITLY wrong lol
please help me! =D

Help Hiding Pictures Before Dom Is Loaded

Similar Tutorials

View Content

I am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack.

I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded.

the code to start the javascript is:

Code:

<script type="text/javascript">
	$(document).ready(function(){		
	$('#photos45').galleryView({
		panel_width: 980,
		panel_height: 300,
		gallery_width: 980,
		gallery_height: 900,
		frame_width: 120,
		frame_height: 50,
		pause_on_hover: true,
		nav_theme: 'light'
	});
	});
</script>

and the html is:

Code:

 <div style="height:360px; overflow:hidden; " >
 <ul id="photos45">
 <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li>

  <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li>

 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 
 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 </ul>
  

</div>

I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he

http://bit.ly/8QRXWU

Text From One Text Box To Another On A Different Page

Similar Tutorials

View Content

How do I make it so that typing into a text box and hitting a button will take me to a different page and populate a text box on that page with the text from the previous page?

Javascript Drop Down Menu With Pictures

Similar Tutorials

View Content

Hi guys.

I have been scowering high and low for code to create a Java drop down menu bar for my site.

I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/

but want to insert pictures into it, for each heading, to create a new looking bar if thats possible.

Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code.

Thanks in advance.

Navigation Menu Stays On Top Of Pictures

Similar Tutorials

View Content

Need some help understanding why and how to fix this.... btw this site is something I've been working on for some time..... and learning bit by bit !!!

this is the site :
http://www.teiafirme.com/hargrave.html

this is the problem :
The specific problem is that when you mouse over pictures i have a script to enlarge those pics, but my menu stays on top of those pictures !!!!!!!!!!!!! what do i need to do to fix this? If needed I will post the page html code...

I also have another problem which is with the flash movie on the home page which is only loading after i navigate way from the home page and then comeback to it...... Movie does not start on initial page load !!!!!

I Want To Extract Pictures Urls Submitted

Similar Tutorials

View Content

I want to type urls in a text field, submit such urls and extract pictures of these web pages. Does anyone know how I can do this using javascript?

Thanks,

Marcelo
Brazil

Image Rotator- Missing Pictures

Similar Tutorials

View Content

I have added an image rotator to my website using Java Script. The box for the rotator shows up on the published site but not the pictures. When I click on the box it links to the pictures I have added, and I know they are rotating because it changes every time I click on it. Also, the code does not seem to be showing up when I view the source of the page. This is a link to my site: http://www.jenniferbrenn.com/Fashion/Home.html the problem is in the box beneath the name "Jenny" near the bottom of the page.

This is the code I am using:
[CODE]
<script language="JavaScript">
// Copyright 1996, Infohiway, Inc. (http://www.infohiway.com)
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/

</script>
[CODE]