Behaviors

[lew2937]

Can anyone tell me how to recreate the main picture portion of this site where the image slides in from the side (or something pretty close to it)?I know this was built in Flash, but i'm recreating this site for a client who wants something similar in HTML. It's okay if it's not identical. Right now, I have the Grow/Shrink behavior, but they would like to see something a little more like the slide that is simpler.I've tried the slide behavior, but it makes me apply it to a <div> and then I can't figure out how to make it happen onLoad, only onClick.Any help would be greatly appreciated. Thanks!original sitehttp://www.ivyla.com (any of the subpages)current recreated sitehttp://www.ivyla.com/company.html

[Shonumi]

I assume you're using JS to do most of the heavy lifting for the image manipulation correct? You can easily make an image slide in around a page, so long as you've set it to absolute positioning, and then it should be very similar to how you did the grow and shrink effects. But as I can see, in the Flash version, it pops out as if coming out of the left most column. To recreate this in HTML, you could try to use Z-Indexes. Just make sure the <div> you have named as "mainContent" has a larger Z-Index than the image you want to translate, and also make sure all the rest of the content has a smaller Z-Index than the image. So when the image starts moving, it's partially covered up as it comes out, which would best recreate how the Flash version works. Also At least those are my thoughts. Lastly, you can set whatever function you need to run for onload and have it manipulate whatever elements on the page you need with document.getElementsById() and selecting the appropiate element you need.

[lew2937]

Yes to JS. I will try some of that. I'm pretty new at all of this scripting, so I will see what i can do. I'm sure it will take several tries. I may post back some questions. Thanks!

[Synook]

By behaviours do you mean events? onload is an event.

[lew2937]

Yes - behaviors is what I had tried for the slide, onLoad for the event.I am still working on the above suggestion. However, everything that I've read says to avoid AP Elements and I'm not sure how to get them to work when the page resizes and i want it to stay centered.

[lew2937]

I assume you're using JS to do most of the heavy lifting for the image manipulation correct? You can easily make an image slide in around a page, so long as you've set it to absolute positioning, and then it should be very similar to how you did the grow and shrink effects. But as I can see, in the Flash version, it pops out as if coming out of the left most column. To recreate this in HTML, you could try to use Z-Indexes. Just make sure the <div> you have named as "mainContent" has a larger Z-Index than the image you want to translate, and also make sure all the rest of the content has a smaller Z-Index than the image. So when the image starts moving, it's partially covered up as it comes out, which would best recreate how the Flash version works. Also At least those are my thoughts. Lastly, you can set whatever function you need to run for onload and have it manipulate whatever elements on the page you need with document.getElementsById() and selecting the appropiate element you need.

When you say that you can make it slide around a page, is this using the timeline? Then I think it has to be an AP Element, but I keep reading that you shouldn't use those. Regardless of that, I can't get the APElement to stay where I want when the page resizes. I tried percentages and pixels, but not too much luck, so I must be doing something wrong. Are Z-Indexes relative to the CSS style sheet or to the page their in? on the left i have a ".leftcolumnText" that's in one CSS Style Sheet, but the ,"mainContent" and the image I'm putting in are in <div>s in another CSS style sheet. From what you're saying, .leftcolumnText would have a Z-index of 1, the main image -2 and the .mainContent 3?Thanks for your help. Happy Thanksgiving

[lew2937]

I assume you're using JS to do most of the heavy lifting for the image manipulation correct? You can easily make an image slide in around a page, so long as you've set it to absolute positioning, and then it should be very similar to how you did the grow and shrink effects. But as I can see, in the Flash version, it pops out as if coming out of the left most column. To recreate this in HTML, you could try to use Z-Indexes. Just make sure the <div> you have named as "mainContent" has a larger Z-Index than the image you want to translate, and also make sure all the rest of the content has a smaller Z-Index than the image. So when the image starts moving, it's partially covered up as it comes out, which would best recreate how the Flash version works. Also At least those are my thoughts. Lastly, you can set whatever function you need to run for onload and have it manipulate whatever elements on the page you need with document.getElementsById() and selecting the appropiate element you need.

