anythingSlider hidden then shown doesn’t work…

[prot3us]

I have this idea to have a div at the top of the page that is a small image but when it is clicked or a link on the page is clicked the div expands to show the anythingSlider…

Now, the div is set to display:none and then i’m toggling the div to show the anythingSlider div which creates the slider but the slides don’t slide, though the arrows etc. are created. It’s there but it doesn’t work when the containing div is set to display:none then shown.
Or, if I get the toggle script to call the creation of the anythingslider then it works but on toggling closed and open again it makes another one, so it has another row of nav numbers and more cloned slides…

So if I could get the slider to work once it becomes unhidden then that would solve my problem, or if I could get the script to unload the call for creating a slider each time the div is toggled closed. (if that makes sense). So, make it once then destroy it and then make it again when it’s re-opened. But my limited jquery is at an end unfortunately, so I hope you can help.

I can probably make an example to show you, if you need it.

Thanks.
Taz

[jamygolden]

I think we are going to need an example ;p

[prot3us]

Oh, I’ve sorted it now.

instead of jamming two functions into one I’ve created two separate functions that work with the same trigger.

so, instead of

Code:

$(‘#orderingCompressed, #closeFull’).click(function () {
if ($(‘#orderingFull’).is(‘:hidden’)) {
$(‘#orderingFull, #orderingCompressed’).slideToggle();
$(‘.anythingSlider’).anythingSlider({});
} else {
$(“#orderingCompressed, #orderingFull”).slideToggle().unload(“.anythingSlider”)
}
});

I’ve got

Code:

$(‘#orderingCompressed, #closeFull’).click(function () {
$(‘#orderingFull, #orderingCompressed’).slideToggle();
});
$(‘#orderingCompressed’).one(‘click’, function () {
$(‘.anythingSlider’).anythingSlider({}); });
});

you can see on this example page that I made…

http://www.cyber-connexions.co.uk/test/ … gpart.html

I knew that I’d need two functions but I was doing it based on whether the slider div was shown or not (then trying to load the slider and unload it). Now I just create the slider once the first time that the smaller div is clicked. Seems so easy now that it’s done. It also means that I don’t have to keep adding and removing stuff from the DOM which is the route I’d started heading down.

Thanks anyway. I hope this helps someone else too :)

[Author]

Posts