Dynamic creation of HTML5 Videos via JavaScript

Dynamic creation of HTML5 Videos via JavaScript - javascript

what I want to do is to display videos which differ in their number.
I do know that I have to use appendChild, but I have no clue how and I couldn't find anything helpful so far.
I'd really apreciate it if someone could give me a hint how to do this.
[UPDATE]
Ok .. I have my basic function now, but I still have one little problem. I need to place the videowindows below each other. I have an idea how to do that, but I'm not quite sure if its possible the way I want to do it. I want to use the top attribute of the last video and sum it up by some static value:
<script type="text/javascript">
var myVideo;
var i;
//Funktion zum Videoaufruf
function getVideo(){
var mp4Array = new Array();
var ogvArray = new Array();
mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";
var myVideo = new Array();
for(i = 0; i < mp4Array.length; i++){
myVideo[i] = document.createElement("video");
if(Modernizr.video){
if(Modernizr.video.ogg){
//Firefox, Opera, Chrome
myVideo[i].src = ogvArray[i];
setVideoOptions(myVideo[i], i);
}else if(Modernizr.video.h264){
//Safari, Chrome, IE, IPhone, Android
myVideo[i].src = mp4Array[i];
setVideoOptions(myVideo[i]);
}
}else{
alert("HTML5 Video-Tag wird nicht unterstützt");
}
};
}
function setVideoOptions(tempVideo, i){
tempVideo.controls = true;
tempVideo.style.position = "absolute";
tempVideo.style.left = "650px";
tempVideo.style.width = "360";
tempVideo.style.height = "240";
if (i>0) {
tempVideo.style.top = myVideo[i-1]+"300px";
} else{
tempVideo.style.top = "20px";
};
}
</script>
[UPDATE 2]
Ok .. I found a way to solve my problem, but now I have another: The videowindows are not visible which has something to do with the video element being created via JS... no clue how to solve this. Strange enough if I set the video to load and play I do hear the audio from the video ..
<script type="text/javascript">
var myVideo = new Array();
var i;
//Funktion zum Videoaufruf
function getVideo(){
var mp4Array = new Array();
var ogvArray = new Array();
mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";
for(i = 0; i < mp4Array.length; i++){
myVideo[i] = document.createElement("video");
if(Modernizr.video){
if(Modernizr.video.ogg){
//Firefox, Opera, Chrome
myVideo[i].src = ogvArray[i];
setVideoOptions(myVideo[i], i);
}else if(Modernizr.video.h264){
//Safari, Chrome, IE, IPhone, Android
myVideo[i].src = mp4Array[i];
setVideoOptions(myVideo[i]);
}
}else{
alert("HTML5 Video-Tag wird nicht unterstützt");
}
};
}
function setVideoOptions(tempVideo, i){
tempVideo.controls = true;
tempVideo.style.position = "absolute";
tempVideo.style.left = "650px";
tempVideo.style.width = "360";
tempVideo.style.height = "240";
if (i>0) {
var tmpTop = myVideo[i-1].style.top.substring(0, myVideo[i-1].style.top.length-2);
tmpTop = parseInt(tmpTop);
tmpTop += 300;
tempVideo.style.top = tmpTop;
} else{
tempVideo.style.top = "20px";
};
}
</script>
[UPDATE 3]
Ok .. I simply forgot the appendChild function. :)
<script type="text/javascript">
var myVideo = new Array();
var i;
//Funktion zum Videoaufruf
function getVideo(){
var mp4Array = new Array();
var ogvArray = new Array();
mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";
for(i = 0; i < mp4Array.length; i++){
myVideo[i] = document.createElement("video");
if(Modernizr.video){
if(Modernizr.video.ogg){
//Firefox, Opera, Chrome
myVideo[i].src = ogvArray[i];
setVideoOptions(myVideo[i], i);
}else if(Modernizr.video.h264){
//Safari, Chrome, IE, IPhone, Android
myVideo[i].src = mp4Array[i];
setVideoOptions(myVideo[i]);
}
}else{
alert("HTML5 Video-Tag wird nicht unterstützt");
}
};
}
function setVideoOptions(tempVideo, i){
tempVideo.controls = true;
tempVideo.style.position = "absolute";
tempVideo.style.left = "650px";
tempVideo.style.width = "360";
tempVideo.style.height = "240";
if (i>0) {
var tmpTop = myVideo[i-1].style.top.substring(0, myVideo[i-1].style.top.length-2);
tmpTop = parseInt(tmpTop);
tmpTop += 300;
tempVideo.style.top = tmpTop;
} else{
tempVideo.style.top = "20px";
};
document.body.appendChild(tempVideo);
}
</script>

