JavaScript - Jcarousellite Multiple Instances On One Page

The statement does what I want it to do, except if there is multiple instances of the word, it only outputs one, how can I work it so all instances are output in red? (while still using .slice)

var phrase = prompt("Enter a messate: ", 'Message');
var searchFor = prompt("Enter search text: ", 's');
var matchPhrase = "";
var searchIndex = -1;

/* if there's a match, create a text string by
* add the phrase text from before the match,
* add <font> tags around the match text,
* add the rest of the phrase from after the match
*/
searchIndex = phrase.indexOf(searchFor);
if (searchIndex >=0 ) {
// Copy text from phrase up till the match.
matchPhrase += phrase.slice(0, searchIndex);
matchPhrase += '<font color="red">' + searchFor + '</font>';
matchPhrase += phrase.slice(searchIndex + searchFor.length);
phrase++

} else {
matchPhrase = "No matches"
}

document.writeln(matchPhrase);





Reply With Quote




01-31-2015, 09:08 AM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

Use a regular expression.

I'm trying to find a script that will replace all instances of HTML code within a page.

I saw the Javascript replace method. How can I leverage this on my page to replace every instance of a certain piece of code?

Pretend this is a <div> in my page:
<div style="width:340px;">Try this code out.</div>

How could I convert all instances of this code to:
<div style="width:340px;">Try this testing stuff.</div>

Thanks for any help!

So I have the jcarousel with pagination working fine. So Im happy with all of the behavior that is going on right now, it is great. My issue is I would liek to have the pagination numbers still change the class on the slide changes, But my one thing is, I want to make the pagination numbers NOT links. So they keep the same hover states and the color changes on slide change, but only the slide carousel arrows can change the slides, and the pagination is only for notification purposes. not links or able to change slides. Can this be done? my code is here http://www.cesariomendoza.com/jcarousel/

howdy,

my site is www.site-tonight.com and on the homepage i have a jcarouselLite that came with the wordpress template that im using. I cannot get it to display more then 3 images, even if i put another <li> item in there.

I've copied and pasted the last image 2-3 times over and it won't display. I've also tried changing it to a new image and putting it at the end and it still won't display.

I have scoured the internet and spent a lot of time trying to figure this out and it's stumping me, so help is muchhhhhh appreciated.

any suggestions for a newbie?

Hi, first off I am very green when it comes to this stuff, so it needs to be spelled out for me.

First, I was using colorbox on one page for an image gallery, and that works fine. On a different page, I have jcarousellite, which works fine as well. If only I could mix them both on the same page. I couldn't figure that out, so what I did was create a new page each time I clicked a jcarousel image. It opens up a completely different page, but I styled it in such a way that it at least "mimics" how it might look if I were using a lightbox script. So my solution works fine for now EXCEPT that once I close the new page (that mimics lightbox) the jcarousellite slides revert back to starting position.

I need the slides to stay at the last clicked position, and not go back to the beginning each time I refresh the page.

I searched online and saw some people talk about an "afterEnd" callback, but this is where my ability stops. If anyone could help me here it would be fantastic.

Here is my code:

Code:

 
    $(document).ready(function() {
    $(".slider").jCarouselLite({
        speed: 100,
        visible: 4,
        btnPrev: ".previous",
        btnNext: ".next",
        circular: true 
    });
    
});

Hi Guys,

I'm using jcarousellite to show my newsitems in a vertical carousel.
http://www.gmarwaha.com/jquery/jcarousellite/

The carousel itself works perfectly, now I'm trying to add that before the news scrolls upwards the top news-item fades-out first.

Now it is fading out the complete list and I simply can't seem to figure out how to 'talk' to the 'active/top' <li> in the list.


Can someone give me a hint?

Thanks in advance,
Marcel


-- Code Below --

Code:

$(function() {
	$(".widgetCarousel").jCarouselLite({
		circular: true,
		vertical: true,
		visible: 3,
		scroll: 1,
		start: 1,
		auto: 500,
		speed: 1000,
		beforeStart: function(a) {
			$(a).parent().fadeTo(100, 0);
    		},
		afterEnd: function(a) {
			$(a).parent().fadeTo(100, 1);
		}
    	});

});

