Learn VBA & Macros in 1 Week!

JavaScript - Creating Rotating Picture Array

Full Excel VBA Course - Beginner to Expert

Creating Rotating Picture Array	View Content

I have a problem. I have created a rotating picture array. The problem I am having is when I view the web page only the right side of my array rotates through the pictures. I have tried several ways to fix this, but have ran out of ideas.
Code:

<script type="text/javascript">
<!--Hide from old browsers

	var rotatePicsLeft= Array("candle1.jpg","candle2.jpg","candle3.jpg","candle4.jpg","candle5.jpg","candle6.jpg")
	var rotatorCntr=5
	
		
function RotateIt() {
	rotatorCntr+=1
	if (rotatorCntr==6) rotatorCntr=0
	document.picture1.src = rotatePicsLeft[rotatorCntr]
	setTimeout("RotateIt()",2000)
	}
	
	var rotatePicsRight=new Array("flowers1.jpg","flowers2.jpg","flowers3.jpg","flowers4.jpg","flowers5.jpg","flowers6.jpg","flowers7.jpg","flowers8.jpg")
	var rotatorCntr=7
	
function RotateIt() {
	rotatorCntr+=1
	if (rotatorCntr==8) rotatorCntr=0
	document.picture2.src = rotatePicsRight[rotatorCntr]
	setTimeout("RotateIt()",2000)
	}

//-->
</script>

Any ideas would be greatly appreciated. Thanks

Full Excel VBA Course - Beginner to Expert

Displaying A Rotating Image With Rotating Text.

Similar Tutorials

View Content

Ok so i have wrote some code which can be seen he http://www.runningprofiles.com/members/include/test.php

