idahotallpaul

Thanks Jamie and Jack. I've attached a zip showing what I'm trying to do. All .js, .css and html are in index.html in the folder. So basically, I'm creating an interactive slideshow that lets the user interact with the images, zoom them in for a better look, and save them to their folder. I have a bunch of images in divs. A class on each image div determines it's z-index and width as a percentage of the browser width. Images float from bottom to top of screen. The x position is determined as a percentage of the browser width and is set randomly within a range. I use jquery to loop through the image divs, create a bunch of tweens, and then fire the tweens on interval so that no more than 6 tweens are running at once. As the tweens move from bottom to top, you can click on them to pause them and pop them above the other images. Clicking on the zoom icon creates a new tween to scale the image up via setting the width of it's parent div. It also adds a rotation. Eventually there will be an info pane next to it. Clicking the close button reverses that tween, creates a new bottom to top tween, and uses the progress saved when the tween was stopped before to make the tween continue on it's way. Additionally, you can drag the images to the folder at the bottom of the screen. Later, you'll be able to bring focus to that folder, which will cover the screen and show you the images you'd saved before and let you sort them, remove them, etc. That will mean different styles being applied to the same elements. So the zoom tween is setting the width of the image, and although it is declared as a percentage, and the class that originally sets the width of the image is a percentage, after that zoom tween is reversed, there is a pixel width still sitting on the style attribute of the div. Intuitively, I'd think that if a tween is reversed it'd go back to the original state, which didn't have a width in the style. Additionally, the left is now set to a pixel value and not a percentage. Resizing the browser shows that any images that have been zoomed are now fixed, as the other images scale their widths and locations. I put the top, left, width and rotation along with the z-index in the .zoom class but the top and left won't update for me there. Not sure what the deal is. To summarize, I create a tween, stop it, run a new tween for the zoom, reverse it, and then continue the original tween. After that, values on the style attribute are set to pixels instead of percentages, css properties that have been tweened and reversed are still present and they override stylesheets previously applied. If tweening the class worked reliably and it removed the data on the style attribute on complete, it seems that might solve the problem. Otherwise, it looks like I'll have to write an onComplete method to search for and remove styles manually. It seems it'd be good to have an optional GSAP method to call, or a flag to set on an animation to clear all styles not being animated or clear specific styles. (cleanOnComplete/cleanOnCompleteParams? or TweenMax.cleanStyles(targetObject, [targetStyles])?) That could be set on the tween or called on complete to tidy things up. Again, thanks for your input and help. image-collection.zip

Hey Jack, Worked like a charm! Thanks for the quick fix. When I run the zoom function on my objects, they do a slight rotation. After I zoomed an image out on my ipad, I used a bookmarklet to view the source after the zoom. The z-index was removed from the style attribute, but there were still other attributes that were injected and tweened during the zoom in/out. <div class="top ui-draggable hover" style="-webkit-backface-visibility: hidden; width: 153px; -webkit-transform: translate(0px, 0px); left: 568px; top: 65.75675724572541%; "><img src="assets/images/photos/small/dock.jpg"></div> <div class="middle ui-draggable" style="left: 25%; top: 3.1960432057430097%; "><img src="assets/images/photos/small/massage.jpg"></div> <div class="bottom ui-draggable" style="left: 13%; top: 39.46143888516876%; "><img src="assets/images/photos/small/resort.jpg"></div> As mentioned previously, I'm using TweenMax to animate the top and left css attributes and trying to handle all other styling via stylesheets. Removing the z-index fixes my specific problem, but it seems that since we now have other styles injected into the style attribute that could cause unexpected problems down the road. -webkit-backface-visibility: hidden; width: 153px; -webkit-transform: translate(0px, 0px); Say I have a class I want to add to that "dirty" element that affects the width or rotation. It won't get updated because the style attribute on the div will override it. It seems that it would make sense to have some kind of a cleanup function to track what is managed by css and what is added by the javascript so you can reliably add classes and get expected results. Or would that affect performance too much to track and check all of that? Thanks Jack, Paul

I came across this thread because I was trying to figure out why my code was working differently on ios safari vs chrome or osx safari. It turns out that your fix of adding a z-index to the style attribute messes up the ability to manage z-index sorting via classes. The z-index on the style tag has a greater specificity than the classes and overrides the z-index in the classes. Here's what I'm doing. I have a bunch of divs that I'm tweening across the screen. You can hover/click on them to bring them to the front and give them focus, and you can also click a zoom icon that is added on hover/click to enlarge the image and view a div of details about it. The positioning is all dynamic but I am trying to separate my code as much as possible and am using classes for depth management. The divs are given different classes to manage their z-index and size. .top { width:15%; z-index:500; } .middle { width:20%; z-index:300; } .bottom { width:30%; z-index:100; } On click or hover, a "hover" class is added to the div, the timeScale is tweened to 0 and a zoom icon is added as well. The Hover class changes the z-index of the div so other animating divs pass below it and you can focus on it. Additionally, the objects can be dragged over a drop target (z-index:1100) and zoomed in. .hover { z-index: 1000; } .drag { z-index: 1200; } .zoom { z-index:1300; } On the desktop this was all working fine. On iOS, I was having some weird depth management issues. I ended up creating a function to write to a div the classes and depth of each of the animating divs. Turned out that after a drag or zoom, the z-index on the style attribute would be set to 0, which overwrites the styles being applied in the classes. I understand the need for the hack but now it looks like I'll have to take a bunch of style information out of the stylesheets where it belongs and manage styles in the .js. Hard coding the z-index in the style tag seems like a pretty big casualty and will have a lot of people scratching their heads when things break on their iPad. If this is something that needs to be done, would it be possible to find out if the z-index is being set in a class already, use that value in the style tag during the animation, and remove it on complete? Thanks Jack, and thanks for bringing the library to .js.

Thanks for the input. I ended up creating one loader, and then on interval, I'm calling the .unload () function and then .load (). _xmlLoader = new XMLLoader("../xml/usage.xml", {name:"chartXML", noCache:true, autoDispose:false, onComplete:completeHandler}); _xmlLoader.load(); // later, on my timer interval: _xmlLoader.unload(); _xmlLoader.load(); Does _xmlLoader.load (true) do the same thing, or are they different in any way? Thanks.

Hi. I'm building a kiosk application that needs to reload a piece of xml data every 3 minutes to update a realtime chart. I obviously want to make sure that the xml data is not being cached by the browser and want to make sure that everything is being garbage collected. What is the recommended workflow for this? Is it best to create a new XMLLoader each time I'm fetching the new data and pass it the autoDispose parameter? Or can I create one XMLLoader, pass it a noCache parameter, and call _myXMLLoader.load () on interval? If there's a bit of sample code you could point me to, I'd appreciate it. Thanks all, and thanks Jack for making my life easier.