<div class="widgetCarousel">
	<ul>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>	
	</ul>	
</div>

Hello,

I'm looking for help as I have the jCarouselLite feature functioning on my website and am looking for a way of displaying another image to the right of the carousel, dependent upon which image is visible in the carousel.

I toyed with the idea of implementing another snippet of JavaScript to swap the text to the right and manually synching the swap time wise, but quickly abandoned this idea for a number of reasons, particularly as the carousely has buttons to scroll through the images displaying.

I have to admit I'm not particularly great with JavaScript, but was thinking along the lines of another function that listens for the image that is displayed, but have no idea if am way off the mark, or even if this is the right track - no idea how to implement.

Any help would be very gratefully recieved.

Thanks,

Matt

I am using this script that gets messed up when you resize the window. I figured out that I could use this other script to do stuff just after the window gets resized.

Code:

(function($,sr){
 
  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;
 
      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null; 
          };
 
          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);
 
          timeout = setTimeout(delayed, threshold || 100); 
      };
  }
	// smartresize 
	jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
})(jQuery,'smartresize');
 
 
// usage:
$(window).smartresize(function(){  
  // code that takes it easy...
});

So I re-instantiate the misbehaving script in there so it fires whenever the window is resized (I changed it to 500 so it really only fires once after you are done resizing). This fixes it. The new instance doesn't have a problem but the old instance is still there and messed up. so I use. $($.misbehaving-script).remove(); just before instantiating after window resize, which gets rid of broken instance.

Problem solved.. Except that messes up a different script! It's driving me crazy.

Any advice would of course be very welcome.

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!

Hi,

I have a question about an oop/class style form of javascript programming.

I have stripped the code down to the basic minimum. The problem is I have created two instances of the same class and have entered data into those classes. But as you will see the two separate instances of the class appear to share the same data.

How do I get my class structure working so separate instances will retain their separate data?

Here is the code:

Index.html
Code:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
debugger;

// Do this because a page resart seems to keep old data
function SetGlobals()
{
	var ui;
	var el;
	
	// Arr00
	ui = document.getElementById("Arr00");
	el = arr0.arrayGet(0);
	ui.innerHTML = el.m_String;
	
	// Arr01
	ui = document.getElementById("Arr01");
	el = arr0.arrayGet(1);
	ui.innerHTML = el.m_String;
	
	// Arr10
	ui = document.getElementById("Arr10");
	el = arr1.arrayGet(0);
	ui.innerHTML = el.m_String;
	
	// Arr11
	ui = document.getElementById("Arr11");
	el = arr1.arrayGet(1);
	ui.innerHTML = el.m_String;
}

function MyOnLoad()
{
	SetGlobals();
}
</script>
</head>
<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000">

<div id="divScreen" style="display: block; width:100%; height="100%">
	<div id="divMenu" style='float: left; background:#00FF00; border-color: #000000; border-width: 1px;'>
		<table>
			<tr>
				<td>
					Array 0/String 0: <label id="Arr00"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 0/String 1: <label id="Arr01"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 1/String 0: <label id="Arr10"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 1/String 1: <label id="Arr11"></label>
				</td>
			</tr>
		</table>
	</div>
	<div id="divMain" style='height: 100%; background:#0000FF; margin-left: 250px; border-color: #000000; border-width: 1px;'>
	</div>
</div>
</body>
</html>

Test.js
Code:

var BaseARR = function()
{
	_arr = []; // new Array();
		
	// Public functions that can access private members
	this.Add = function(arg)
	{
        var i, addAt;
 
		if(arg==null || (addAt = FindEnterPos(arg))<0)
		    return false;
				
		// since adding and not deleting anything, nothing of value will be returned
		_arr.splice(addAt, 0, arg);

        return true;
	};
	// This finds the entry position for in
    FindEnterPos = function(arg)
    {
		return (_arr.length + 1);
    };
	this.arrayGet = function(i)
	{
		return ((_arr != null && i >= 0 && i < _arr.length) ? _arr[i] : null);
	};
};

var stringId = function(id, str)
{
	// public has a this. , privates have just var
	this.m_Id = id; // int
	this.m_String = str; // string
};

// This so allow statics
var stringIdARR = function()
{
	BaseARR.call(this);
};

I'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be...

Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment.

What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another.

My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself.

Let's set up a simple class called "App" to demonstrate what I mean...

Code:

var myApp = new App("MyFirstApp");

function App(argName) {
    this.name = argName;
    this.GetDirectory("C:\Program Files");
}

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}

App.prototype.GetDirectoryCallback = function(argFilePaths) {
    // "this" equals the "window" object (bad!), meaning this.name should equal a null reference
    // argFilePaths contains a string of file paths (delimited using ;) returned by the server
    var mFilePaths = split(argFilePaths, ";");
    // for each file path, add a div to the document body containing that file path, with an onclick handler
    for (var i in mFilePaths) {
        var mFilePath = mFilePaths[i];
        var mFilePathDiv = document.createElement("div");
        mFilePathDiv.innerHTML = mFilePath;
        mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
        document.getElementById("body").appendChild(mFilePathDiv);
    }
}

App.prototype.FilePathDivClickHandler = function() {
    // I need a reference to the App object instance here, but I'm not sure where to grab it...
    // what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
    this.GetDirectory(event.target.innerHTML);
}

The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory).

Code:

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    // "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
    var instance = this;
    Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
    function GetDirectoryCallback(argFilePaths) {
        // "this" equals the window object (bad!), meaning this.name should equal a null reference
        // "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
        // argFilePaths contains a string of file paths (delimited using ;) returned by the server
        var mFilePaths = split(argFilePaths, ";");
        // for each file path, add a div to the document body containing that file path, with an onclick handler
        for (var i in mFilePaths) {
            var mFilePath = mFilePaths[i];
            var mFilePathDiv = document.createElement("div");
            mFilePathDiv.innerHTML = mFilePath;
            mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
            document.getElementById("body").appendChild(mFilePathDiv);
        }
    }
}

Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object.

Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler?

I am trying to add Multiple NoobSlides onto one page.
From the sample page listed he
http://www.efectorelativo.net/laboratory/noobSlide/

I am trying to add two Sample 5 slideshows side by side on the same page, but when I try it, the second slideshow events don't trigger. The slide show image change works on the first one, but not the second one.

