In looking at this image you can see in an ideal world each box would have the same height of content in each box. However in the real world we can't control how many characters the client uses for a heading. Wondering thoughts on how to deal with a situation like this? Is it ok to just let it be as is?
This will create an array of heights of an element by class, then find the tallest, and then make them all that height.
<script>
var headerHeights = [];
var mclength = document.getElementsByClassName("myClass").length;
for (i = 0; i < mclength; i++) {
headerHeights[i] = document.getElementsByClassName("myClass")[i].getBoundingClientRect().height;
}
var headerMaxHeight = Math.max(...headerHeights);
for (i = 0; i < mclength; i++) {
document.getElementsByClassName("myClass")[i].style.height = headerMaxHeight+"px";
}
</script>
You will likely want to make this a function which replaces "myClass" with a function parameter so that you can call it for each class you add. You will also want to add a listener for when a person resizes their window to rerun the function.
I want to have only one event listener that work with 3 different buttons: btn1, btn2, btn3.
I know that "btn+i" doesn't exist and doesn't work. Theres any way to do this? Sorry, I'm a beginner...
for(var i:uint=1;i<4;i++){
btn+i.addEventListener(MouseEvent.CLICK, btnClicked);
}
You should be able to do this["btn" +i].
But you'd probably be better off stuffing them all into an array and accessing them that way. Then your code isn't so dependent on everything being named a certain way.
Something like this:
var buttons:Array = [btn1, btn2, btn3];
for(var i:int = 0; i < buttons.length; i++){
buttons[i].addEventListener(MouseEvent.CLICK, btnClicked);
}
I am tryin to populate a list of all Div ids on a page with javascript. The below code gives me a count of all divs but not a list of div ids which i am looking for, Please help
var divs = document.getElementsByTagName("div");
for(var i=0, len=divs.length; i < len; i++){
document.write(divs[i]);
}
Try:
document.write(divs[i].id);
I'm developing a simple Chrome extension, which should be able to retrieve a DOM nodes and modify them in the specific way. And this is what I'm stuck with.
There are two DOM queries (lets call the A and B) in a javascript file, that i inject in html-page. The first one (A) goes well, but the second one (B) always crushes. Even If I interchange the first (A) query and second one (B), everything will still work in the same way. Query (B) now works as it should in the first place, and A now does nothing.
spans = document.getElementsByTagName('span');
for(j =0 ;j<=divin.length; j++)
{
//Manipulations //Works just fine
}
paragraphs = document.getElementsByTagName('p');
for(j =0 ;j<=paragraphs.length; j++)
{
//Manipulations //Does nothing
}
And what we see here. The same code, but different position.
paragraphs = document.getElementsByTagName('p');
for(j =0 ;j<=paragraphs.length; j++)
{
//Manipulations //Works just fine
}
spans = document.getElementsByTagName('span');
for(j =0 ;j<=divin.length; j++)
{
//Manipulations //Does nothing
}
I tried every way of injecting this code, but result was always the same.
Seems like you're using divin.length instead of spans.length.
I was trying to make a similar thing with the game SameGame (ie. the block above the removed blocks fall downward). Before trying this with an Array that contains MovieClips, this code worked (tried it with int values). With MovieClips on the array, it seems not working the same way.
With int values, example:
popUp(0, 4): Before: 1,2,3,4,5,6,7,8,9,10; After: 1,2,3,4,6,7,8,9,10
But with MovieClips:
popUp(0, 4): Before: 1,2,3,4,5,6,7,8,9,10; After; 1,2,3,4
// Assume the numbers are movieclips XD
Basically, it strips everything else, rather than just the said block >_<
Here's the whole method. Basically, two extra arrays juggle the values above the soon-to-be removed value, remove the value, then re-stack it to the original array.
What could be wrong with this? And am I doing the right thing for what I really wanted to emulate?
function popUp(col:uint, row:uint)
{
var tempStack:Array = new Array();
var extraStack:Array = new Array();
tempStack = IndexArray[col];
removeChild(tempStack[0]);
for(var ctr:uint = tempStack.length-(row+1); ctr > 0; ctr--)
{
removeChild(tempStack[ctr]);
extraStack.push(tempStack.pop());
trace(extraStack);
}
tempStack.pop();
for(ctr = extraStack.length; ctr > 0; ctr--)
{
tempStack.push(extraStack.pop());
//addChild(tempStack[ctr]);
}
IndexArray[col] = tempStack;
}
PS: If it's not too much to ask, are there free step-by-step guides on making a SameGame in AS3 (I fear I might not be doing things right)? Thanks in advance =)
I think you just want to remove an element and have everything after that index shift down a place to fill what you removed. There's an inbuilt function for this called splice(start:uint, length:uint);
Parameters:
start - the index to start removing elements from
length - the amount of elements to remove
var ar:Array = ["hello","there","sir"];
ar.splice(1, 1);
ar is now -> ["hello", "sir"];
As per question:
Here's an example with different types of elements:
var ar:Array = [new MovieClip(), "some string", new Sprite(), 8];
ar.splice(2, 1);
trace(ar); // [object MovieClip], some string, 8
And further example to display the indexes being changed:
trace(ar[2]); // was [object Sprite], is now 8