JavaScript - Make function properly run upon clicking a button - javascript

This a followup to this question, sorry for making them so close to each other.
I am trying to have a button disappear upon clicking and then running a subsequent function, but here, clicking on the button makes the first char of message2 appear, then has it fade back in again; continuing to click the button makes each subsequent character appear until none are left, and the second button never appears no matter how many times I click. It should work, so what is the problem here?
EDIT: Somehow slipped my mind to add timer2. Now the effect is closer to what I want, but it doesn't completely match the effect of the original dialogue function (which is what I was going for).
My code:
var message = `This message is (hopefully) a successful implementation of JS video game scrolling!
Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript!
Let's see if we can add some fade-in buttons, shall we?
(By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)`;
var timer = setInterval(dialogue, 20);
function dialogue(add = 1) { // By default 1 character is made visible
var len = $("#pid").text().length + add; // Get desired length
$("#pid").text(message.substr(0, len)); // Make the change
if (len < message.length) return; // Nothing more to do
clearInterval(timer); // All is shown, so stop the animation
$("#button1").fadeIn(); // and fade in the button
};
// On click, pass the length of the message to the function
$(document).click(dialogue.bind(null, message.length));
var message2 = `Wonderful! Now let's try summoning another button.`
function dialogue2(add2 = 1) {
$("#button1").hide();
var timer2 = setInterval(dialogue2,20);
var len2 = $("#pid2").text().length + add2; // Get desired length
$("#pid2").text(message2.substr(0, len2)); // Make the change
if (len2 < message2.length) return; // Nothing more to do
clearInterval(timer2); // All is shown, so stop the animation
$("#button2").fadeIn(); // and fade in the button
}
// Hide the button on page load
$("#button1").hide();
$("#button2").hide();
$("#button3").hide();
<!DOCTYPE=HTML>
<html>
<head>
<title>Sandbox</title>
<link rel="stylesheet" href="mainstyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p id="pid"></p>
<button id="button1" onclick="dialogue2(add2 = 1);">Ooh, here's one! Click to see what it does!</button>
<p id="pid2"></p>
<button id="button2">Speak of the devil, and he shall come!</button>
<p id="pid3"></p>
<button id="button3">Last time, I promise!</button>
</body>
</html>

Related

Click a Button to Move through List of Webpages

I am creating a profile centered website.
I have a webpage that has fixed side buttons (SKIP and ADD). I know that I may need to create an array for all the webpages/profiles but... How do I start the process for the SKIP and ADD buttons to cycle to the NEXT profile in the list/array? Both the SKIP and ADD buttons move to the NEXT profile. However, a small notice appears when you click ADD to move forward.
I do have programming experience and have my AWS and Linux certifications. I'm not worried about following along! Please help. Any and all assistance is so greatly appreciated!!!
You weren't detailed enough in your question so that's the skeleton to handle a cursor for a list. A cursor that will be moved and processed by the add() and skip() functions called by the click events of the buttons Add and Skip. The div#currentItem holds the value of the current item in the list. Every time you press the Skip button, the cursor will move to the next item showing it's value on the div above said. Ever ytime you press the Add button, the function add() will be invoked:
<div id="currentItem">
</div>
<input type="button" onclick="skip();">Skip</button>
<input type="button" onclick="add();">Add</button>
<script>
var list = [];
var cursor = 0;
$(document).ready({
init();
});
function init(){
//feed here list var somehow
showCurrentItem();
}
function showCurrentItem(){
$('#currentItem').text( list[cursor] );
}
function skip(){
cursor++;
showCurrentItem();
}
function add(){
let currentItem = list[i];
//do something with currentItem
}
</script>

JavaScript - Modify function to be reusable in later instances?

This is a followup to this question.
I have a function that I would like to make reusable so I don't have to make new, very similar functions over and over to achieve the same effect. Specifically, I would like to know how to change var message after the first function instance runs without losing the original message.
Here's my code:
var message = `This message is (hopefully) a successful implementation of JS video game scrolling!
//Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript!
// Let's see if we can add some fade-in buttons, shall we?
//(By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)`;
var timer = setInterval(dialogue, 20);
function dialogue(add = 1){ // By default 1 character is made visible
var len = $("#pid").text().length + add; // Get desired length
$("#pid").text(message.substr(0, len)); // Make the change
if (len < message.length) return; // Nothing more to do
clearInterval(timer); // All is shown, so stop the animation
$("#button1").fadeIn(); // and fade in the button
};
// On click, pass the length of the message to the function
$(document).click(dialogue.bind(null, message.length));
// Hide the button on page load
$("#button1").hide();
<!DOCTYPE HTML>
<html>
<head>
<title>Sandbox</title>
<link rel="stylesheet" href="mainstyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p id="pid"></p>
<button id="button1">Ooh, here's one! Click to see what it does!</button>
</body>
</html>
edit: https://jsfiddle.net/n8Lczdk0/4/
I'm not sure what you mean, but if you wrap everything in a function that takes message as an argument, then it'll be in the dialogue function's closure and you'll be able to update var message after you call the wrapper function without dialogue() knowing about it. As they say, a few lines of code are worth hundreds of prose:
var message = `This message is (hopefully) a successful implementation of JS video game scrolling!
Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript!
Let's see if we can add some fade-in buttons, shall we?
(By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)`;
const f = message => {
var timer = setInterval(dialogue, 20);
function dialogue(add = 1){ // By default 1 character is made visible
var len = $("#pid").text().length + add; // Get desired length
$("#pid").text(message.substr(0, len)); // Make the change
if (len < message.length) return; // Nothing more to do
clearInterval(timer); // All is shown, so stop the animation
$("#button1").fadeIn(); // and fade in the button
};
// On click, pass the length of the message to the function
$(document).click(dialogue.bind(null, message.length));
// Hide the button on function call
$("#button1").hide();
}
f(message)
message = "some new value"
So above, I'm essentially wrapping your whole js code in a function that takes message as an argument. Kinda like currying your dialogue function.
You could also pass your ids as arguments and make it fully reusable. Just pass a message and DOM ids to the function and the magic unrolls with associated buttons fading in as various texts show up.
Hope this helped, cheers,
thomas
You can try with below one way
You can pass one optional argument(message) to the function and check if it is passed then use that message otherwise use default original message.
var message = `This message is (hopefully) a successful implementation of JS video game scrolling!
Pretty cool, huh? Well, believe it or not, this whole page is a test for a very basic interactive story using HTML/JavaScript!
Let's see if we can add some fade-in buttons, shall we?
(By the way--you can click anywhere in this window to instantly clear through subsequent text scrolls.)`;
var timer = setInterval(dialogue, 20);
function dialogue(add = 1, custom_message){ // By default 1 character is made visible
var temp_message;
if(typeof custom_message === "undefined") {
temp_message = message;
}
else {
temp_message = custom_message;
}
var len = $("#pid").text().length + add; // Get desired length
$("#pid").text(temp_message.substr(0, len)); // Make the change
if (len < temp_message.length) return; // Nothing more to do
clearInterval(timer); // All is shown, so stop the animation
$("#button1").fadeIn(); // and fade in the button
};
// On click, pass the length of the message to the function
$(document).click(dialogue.bind(null, message.length));
// Hide the button on page load
$("#button1").hide();
<!DOCTYPE=HTML>
<html>
<head>
<title>Sandbox</title>
<link rel="stylesheet" href="mainstyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p id="pid"></p>
<button id="button1">Ooh, here's one! Click to see what it does!</button>
</body>
</html>
You can simply ask for another parameter in dialogue() for the new message. You can then create an array of messages, from which you can choose whatever message you'd like to pass. This will ensure that all your messages are saved.
var messages = ["Message one", "Message two", "Message three"];

Javascript clearInterval on click

I've written a small function that moves/bouces a button every 5 seconds like so:
HTML:
Text
JS:
var interval;
function buttonShake(){
var times = 5;
var speed = 300;
var distance = '15px';
for(var i = 0; i < times; i++) {
twitterButton.animate({
left: '-='+distance
}, speed).animate({
left: '+='+distance
}, speed);
}
}
interval = setInterval(buttonShake, 4000);
What the button does it when clicked, it slides out a hidden box from the right hand side of the page. What I'm trying to do is prevent the button from bouncing once it has been clicked.
So I tried using the following
button.on('click', function(e){
// do the slideout animation
// add "open" class to the box
if(box.hasClass('open')){
clearInterval(interval);
}
});
The button and box elements have been defined correctly and the open class is appended to the box once it slides out, however clearing the interval doesn't appear to be working. It still continuously calls the buttonShake() function every 5 seconds.
Here is a JSFiddle with the full code for a live preview:
http://jsfiddle.net/30tsype8/3/
Am I doing something wrong here?
I noticed that if you leave it for a while, the animation seems to go into overdrive and rather than running for around 3 secs and pausing for a second before starting again, it just constantly bounces. I think jQuery is overlapping its calls and getting confused and stuck in a loop.
As you want to stop bouncing the button when they expand the panel, I would immediately finish the animation after the panel has expanded using finish():
twitterWrapper.animate({
right: right
}, function() {
twitterButton.finish();
});
Updated fiddle

loop through array of dom objects and find first that match

I have a navigation bar at the top of my eform that skips to the next and previous div (page/section) but only if that div is visible. The divs are hidden unless activated with a checkbox. so the next button on the nav bar needs to work by always taking you to the next available div.
The following code works for the first button but these nav bars display at the top of each section so the next section has a next button on it running the same function (which doesn't work) i'm struggling to exlpain myself here so please shout if i'm not making sense. Here's my code.
function showNext(){
var pages = [document.getElementById("page2"),document.getElementById("page3")];
var next = ["page2marker","page3marker"];
for (var i=0; i<pages.length; i++){
if(pages[i].style.display == "block"){
window.location.hash = next[i];
}
}
}
Can i amend this function so that it will work for all buttons. I.e by always navigating to the next available div that is visible? I think i've probably missed a trick and a whole load of info but see what you think, any ideas?
Many thanks
You can achieve this using jQuery with the jQuery.next function - http://api.jquery.com/next/.
For a set of html like this:
<nav><a class="showNext">Show Next</a></nav>
<div class="content" style="display:none">I'm hidden</div>
<div class="content">I'm Visible</div>
You could use something like:
$('.showNext').bind('click', function(e) {
e.stopPropagation();
e.preventDefault();
window.location.hash = $(this).next('.content:visible').attr('id') + 'marker';
});

How to animate button text? (loading type of animation) - jquery?

I got something that I want to do and want to see what you guys think and how can it be implemented.
I got a form in a page and the form will submit to itself to perform some process (run functions) in a class.
Upon clicking the submit button, I want to animate the button text to
“SUBMIT .” -> “SUBMIT ..” -> “SUBMIT …” -> “SUBMIT ….” -> “SUBMIT ….” and then back again.
Sort of “animate” the button text.
Once the whole process is done, the button text will goes back to be “SUBMIT” text again.
Please note that I am not looking for image button solution, meaning that I do not want to implement gif animated button image.
Anyone done this before or know how this can be done? I have google but seems nothing of this kind to be found.
Set up a timer with javascript, that will run until the process is done, be sure to have a flag for it.
And since you are using jQuery, you can simply $("#button-id").val(nextStep); where nextStep is the next animation string. Example:
function putAnimation () {
var b = [".", "..", "..." ];
var i = 0;
var a = setInterval(function () {
$("#button-id").val("SUBMIT " + b[i++]);
if (stopped) {
$("#button-id").val("SUBMIT");
clearInterval(a);
}
}, 500);
}
For the animation itself:
$('#submit').click(function() {
$(this).val("Submit ").delay(200).val("Submit .").delay(200).val("Submit ..").delay(200).val("Submit ...").delay(200).val("Submit").delay(200);
});

Categories