Related

Js SIP code does not work on Web Page

'use strict';
/**
* Created by tqcenglish on 15-8-12.
* 若请静态文件使用默认账号，若添加参数则需要服务器动态生成此文件
*/
(function () {
var createScriptElement = function (src, onload, onerror) {
var element = document.createElement("script");
element.type = "text\/javascript";
element.src = src;
element.onload = onload;
element.onerror = onerror;
return element;
};
var createLinkElement = function (src) {
var element = document.createElement('link');
element.href = src;
element.rel = 'Stylesheet';
element.media_type = 'text/css';
return element;
};
var createUI = function () {
var clickCallDiv = document.createElement('div');
clickCallDiv.style.cssText = 'width: 300px;height: 60px;position: fixed;z-index: 999;right: 20px;bottom: 320px;';
var call_btn = document.createElement("button");
call_btn.id = "dial_btn_call";
var session_div = document.createElement("div");
session_div.id = 'sessions';
var webcam_div = document.createElement("div");
webcam_div.style.cssText = 'height:0';
webcam_div.id = 'webcam';
var video_remote = document.createElement('video');
video_remote.id = 'remoteView';
video_remote.autoplay = 'autoplay';
video_remote.hidden = 'hidden';
var video_local = document.createElement('video');
video_local.autoplay = 'autoplay';
video_local.hidden = 'hidden';
video_local.muted = 'muted';
video_local.id = 'selfView';
webcam_div.appendChild(video_remote);
webcam_div.appendChild(video_local);
clickCallDiv.appendChild(call_btn); //add the text node to the newly created div.
var contain = document.createElement('div');
contain.appendChild(session_div);
contain.appendChild(webcam_div);
clickCallDiv.appendChild(contain);
return clickCallDiv;
};
var urls = {};
urls.rtcninja = 'location/rtcninja.js';
urls.jquery = 'location/jquery.js';
urls.i18n = "location/jquery.i18n.js";
urls.messagestore = "location/jquery.i18n.messagestore.js";
urls.jssip = 'location/jssip.js';
urls.init = 'location/init.js';
urls.gui = 'location/gui.js';
urls.css = 'location/style.css';
var rtcninja_script = createScriptElement(urls.rtcninja, function () {
// Must first init the library
rtcninja();
// Then check.
if (!rtcninja.hasWebRTC()) {
console.log('WebRTC is not supported in your browser :(');
} else {
document.body.appendChild(createUI());
}
});
var jquery_script = createScriptElement(urls.jquery, function(){
document.head.appendChild(i18_script);
document.head.appendChild(jssip_script);
document.head.appendChild(gui_script);
document.head.appendChild(init_script);
});
var i18_script = createScriptElement(urls.i18n, function(){
document.head.appendChild(messagestore_script);
});
var messagestore_script = createScriptElement(urls.messagestore);
var jssip_script = createScriptElement(urls.jssip);
var init_script = createScriptElement(urls.init);
var gui_script = createScriptElement(urls.gui);
var click_call_css = createLinkElement(urls.css);
document.head.appendChild(jquery_script);
document.head.appendChild(rtcninja_script);
document.head.appendChild(click_call_css);
})();
The above code is perfectly working on a HTTPS web server. The problem is, our website is running on HTTP server. I have done some few alterations, experimentation and a lot of research but the same result occurs. Button does not appear when I am embedding it on our website. I cannot track any error regarding these codes. Anything wrong with it? Any suggestion would be a great help for me. Thanks.
By the way, this code should be able to call through our phones on our office. clicking the button would direct user to the web rtc which would directly call our office.

Chrome doesn't allow WebRTC on HTTP. You must use HTTPS or test with Firefox.

How to create player turns in jquery?

