Here is what I have now but the buttons still are not resizing the text. I have the value for each button set for 0.1 and -0.1 respectively, and the font size is currently set at 1em. Any ideas?
window.onload = startup;
function startup() {
var fontButtons = document.getElementsByClassName("fontsizer");
var i;
alert(fontButtons.length);
for (i = 0; i < fontButtons.length; i++)
fontButtons[i].onclick = function(){resizeText(this)};
}
function resizeText() {
var fontChange;
fontChange = parseFloat(objButton.value);
if (document.body.style.fontSize == "") {
document.body.style.fontSize = "1.0em";
}
var currentFontSize;
alert("changed");
currentFontSize = parseFloat(document.body.style.fontSize);
currentFontSize = currentFontSize+fontChange;
document.body.style.fontSize = "currentFontSize+em"
}
To call a function with parameters from onclick, put it inside an anonymous function so:
fontButtons[i].onclick = resizeText(this);
becomes:
fontButtons[i].onclick = function(){resizeText(this)};
Also, make sure you run startup() after the .fontsizer elements have been created. e.g. window.onload = startup; or something like this which you can run whenever:
document.onreadystatechange = function() {
if (document.readyState !== 'complete')
return;
startup();
}
working fiddle: https://jsfiddle.net/ckn9sLfv/
fontButtons[i].onclick = resizeText; // not (this);
You need to assign a function, not a return value (undefined).
Related
I am struggling combining two JS into one… I try and try in the JSFiddle but can not really understand the console erros…
I am trying to have a background-color that changes combined with a changing background .svg in a div…
$(document).ready(function() {
//Initializing
var i = 0;
var images = []; //array
var time = 3000; // time in millie seconds
//images
images[0] = "url(http://www.cyrill-kuhlmann.de/verve/img/logo_1.svg)";
images[1] = "url(http://www.cyrill-kuhlmann.de/verve/img/logo_2.svg)";
images[2] = "url(http://www.cyrill-kuhlmann.de/verve/img/logo_3.svg)";
images[3] = "url(http://www.cyrill-kuhlmann.de/verve/img/logo_4.svg)";
//function
function changeImage() {
var el = document.getElementById('header');
el.style.backgroundImage = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout('changeImage()', time);
}
window.onload = changeImage;
$(function setbackground() {
window.setTimeout( "setbackground()", 2000);
var index = Math.round(Math.random() * 4);
var ColorValue = "FA89CB";
if(index == 1)
ColorValue = "FAED96";
if(index == 2)
ColorValue = "D27DFA";
if(index == 3)
ColorValue = "6CFA64";
if(index == 4)
ColorValue = "8370FA";
document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
});
});
Here's my fiddle:
http://jsfiddle.net/gmck02ru/1/
does somebody have a clue – i guess I am not really understanding what I am doing here so far...
Help please!
The issue is because the syntax you've used to define the setbackground() function is incorrect. You've placed it inside a jQuery object. That function is also never called. You should define it as a standalone function and invoke it when the page loads.
In addition there's a few improvements you can make to the logic.
Use addEventListener() over setting the onclick or other onX event properties.
Declare the elements of the array at the same time as you define the array itself.
Use an array to hold the background colours instead of hard-coding an if statement.
Use the modulo operator when incrementing the counter to save having to write logic to reset to 0
If you want to repeatedly update the background colour, as you do for the images, place the setTimeout() call within the setbackground() function.
Use document.body directly instead of getting it by tag name
$(document).ready(function() {
let i = 0;
let images = [
"url(http://www.cyrill-kuhlmann.de/verve/img/logo_1.svg)",
"url(http://www.cyrill-kuhlmann.de/verve/img/logo_2.svg)",
"url(http://www.cyrill-kuhlmann.de/verve/img/logo_3.svg)",
"url(http://www.cyrill-kuhlmann.de/verve/img/logo_4.svg)"
];
let backgroundColours = ['#FAED96', '#D27DFA', '#6CFA64', '#8370FA']
function changeImage() {
let el = document.getElementById('header');
el.style.backgroundImage = images[i];
i = ++i % (images.length - 1)
setTimeout(changeImage, 3000);
}
changeImage();
function setbackground() {
let index = Math.round(Math.random() * 4);
document.body.style.backgroundColor = backgroundColours[index];
setTimeout(setbackground, 2000);
}
setbackground();
});
Working jsFiddle - see the demo in the fiddle as the images are on an insecure domain so cannot be called from SO.
I have 2 pieces of code, one jQuery which checks the value of an input field and then takes this value a manipulates the CSS relatively. I have some vanilla Javascript and I was looking to use my jQuery to manipulate the JS as the jQuery is outside code block. How would I able to use the variables inside the jQuery in my vanilla Javascript?
$(document).ready(function() {
$('input').change(function() {
var val = $(this).val();
var inputNo = (10 / val);
if (val > 0) {
$(".orb").addClass("rotating");
$('.rotating').css("animation", "rotating " + inputNo + "s linear infinite");
} else {
$(".orb").removeClass("rotating");
}
console.log(inputNo);
});
});
function init() {
ctx.shadowColor = "#57e0c1";
ctx.shadowBlur = inputNo;
for (var i = 0; i <= totalTentacles - 1; i++) {
lines[lines.length] = new Line();
}
animate();
}
init();
The variable is scoped within the $('input').change function. This essentially means it disappears when the function ends. If you want it to be accessible to multiple function, you need to initialize it outside the function.
Eg.
var inputNo = 0; // declared outside function block
$(document).ready(function() {
$('input').change(function(){
var val = $(this).val();
inputNo = (10 / val);
if (val > 0) {
$(".orb").addClass("rotating");
$('.rotating').css("animation","rotating "+ inputNo +"s linear infinite");
}
else {
$(".orb").removeClass("rotating");
}
console.log(inputNo);
});
});
function init() {
ctx.shadowColor = "#57e0c1";
ctx.shadowBlur = inputNo;
for (var i = 0; i <= totalTentacles - 1; i++) {
lines[lines.length] = new Line();
}
animate();
}
init();
Note, there are deeper issues in your code however than simple variable scoping. For example, your init function will need to be called again within the change function if you want to update the shadow-blur on change as well.. so replace console.log(inputNo); with another init(); call.
I want to have a try with the clearInterval() method in some conditions.
But it seems do not work anyway.
window.onload = function(){
var list = document.getElementById("list");
list.style.position = "relative";
list.style.left = 0;
var move = function(){
list.style.left = parseInt(list.style.left) + 200 + "px";
demo[0].innerHTML = parseInt(list.style.left);
}
var myVar = setInterval(move,1000);
if (parseInt(list.style.left) == 600) {
clearInterval(myVar);
}
}
I don't konw why there is nothing happened when the value of left property is "600".
Thank you very much for help.
The way it's written now, move hasn't been called yet, so this code has nothing to check:
if (parseInt(list.style.left) == 600) {
clearInterval(myVar);
}
Instead, add that condition inside of move() and have it end its own execution:
var myVar; // change scope to outside of the below function.
window.onload = function(){
var list = document.getElementById("list");
list.style.position = "relative";
list.style.left = 0;
var move = function(){
list.style.left = parseInt(list.style.left) + 200 + "px";
demo[0].innerHTML = parseInt(list.style.left);
if (parseInt(list.style.left) == 600) {
clearInterval(myVar);
}
}
myVar = setInterval(move,1000);
}
also probably want to make the scope more global (or at least make it more evident it can be modified outside of the below function). It will be hoisted anyways, but making it more clear will help maintenance later on.
Your if statement is only called once in the onload event. After that, it never gets called again, so it never has a chance to clear the interval. If you changed your move function to something like this:
var move = function(){
list.style.left = parseInt(list.style.left) + 200 + "px";
demo[0].innerHTML = parseInt(list.style.left);
// Check to see if we should clear our interval
if (parseInt(list.style.left) == 600) {
clearInterval(myVar);
}
}
That'll do the check every time move is called. If the conditional inside the if statement evals to true, it'll clear your interval.
You can do something like this:
window.onload = function(){
var list = document.getElementById("list");
list.style.position = "relative";
list.style.left = 0;
var move = function(){
if (parseInt(list.style.left) == 600) {
clearInterval(myVar);
}
list.style.left = parseInt(list.style.left) + 200 + "px";
demo[0].innerHTML = parseInt(list.style.left);
}
var myVar = setInterval(move,1000);
}
list.style.left returns a string which could be followed whith a unit (px, pt ....). It could even be a percentage.
Ok, so suppose. I have ten images in documents.images array. When I click on an image. How do I get an alert telling me what image I have clicked on.
EDIT
The reason that I want the index of the image I clicked on is because I am trying to bind it to an event and the previous way doesn't seem to work
document.images[i].addEventListener("click", function(){MakeMove(i)}, false);
This statement is in a for loop, and I intended it to bind to every image but that doesn't seem to be working.
Here is pure JavaScript way to do that:
window.onload = function() {
for (var i = 0; i < document.images.length; i++) {
var image = document.images[i];
image.setAttribute("index", i + "");
image.onclick = function() {
var index = this.getAttribute("index");
alert("This is image #" + index);
};
}
};
The trick is assigning custom attribute with the index, then read that attribute.
Live test case.
Put this at the bottom of the html file, just before the closing tag
<script type="text/javascript">
function listen(evnt, elem, func) {
if (elem.addEventListener) { // W3C DOM
elem.addEventListener(evnt,func,false);
} else if (elem.attachEvent) { // IE DOM
var r = elem.attachEvent("on"+evnt, func);
return r;
}
}
listen("click", document.getElementsByTagName("body")[0], function(event) {
var images = document.images,
clicked = event.target;
for(var i =0, il = images.length; i<il;i++) {
if(images[i] === clicked) {
return alert("You clicked on the " + (i + 1) + "th image");
}
}
});
</script>
window.onload = function() {
for (var i = 0; i < document.images.length; i++) {
var image = document.images[i];
image.onclick = function() {
var images = Array.prototype.slice.call(document.images);
alert(Array.indexOf(images,this));
}
};
};
JSFiddle: http://jsfiddle.net/kmendes/8LUzg/1/
If you want it to work on old browsers too add the function under Compatibility on https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf
I've written the following function with hopes to add 1px onto the top margin to animate a window sliding out of the page.
Currently it works fine and removes the window from the page, However I'm having problems creating the delay interval in each iteration of the for loop. I've thought about using setTimeout(), but with this I cant just break; the for loop I have to call a function,
Any ideas?
function slideOut() {
var obj = document.getElementById("cInstructs");
var orig = 66;
for(i=0; i<2000; i++) {
orig++;
obj.style.marginTop = orig+"px";
}
};
Thanks in advance!
A suggestion would be to check the jQuery .slideDown() function- http://api.jquery.com/slideDown/
var i;
function incrAndDelay(i) {
setTimeout(...);
i+=1;
return i;
}
function slideOut() {
var obj = document.getElementById("cInstructs");
var orig = 66;
for(i=0; i<2000; incrAndDelay(i)) {
orig++;
obj.style.marginTop = orig+"px";
}
};
Still have to call a function but not in the loop body.
var intId;
function slideOut() {
clearInterval(intId);
var count = 0;
var obj = document.getElementById("cInstructs");
var orig = 66;
intId = setInterval(function(){
orig++;
obj.style.marginTop = orig+"px";
if((++count == 2000)){
clearInterval(intId);
}
}, 100);
}