Javascript problem

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|399\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> Javascript problem
Tue, 13 Mar 2012, 14:19
spinal	1. Please don't tell me to use jQuery, I'm not going to. 2. The actual question... Say I have the following on a page. Each of the 'slide' divs can have as many or as few items in it as wanted. There can also be as many or as few 'slides' as wanted. <div id="mySlide"> <div class="slide"> <img class="background" src="1.jpg"> <img class="layer" src="11.png"> <img class="layer" src="12.png"> </div> <div class="slide"> <img class="background" src="2.jpg"> <img class="layer" src="21.png"> <img class="layer" src="22.png"> <img class="layer" src="23.png"> </div> </div> --v and I have the following (broken) script... var top_level_div = document.getElementById('mySlide'); var slides = top_level_div.getElementsByClassName('slide'); for(var temp=0; temp < slides.count; temp++){ var backgrounds = slides[temp].getElementsByClassName('background'); for(var temp1=0; temp1 < backgrounds.count; temp1++){ backgrounds[temp1].style.position="absolute"; backgrounds[temp1].style.left = (tempwidth)-scroll1+'px'; var layers = backgrounds[temp1].getElementsByClassName('layer'); for(var temp2=0; temp2 < layers.count; temp2++){ layers[temp2].style.position="absolute"; layers[temp2].style.left = (tempwidth)-scroll2+'px'; } } } --v As you can probably tell, I'm trying to change the x position of each of the items labeled as 'background' or 'layer'. I assume I'm over complicating things a little, but... Am I attempting this the 'correct' way? (it doesn't work)... Any help appreciated Thanks. -=-=- Check out my excellent homepage!
Tue, 13 Mar 2012, 14:27
CodersRule	It seems at a glance that your problem is that you're trying to access layer images from INSIDE the background image... I haven't fiddled with the script yet, but It looks like you just need to move the 'layers' for loop outside of the 'background' for loop.
Tue, 13 Mar 2012, 14:29
Stealth	Do you have a reason for avoiding jQuery?
Tue, 13 Mar 2012, 14:40
JL235	Make sure the parent div has a position set to something other then static, which is the default. Relative is a good one to use if you don't want the position to actually effect the element. Width, scroll1 and scroll2 also don't seem to be in scope. Ensure these actually exist, or they will be undefined. You can also use Document.querySelectorAll to select multiple items, rather then doing lots of loops. i.e. backgrounds = document.querySelectorAll( '#mySlide .slide .background' ); --v However I still don't quite understand what it is that you are building. var slides = $('#mySlide .slide .background').each( function(i) { $(this). style({ position: 'absolute', left: iwidth-scroll1 }). children( '.layer' ).each( function() { $(this). style({ position: 'absolute', left: iwidth - scroll2 }); } ); } ); --v ...
Tue, 13 Mar 2012, 14:41
CodersRule	Your other issue was that NodeLists have no count property: you were looking for the length property. This is a version of the script that (probably) does what you are expecting it to. <script> scroll1 = 0; scroll2 = 180; width = 800; var top_level_div = document.getElementById('mySlide'); var slides = top_level_div.getElementsByClassName('slide'); for(var temp=0; temp < slides.length; temp++){ var backgrounds = slides[temp].getElementsByClassName('background'); for(var temp1=0; temp1 < backgrounds.length; temp1++){ backgrounds[temp1].style.position="absolute"; backgrounds[temp1].style.left = (tempwidth)-scroll1+'px'; } var layers = slides[temp].getElementsByClassName('layer'); for(var temp2=0; temp2 < layers.length; temp2++){ layers[temp2].style.position="absolute"; layers[temp2].style.left = (tempwidth)-scroll2+'px'; } } </script> --v I assume you want to scroll the layers and the background at the same time, so you'd probably only want to use one "scroll" variable.
Tue, 13 Mar 2012, 14:42
spinal	... slides.count returns 'undefined' - it's not even getting to the backgrounds/layers part -=-=- Check out my excellent homepage!
Tue, 13 Mar 2012, 14:53
TheMadProff	I'm not sure if this is what you're looking for, but it should (probably) work: Have overflow:hidden; set in the css for objects with the slide class, have a larger div inside the slide class div, and then use something based on: document.getElementById('mySlide').scrollBy(x,0); --v That should have the effect of moving the x co-ordinate of the images... -=-=- ''It works, but I'm not sure why it works...''
Tue, 13 Mar 2012, 14:56
spinal	forget my above comment, thats what I get for not knowing a lot of javascript, should be slides.length, not count... -=-=- Check out my excellent homepage!