Need help figuring this out? I'm attempting to implement a page slide method from this
http://jsfiddle.net/XNnHC/942/
$(document).ready(function()
{
var slider_width = $('.pollSlider').width();//automatically get width
$('#pollSlider-button').click(function() {
if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
{
$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width});
}
else
{
if(!$(this).is(':animated'))//prevent double click to double margin
{
$('.pollSlider,#pollSlider-button').animate({"margin-right": '+='+slider_width});
}
}
});
});
I have been trying with this approach:
http://jsfiddle.net/ejkim2000/f7DVK/
But I've encountered some issues.
The first problem is the trigger button place receiving a margin, causing the text after place to be displaced. I removed #pollSlider-button in this piece of code:
$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width}); }
To remove the margin from the button but ended up with the sliding page continuing to move right. Is there a way to make the sliding page work without adding margin to the button?
Another issue is that I added another button on the slide page for closing action, but it doesn't seem to work and I can't figure out why. Hopefully, someone can assist in making this closing button functional.
Just an FYI, I prefer using width and height with CSS for ease in creating a responsive slide page and I would like to extend this method to other directions as well.
Thank you!