Here is the code I am using:
Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>noobSlide - mootools</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://www.efectorelativo.net/laboratory/noobSlide/_web.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.efectorelativo.net/laboratory/noobSlide/style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.efectorelativo.net/laboratory/js/mootools-1.2-core.js"></script>
    <script type="text/javascript" src="http://www.efectorelativo.net/laboratory/noobSlide/_class.noobSlide.packed.js"></script>

    <script type="text/javascript">
    window.addEvent('domready',function(){

        //SAMPLE 5 (mode: vertical, using "onWalk" )
        var info5 = $('info5').set('opacity',0.5);
        var sampleObjectItems =[
            {title:'Morbi elementum111', autor:'', date:'', link:'http://www.link11111.com'},
            {title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
            {title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
            {title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
            {title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
            {title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
            {title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
            {title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
        ];
        var nS5 = new noobSlide({
            mode: 'vertical',
            box: $('box5'),
            size: 180,
            items: sampleObjectItems,
            addButtons: {
                previous: $('prev5'),
                play: $('play5'),
                stop: $('stop5'),
                next: $('next5')
            },
            onWalk: function(currentItem){
                info5.empty();
                new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
            }
        });

        //SAMPLE 5a (mode: vertical, using "onWalk" )
        var info5a = $('info5a').set('opacity',0.5);
        var sampleObjectItems2 =[
            {title:'2222Morbi elementum111', autor:'', date:'', link:'http://www.link11111.com'},
            {title:'2222Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
            {title:'22222Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
            {title:'2222Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
            {title:'2222Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
            {title:'2222Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
            {title:'2222Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
            {title:'22222Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
        ];
        var nS5a = new noobSlide({
            mode: 'vertical',
            box: $('box5a'),
            size: 180,
            items: sampleObjectItems2,
            addButtons: {
                previous: $('prev5a'),
                play: $('play5a'),
                stop: $('stop5a'),
                next: $('next5a')
            },
            onWalk: function(currentItem){
                info5a.empty();
                new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5a);
            }
        });
});

    </script>


</head><div id="cont">


<!-- SAMPLE 5 -->
<h2>Sample 5</h2>
<div class="sample">

<table style="width: 100%" cellspacing="0" cellpadding="0" align="center">
<tr align="left">
<td>
Ayer
</td>
<td>Actual
</td>
</tr>
<td>
<!-- SAMPLE 5 -->
    <div class="mask2" style="left: 0px; top: 0px; ">
        <div id="box5" style="left: 0px; top: 1px">
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" /></span>
        </div>
        <div id="info5" class="info" style="left: 0px; bottom: 0; height: 21px"></div>
    </div>
    <p class="buttons">
        <span id="prev5"><< Previous</span>
        <span id="play5">Play ></span>
        <span id="stop5">Stop</span>
        <span id="next5">Next >></span>
    </p>
</td>

<!-- SAMPLE 5a -->
<td align="left">
    <div class="mask2" style="left: 0px; top: 0px; ">
        <div id="box5a" style="left: 0px; top: 1px">
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" /></span>
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" /></span>
        </div>
        <div id="info5a" class="info" style="left: 0px; bottom: 0; height: 21px"></div>
    </div>
    <p class="buttons">
        <span id="prev5a"><< Previous</span>
        <span id="play5a">Play ></span>
        <span id="stop5a">Stop</span>
        <span id="next5a">Next >></span>
    </p>
</td>
    
</table>    
</div>
</div>
</body>
</html>

Hi all, I am a complete novice to pretty much everything internet but have managed to put together a site that I am trying to get off of the ground. Here is the problem that I am having. The first script below is for a script that shows up in my sidebar and is available on every page of my site. The second script is one that I intend to use on only one specific page. Both of the scripts function properly on their own but not when I try to use them as intended. As mentioned in the FAQ, I tried to name all of the variables with unique names but that still does not work. Any suggestions would be greatly appreciated!!

This code is in my sidebar on every page:
Code:

<script type="text/javascript">
<!--

function calculate() {

	var doc = document.pointCalc;
	var points = 0;
	var fiber = doc.fiber.value;
	var fat = doc.fat.value;
	var calories = doc.calories.value;
	points = (calories / 50) + (fat / 12) - (fiber / 5);
	doc.result.value = Math.round(points);
}

// -->

</script>

<center>

<br/>
<br/> 

<div class="storyTitle"><b>Approximate Points Calculator</b></div>
<div class="storyContent">

<form name="pointCalc">
<table><tr>
<tr><td>Calories:</td><td><input name="calories" type="text"/></td></tr>
<tr><td>Fat:</td><td><input name="fat" type="text"/></td></tr>

<tr>
<td>Fiber:</td>
<td>
	<select name="fiber">
	<option value="0"/>0
	<option value="1"/>1
	<option value="2"/>2
	<option value="3"/>3
	<option value="4"/>4 or more
	</select>
</td>
</tr>

<tr><td colspan="2"><input value="Calculate" onclick="calculate();" type="button"/></td></tr>
<tr><td>POINTS:</td><td><input name="result" type="text"/></td></tr>

</tr></table>
</form>
</div></center>

This code I'm trying to use on just one page of the site:
Code:

<center><script type="text/javascript">
<!--

function getpoints() {

	var doc1 = document.pointquiz;
	var dpoints = 0;
	var sex = doc1.sex.value;
	var age = doc1.age.value;
	var weight = doc1.weight.value;
	var height = doc1.height.value;
	var activity = doc1.activity.value;
	var nursing = doc1.nursing.value;

	dpoints = (sex * 1) + (age * 1) + (weight * 1) + (height * 1) + (activity * 1) + (nursing * 1);
	
	doc1.dresult.value = Math.round(dpoints);

}

// -->

</script>

<br />
<br /> 

<div class="storyTitle"><b>Daily Point Allowance Quiz</b></div>
<div class="storyContent">

<form name="pointquiz">
<table><tr>

<tr>
<td>Sex:</td>
<td>
	<select name="sex">
	<option value="2" />Female
	<option value="8" />Male
	</select>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
	<select name="age">
	<option value="4" />17-26
	<option value="3" />27-37
	<option value="2" />38-47
	<option value="1" />48-58
	<option value="0" />58+
	</select>
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
	<select name="weight">
	<option value="10" />100-109
	<option value="11" />110-119
	<option value="12" />120-129
	<option value="13" />130-139
	<option value="14" />140-149
	<option value="15" />150-159
	<option value="16" />160-169
	<option value="17" />170-179
	<option value="18" />180-189
	<option value="19" />190-199
	<option value="20" />200-209
	<option value="21" />210-219
	<option value="22" />220-229
	<option value="23" />230-239
	<option value="24" />240-249
	<option value="25" />250-259
	<option value="26" />260-269
	<option value="27" />270-279
	<option value="28" />280-289
	<option value="29" />290-299
	<option value="30" />300-309
	<option value="31" />310-319
	<option value="32" />320-329
	<option value="33" />330-339
	<option value="34" />340-349
	<option value="35" />350-359
	</select>
</td>
</tr>
<tr>
<td>Height:</td>
<td>
	<select name="height">
	<option value="0" />Under 5'1"
	<option value="1" />5'1" to 5'10"
	<option value="2" />5'10" and over
	</select>
</td>
</tr>
<tr>
<td>Activity:</td>
<td>
	<select name="activity">
	<option value="0" />Mostly Sitting
	<option value="1" />Mostly Standing
	<option value="4" />Mostly Walking
	<option value="6" />Mostly Physical Labor	</select>
</td>
</tr>
<tr>
<td>Nursing Mom:</td>
<td>
	<select name="nursing">
	<option value="0" />No
	<option value="10" />Yes, Solely
	<option value="5" />Yes, Supplementing
	</select>
</td>
</tr>


<tr><td colspan="2"><input value="Calculate" onclick="getpoints();" type="button" /></td></tr>
<tr><td>POINT ALLOWANCE:</td><td><input name="dresult" type="text" /></td></tr>

</tr></table>
</form>
</div>

<p align="center">Note: Minimum Daily Points is 18, Max is 44</p></center>

I'm sure people have answered this question multiple times but I have done all the research and tried everything but nothing works.

My problem: I'm building a website for my gaming clan and I want a Javascript news ticker/date & time and a Javascript navigation bar. However, when I put these codes in, they don't run with each other on the same page. Possibly an onload issue but like I said, I tried all the solutions. Note: they use jquery.

I'll post the html and javascript files as txt files since I can't attach them in their normal form.

Index.txt is my HTML

Sliding_effect.txt is the Javascript for the menubar

Newsticker.txt is the Javascript for the ticker that goes at the bottom of the <body>

The actual ticker.js code that runs with newsticker.js was too large to attach. It's 7000 lines long.

Any help is appreciated

I would like multiple videos one one page. I tried to give each one an individual id but failed miserably. Also how on earth do I assign a image to each player. My example works with one player only and falls back to HTML5 video with no problems . If I decided on five videos per page, how do I apply an id to each one as well as a different image per player. Here is what I have so far:

Code:

<script type="text/javascript" src="video/swfobject.js"></script> 
<script type="text/javascript"> 
var flashvars = {}; 
flashvars.src = "http://www.mysite.com.mp4"; 
flashvars.controlBarMode = "floating"; 
flashvars.poster = "http://mysite.com/imageonplayer.png"; 

var params = {}; 
params.allowfullscreen = "true"; 
params.allowscriptaccess = "always"; 

var attributes = {}; 
attributes.id = "videoDiv"; 
attributes.name = "myDynamicContent"; 

swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", "487", "275", "10.1.0","expressInstall.swf", flashvars, params, attributes); 
</script> 
</head>

Code:

<div id="videoDiv"> 
<video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> 
<source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> 
<source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> 
</video> 
</div>

I assigned each player an individual id like this as suggested on another thread but that didn't work. Any suggestions? :
Code:

<script type="text/javascript"> 
swfobject.registerObject("videoDiv1", "10.1.0"); 
swfobject.registerObject("videoDiv2", "10.1.0"); 
swfobject.registerObject("videoDiv3", "10.1.0"); 
swfobject.registerObject("videoDiv4", "10.1.0"); 
</script>

Thanks
Dan