Step carousel in strange place

[mastubbs]

1) Script Title: Step Carousel Viewer v1.6.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:

Hi all,

Having a slightly odd problem. Im using step carousel on my site which seems to work fine in FF, chrome, safari but not IE for some reason.

Basically what happens is that the belt gets stuck in the wrong part of the page. When i move the cursor over it a few times or click around a bit it jumps back to where it is supposed to be.

I think the reason is that the page (when loading) is quite large because i am also using a tab script, of which the content loads before its javascript files and so for a second all the contents of the page are visible. It seems that during this time the belt loads and takes up position. When the javascript from the tab script kicks in all the tabs' contents (which were stacked up vertically on the page) disappear and so (because the page is vertically centred) everything squashes back up into the middle, but the carousel stays where it is.

Anyone have any ideas?

Is there a way to set the carousel to load last, that way all the resizing and stuff has been done before it loads, so it loads in the right place. I tried to use innerHTML by putting this at the end of the page::::



<script language="javascript">
document.getElementById("loady").innerHTML =

<div class="belt">

<div class="panel">
<div align="center"><a href="http://cart3.jaspers-sensations.com/lingerie/daring/workin4.php?id=prod/workin4a.html" target="_parent"><img src="http://cart3.jaspers-sensations.com/imgs/rescale4/test/15/3221006100.jpg" width="100" height="100" border="0" /></a>
<br>
<span class="style5">Black Lace Triangle Bra With Garter Skirt</span></div>
</div>

<div class="panel">
<div align="center"><a href="http://cart3.jaspers-sensations.com/lingerie/daring/workin4.php?id=prod/workin4a.html" target="_parent"><img src="http://cart3.jaspers-sensations.com/imgs/rescale4/test/15/3221006100.jpg" width="100" height="100" border="0" /></a>
<br>
<span class="style5">Black Lace Triangle Bra With Garter Skirt</span></div>
</div>
</div>
</script>


and this where i want the belt ::::



<div id="mygallery" class="stepcarousel" id="loady"> </div>


But just lost the belt altogether. does anyone with a better understanding of the script itself or javascript know a way.

Thanks

Matt

[ddadmin]

Hmm firstly remove the changes mentioned above to your script. Doing:


document.getElementById("loady").innerHTML =

"HTML here"...

won't work, and will throw a JavaScript error.

Just so I understand correctly, what you want to do is move the HTML for the Step Carousel Viewer from its current location to inside the DIV with ID="mygallery" correct? By default the two should be together already when you copy/paste the code. Any reason why you're initially separating the two?


Is there a way to set the carousel to load last, that way all the resizing and stuff has been done before it loads, so it loads in the right place.

Sure, inside the .js file, try changing the line:


jQuery(document).ready(function($){

to:


jQuery(window).bind("load", function($){

[mastubbs]

Hey thanks for your reply,

I changed the line in stepcarousel.js but it didn't help. I think the problem is that the page itself is is a php page and calls a page from somewhere else to be included. It is this part that contains the tabs system and resizes over the last few seconds, which means that although the carousel is now loading last in the page itself, the include still hasnt finished loading and so it is after this point that the page as a whole takes up its final size.


Just so I understand correctly, what you want to do is move the HTML for the Step Carousel Viewer from its current location to inside the DIV with ID="mygallery" correct? By default the two should be together already when you copy/paste the code. Any reason why you're initially separating the two?

Thats correct. The reason i want to do this is i want the carousel to load last and as i understand it the code of the page is read from top to bottom so if i put the actual carousel code last then it will load up last (hopefully after the page finishes resizing, although i dont even know if thats going to work!). Of course, i want it to load into the correct place on the page, not the bottom, so the idea was that by using .innerHTLM i could place the carousel on the right place on the page rather than at the bottom... if you see what i mean?

Ahh its so frustrating! Do you have any other ideas?

Thanks very much for helping,

Matt

[mastubbs]

Oh no!! :(

I made the jQuery(window).bind("load", function($){ change you suggested but it made the belt turn into a mini-window with scroll bars. I tried to put it back but for some reason it didn't work. i guess i must have done something else but i dont know what :(

I tried to just replace the stepcarousel.js with the latest one v1.6.1, i was using v1.6 before. This took away the scrollbars but i still cant scroll it. when i click the scroll buttons it says "There's an error with your set up of Carousel Viewer "mygallery"!"

Help!!

[mastubbs]

never mind sorted it out... still trying to figure out how to fix the other problem though...

[mastubbs]

Hi,

Still trying to get this to work, any ideas?

[PhilReeves]

hello I am new web designer but my code is working well in Chrome and Firfox but my design splits in IE. Is there specific way of coding for IE?

[jscheuer1]

Please start a new thread for a new question.