This works great but when i add the code to the page i want it on (include "include/test.php" for some reason the code does not work... the text is delayed and then lags behind the images.. this can been seen here http://www.runningprofiles.com/members/

I have no idea why its happening!

Code for the code is
Code:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26659912.html</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript"> 

function advance()
{
  $("#slideshow").cycle("next");
  cycleCaption();
}

var displayedIndex = 0
function cycleCaption()
{
  $("#caption").children().each( function(index) {
    $(this).css("font-weight", (index==displayedIndex)? "bold" : "normal" );
  });
  displayedIndex = (++displayedIndex==$("#caption").children().length)? 0 : displayedIndex;
}

$(function() {

  $("#slideshow").cycle({ timeout: 0 });

  $("img").each( function() {
    $("<div />").html($(this).attr("title")).appendTo($("#caption"));
  });

  cycleCaption();

  setInterval( "advance()", 2000 );

});

</script>
</head>
<body>

<div id="slideshow" style="float: left;">
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14882_jruqg6x4uu6frw2g872b.jpg" title="Aisling Cuffe Before Foot Locker" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14879_mzcgn05auhs24fnsygc1.jpg" title="Foot Locker Ballerness" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14880_u1npsmglw7b9t6hmoqhu.jpg" title="Foot Locker  The Rocket" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14887_9bblfhhvc0x66vebgjua.jpg" title="NCAA D2 Cro" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14884_mud4ewe6uh6ihrrpux6g.jpg" title="NXN Recap and Results" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14865_y1kt8vzejkvz25k075x2.jpg" title="Give Your " />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14877_1mlnygbenofquj5h3mcz.jpg" title="NCAA D2 XC Champ" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14855_9g971maove1jyos0h9zk.jpg" title="Defending" />
  <img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14850_6u22ylfzym7sxq1zw8p8.jpg" title="NXN 121" />
</div>
<div id="caption" style="float: left;">
</div>

</body>
</html>

Help Creating Copy2clipboard Array?

Similar Tutorials

View Content

I am really new to scripting. I found a nice script that copy2clipboard. What I have is the need to create a function array (not sure if that is what it is called) so that i don't need to create a new function everytime i add something to be copied. Anyone have any thoughts on this or a reference i can review to try and figure this out. thanks in advance.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>

<script type="text/javascript">
function clipper() {
var data = document.getElementById("Data").value;
window.clipboardData.setData("Text", data);

}

function clipper1() {
var data1 = document.getElementById("Data1").value;
window.clipboardData.setData("Text", data1);

}

function clipper2() {
var data2 = document.getElementById("Data2").value;
window.clipboardData.setData("Text", data2);

}

</script>
</head>

<body>
<span id="Data" value="This is the clipper function."></span><a href="javascript:clipper()">clipper function</a><br>
<span id="Data1" value="This is the clipper1 function."></span><a href="javascript:clipper1()">clipper1 function</a><br>
<span id="Data2" value="This is the clipper2 function."></span><a href="javascript:clipper2()">clipper2 function</a><br>

</body>
</html>

Help Creating Dynamic Buttons From Array

Similar Tutorials

View Content

Hey all! So there I was newly hired and tasked with pouring through someone else's code to see what could be modified and brought up to date. After successfully finding the errors and correcting them and fulfilling the tasks my new supervisor assigned me, he slaps me on the back and says, "Well done! Now make it dynamic!" By which he meant the chapter buttons I spent hours creating from the existing code.

Here's what he wants: the old code has an array, we'll call it someArray, that is assigned its values by the instructional developer as html pages are added to the course. So for example the code might look like this,
Code:

var someArray = new Array(4);
    
    someArray[0] = "video1/video1.html";
    someArray[1] = "video2/video2.html";
    someArray[2] = "video3/video3.html";

Now, each page has an associated chapter button. So video1/video1.html would have ch1Btn, video2/video2.html would have ch2Btn and so forth. Each button in turn calls a specific function which does only one thing - sets the currentPage variable to page associated with that button/array contents. For example, I have created the following functions to call each page:
Code:

	
        function doCh1(){currentPage = 0; goToPage();}
	function doCh2(){currentPage = 1; goToPage();}
	function doCh3(){currentPage = 2; goToPage();}

I should mention that all this is being done from within an html wrapper that calls each page into an iframe. The currentPage variable is assigned the url of one of the elements from the pageArray.

My supervisor wants to be able to manually add pages to the pageArray and have the javascript code generate the associated buttons and function calls so when the learner clicks on one of the dynamically created buttons, s/he is taken to the correct page.

Currently I'm using static images with the onclick calling the correct function to set my currentPage value and send the learner on his/her merry way.

Is there a way to do all of this dynamically? If so, can you help me get my head around this by providing some examples?

Sorry for the long post.

Thank you,

M

Creating New Instances Of An Object In An Array

Similar Tutorials

View Content

Hi I need help with spawning in my game.

I have this code:

Code:

function spawnEnemy()
{
    var shapes = [LeftBlock, RightBlock, middleRightBlock, middleLeftBlock, middleBlock];
    var shape = shapes[Math.floor(Math.random() * shapes.length)];
    var RandomBlock = new THREE.Object3D();
    RandomBlock.add(shape);
    blocks.push(RandomBlock);

     for (var i = 0; i < blocks.length; i++) {
        RandomBlock = blocks[i];
        scene.add(RandomBlock);
        hit = false; 
        
     }

}


function startSpawningEnemies()
{

  repeater = setInterval(function() {
      spawnEnemy();
      newBlock = false;
  }, 1000);


}

Basically it chooses a random object in the array 'shapes' and it adds the shape to the scene every second.

But the problem is that when I have, for example a 'Leftblock' on screen and it randomly gets called again, Leftblock will get reset to the starting position, so basically I cant have 2 of the same type of block on screen at once.

So I want want every block in the array to be an entirely new instance of a block, rather than the same.

Here is a code pen so you can see what is happening My Codepen

Thanks in advance

Reply With Quote

01-31-2015, 12:06 PM #2
Lesshardtofind View Profile View Forum Posts Visit Homepage

New Coder Join Date Sep 2013 Location Houston Posts 20 Thanks 0 Thanked 4 Times in 4 Posts

Hey I apologize in advance this will probably be a long post, but to get to the root of your problem it takes a bit of explaining to show how I fixed it. If you don't want to read about all the changes and why I did them if you scroll to the bottom of this post the last code snippet is the new working code.

Firstly I'd like to make a few comments.
1. Try to avoid using so many globals that is what is confusing the whole thing.
2. Even though JavaScript isn't a classical language. Using some OOP approaches can simplify your code quite a bit.

Now to what your actual problem was. You only had one instance of meshes for each type of block/paddle or whatever you call it. Even though you created new 3d objects you still were just passing it the values of the current existing Meshes.

In order to get around this I simplified your code a lot. I removed around 200 lines of code and created a few objects to make things easier. I don't know that I can explain every single thing I did, but creating objects is very useful for instance instead of making a ton of variables for each box you can make an Object called Box and then create a new instance of it. Since your Box also needs a mesh you can create that inside of the box as well.

Code:

function Box(w, h, d, q, m){
    var CoreInfo = {
        width: w,
        height: h,
        depth: d,
        quality: q,
        material: m
    };
    var Mesh = GetNewMesh(CoreInfo);
    this.setMeshY = function(y){
        Mesh.position.y = y;
    }
    this.setMeshX = function(x){
        Mesh.position.x = x;
    }
    this.getCoreInfo = function(key){
        return CoreInfo[key];
    }
    this.setCoreInfo = function(key, val){
        CoreInfo[key] = val;
    }
    this.getAllInfo = function(){
        return CoreInfo;
    }
    this.getMesh = function(){
        return Mesh;
    }
    this.setShadows = function(r, c){
        Mesh.receiveShadow = r;
        Mesh.castShadow = c;
    }
}
// you will notice that it calls this to get a MESH instead of using 5+ serperate calls you can now wrap it into a function that takes an assoc array.
function GetNewMesh(info){
    var Q = info["qaulity"];
    return new THREE.Mesh(
        new THREE.BoxGeometry(
            info["width"],
            info["height"],
            info["depth"],
            Q, Q, Q),
        info["material"]);
}

With this object you can create new instances of boxes just by passing all the variables it needs and save it into a new object.
example use:

Code:

var BlockMat = new THREE.MeshLambertMaterial({color: 0x3c00ff});
var Abox = new Box(10, 160, 10, 1, BlockMat);

As you can see the Box requires 5 arguments to construct. They are width, height, depth, quality, and material;
You will also notice there are functions inside of the Box to call functionality they are
setMeshY(y): This sets the Y position of the mesh as the y value passed to it;
setMeshX(x): This sets the X position of the mesh as the x value passed to it;
getCoreInfo(key): This gets some CoreInfo based on a string or "key" that you pass it. EX use Box.getCoreInfo("width");
setCoreInfo(key, value): This sets some CoreInfo based on a string or "key" that you pass it. EX use Box.setCoreInfo("width", 100);
getAllInfo(): Returns ALL CoreInfo in an assoc array that is accessed by a "key." EX use var AllInfo = Box.getAllInfo(); AllInfo["width"];
getMesh: Returns The mesh object
setShadows: Allows you to set shadows by passing true or false for the receive and cast arguments.

Now some of your enemy boxes needed two boxes so I further created a object called Double Box;

These are very much the same as a box. Just all methods need to be passed an index as well. These are identical to your original objects as Paddle1 is now at index 0, and Paddle2 is at index1 for each respective object.

With those objects created we can Delete a TON of your global variables and clean some stuff up. As a matter of fact the more I looked at it you didn't even NEED globals for your set enemy paddle types at all. I was able to wrap them all up into a function that will return an object like you wanted by being passed a string.

Code:

function GetBlock(type){
    if(type == "m"){
        var temp = new DoubleBox(10, 75, 10, 1, BlockMat, 10, 75, 10, 1, BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh(0));
        obj.add(temp.getMesh(1))
        temp.setMeshX(0, fieldWidth/2);
        temp.setMeshY(0, -60);
        temp.setMeshX(1, fieldWidth/2);
        temp.setMeshY(1, 60);
        return obj;
    }
    else if(type == "mr"){
        var temp = new DoubleBox(10, 30, 10, 1,BlockMat, 10, 110, 10, 1,BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh(0));
        obj.add(temp.getMesh(1));
        temp.setMeshX(0, fieldWidth/2);
        temp.setMeshY(0, -80);
        temp.setMeshX(1, fieldWidth/2);
        temp.setMeshY(1, 40);
        return obj;
    }
    else if(type == "ml"){
        var temp = new DoubleBox(10, 30, 10, 1, BlockMat, 10, 110, 10, 1, BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh(0));
        obj.add(temp.getMesh(1));
        temp.setMeshX(0, fieldWidth/2);
        temp.setMeshY(0, 80);
        temp.setMeshX(1, fieldWidth/2);
        temp.setMeshY(1, -40);
        return obj;
    }
    else if(type == "l"){
        var temp = new Box(10, 160, 10, 1, BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh());
        temp.setMeshX(fieldWidth/2);
        temp.setMeshY(20);
        return obj;
    }
    else if(type == "r"){
        var temp = new Box(10, 160, 10, 1, BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh());
        temp.setMeshX(fieldWidth/2);
        temp.setMeshY(-20);
        return obj;
    }
}

While this could be cleaned up and do some extra error checking it now does EXACTLY what you need it to. You can call this function and pass it a string for each type of block you want. It will return a NEW instance of that type of block without sharing meshes as you had previously programmed it to.

now you can call this function in the spawn enemy function
Code:

function spawnEnemy() //total enemies starts at 0 and every-time you add to array
{
    var shapes = ["l", "r", "mr", "ml", "m"];  // these are the strings that pass to the GetBlock(type) function as type
    var shape = shapes[Math.floor(Math.random() * shapes.length)];
    blocks.push(new THREE.Object3D().add(GetBlock(shape))); // now you just pass the function to the THREE.Object3d().add() accepting shape as a parameter.

    for (var i = 0; i < blocks.length; i++) {
        RandomBlock = blocks[i];
        scene.add(RandomBlock);
        hit = false;
    }

}

I know I made a lot of changes and there are still plenty more that could reduce your code even further, but when I finally got to a point where it was working the way you wanted to I figured I'd hand it back over to you.

HERE is the final code that works if you want to copy paste it over to test it.

Code:

//scene object variables
var renderer, scene, camera, pointLight, spotLight;

var hit;
var newBlock = false;
//field variables
var fieldWidth = 500, fieldHeight = 200;

function GetNewMesh(info){
    var Q = info["qaulity"];
    return new THREE.Mesh(
        new THREE.BoxGeometry(
            info["width"],
            info["height"],
            info["depth"],
            Q, Q, Q),
        info["material"]);
}

function Box(w, h, d, q, m){
    var CoreInfo = {
        width: w,
        height: h,
        depth: d,
        quality: q,
        material: m
    };
    var Mesh = GetNewMesh(CoreInfo);
    this.setMeshY = function(y){
        Mesh.position.y = y;
    }
    this.setMeshX = function(x){
        Mesh.position.x = x;
    }
    this.getCoreInfo = function(key){
        return CoreInfo[key];
    }
    this.setCoreInfo = function(key, val){
        CoreInfo[key] = val;
    }
    this.getAllInfo = function(){
        return CoreInfo;
    }
    this.getMesh = function(){
        return Mesh;
    }
    this.setShadows = function(r, c){
        Mesh.receiveShadow = r;
        Mesh.castShadow = c;
    }
}

function DoubleBox(B1w, B1h, B1d, B1q, B1m, B2w, B2h, B2d, B2q, B2m) {
    var Boxes = [];
    Boxes[0] = new Box(B1w, B1h, B1d, B1q, B1m);
    Boxes[1] = new Box(B2w, B2h, B2d, B2q, B2m);
    this.setMeshY = function (index, y) {
        Boxes[index].setMeshY(y);
    }
    this.setMeshX = function (index, x) {
        Boxes[index].setMeshX(x);
    }
    this.getCoreInfo = function (index, key) {
        return Boxes[index].getCoreInfo(key);
    }
    this.setCoreInfo = function (index, key, val) {
        Boxes[index].setCoreInfo(key, val);
    }
    this.getAllInfo = function (index) {
        return Boxes[index].getAllInfo();
    }
    this.getMesh = function (index) {
        return Boxes[index].getMesh();
    }
    this.setShadows = function (index, r, c) {
        Boxes[index].setShadows(r, c);
    }
}

var BlockMat = new THREE.MeshLambertMaterial({color: 0x3c00ff});

var Player = new Box(10, 30, 10, 1, new THREE.MeshLambertMaterial({color: 0x4AA02C}));
function GetBlock(type){
    if(type == "m"){
        var temp = new DoubleBox(10, 75, 10, 1, BlockMat, 10, 75, 10, 1, BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh(0));
        obj.add(temp.getMesh(1))
        temp.setMeshX(0, fieldWidth/2);
        temp.setMeshY(0, -60);
        temp.setMeshX(1, fieldWidth/2);
        temp.setMeshY(1, 60);
        return obj;
    }
    else if(type == "mr"){
        var temp = new DoubleBox(10, 30, 10, 1,BlockMat, 10, 110, 10, 1,BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh(0));
        obj.add(temp.getMesh(1));
        temp.setMeshX(0, fieldWidth/2);
        temp.setMeshY(0, -80);
        temp.setMeshX(1, fieldWidth/2);
        temp.setMeshY(1, 40);
        return obj;
    }
    else if(type == "ml"){
        var temp = new DoubleBox(10, 30, 10, 1, BlockMat, 10, 110, 10, 1, BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh(0));
        obj.add(temp.getMesh(1));
        temp.setMeshX(0, fieldWidth/2);
        temp.setMeshY(0, 80);
        temp.setMeshX(1, fieldWidth/2);
        temp.setMeshY(1, -40);
        return obj;
    }
    else if(type == "l"){
        var temp = new Box(10, 160, 10, 1, BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh());
        temp.setMeshX(fieldWidth/2);
        temp.setMeshY(20);
        return obj;
    }
    else if(type == "r"){
        var temp = new Box(10, 160, 10, 1, BlockMat);
        var obj = new THREE.Object3D();
        obj.add(temp.getMesh());
        temp.setMeshX(fieldWidth/2);
        temp.setMeshY(-20);
        return obj;
    }
}

//ball variables
var reftBlock, lightBlock, middleRightBlock, middleLeftBlock, middleBlock, RandomBlock;

//game-related variables
var score = 0;

var repeater;
var blocks = [];

var collidableMeshList = [];

function setup()
{
//	update the board to reflect the max score for match win
    document.getElementById("winnerBoard").innerHTML = "Move in the gaps!";

//	set up all the 3D objects in the scene
    createScene();

//	and let's get cracking!
    draw();
}

function createScene()
{
//	set the scene size
    var WIDTH = 640,
        HEIGHT = 360;

//	set some camera attributes
    var VIEW_ANGLE = 50,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000;

    var c = document.getElementById("gameCanvas");

//	create a WebGL renderer, camera
//	and a scene
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setClearColorHex(0xffffff);

    camera =
        new THREE.PerspectiveCamera(
            VIEW_ANGLE,
            ASPECT,
            NEAR,
            FAR);

    scene = new THREE.Scene();

//	add the camera to the scene
    scene.add(camera);

//	set a default position for the camera
//	not doing this somehow messes up shadow rendering
    //camera.position.z = 320;

//	start the renderer
    renderer.setSize(WIDTH, HEIGHT);

//	attach the render-supplied DOM element
    c.appendChild(renderer.domElement);

//	set up the playing surface plane
    var planeWidth = fieldWidth,
        planeHeight = fieldHeight,
        planeQuality = 10;

//	create the plane's material
    var planeMaterial =
        new THREE.MeshLambertMaterial(
            {
                color: 0xffffff
            });
//	create the table's material
    var tableMaterial =
        new THREE.MeshLambertMaterial(
            {
                color: 0x3c00ff
            });
//	create the ground's material
    var groundMaterial =
        new THREE.MeshLambertMaterial(
            {
                color: 0xffffff
            });


//	create the playing surface plane
    var plane = new THREE.Mesh(

        new THREE.PlaneGeometry(
            planeWidth * 1.25,	// 95% of table width, since we want to show where the ball goes out-of-bounds
            planeHeight,
            planeQuality,
            planeQuality),

        planeMaterial);

    scene.add(plane);
    plane.receiveShadow = true;

    var table = new THREE.Mesh(

        new THREE.BoxGeometry(
            planeWidth * 1.15,	// this creates the feel of a billiards table, with a lining
            planeHeight * 1.04,
            100,	// an arbitrary depth, the camera can't see much of it anyway
            planeQuality,
            planeQuality,
            1),

        tableMaterial);
    table.position.z = -51;	// we sink the table into the ground by 50 units. The extra 1 is so the plane can be seen
    scene.add(table);
    table.receiveShadow = true;

    scene.add(Player.getMesh());
    startSpawningEnemies();


    Player.setShadows(true, true)

    /*collidableMeshList.push(MiddleBlock.getMesh(0), MiddleBlock.getMesh(1),
        MiddleLeftBlock.getMesh(0), MiddleLeftBlock.getMesh(1), MiddleRightBlock.getMesh(0),
        MiddleRightBlock.getMesh(1), RightBlock.getMesh(), LeftBlock.getMesh());*/


//	set paddles on each side of the table
    Player.setMeshX(-fieldWidth/2 + Player.getCoreInfo("width"));

    //collidableMeshList.push(RandomBlock);

//	finally we finish by adding a ground plane
//	to show off pretty shadows
    var ground = new THREE.Mesh(

        new THREE.BoxGeometry(
            1000,
            1000,
            3,
            1,
            1,
            1 ),

        groundMaterial);
    // set ground to arbitrary z position to best show off shadowing
    ground.position.z = -132;
    ground.receiveShadow = true;
    scene.add(ground);

//	// create a point light
    pointLight =
        new THREE.PointLight(0xffffff);

//	set its position
    pointLight.position.x = -1000;
    pointLight.position.y = 0;
    pointLight.position.z = 1000;
    pointLight.intensity = 2.9;
    pointLight.distance = 10000;
//	add to the scene
    scene.add(pointLight);

//	add a spot light
//	this is important for casting shadows
    spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(0, 0, 460);
    spotLight.intensity = 1.5;
    spotLight.castShadow = true;
    scene.add(spotLight);

//	MAGIC SHADOW CREATOR DELUXE EDITION with Lights PackTM DLC
    renderer.shadowMapEnabled = true;


}

function draw()
{
//	draw THREE.JS scene
    renderer.render(scene, camera);
//	loop draw function call
    requestAnimationFrame(draw);

    cameraPhysics();
    playerPaddleMovement();
    enemyPaddleMovement();
    collision();
    //addScore();
}

function addScore()
{
   if (RandomBlock.position.x < Pad.getMesh().position.x*2 && newBlock == false) {
        console.log("pass");
        newBlock = true;
        if (hit == false) {
            score++;
        }
        else {
            score--
        }
        document.getElementById("scores").innerHTML = score;
    }
}

function enemyPaddleMovement()
{
    if(score < 10)
    {
        for (var i = 0; i < blocks.length; i++) {

            blocks[i].position.x -= 3;
        }
    }

    if(score >= 10)
    {
        for (var i = 0; i < blocks.length; i++) {

            blocks[i].position.x -= 5;
        }

    }

}


function playerPaddleMovement()
{
    if (Key.isDown(Key.D))
        Player.setMeshY(80);
    else if (Key.isDown(Key.F))
        Player.setMeshY(40);
    else if (Key.isDown(Key.H))
        Player.setMeshY(0);
    else if (Key.isDown(Key.J))
        Player.setMeshY(-40);
    else if (Key.isDown(Key.K))
        Player.setMeshY(-80);
}

//Handles camera and lighting logic
function cameraPhysics()
{

//	move to behind the player's paddle
    camera.position.x = Player.getMesh().position.x - 100;
    camera.position.y += (Player.getMesh().position.y - camera.position.y) * 0.05;
    camera.position.z = Player.getMesh().position.z + 100 + 0.04 * (Player.getMesh().position.x);

//	rotate to face towards the opponent
    camera.rotation.y = -60 * Math.PI/180;
    camera.rotation.z = -90 * Math.PI/180;
}

//Handles paddle collision logic
function collision()
{
    var originPoint = Player.getMesh().position.clone();

    for (var vertexIndex = 0; vertexIndex < Player.getMesh().geometry.vertices.length; vertexIndex++)
    {

        var ray = new THREE.Raycaster( originPoint, Player.getMesh().geometry.vertices[vertexIndex] );
        var collisionResults = ray.intersectObjects( collidableMeshList );
        if ( collisionResults.length > 0)
        {
            console.log("true");
            hit = true;
        }
    }
}


function resetBall()
{

}

//checks if either player or opponent has reached 7 points
function matchScoreCheck()
{

}

function spawnEnemy() //total enemies starts at 0 and every-time you add to array
{
    var shapes = ["l", "r", "mr", "ml", "m"];
    var shape = shapes[Math.floor(Math.random() * shapes.length)];
    blocks.push(new THREE.Object3D().add(GetBlock(shape)));

    for (var i = 0; i < blocks.length; i++) {
        RandomBlock = blocks[i];
        scene.add(RandomBlock);
        hit = false;
    }

}


function startSpawningEnemies()
{

    repeater = setInterval(function() {
        spawnEnemy();
        newBlock = false;
    }, 1000); //this calls spawnEnemy every spawnRate
    /////////spawn 'spawnAmount' enemies every 2 seconds

}

I also commented out your addScore() function because it references RandomBlock which is not defined in its scope and the error message was annoying for debugging. I also commented out the collision as you will need to think of a new method for doing that. Most likely just build a function that accepts an array and then just pass it your blocks array and let it loop through it.

Overall cool game good luck to ya. Don't hesitate to reach out if you have any other questions.

Reply With Quote

Users who have thanked Lesshardtofind for this post: TeaAnyOne (01-31-2015)

01-31-2015, 02:31 PM #3
TeaAnyOne View Profile View Forum Posts

New to the CF scene Join Date Jan 2015 Posts 4 Thanks 2 Thanked 0 Times in 0 Posts

Wow! I didn't expect such a huge reply, it seems that my original code has changed a lot and I will have to give it a hard look through it to understand it.

I will contact you if I have any questions, I have a lot of work ahead of me.

Thanks a lot

Reply With Quote

01-31-2015, 04:45 PM #4
TeaAnyOne View Profile View Forum Posts

New to the CF scene Join Date Jan 2015 Posts 4 Thanks 2 Thanked 0 Times in 0 Posts

I suppose I do have one more question.

How do I get the position.x of the Randomblocks. I tried using a for loop like this:

for (var i = 0; i < blocks.length; i++) {
if (blocks[i].position.x === Player.getMesh().position.x*2 && newBlock === false) {
console.log("pass");
newBlock = true;
if (hit === false) {
score++;
}
else {
score--;
}
}

document.getElementById("scores").innerHTML = score;
}
}

