We Keep Coding

Create element until condition is true

I want to create elements inside another element until condition is true.
I have tried this code but it's not working.
// calculate span size and it's parent
var homeHeight = $(".home").height();
var homeWidth = $(".home").width();
var homeSize = (homeHeight + homeWidth) * 2;
var spanHeight = $(".back-animation span").height();
var spanWidth = $(".back-animation span").width();
var spanSize = (spanHeight + spanWidth) * 2;
// create span elements to fill it's parent.
var createSpan = function() {
var span = document.createElement("span");
while (spanSize <= homeSize) {
$(".animation-hide-overflow").append(span);
spanSize = spanSize + spanSize;
}
};
createSpan();
Note: It's combined with JQuery and I recieve no errors in console.
Note 2: I tried for loop like the bottom but it's not working either.
for (spanSize; spanSize <= homeSize; spanSize = spanSize + spanSize) {
$(".animation-hide-overflow").append(span);
}
EDIT:
Thanks for mentioning, I forgot to call createSpan function! now it's working but it create span just once. Any solutions?
jsfiddle for better demonstration:
http://jsfiddle.net/pooria_h/vqmgmyj0/1/
(It should keep creating span elements until it fills up parent element.)

The problem was this section
// create span elements to fill it's parent.
var createSpan = function() {
var span = document.createElement("span");
while (spanSize <= homeSize) {
$(".animation-hide-overflow").append(span);
spanSize = spanSize + spanSize;
}
}
If you pay more attention you can see I've created span variable outside of the loop, So this is what happens: Loop works correctly and it increases spanSize variable until it equals to homeSize variable which is bigger in the start point but the big problem is there isn't a element creation! span element is created before the loop.
So this is the correct way:
// create span elements to fill it's parent.
var createSpan = function() {
while (spanSize <= homeSize) {
var span = document.createElement("span");
$(".animation-hide-overflow").append(span);
spanSize = spanSize + spanSize;
}
}

Javascript not entering a FOR loop inside a function

I came here a few days ago asking for help on creating a grid of squares in JS/CSS.
A very helpful person came here and guided me on using two nested fors and createElement('div'); to get the job done. However, his example was a code that went directly into doing that: http://jsfiddle.net/3x1kmcme/
I need the action to actually happen when the user clicks a button, using a .click() JQuery function. This is not working, and no error is being shown. I really did try going through the code itself, and even changed it, declared it beforehand as a variable, and went line by line to check where the error lies, it seems it's not entering the FOR loop, I could be wrong, of course.
Perhaps something obvious I'm missing?
var rows = 8,
cells = 8,
count = 0;
var i, j,
top = 0,
left = 0;
var boxWidth = 50,
boxHeight = 50;
var $canvas = $('#canvas');
var $fragment = $(document.createDocumentFragment());
$(document).ready(function () {
"use strict";
$("#btnstart").click(function () {
function addBox(opts) {
var div = document.createElement('div');
div.id = opts.id;
div.className = 'alive';
div.style.top = opts.top + "px";
div.style.left = opts.left + "px";
$fragment.append(div);
}
for (j = 0; j < rows; j += 1) {
top = j * boxHeight;
for (i = 0; i < cells; i += 1) {
count += 1;
addBox({
count: count,
id: 'item' + i,
top: top,
left: i * boxWidth
});
}
}
$canvas.html($fragment);
});
});

It seems to work just fine at the following fiddle
Not really sure what exactly the problem is. I added the following changes to the HTML
<div id="canvas"></div>
<input type='button' id='btnstart' value='Start' />

I figured out the problem AND the reason why it worked on JSFiddle. Even if I wrapped the JavaScript file in a Document.Ready function, I still had to put the scripts at the bottom of the page, just below the tag.

trouble with passing values between functions

I'm having trouble figuring out how to pass values from one function to another. I've created a program where I create boxes using values from a form that show up in the webpage. The values I'm talking about are property values of the boxes themselves.
Here is the function where the values are assigned to the boxes:
function addBox(newbox) {
for (var i = 0; i < newbox.number; i++) {
counter++;
var id = counter;
var scene = document.getElementById("scene");
var div = document.createElement("div");
div.value = id;
console.log(div.value);
div.className += " " + "box";
div.innerHTML += newbox.name;
div.style.backgroundColor = newbox.color;
var x = Math.floor(Math.random() * (scene.offsetWidth-101));
var y = Math.floor(Math.random() * (scene.offsetHeight-101));
div.style.left = x + "px";
div.style.top = y + "px";
scene.appendChild(div);
div.onclick = display;
}
}
Here is the function that I'm having trouble passing the values to. I need to pass them so that I can display them in an alert box when I click on each box:
function display(e) {
alert(e.target.toSource());
}
So far when I click it, I just get an empty pair of brackets in the alert box.