I am writing this post to get help on passing between players using JQuery. I am currently designing a dominos game with four players. My current version works until the end but it gets extremely laggy by the last four pieces. I have determined that this is due to the recursion in the playTurn function. I have tried to use events but that has not worked well for me. My question is if you know how to create a better game loop using JQuery. I would like to finish the basics for this game using JQuery but any suggestions on a better path would be much appreciated. The code is below.
P.S. The game is nowhere near complete but I would very much like to get this problem fixed before proceeding. I am also a beginner to javascript. Thank you for your assistance.
Edit: After some tinkering and help from a stackover flow user, I realized that my addDominoToBoard function in my playTurn function was the main culprit of the lag. Any suggestions on how to better redraw my board. Thank you once again.
var makeBoard = function(){
var totalkeys = [
[0,0],[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],
[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],
[2,2],[2,3],[2,4],[2,5],[2,6],
[3,3],[3,4],[3,5],[3,6],
[4,4],[4,5],[4,6],
[5,5],[5,6],
[6,6]
];
return totalkeys;
}
var randomInt = function(min,max)
{
return Math.floor(Math.random()*(max-min)+min);
}
var makeHand = function(board){
var hand = [];
for(x = 0;x<7;x++){
var ranInt = randomInt(0,board.length);
var key = board[ranInt];
hand.push(key);
board.splice(ranInt,1);
}
return hand;
}
var hideItems = function(){
if($("#player1").hasClass('first')){
$("#player2").hide();
$("#player3").hide();
$("#player4").hide();
}else if ($("#player2").hasClass('first')){
$("#player1").hide();
$("#player3").hide();
$("#player4").hide();
}else if($("#player3").hasClass('first')){
$("#player2").hide();
$("#player1").hide();
$("#player4").hide();
}else{
$("#player2").hide();
$("#player3").hide();
$("#player1").hide();
};
}
var loadGame = function(){
var board = makeBoard();
var player1Hand = makeHand(board);
var player2Hand = makeHand(board);
var player3Hand = makeHand(board);
var player4Hand = makeHand(board);
createHands(player1Hand,player2Hand,player3Hand,player4Hand);
hideItems()
}
var createHands = function(player1Hand,player2Hand,player3Hand,player4Hand){
for(x = 0; x < player1Hand.length;x++){
var domino = player1Hand[x].toString();
if(domino == "6,6"){
$("#player1").addClass("first")
};
var src = ' src =images/Dominos/['+domino+'].png>';
$('#player1 #hand').append('<img class = "domino" id ='+domino+src);
};
for(x = 0; x < player2Hand.length;x++){
var domino = player2Hand[x].toString();
if(domino == "6,6"){
$("#player2").addClass("first")
};
var src = ' src =images/Dominos/['+domino+'].png>';
$('#player2 #hand').append('<img class = "domino" id ='+domino+src);
};
for(x = 0; x < player3Hand.length;x++){
var domino = player3Hand[x].toString();
if(domino == "6,6"){
$("#player3").addClass("first")
};
var src = ' src =images/Dominos/['+domino+'].png>';
$('#player3 #hand').append('<img id ='+domino+src);
};
for(x = 0; x < player4Hand.length;x++){
var domino = player4Hand[x].toString();
if(domino == "6,6"){
$("#player4").addClass("first")
};
var src = ' src =images/Dominos/['+domino+'].png>';
$('#player4 #hand').append('<img id ='+domino+src);
};
}
var choseFirstPlayer = function(){
//console.log("I def shouldnt be here");
if($("#player1").hasClass('first')){
return "player1";
}else if ($("#player2").hasClass('first')){
return "player2";
}else if($("#player3").hasClass('first')){
return "player3";
}else{
return "player4";
};
}
var playTurn = function(player){
player = choseNextPlayer(player);
$('#'+player+" #hand img").click(function(){
var dominoSrc = $(this).attr('src');
var dominoNumber = $(this).attr('id');
addDominoToBoard(dominoSrc,dominoNumber);
$(this).remove();
//console.log("This is the player after calling choseNextPlayer. This should be the same as the next player:"+player);
playTurn(player);
});
}
var choseNextPlayer = function(player){
//console.log("This is the player at the beginning of choseNextPlayer:"+player);
if(player == "player1"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player2");
$("#player1").hide();
$("#player2").show();
return "player2";
}else if(player == "player2"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player3");
$("#player2").hide();
$("#player3").show();
return "player3";
}else if(player == "player3"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player4");
$("#player3").hide();
$("#player4").show();
return "player4";
}else{
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player1");
$("#player4").hide();
$("#player1").show();
return "player1";
};
}
var checkGame = function(){
return true;
}
var addDominoToBoard = function(dominoSrc,dominoNumber){
$("#board #notPlaced").append("<img id =" + dominoNumber + " src ="+dominoSrc+">");
drawDominoOnBoard(dominoNumber);
}
var drawDominoOnBoard = function(initalXposition,initalYposition,dominoNumber){
var initalXposition = ($(window).width()/2) + "px";
var initalYposition = ($(window).height()/2 -100) + "px";
var domino = $("#board #notPlaced img");
domino.css({"position": "absolute", "top": initalYposition, "left": initalXposition});
var domino2 = domino.clone();
$("#board #placed").append(domino2);
domino.remove();
}
$(document).ready(function(){
var windowWidth = $(window).width() - $(window).width()/10;
var windowHeight = $(window).height() - $(window).height()/6;
var gameOn = true;
$("#board img").css({"width":windowWidth.toString(),"height":windowHeight.toString()}).hide();
$("#pressed").hide();
$("#notPressed").hover(
function(){
$(this).hide();
$("#pressed").show();
});
$("#pressed").click(function(){
$(this).fadeOut("slow",function(){
$("#board img").show("slow",function(){
loadGame();
//console.log("Here again");
var player = choseFirstPlayer();
$('#'+player+" #hand img").click(function(){
//console.log("I should not be here");
var dominoSrc = $(this).attr('src');
var dominoNumber = $(this).attr('id');
addDominoToBoard(dominoSrc,dominoNumber);
$(this).remove();
playTurn(player);
});
});
});
});
});