This does exactly what I want except for 2 things. The first part is, I'd like it to happen onLoad. I don't understand how to use the document.getElementsById() code. I'm sorry.http://www.ivyla.com/temp.htmlThe second, is not as important. I'd like it to come in from the side. I don't know if it's possible to some how just modify the Spry Effects. I've looked at them, but I don't know how to modify it correctly. That said, it would be nice, but if it's more complicated than I can handle, then I can live with it as is, if it would just start onLoad.

[Shonumi]

I'm saying that you can manipulate how an image is on a page using JavaScript to change the x and y values of the image dynamically. This would most be effective if you had the image itself set to absolute positioning through CSS. You'd have to play around with the x and y values initially to figure out which is best to start out with, but once you do that, simple call up a recursive function, probably using some method of timing with setTimeout(), that will increment the x and y values constantly until they reach a certain point where you want it to stop translating. If you haven't read up on it, look up absolute positioning and how you can manipulate anything's x and y position through JavaScript. You could use relative positioning as well, and that might be simpler if you aren't too picky about where exactly it must start moving.http://www.w3schools.com/dhtml/dhtml_dom.asphttp://www.w3schools.com/dhtml/tryit.asp?f...dhtml_imagemoveNote that the example make use of the document.getElementById() property. Basically you can give any element in HTML another property called id, and it should be unique. This specifically identifies an element within your document, and in JavaScript, you can specifically access this said element and manipulate it in a number of way using DOM properties. You can dynamically change most if not all of how it interacts with CSS.http://www.w3schools.com/htmldom/met_doc_getelementbyid.asphttp://www.w3schools.com/htmldom/default.aspLastly, Z indexes apply to the entire current document. Even if you loaded several style sheets, they all affect the same document. And again, you should have the Z indexes set so that the left most column has the highest Z index, the image you want translated has the second highest, and the rest of you document's Z index should be lower than both. Final note, you can still do it with onload, just make sure the function makes use of document.getElementById() so you can specificall choose the image you want to manipulate within your document, and then use a recursive timer (see example above) to translate it across the screen. Hope this makes it alittle more clearer with some code before you.

[lew2937]

Thanks. I would like to be able to do this, but this is way over my head.I've gotten this far. I still need to figure out how to make it move faster, I've already got it already down at 1, how to make it start from the left and then still figure out the z indexeshttp://www.ivyla.com/temp.html

[Shonumi]

In the loop that updates the image position, to make it go faster, increment the variable i by a larger value. i++ simply adds one more to the current value of i, and the setTimeout function won't go all that much faster from 100 to 1, because it's in milliseconds after all. As your code is now, it's starting right where you want it to end, its normal position if there was no JS code, and then moves on infinetely. You need to determine how many iterations will satisfy you and then stop the code, so in starttimer(), a conditional statement, an if statement, should take care of that. I'm going to let you decide what those conditions are.Lastly, set the position back a little, so the image has some more room to run. Call this line

document.getElementById('mainimage').style.left-= /*Some Postive value, you choose */

At the beginning of your script. Experiment with it so that it come from the left most column, and then works its way to where you want it to stop.

[lew2937]

well, i ended up rebuilding the entire page using ap elements, after reading up on them, instead of tables. i suppose it's the way it should be anyhow. i followed some of the above combined with some other reading and now i have this:http://www.ivyla.com/temp.htmlthere's obviously only one problem. Since the border is elastic, i can't cover up the entire image at the left. what should i do now?i'm also still having a problem that "synook" helped me with earlier...the image is flashing prior to loading. previously they instructed me as to how to have it not show using style="display:none; " , but i'm not sure how to apply it with a timeline.thanks again for all of the help.