it works but it seems kind of buggy as it stops counting to 10 when it changes speed.

Is there another way to retrieve the position?

Reply With Quote

01-31-2015, 07:43 PM #5
Lesshardtofind View Profile View Forum Posts Visit Homepage

New Coder Join Date Sep 2013 Location Houston Posts 20 Thanks 0 Thanked 4 Times in 4 Posts

That should work for getting the position since the Blocks are objects of type THREE.Object3d so any methods they have should work for you.

You may be having problems because you never despawn enemies ultimately getting a huge number of 3d objects in your array blocks, or you may find your position requirement doesn't mathematically work with your speed up.

Sometimes just using a few extra console.logs to track your numbers inside of functions that don't seem to be working can help you to get an idea of what values it is seeing for the numbers and when. It might make the problem super obvious. This more like shotgun debugging which is discouraged by many, but I found it to help a lot when I was first learning code. Ultimately you want to understand your logic in each function and how it can fail when you program it, and then use error checking to make sure no parameters get outside of your allowed variance.

Reply With Quote

Users who have thanked Lesshardtofind for this post: TeaAnyOne (01-31-2015)

01-31-2015, 08:27 PM #6
TeaAnyOne View Profile View Forum Posts

New to the CF scene Join Date Jan 2015 Posts 4 Thanks 2 Thanked 0 Times in 0 Posts