First, I want to thank KKetch for making me realize that I was doing a bunch of unnecessary DOM manipulations. After doing more research on jQuery, I realized that it is much better to declare variables instead of constantly getting HTML elements. However, that did not solve my lag problem. I solved my lag problem by eliminating the recursion and using events handlers. My solution was to rely on hiding and showing the hands on the screen. My game loop is self implied by the user being on the web page itself. The solution is below for anyone interested and if you want to keep track of this project, here is the link to the github page. Thanks once again.
Link:
https://github.com/aneurycasado/Dominos-Para-Los-Dominicanos
Solution:
domino00 = new Image();
domino00.src = "images/Dominos/[0,0].png"
domino01 = new Image();
domino01.src = "images/Dominos/[0,1].png"
domino02 = new Image();
domino02.src = "images/Dominos/[0,2].png"
domino03 = new Image();
domino03.src = "images/Dominos/[0,3].png"
domino04 = new Image();
domino04.src = "images/Dominos/[0,4].png"
domino05 = new Image();
domino05.src = "images/Dominos/[0,5].png"
domino06 = new Image();
domino06.src = "images/Dominos/[0,6].png"
domino11 = new Image();
domino11.src = "images/Dominos/[1,1].png"
domino12 = new Image();
domino12.src = "images/Dominos/[1,2].png"
domino13 = new Image();
domino13.src = "images/Dominos/[1,3].png"
domino14 = new Image();
domino14.src = "images/Dominos/[1,4].png"
domino15 = new Image();
domino15.src = "images/Dominos/[1,5].png"
domino16 = new Image();
domino16.src = "images/Dominos/[1,6].png"
domino22 = new Image();
domino22.src = "images/Dominos/[2,2].png"
domino23 = new Image();
domino23.src = "images/Dominos/[2,3].png"
domino24 = new Image();
domino24.src = "images/Dominos/[2,4].png"
domino25 = new Image();
domino25.src = "images/Dominos/[2,5].png"
domino26 = new Image();
domino26.src = "images/Dominos/[2,6].png"
domino33 = new Image();
domino33.src = "images/Dominos/[3,3].png"
domino34 = new Image();
domino34.src = "images/Dominos/[3,4].png"
domino35 = new Image();
domino35.src = "images/Dominos/[3,5].png"
domino36 = new Image();
domino36.src = "images/Dominos/[3,6].png"
domino44 = new Image();
domino44.src = "images/Dominos/[4,4].png"
domino45 = new Image();
domino45.src = "images/Dominos/[4,5].png"
domino46 = new Image();
domino46.src = "images/Dominos/[4,6].png"
domino55 = new Image();
domino55.src = "images/Dominos/[5,5].png"
domino56 = new Image();
domino56.src = "images/Dominos/[5,6].png"
domino66 = new Image();
domino66.src = "images/Dominos/[6,6].png"
dominoImages = [ domino00,domino01,domino02,domino03,domino04,domino05,domino06,
domino11,domino12,domino13,domino14,domino15,domino16,
domino22,domino23,domino24,domino25,domino26,
domino33,domino34,domino35,domino36,
domino44,domino45,domino46,
domino55,domino56,
domino66
]
var drawDominoOnBoard = function(initalXposition,initalYposition,dominoNumber){
var initalXposition = ($(window).width()/2) + "px";
var initalYposition = ($(window).height()/2 -100) + "px";
var domino = $("#board #notPlaced img");
domino.css({"position": "absolute", "top": initalYposition, "left": initalXposition});
var domino2 = domino.clone();
$("#board #placed").append(domino2);
domino.remove();
}
var playTurn = function(player, player1, player2,
player3, player4, dominosPlaced){
player = choseNextPlayer(player,player1,player2,player3,player4);
$('#'+player+" #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
$(this).unbind("click");
playTurn(player,player1,player2,player3,player4,dominosPlaced);
});
}
var choseNextPlayer = function(player,player1,player2,player3,player4){
//console.log("This is the player at the beginning of choseNextPlayer:"+player);
if(player == "player1"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player2");
player1.hide();
player2.show();
return "player2";
}else if(player == "player2"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player3");
player2.hide();
player3.show();
return "player3";
}else if(player == "player3"){
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player4");
player3.hide();
player4.show();
return "player4";
}else{
//console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
//console.log("This is the next player. Should follow the sequence" + "player1");
player4.hide();
player1.show();
return "player1";
};
}
var addDominoToBoard = function(domino,dominoPlaced){
var dominoClone = domino.clone();
dominoPlaced.append(dominoClone);
drawDominoOnBoard(dominoPlaced);
}
var choseFirstPlayer = function(player1,player2,player3,player4){
//console.log("I def shouldnt be here");
if(player1.find("#hand").hasClass('first')){
player1.show();
return "player1";
}else if (player2.find("#hand").hasClass('first')){
player2.show();
return "player2";
}else if(player3.find("#hand").hasClass('first')){
player3.show();
return "player3";
}else{
player4.show();
return "player4";
};
}
var hideHands = function(player1,player2,player3,player4){
player1.hide();
player2.hide();
player3.hide();
player4.hide();
}
var randomInt = function(number){
return Math.floor(Math.random()*number);
}
var makeHand = function(player){
var hand = [];
var player = $(player);
var src = domino66.src
for(x = 0;x<7;x++){
var ranInt = randomInt(dominoImages.length);
var domino = dominoImages[ranInt];
if(domino.src == src){
player.addClass("first");
}
player.append(domino);
dominoImages.splice(ranInt,1);
}
return hand;
}
var hideHands = function(player1,player2,player3,player4){
player1.hide();
player2.hide();
player3.hide();
player4.hide();
}
var loadGame = function(){
makeHand("#player1 #hand");
makeHand("#player2 #hand");
makeHand("#player3 #hand");
makeHand("#player4 #hand");
}
$(document).ready(function(){
loadGame();
var windowWidth = $(window).width() - $(window).width()/10;
var windowHeight = $(window).height() - $(window).height()/6;
var gameOn = true;
var boardImg = $("#board img");
var dominosPlaced = $("#board #placed");
var pressed = $("#pressed");
var notPressed = $("#notPressed");
var player1 = $("#player1");
var player2 = $("#player2");
var player3 = $("#player3");
var player4 = $("#player4");
hideHands(player1,player2,player3,player4);
var player = ""
boardImg.css({"width":windowWidth.toString(),"height":windowHeight.toString()}).hide();
pressed.hide();
notPressed.hover(function(){
$(this).hide();
pressed.show();
});
pressed.click(function(){
$(this).fadeOut("slow",function(){
boardImg.show("slow",function(){
player = choseFirstPlayer(player1,player2,player3,player4);
});
});
});
$("#player1 #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
player = choseNextPlayer(player,player1,player2,player3,player4)
});
$("#player2 #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
player = choseNextPlayer(player,player1,player2,player3,player4)
});
$("#player3 #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
player = choseNextPlayer(player,player1,player2,player3,player4)
});
$("#player4 #hand img").click(function(){
var domino = $(this);
addDominoToBoard(domino,dominosPlaced);
$(this).remove();
player = choseNextPlayer(player,player1,player2,player3,player4)
});
});