I tried your example in JS Fiddle: http://jsfiddle.net/jCC6n/
I'm seeing at least two problems.
"counter" is undefined, which causes the code to fail when it first attempt to increment it. I added a variable declaration at the top of the function.
toSource is undefined. I replaced that with "outerHTML", which works in Chrome, IE and presumably other browsers.
With the above changes, this worked.
function display(e) {
alert(e.target.outerHTML);
}
function addBox(newbox) {
var counter = 0;
for (var i = 0; i < newbox.number; i++) {
counter++;
var id = counter;
var scene = document.getElementById("scene");
var div = document.createElement("div");
div.value = id;
div.className += " " + "box";
div.innerHTML += newbox.name;
div.style.backgroundColor = newbox.color;
var x = Math.floor(Math.random() * (scene.offsetWidth-101));
var y = Math.floor(Math.random() * (scene.offsetHeight-101));
//div.style.left = x + "px";
//div.style.top = y + "px";
scene.appendChild(div);
div.onclick = display;
}
}
addBox({ number: 3, name: "Hello", color: '#C00' });
Be advised that event handling using onclick event handlers varies from browser to browser. It will be best to use a JavaScript framework that knows all the differences and gives you a unified way to handle events. jQuery is arguably the most used such framework.

onmouseover onmouseout fadeIn fadeOut no jQuery

Im looking for an elegant solution for a fade in and out of an HTML element onmouseover on mouseout without using jQuery (call me old fashioned).
In theory the below js solution should work however I am having problems with it working could someone point me in the right direction or offer an alternative solution??
My Js functions are and the HTML which is inserted is the same as which is on the page...
function fadeIn(element) {
for (i = 0; i < 100; i++) {
var value = 0 + i;
element.style.opacity = value;
element.style.filter = 'alpha(opacity=' + value + ')';
}
}
function fadeOut(element) {
for (i = 0; i < 100; i++) {
var value = 100 - i;
element.style.opacity = value;
element.style.filter = 'alpha(opacity=' + value + ')';
element.innerHTML = "<div class='container' id='container' onmouseover='fadeOut(this)'><img src='./images/myImage.jpg' onload='fadeIn(this.parent)' /></div>";
}
}

Your fadeIn/Out doesn't work right because you haven't done anything to control the rate of change. That will just execute immediately and show/hide the elements.
Try something like this:
function fadeIn(el) {
var opac = 0;
var i = setInterval(function() {
opac += 10;
if (opac >= 100) {
clearInterval(i);
opac = 100;
}
el.style.opacity = opac;
el.style.filter = 'alpha(opacity=' + opac + ')';
}, 20);
}
That should fade in over 200ms (20 * 100 / 10). Play with the numbers to adjust the speed.
As for mouseover/out, you can just bind the events like anything else.
Generally, attaching JS events like you have, using HTML attributes, is frowned upon. Usually you'd have a helper like this: https://gist.github.com/955642
You want to write your own method that will check which of the main methods, addEventListener or attachEvent your browser supports.

Javascript Only Works with alert, why?

The statement I'm concerned about in the following statement is fancybox = 1; That needs to happen if my maxWidth for any of the temporary images I create is over 480.
A little background on the html this interacts with:
I have a link wrapped around an image.
The image is a resized version, and the link's href is to the original, unsized image.
There is a series of these link wrapped images
A div, addon-large-image, wraps the whole thing.
For some reason, this code works if I have 'alert(m);' included. I correctly end up in side my final if statement (in this case I do have images wider then 480) and the last alert I get is "Triggered". However, if I comment out 'alert(m);', and change nothing else, 'alert("Triggered");' fails to fire, showing me that I have not, in fact, entered my last conditional.
Any thoughts on what I'm doing wrong here? I have a programming background in Java, but I'm relatively new to Jquery in any heavy sense, so I'm guessing I have a syntax problem of some sort that 'alert(m);' is sort of incidentally fixing.
'tallest' is irrelevant in the scope of my problem, it does what it's supposed to correctly, is used elsewhere, and existed before I implemented maxWidth.
var tallest = 0;
var tempImg = new Image();
var tempSrc = "";
var maxWidth = 0;
// Finds the tallest image in the set.
$("#addon-large-image img").each(function () {
var n = $(this).attr("height");
if (tallest < n) {
tallest = n;
}
tempSrc = $(this).parent().attr("href");
$(tempImg).attr("src", tempSrc);
var m = $(tempImg).attr("width");
alert(m);
if (maxWidth < m) {
maxWidth = m;
}
});
if (maxWidth > 480) {
fancybox = 1;
alert("Triggered");
}

Looks like something isn't fully loaded in your script yet. Try running this in a jQuery document.ready and see if it works.

Did you use Ajax Request ?
if YES then put you code that didnt work at the end of
AjaxObject.onreadystatechange = function () {
if (AjaxObject.readyState == 4) {
.
.
.
.
.
// PUT HERE
}
}
then if No
use this :
function testName()
{
$(document).ready(function(){
var tallest = 0;
var tempImg = new Image();
var tempSrc = "";
var maxWidth = 0;
// Finds the tallest image in the set.
$("#addon-large-image img").each(function () {
var n = $(this).attr("height");
if (tallest < n) {
tallest = n;
}
tempSrc = $(this).parent().attr("href");
$(tempImg).attr("src", tempSrc);
var m = $(tempImg).attr("width");
alert(m);
if (maxWidth < m) {
maxWidth = m;
}
});
});
return true;
}
hope helps you buddy