I need a constantly running while loop to check alot of if (value < otherValue || value === otherValue) without making the website crash and still be able to accept click events, etc...
Here is some of my code:
$(document).ready(function(){
var value = 0;
var otherValue = 25;
var otherValue2 = 75;
var otherValue3 = 100;
var otherValue4 = 125;
var otherValue5 = 175;
var otherValue6 = 200;
var otherValue7 = 300;
$('#button').click(function(){
value += 5;
// Here i make the value show on the page like fancy, but It's not essential for this question
});
});
So, how do I include a constantly running while loop that makes that code still functional, and doesn't crash the website?
I would take a look at setInterval it will allow you to execute a function every set amount of time.
var interval = null;
var value = 0;
var otherValue = 25;
var intervalTimer = 100; // 100ms
$('input').val(value);
$('button').on('click', function(){
interval = setInterval(function(){
$('input').val(value += 5);
}, intervalTimer);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<button>
Start Updating Value
</button>
Related
Currently working a script to make ALL the texts of a document with some specifics. Glad to say it's already functioning but not completely because it's just working on some of the textframes and not all of them.
The intention is to make the changes on every texts on the active document (point, area, frames, etc) and unfortunately, even when it works on some text frame, not all characters are affected because some special ones like - or + don't get the properties of the other normal characters.
Made some research and do believe I should be working with parentStory maybe? But I didn't figure out how to implement.
Here is my code:
var document = app.activeDocument;
var allTexts = document.textFrames[0];
for (i=0; i<allTexts.words.length; i++) {
allTexts.words[i].characterAttributes.autoLeading = true;
allTexts.words[i].characterAttributes.tracking = 250;
allTexts.words[i].characterAttributes.kerningMethod = AutoKernType.AUTO;
allTexts.words[i].characterAttributes.underline = false;
allTexts.words[i].characterAttributes.strikeThrough = false;
allTexts.words[i].characterAttributes.capitalization = FontCapsOption.NORMALCAPS;
allTexts.words[i].characterAttributes.language = LanguageType.UKENGLISH;
allTexts.words[i].characterAttributes.horizontalScale = 100;
allTexts.words[i].characterAttributes.verticalScale = 100;
allTexts.words[i].characterAttributes.baselineShift = 0;
allTexts.words[i].characterAttributes.rotation = 0;
allTexts.words[i].characterAttributes.baselinePosition = FontBaselineOption.NORMALBASELINE;
allTexts.words[i].characterAttributes.baselineDirection = BaselineDirectionType.Standard;
allTexts.words[i].characterAttributes.alternateGlyphs = AlternateGlyphsForm.DEFAULTFORM;
allTexts.words[i].characterAttributes.antialias = TextAntialias.SHARP;
}
already got helped in a different source by adding textRange to it.
var thisTextFrame;
for(var i = 0; i < app.activeDocument.textFrames.length; i++){
thisTextFrame = app.activeDocument.textFrames[i]
thisTextFrame.textRange.characterAttributes.tracking = 250;
// ...
}
I'm trying to build a very basic slider. I managed to create something but I am stuck when I try to change from one slide to another. I was thinking my code would work but it does not and I don't understand why.
Here's a link to a codepen of it
Here's the relevant part of my problem:
I have defined a slider like so:
var carrousel = document.getElementById('carrouselcontainer');
var slide1 = document.createElement('div');
slide1.className = 'slide1';
var slide2 = document.createElement('div');
slide2.className = 'slide2';
var slide3 = document.createElement('div');
slide3.className = 'slide3';
var slider = [slide1, slide2, slide3]
carrousel.appendChild(slider[0]);
And this does work. Now I am trying to add a function that will increment or decrement the slider variable when clicked.
var backButton = document.getElementById('backButton');
var forwardButton = document.getElementById('forwardButton')
function forward() {
slider++
}
forwardButton.addEventListener('click', forward)
But when I click on the forwardButton element, nothing happens. I know that the eventListener is working since I tried a window.alert() message on it and it works when I click it. What is it that I am doing wrong here?
Incrementing an array will not work but only generate error.
forward() should remove the actual child of the carrousel and
add a new child that has as value the next element of the slider array:
Introduce a currentSlide number variable to indicate the current index displayed and increment it in forward().
var currentSlide = 0;
...
carrousel.appendChild(slider[currentSlide]);
...
function forward() {
carrousel.removeChild(slider[currentSlide++]);
if (currentSlide >= slider.length){
currentSlide = 0;
}
carrousel.appendChild(slider[currentSlide]);
}
You need some kind of index which you use to get something out of your array:
var forwardButton = document.getElementById('forwardButton');
var result = document.getElementById('carrouselcontainer');
var sliderIndex = 0;
var slider1 = document.createElement("div");
slider1.innerHTML = "item 1";
var slider2 = document.createElement("div");
slider2.innerHTML = "item 2";
var slider3 = document.createElement("div");
slider3.innerHTML = "item 3";
var slider = [slider1, slider2, slider3];
result.appendChild(slider[sliderIndex]);
function forward() {
result.removeChild(slider[sliderIndex]);
sliderIndex = (sliderIndex + 1) % slider.length;
result.appendChild(slider[sliderIndex]);
}
forwardButton.addEventListener('click', forward);
<button id="forwardButton">Increment</button>
<div id="carrouselcontainer"></div>
You have to replace the element only incrementing the element does not work:
I added a counter "silderPos" to your script, so you can increment it by one on every click.
If it larger then 2 it will go back to 0 by a modulo action.
I made the carrouselElement global, so that your click script can access the element directly.
With this changes i can now go throu all of your element.
Please find the modified source code here:
var carrouselElement;
var sliderPos = 0;
function carrousel()
{
carrouselElement = document.getElementById('carrouselcontainer');
var slide1 = document.createElement('div');
slide1.className = 'slide1';
var slide2 = document.createElement('div');
slide2.className = 'slide2';
var slide3 = document.createElement('div');
slide3.className = 'slide3';
var slider = [slide1, slide2, slide3]
carrouselElement.appendChild(slider[0]);
var backButton = document.getElementById('backButton');
var forwardButton = document.getElementById('forwardButton')
function forward() {
carrouselElement.lastChild.remove();
sliderPos++;
sliderPos = sliderPos % 3;
carrouselElement.appendChild(slider[sliderPos]);
}
/*backButton.addEventListener('click', back)*/
forwardButton.addEventListener('click', forward)
}
window.addEventListener('load', carrousel);
As an experiment for a larger project, I am trying to make a text battle (it's in progress). What I need is when I press the button, it prints the text into a <p> tag. Also, it makes two buttons, one that says ATTACK and the other says SPARE. How would I
disable the initial onclick event from the button so I don't keep on making new buttons
add an onclick event to the new ones so I could run a different function.
This is my code:
HTML:
<button id = 'button' onclick='enemy()'>button</button>
And my JavaScript:
// PLAYER
var playerHP = 100;
var playerAt = 10;
var playerDef = 0;
//ENEMY
var enemyHP = 50;
var enemyAt = 5;
//FIGHT
function enemy() {
document.getElementById("test").innerHTML = "You encounter a wild MONSTER(AT:5 ¦ HP:50). Will you attack?";
for (var i = 0; i < 1; i++) {
var btnAt = document.createElement('BUTTON');
var t = document.createTextNode('Attack!');
btnAt.appendChild(t);
document.body.appendChild(btnAt);
var btnSp = document.createElement('BUTTON');
var d = document.createTextNode('Spare!');
btnSp.appendChild(d);
document.body.appendChild(btnSp);
}
}
Ignore some of the stuff- its for future use.
P.S. No jQuery, please, unless it is unavoidable.
something like this using .Disabled to disable the button, so you dont have to clear out the onclick for later use. and just set .onclick to whatever function you want on the button you built. I also recommend not trying to avoid jquery... Once you start using it, you can relize how much easier it can make your life. Also, why the loop?
// PLAYER
var playerHP = 100;
var playerAt = 10;
var playerDef = 0;
//ENEMY
var enemyHP = 50;
var enemyAt = 5;
//FIGHT
function enemy() {
document.getElementById("test").innerHTML = "You encounter a wild MONSTER(AT:5 ¦ HP:50). Will you attack?";
var btnAt = document.createElement('BUTTON');
//set onlick for button
btnAt.onclick = function()
{
//do stuff here
}
var t = document.createTextNode('Attack!');
btnAt.appendChild(t);
document.body.appendChild(btnAt);
var btnSp = document.createElement('BUTTON');
var d = document.createTextNode('Spare!');
btnSp.appendChild(d);
document.body.appendChild(btnSp);
//disable button
var originalbtn = document.getElementById("button").disabled = true;
}
I am trying to cycle through tooltipabble elements, and show on each of them tooltip
for some period of time, hiding one that was previously shown.
Showing them is all good, but I have problem on how to hide the previous one.
I am using bootstrap tooltip('show') and tooltip('hide') methods, so I wrap element in $()
(function(){
var i = 0;
var tt = $('[data-toggle="tooltip"]');
setInterval(function(){
// if(oldTip) $(oldTip).tooltip('hide'); // not working
var tip = tt[i++];
$(tip).tooltip('show');
// tried saving old instance here but that didn't work
// oldTip = tip;
if(i >= tt.length) i = 0;
}, 2000);
})();
(function () {
var i = 0;
var tt = $('[data-toggle="tooltip"]');
setInterval(function () {
// hide all tooltips
tt.tooltip('hide');
// show the one we want (use toggle - as show will compete with hide)
$(tt[i++ % tt.length]).tooltip('toggle');
}, 2000);
})();
demo: http://jsfiddle.net/billymoon/60e7ejj5/1/
Save a oldTip variable outside the setInterval callback. See in demo: http://jsfiddle.net/1vm90Lcx/
(function(){
var i = 0;
var tt = $('[data-toggle="tooltip"]');
var oldone;
setInterval(function(){
if(oldTip) $(oldTip).tooltip('hide');
var tip = tt[i++];
$(tip).tooltip('show');
oldTip = tip;
if(i >= tt.length) i = 0;
}, 2000);
})();
I'd like to have a div become visible on a button click and have a setInterval append periods to show loading. I would also like a button to clear that interval and hide the div that shows up.
here's a fiddle
http://jsfiddle.net/4qx4r/4/
here's code:
function ProgressBar(){
var div;
var start = function(){
var count = 0,
div = $('#divNotification').show().text('Uploading').css('align','center'),
originalText = div.text(),
count = 0;
var beginCount = setInterval(function(){
var newText = div.text() + '.';
div.text(newText);
count++;
if(count > 5){
div.text(originalText);
count =0;
}
console.log(count);
},500)
}
var stop = function(){
console.log('stop');
div.hide();
window.clearInterval(beginCount);
}
this.start = start;
this.stop = stop;
}
var progressBar = new ProgressBar();
$('#btnStart').click(function(){
progressBar.start();
});
$('#btnStop').click(function(){
progressBar.stop();
});
Currently when I click btnStop I get `cannot read property hide of undefined'. How can I make this stop the interval and hide the div?
You are setting var beginCount within a function, therefore that variable is only accessible within that function.
Try declaring that variable outside or simply just remove the var part.
I would add it next to var div declaration
Also you need to replace commas with semicolons and your div is not set to the object, try the following:
var count = 0;
div = $('#divNotification');
div.show().text('Uploading').css('align','center');
originalText = div.text();
count = 0;
http://jsfiddle.net/4qx4r/6/
this works: http://jsfiddle.net/W8ySn/3/
I separated the initial div assignment:
div = $('#divNotification');
var count = 0;
div.show().text('Uploading editor').css('align','center');
originalText = div.text();
count = 0;