Encountering an issue with dynamically unbinding and binding elements using jQuery.
Currently working on creating a mobile tabbing system where users can navigate using left and right arrows to move content within ul.tube. The right arrow shifts the ul.tube to margin-left: -300px, and the left arrow shifts it to margin-left: 300px.
The problem arises when hitting the maximum -900px on the left shift, causing the right arrow to be unbound. I want to rebind the right arrow when clicking the left arrow after reaching
-900px</code, enabling users to seamlessly tab back and forth between directions.</p>
<p><a href="https://i.sstatic.net/yWymM.jpg" rel="nofollow">Example Screenshot</a></p>
<p>Here is an example of the HTML code:</p>
<pre><code><div id="how-we_set">
<i class="fa fa-chevron-left left"></i><br>
<i class="fa fa-chevron-right right"></i><p></p>
<ul class="tube">
<li>Discovery</li>
<li>Discovery 2</li>
<li>Discovery 3</li>
<li>Discovery 4</li>
</ul>
<div id="tab1">
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
</div>
<div id="tab2">
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
</div>
<div id="tab3">
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
</div>
<div id="tab4">
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
<div><span>This is some text</span>This is some text</div>
</div>
</div>
Below is the current JavaScript utilized:
// MOBILE DESIGN TAB
$('#how-we_set i.right').click(function handler() {
$("#how-we_set ul.tube li").addClass("active");
$("#how-we_set i.left").css('color', 'rgba(0,0,0,1.0)');
$('#how-we_set ul.tube').animate({
'marginLeft' : "-=300px"
},
function () {
if ($(this).css ('marginLeft') >= "-900px") {
$("#how-we_set i.right").unbind('click', handler);
$("#how-we_set i.right").css('color', 'rgba(0,0,0,0.2)';
}
});
});
$('#how-we_set i.left').click(function handler2() {
$("#how-we_set i.right").css('color', 'rgba(0,0,0,1.0)');
$('#how-we_set ul.tube').animate({
'marginLeft' : "+=300px"
},
function () {
if ($(this).css ('marginLeft') >= "0px") {
$("#how-we_set i.left").unbind('click');
$("#how-we_set i.left").css('color', 'rgba(0,0,0,0.2)');
}
});
$('#how-we_set i.right').bind(handler);
});
Upon reviewing the provided screenshot, aiming to achieve seamless tabbing experience for all content below on arrow clicks.
Seeking guidance on improving functionality as expected. Open to innovative suggestions.