OK ill see if I can get it working.

Thanks for all your help! It helped me a lot.

Reply With Quote

01-31-2015, 08:31 PM #7
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Originally Posted by Lesshardtofind
Ultimately you want to understand your logic in each function and how it can fail when you program it, and then use error checking to make sure no parameters get outside of your allowed variance.

Very well said!

Dynamically Creating An Array In A For Loop

Similar Tutorials

View Content

ok so I am trying to create a function that creates an array comprised of filenames based on a given range. I.E if 2-8 is selected and a foldername of UMCP/ and a common name of college is also given, the function should return and array such as [UMCP/college2.jpg,UMCP/college3.jpg.....UMCP/college8.jpg]. Here is what I've got but the alert that should tell me the filename of the first image says it is undefined, how can i fix this?

Code:

function getArrayPhotosNames (total,count,first,last) {
				/*window.alert("get Array Photo Names");*/
				
				var folderName = document.getElementById("photofold").value;
				var Alias = document.getElementById("commonName").value;
				
				for (var i=0; i>=total; i+=1) {
					var imageNum = i+first;
					var filename = folderName + Alias + imageNum + ".jpg";
					window.alert("image will be stored as"+filename);
					photosArrayGlobal[i]= filename;
				}
				
				
				window.alert("the first photo is" +photosArrayGlobal[0]);
				var countnum = count.value;
				if (count === 0) {
					window.alert("randomize time")
					var randomArray = photosArrayGlobal.sort( randomize() );
					var randomPhoto= document.getElementById("myImage");
					randomPhoto.setAttribute("src", randomArray[photoIndexGlobal]);
				}
				else {
					var firstPhoto=document.getElementById("myImage");
					firstPhoto.setAttribute("src", photosArrayGlobal[photoIndexGlobal])
				}
				
				
			}

