javascript - jQuery to slide a div right to left slides the div out of window -
i have created slider slides right left. changing margin-right
make slide work.
as per requirement, have treeview, when user clicks on node, opens sliding dialog controls in it. when user clicks on node, should first close open dialog , open dialog selected node. able make work when user clicks on node, dialog opens, , when user click again on same node or slider-button, dialog hides. somehow, code hide when user click on other node doesn't work properly. moves slider-button , dialog away , don't see anything.
i used following code:
if($('#slider-button').css("margin-right") == "400px") { $(sliderdialog).animate({"margin-right": '-=400'}); $('#slider-button').animate({"margin-right": '-=400'}); } else{ $(sliderdialog).animate({"margin-right": '+=400'}); $('#slider-button').animate({"margin-right": '+=400'}); }
i thought, simple finding if selected dialog different current call same code hides dialog when user clicks on same node again. ie.
$(sliderdialog).animate({"margin-right": '-=400'}); $('#slider-button').animate({"margin-right": '-=400'});
but, behaves weird. anyone, missing here?
here jsfiddle.
using dom , such had, i've updated js switch between them after animating (here fiddle in action):
var sliderdialog = "#dvprioritydialog" function slideit() { var sliderid = '#' + $('.pollslider.open').attr('id'); var slidewidth; if ($('.pollslider').hasclass('open')) { slidewidth = $('.pollslider.open').width(); $('.pollslider.open').animate({"margin-right": '-=' + slidewidth}, function() { if (sliderid != sliderdialog) { slideit(); } }); $('#slider-button').animate({"margin-right": '-=' + slidewidth}); $('.pollslider.open').removeclass('open'); } else { slidewidth = $(sliderdialog).width(); $(sliderdialog).addclass('open'); $('#slider-button').animate({"margin-right": '+=' + slidewidth}); $(sliderdialog).animate({"margin-right": '+=' + slidewidth}); } } function bindcontrols() { $('#slider-button').click(function() { slideit(); }); $("#lipriority").click(function() { sliderdialog = "#dvprioritydialog"; slideit(); }); $("#lifasting").click(function() { sliderdialog = "#dvfastingdialog"; slideit(); }); } // init; $(document).ready(function() { bindcontrols(); });
Comments
Post a Comment