(Javascript) SlideShow Not Working

Hello fellow stackoverflow members,
I've been trying to make a Slideshow. I've referenced from many other sites including this one but the pictures aren't showing up in the container element nor are the "prev" and "next" buttons functioning properly. I'd appreciate it if I got help! :)
my code:
var photos = newArray ();
photos[0] = "img/image(2).jpg";
photos[1] = "img/image(4).jpg";
photos[2] = "img/image(6).jpg";
photos[3] = "img/image(8).jpg";
photos[4] = "img/image(10).jpg";
photos[5] = "img/image(12).jpg";
photos[6] = "img/image(14).jpg";
photos[7] = "img/image(16).jpg";
photos[8] = "img/image(18).jpg";
photos[9] = "img/image(20).jpg";
photos[10] = "img/image(22).jpg";
photos[11] = "img/image(24).jpg"
//END OF PHOTOS ARRAY//
var i = 0;
var k = photos.length-1;
function next.onclick() {
var img= document.getElementById("image-container");
img.src = photos[i];
if (i < k ) {
i++;
}else {
i = 0; }
}
function prev.onclick() {
var img= document.getElementById("image-container");
img.src=photos[i];
if)i > 0) {i--;}
else {i = k; }
}
getImageArray = function(containerId) {
var containerElement = document.getElementById(container);
if (containerElement) {
var imageArray = containerElement.getElementById("container");
return photos[i];
} else {
return null;
}
}
this is what my slideshow looks like (it's broken)
http://prntscr.com/5dcfzq
The share button isn't important, I can make that work at least.
The main problem is that the pictures aren't showing and the back and foward buttons are messed up :'(
p.s ( I'm not sure if part of the reason is how I'm linking to the "next" or "back" functions with the div tag, because i'm this is how i'm doing it :
<div id = "back" onclick = "prev()"></div>

OK ... to summarize ...
1. var photos = newArray ();
There needs to be a space between new and Array, so ...
var photos = new Array();
2. function prev.onclick() { needs to be just function prev() {
3. Same with next.onclick() based on usage in HTML.
4. In prev() ... if)i > 0) {i--;} should be ...
if (i > 0) { i--; }
5. WRONG: Also in prev()' ... else should bei = k-1;`
6. DO NOT NEED Not sure why you have the getImageArray function at all.
7. This assumes there is an '' tag in the HTML.
UPDATE:
Here's the code that works ... this all goes in the body:
These are my assumptions in the body ...
<img id="image-container" />
<div id="back" onclick="prev()">Previous</div>
<div id="next" onclick="mext()">Next</div>
The script code MUST be at the end of the body ...
<script>
var photos = new Array ();
photos[0] = "img/image(2).jpg";
photos[1] = "img/image(4).jpg";
photos[2] = "img/image(6).jpg";
photos[3] = "img/image(8).jpg";
photos[4] = "img/image(10).jpg";
photos[5] = "img/image(12).jpg";
photos[6] = "img/image(14).jpg";
photos[7] = "img/image(16).jpg";
photos[8] = "img/image(18).jpg";
photos[9] = "img/image(20).jpg";
photos[10] = "img/image(22).jpg";
photos[11] = "img/image(24).jpg"
//END OF PHOTOS ARRAY//
// Here, I set the img variable so that it can be re-used.
// I also loaded the first image ...
var i = 0;
var k = photos.length-1;
var img = document.getElementById("image-container");
img.src = photos[i];
function next() {
img.src = photos[i];
if (i<k) {
i++;
} else {
i = 0;
}
}
function prev() {
img.src=photos[i];
if (i>0) {
i--;
} else {
i = k;
}
}
</script>

Javascript functions work in firefox and chrome but not IE9

I have some simple functions in javascript which work fine in most browser except IE9. I have heard Ie9 is fussy about commas etc. But I cannot spot any obvious problems. Can anyone of you guys and gals shed any light? Full code below
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", load, false);
function load() {
//dom loaded
var elUserId = document.getElementById("user_id");
var elPasswordId = document.getElementById("password");
var elLoginMsg = document.getElementById("usernameMsg");
var elPasswordMsg = document.getElementById("passwordMsg");
var elIncreaseFontSize = document.getElementById("increaseFont");
var elResetFontSize = document.getElementById("resetFont");
var elChangeContrast = document.getElementById("changeContrast");
var elResetContrast = document.getElementById("resetContrast");
var logInbox = document.getElementById("loginBox");
var helpWithBB = document.getElementById("helpWithBB");
var fontUp = '135%';
var fontReset = '100%';
var black = '#000000';
var white = '#ffffff';
var divReset ='415px';
var divChange ='525px';
var txtSizeChange ='40.5em';
var txtReset ='42em';
elLoginMsg.style.display ='none';
elPasswordMsg.style.display = 'none';
elPasswordId.addEventListener("focus", function(){
showText(elPasswordMsg);
}, false);
elUserId.addEventListener("click", function(){
showText(elLoginMsg);
}, false);
elResetFontSize.addEventListener("click", function(){
//pass size change and element affected to be manipulated
//resetTextSize(fontReset,logInbox,elPasswordMsg);
changeTextSize(fontReset,logInbox,elPasswordMsg,divReset,txtReset);
});
elChangeContrast.addEventListener("click", function(){
//pass size change and element affected to be manipulated
changeContrast(logInbox, helpWithBB, black, white);
});
elResetContrast.addEventListener("click", function(){
document.location.reload(true);
});
elIncreaseFontSize.addEventListener("click", function(){
//pass size change and element affected to be manipulated
changeTextSize(fontUp,logInbox,elPasswordMsg,divChange,txtSizeChange);
});
function changeContrast(mainDiv, secDiv, txtColor, bkColor){
secDiv.style.background = bkColor;
mainDiv.style.background = bkColor;
showText(elPasswordMsg);
showText(elLoginMsg);
elLoginMsg.style.color = txtColor;
elPasswordMsg.style.color = txtColor;
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++) {
anchors[i].style.color = txtColor;
}
var para = document.getElementsByTagName('p');
for(var i = 0; i < anchors.length; i++) {
para[i].style.color = txtColor;
}
}
function changeTextSize(fontUp, elDiv, msg, divH, msgT){
document.body.style.fontSize=fontUp;
elDiv.style.height = divH;
msg.style.top = msgT;
}
function showText(id){
id.style.display ='block';
}
}
</script>

You're missing the third parameter (useCapture) in some of your calls to addEventListener() but other than that nothing is obviously wrong. I know that Firefox has only started supporting addEventListener() without a third parameter within the last year, so it's possible IE 9 doesn't support it.
Update
So much for that theory. Two parameters seems fine in IE 9: http://jsfiddle.net/xZRy7/

Why the js code works in a web page but fails in GreaseMonkey?

I created a hidden frame as follows:
var oHiddenFrame = null;
if(oHiddenFrame == null){
oHiddenFrame = document.createElement("iframe");
oHiddenFrame.name = "hiddenFrame";
oHiddenFrame.id = "hiddenFrame";
oHiddenFrame.style.height = "0px";
oHiddenFrame.style.width = "0px";
oHiddenFrame.style.position = "absolute";
oHiddenFrame.style.visbility = "hidden";
document.body.appendChild(oHiddenFrame);
}
then listener:
var fnLocation = function(){
frames["hiddenFrame"].location.href = "http://meckmeck.cn";
}
var oButton = document.getElementById("mb_submit");
oButton.addEventListener("click", fnLocation, false);
It works fine in a web page,but will report frames.hiddenFrame is undefined when written in GreaseMonkey

Have you tried,
document.getElementById('hiddenFrame').location.href = "http://meckmeck.cn";

Develop Reference

JavaScript is the programming language of the Web.

Dynamic creation of HTML5 Videos via JavaScript - javascript

Related

Js SIP code does not work on Web Page

How to create player turns in jquery?

(Javascript) SlideShow Not Working

Javascript functions work in firefox and chrome but not IE9

Why the js code works in a web page but fails in GreaseMonkey?

Categories

Resources