Creating Arrays Dynamically, Need Help Looping An Array To Make Arrays. : (

Similar Tutorials

View Content

I need to loop the alphabet and numbers 0-9 to initialize a few thousand arrays.
This is for my site and is truly needed. http://www.thefreemenu.com
I currently have every array written out and it takes up to much space in my .js file.
The majority of my variables are empty but necessary and need to be there (including empty) for my site to work properly.

Question is the last part

Here's where I'm at.

Code:

var NewVarLetterOrNum = "a";
eval("_oneofseveralnames_" + NewVarLetterOrNum + "='this part works';");
alert(_oneofseveralnames_a);

This creates the variable _oneofseveralnames_a='this part works'

Code:

var newArrayLetterOrNum = "a";
eval("_oneofseveralnames_" + newArrayLetterOrNum + "= new Array();"); 
alert(_oneofseveralnames_a)

This creates the Array _oneofseveralnames_a=new Array(); and all the values in the array are null,
but, now a variable like _nl_a[1]='something' can be used elsewhere because the array exists. This is all that is necessary for now
because I can probably set all the variables to be blank with something like

Code:

i=1
while(i<=20){
_oneofseveralnames_a[i]="1-20";
i++
}
alert(_oneofseveralnames_[20]);

So now you have what I came to understand in the first few hours. Now to the hard part : (

I can't make multiple array's dynamically. I dont' know if its because I don't understand loops or arrays or what and its very fustrating. As for any answer you might be so kind as to provide, if you could dumb it down that would be greatly appreciated.
Code:

var newArray =new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z')    
i=1
while(i<=26){
	eval("_nl_" + newArray[i] + "= new Array();");
	i++
}
alert(newArray[1]) // Is b, but
alert(_nl_b) //I can't get _nl_b to exist, I tried everything including taking away the quotes around the letters in every test

*/
var _nl_a =new Array()
var _img_a =new Array()
var _h_a =new Array()
var _r_a =new Array()
var _m_a =new Array()
var _yt_a =new Array()
var _i_a =new Array()

The above arrays are all the array _name_ parts I need but for example, a has 10 parts, a,p2_a,p3_a,.. p10_a. I need 10 pages for each letter of the alphabet and numbers 0-9 and a special all1, p2_all1 ... p10_all1. Overall 2200 arrays that need to be declared. Currently they are all written out.
/*

Help: Rotating Display

Similar Tutorials

View Content

Hi,

I am trying to have an array of pictures rotating among them every 300 milliseconds.

I am having a hard time to walk through the arrays to set new x and y values and rotate them to the new place.

I think I have problems with my display code, where I should display the new position every time I call settimeout, exchanging the positions x and y from the array indexes position.

There is my code:

Code:

<?xml version="1.0" encoding="utf-8" ?>

<!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>hexagonal array</title>
<script type="text/javascript">
	<!--
	var pixArray = Array(6);

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

		// left: x coordinate, top: y coordinate
		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++) {			
			setTimeout("shiftPix(" + x + ", " + y + ")", 300);
			counter++;
			shiftPix(pixArray[j], counter, j);
		}
				
		
	}
	// -->
</script>
</head>

<body>

  <h3>Hexagonal Array </h3>


  <div id="John" style="position:absolute;left:300px;top:450px">
	  <img src="picture1.jpg" alt="John Santore" width="90" height="120" />
  </div>
  <div id="Seikyung" style="position:absolute;left:430px;top:375px">
	  <img src="picture2.jpg" alt="Seikyung Jung" width="90" height="120" />
  </div>
  <div id="Glenn" style="position:absolute;left:430px;top:225px">
	  <img src="picture3.jpg" alt="Glenn Pevlicek" width="90" height="120" />
  </div>
  <div id="Lee" style="position:absolute;left:300px;top:150px">
	  <img src="picture4.jpg" alt="Lee Mondshein" width="90" height="120" />
  </div>
  <div id="Abdul" style="position:absolute;left:170px;top:225px">
	  <img src="picture5.jpg" alt="Abdul Sattar" width="90" height="120" />
  </div>
  <div id="Toby" style="position:absolute;left:170px;top:375px">
	  <img src="picture6.jpg" alt="Toby Lorenzen" width="90" height="120" />
  </div>

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

	  pixArray[0] = document.getElementById("John");
	  pixArray[1] = document.getElementById("Seikyung");
	  pixArray[2] = document.getElementById("Glenn");
	  pixArray[3] = document.getElementById("Lee");
	  pixArray[4] = document.getElementById("Abdul");
	  pixArray[5] = document.getElementById("Toby");

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

Rotating Images

Similar Tutorials

View Content

I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script:

Code:

<!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);

index = Math.floor(Math.random() * images.length);

document.write(images[index]);
// -->

Where does the index come from? And how do I interpret images[index] if I were to read it out loud?

I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks!

Rotating Banner

Similar Tutorials

View Content

Hello,

I'm looking for an option for a rotating banner on a website.

I'd like to have a banner that rotates per visit. I don't mean every time a person returns to a website. I mean person A comes to the site and banner A is displayed. Then person B comes to a site and another banner is displayed.

Is this possible?

Rotating Banner Help

Similar Tutorials

View Content

Hi
I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc

Code:

<script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";


var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;


//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}

</script>

Positioning A Rotating Header - Help!

Similar Tutorials

View Content

A full description of the problem, all the code and the test is also posted on:

http://happinesshabitS.com/testroto4.htm

I am trying to install a rotating banner on http://HappinessHabit.com

How do I position the banner so it is NOT at the upper left hand corner of the page? I have tried wrapping it in <div> tags but that hasn't worked.

I can get it rotating fine on the test page, but cannot place the rotating banner where I need it - see: http://happinesshabitS.com

The code I placed on the test page is:

Code:

<script type="text/javascript" src="jshdrotate-1.js" ></script>
</head>

and

Code:

</head>
<body onLoad="preloadImgs();randomImages();">
<img src="rotoimage1/ri-image-01.jpg" name="rotator" width="800" height="135" border="0" id="rotator"></a>

Can I place this right above the </body> tag?

The code I placed in a separate (jshdrotate-1.js) file is on http://happinesshabits.com/javahelp.pdf and below:

Code:

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  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);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('rotoimage1/ri-image-01.jpg','rotoimage1/ri-image-02.jpg','rotoimage1/ri-image-03.jpg','rotoimage1/ri-image-04.jpg','rotoimage1/ri-image-05.jpg', 'rotoimage1/ri-image-06.jpg', 'rotoimage1/ri-image-07.jpg', 'rotoimage1/ri-image-08.jpg','rotoimage1/ri-image-09.jpg', 'rotoimage1/ri-image-10.jpg','rotoimage1/ri-image-11.jpg', 'rotoimage1/ri-image-12.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 6000;
var counter = 0;

function preloadImgs(){
  for(var i=0;i<imgs.length;i++){
    MM_preloadImages(imgs[i]);
  }
}

function randomImages(){
  if(counter == (imgs.length)){
    counter = 0;
  }
  MM_swapImage('rotator', '', imgs[counter++]);
  setTimeout('randomImages()', delay);
}

Many thanks for your help ! I am really in the dark about this. I'd asked this question before but didn't get any replies.

Did I post and describe what I am trying to do and the problem correctly?

Many thanks!

Rotating Background Image Help

Similar Tutorials

View Content

Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance!

Web Page Code Code:

<html>

<head>

<title>slayeroffice | code | image cross fade redux</title>

<link rel="stylesheet" type="text/css" href="xfade2_o.css">

<script type="text/javascript" src="xfade2.js"></script>

</head>

</div>
<body background="id=imageContainer">

<div id="imageContainer">

<img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg">

</div>

</body>
</html>

Style Sheet 1 Code:

#imageContainer {
	height:309px;
}

#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}

Style Sheet 2 Code:

#imageContainer {
	position:relative;
	margin:auto;
	width:500px;
	border:1px solid #000;
}

JavaScript Code:

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement("link");
	css.setAttribute("href","xfade2.css");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	d.getElementsByTagName("head")[0].appendChild(css);

	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
	
	setTimeout(so_xfade,1000);
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;

	nOpacity = imgs[nIndex].xOpacity;
	
	cOpacity-=.05; 
	nOpacity+=.05;
	
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	
	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);
	} else {
		setTimeout(so_xfade,50);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}

Rotating Banner Links

Similar Tutorials

View Content

Hi,

I'm trying to figure out how to put up links on a rotating homepage banner. I've tried everything I could find through Googling, etc. and nothing seems to work. Is this because the coordinates for the banner links need to be set in Flash? I tried to set them in Flash but didn't have enough experience with the program. Is there a way I can put some custom code in for the links?

Any help would be much appreciated. Thanks!

Javascript Rotating Menu.

Similar Tutorials

View Content

I'm pretty new to Javascript and found this menu, which I want for my website.

I came up with the idea of making the links in the back of the circle (i've got a total of 10 links), invisible and put a globe in the middle (as background) - making it look like the links in the back go behind the globe and comes back from behind it again.

I've tried to do this myself with .this.style.invisibility="hidden"; but... i lack skill to do it the right way i guess :P

Does anyone know the solution?

Here's the code of the menu:

Code:

eye={
p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,
isVertical:0,a1:0,a2:0,a3:0,
color:'#FFFFFF',
colorover:'#FFFFFF',
backgroundcolor:'#000000',
backgroundcolorover:'#000000',
bordercolor:'#000000',
fontsize:12,
fontfamily:'Arial',
pas:0,
spinmenu:function(){this.p=this.r/this.s;

this.a1=this.a2=this.isVertical?0:Math.PI/2},

spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";

document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},

muta:function(){a8=document.getElementById("controale");


for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");

a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;

yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));

a10=(this.p+xi)/(2*this.p);

a11=this.fontsize*(this.p+xi)/(2*this.p)+2;

a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));

yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;

a10=(this.p+yi)/(2*this.p);

a11=this.fontsize*(this.p+yi)/(2*this.p)+2;

a12=parseInt(100*(this.p+yi)/(2*this.p))};

a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;

a9s.top=(yi+this.y-a14/2)+"px";

a9s.left=(xi+this.x-a13/2)+"px";

a9s.width=a13+"px";a9s.fontSize=a11+"px";

a9s.zIndex=a12};

a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;

a8.style.left=this.x-a8.offsetWidth/2;

if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);

if(Math.abs(this.a1-this.a2)<this.pas/this.v)

this.a1=this.a2;

setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;

document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">&lt;&lt;</button> <button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()">&gt;&gt;</button></div>');eye.muta()}};

function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}

return totaloffset;
}

How To Make A Rotating Cipher???

Similar Tutorials

View Content

My program currently is just a sort of substitution cipher, but I need to write another function named RotateLeft that takes a string as input (the string called 'key') and rotates the characters in that string one position to the left, and then insert that into the Encode and Decode functions, turning the whole thing into a rotating cipher. I'm not really sure how to start? Can anyone help me?

Here's what I have so far:

Code:

<html>

<head>
  <title> Substitution Cipher</title>

  <script type="text/javascript">

    function Encode(message, key)
    // Assumes: message is the string to be encoded, and
    //          key is a string of the 26 letters in arbitrary order
    // Returns: the coded version of message using the substitution key 
    {
        var alphabet, coded, i, ch, index;

        alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        coded = "";  
        i = 0;                                    
        while (i < message.length) {                // for as many letters as there are
            ch = message.charAt(i);                 //   access each letter in message
            index = alphabet.indexOf(ch);           //   find its position in alphabet
            if (index == -1) {                      //   if it's not a capital letter,
                coded = coded + ch;                 //     then leave it as is & add
            }                                       //   otherwise,
            else {                                  //     find the corresponding
                coded = coded + key.charAt(index);  //     letter in the key & add
            }
            i = i + 1;

        }
        return coded;
    }



    function Decode(encoded, key)
    // Assumes: message is the string to be encoded, and
    //          key is a string of the 26 letters in arbitrary order
    // Returns: the coded version of message using the substitution key 
    {
        var alphabet, coded, i, ch, index;

        alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        coded = "";  
        i = 0;                                    
        while (i < encoded.length) {                     // for as many letters as there are
            ch = encoded.charAt(i);                      //   access each letter in the encoded message
            index = key.indexOf(ch);                     //   find its position in key
            if (index == -1) {                           //   if it's not a capital letter,
                coded = coded + ch;                      //     then leave it as is & add
            }                                            //   otherwise,
            else {                                       //     find the corresponding
                coded = coded + alphabet.charAt(index);  //     letter in the alphabet & add
            }
            i = i + 1;
        }
        return coded;
    }



  </script>
</head>

<body>
  <table>
    <tr><td>According to the substitution cipher, each letter: <BR><BR> </td>
        <td> <tt>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br /></tt>
              <tt>| | | | | | | | | | | | | <br /></tt>
              <tt>v v v v v v v v v v v v v </tt> </td>
    </tr>
    <tr><td>is encoded using the corresponding letter in the key: </td>
        <td><input type="text" id="key" size="26" style="font-family:Courier,Monospace" 

value="XYZABCDEFGHIJKLMNOPQRSTUVW"
		onChange="document.getElementById('key').value = document.getElementById('key').value.toUpperCase();"/> 

</td>
    </tr>
    </table>

    <hr />

ENCODE MESSAGE
    <table>
    <tr><td><textarea id="message" rows="8" cols="30" onChange="mid = document.getElementById('message').value;
                                                                mid = mid.toUpperCase();
                                                                document.getElementById('message').value = 

mid;"></textarea> </td>

        <td><input type="button" value="Encode ==>"
                   onclick="document.getElementById('encoded').value=
                              Encode(document.getElementById('message').value,
                                     document.getElementById('key').value);" />

<p><input type="button" value="Decode <=="
                     onclick="document.getElementById('message').value=
                                Decode(document.getElementById('encoded').value,
                                       document.getElementById('key').value);" /> </p> </td>


        <td><textarea id="encoded" rows="8" cols="30"></textarea> </td>
    </tr>
  </table>



</body>
</html>

Rotating Banner/photos

Similar Tutorials

View Content

Hi All!

I'm somewhat new to CSS/Javascript but need assistance finding code that will help me accomplish the tool on the following page:

http://www.constantcontact.com/index.jsp

If you look at the rotating information on the left-side of the Constant Contact website, I would like to be able to have that same functionality on my website. If anyone knows how this is accomplished, any assistance would be greatly appreciated. I am looking for the following functionality:

1) Have the ability to hover over each number to change the main photo

2) Have the script advance the main photo on its own

3) Be able to click the main photo when it is selected

Any questions, let me know!

Thanks,

Eric

Help Rotating Javascript Scripts

Similar Tutorials

View Content

Hi guys,

I am new to javascript and I could really do with some help rotating 2 javascript scripts.

Here are examples of what they look like

A:
Code:

<script type="text/javascript"
    src="http://site.com/script.js?92924">
</script>

and

B:
Code:

<script type="text/javascript"
    src="http://site.com/script2.js?99220">
</script>

I need code to rotate these two so that only one of them is active at any one time. Ideally it would be great if I could set the percentage of time each is active. e.g use script A 80% of the time and B 20% of the time.

Is this even possible?

Thanks for any help at all.

Rotating Image Trouble

Similar Tutorials

View Content

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

Rotating Feature Box Seo Friendly?

Similar Tutorials

View Content

Hey all - trying to find a good rotating box with SEO content. Like this one, do you know what they are using or how I can accomplish this with something similar?

http://www.studioscentral.com/

Thanks in advance