StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POVariables within functions not working
text
Body
copied!<p>I have the following function:</p> <pre><code>function slideDown() { //get the element to slide sliding = document.getElementById('slideDiv1'); //add 1px to the height each time sliding.style.height = parseInt(sliding.style.height)+1+'px'; t = setTimeout(slideDown,30); if (sliding.style.height == "401px") { clearTimeout(t); } } </code></pre> <p>which is called within this function:</p> <pre><code>function addDiv(nextImageSlide) { //finds the src attribute of the image nested in the Li elemChild = nextImageSlide.firstChild; imageSrc = elemChild.getAttribute('src'); //loops and creates six divs which will be the slices. adds background property etc for (i = 0, j = 0, k = 1; i< = 19; i++, j++, k++) { var newDiv = document.createElement('div'); newDiv.setAttribute('class', 'new-div'); newDiv.id='slideDiv' + k; newDiv.style.height = '1px'; newDiv.style.background = 'url(' + imageSrc +') scroll no-repeat - '+39.5 * j + 'px 0'; var a = document.getElementById('content'); a.appendChild(newDiv); } slideDown(); } </code></pre> <p>Which is called within another function that defines nextImageSlide. It later removes all the divs that it just made. </p> <p>The idea is for an image gallery. When the user hits the next button, I want slices of the next image to slide down to show the next image. Those slices are then taken away and the new image revealed. </p> <p>I would like something like this: <a href="http://workshop.rs/projects/jqfancytransitions/" rel="nofollow">http://workshop.rs/projects/jqfancytransitions/</a>.</p> <p>It's for an assignment so we have to write all the code ourself and this is the best way i can think to replicate it. The only problem is that I keep getting an error: </p> <pre><code>'sliding is null. sliding.style.height = parseInt(sliding.style.height)+1+'px';' </code></pre> <p>No matter what I do i can't get rid of it. The thing is if I define sliding as a totally different id, (for example I made a random little div outside of everything), it working. </p> <p>This error shows when I try to access the divs, it just made that it throws a hissy fit. Anyone see any errors in my code? Cheers</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload