Disable the moving of the DIV button with a left-margin of 0px

Question

Disable the moving of the DIV button with a left-margin of 0px

Having a bit of a challenge here. I'm attempting to craft my own slider using jQuery along with some css and javascript.

I've managed to get my slider functioning, moving a Div 660px to the left and right upon button clicks.

However, I'm hoping to disable the right button when the left margin reaches 0. Additionally, I'd like the entire div to reset back to 0px after a certain number of clicks.

Is this achievable?

Below is the code I'm currently using:

<script language="javascript">
            function example_animate(px) {
                        $('#slide').animate({
                            'marginLeft' : px
                });
            }
        </script>
        <div class="container">
            <div class="row">
                <div class="contr-left">
                    <a type="button" value="Move Left" onclick="example_animate('-=600px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
                </div>
                <div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
                    <div class="wrapper-outer">
                        <div class="wrapper-inner" id="slide">
                            <?php get_template_part('loop-reviews');?>
                        </div>
                    </div>
                    <div class="contr-right">
                        <a type="button" value="Move Right" onclick="example_animate('+=600px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
                    </div>
                </div>
            </div> 
        </div>

The code I'm utilizing can be found on this page: Page

After applying the code from Rayn, the button now hides, but unfortunately, it doesn't reappear when the left-margin is set to 1px. Hence, I am now attempting the following solution: (although it does not work)

Trying this now: (does not work though) `function example_animate(px) {

                $('#slide').animate({
                    'marginLeft' : px
        });
       var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
       if(slidemarginleft == '0px'){
          $('.contr-right').hide();
      } else (slidemarginleft == '1px') {
            $('.contr-right').show();
         }
       }`

Additionally, I've noticed that the margin-left property isn't defined in the style sheet but within the

<div style="margin-left:0px">content</div>

javascript jquery html css

Answer 1

Answer №1

To ensure that the element has a margin of 0px after each click, you can incorporate an if statement in the code.

    function animated_example(px) {

                    $('#sliding').animate({
                        'marginLeft' : px
            });
           var slide_margin_left = $('#sliding').css('margin-left'); //retrieves the margin-left value
           if(slide_margin_left == '0px'){
              $('.right-control').hide();
             }
           }

Answer 2

To ensure that the element has a margin of 0px after each click, you can incorporate an if statement in the code.

    function animated_example(px) {

                    $('#sliding').animate({
                        'marginLeft' : px
            });
           var slide_margin_left = $('#sliding').css('margin-left'); //retrieves the margin-left value
           if(slide_margin_left == '0px'){
              $('.right-control').hide();
             }
           }

Answer 3

Answer №2

Implement this

function animate_example(px) {
                    $('#slide').animate({
                        'marginRight' : px
            });
            if($('.xman').css("marginRight")=='0px'){
                $('.contr-left').attr('disabled',true);
           }
        }

Answer 4

Implement this

function animate_example(px) {
                    $('#slide').animate({
                        'marginRight' : px
            });
            if($('.xman').css("marginRight")=='0px'){
                $('.contr-left').attr('disabled',true);
           }
        }

Answer 5

Answer №3

Deactivate Button on Margin-Left: 0px

To prevent a button from being clicked when the margin-left property is set to 0px, you can utilize the .prop() method in jQuery. Here is a simple example in pseudo code:

function deactivateButton() {
 $(element).prop('disabled', true);
}
function checkMargin() {
if ($(element).css("margin-left") === "0px") {
 deactivateButton()
}
}
checkMargin()

Reset to 0px after a series of clicks

To reset the margin-left back to 0px after a certain number of clicks, you can track the number of clicks and trigger a function once the threshold is reached. Here is a pseudo code example:

var threshold = 5
var clicks = 0

$(element).click(function(){
clicks++
if (clicks === 5) {
resetMargin();
}
clicks - 5
})

function resetMargin() {
 $(element).css( "margin-left", "0" );
checkMargin()
}

Answer 6

Deactivate Button on Margin-Left: 0px

To prevent a button from being clicked when the margin-left property is set to 0px, you can utilize the .prop() method in jQuery. Here is a simple example in pseudo code:

function deactivateButton() {
 $(element).prop('disabled', true);
}
function checkMargin() {
if ($(element).css("margin-left") === "0px") {
 deactivateButton()
}
}
checkMargin()

Reset to 0px after a series of clicks

To reset the margin-left back to 0px after a certain number of clicks, you can track the number of clicks and trigger a function once the threshold is reached. Here is a pseudo code example:

var threshold = 5
var clicks = 0

$(element).click(function(){
clicks++
if (clicks === 5) {
resetMargin();
}
clicks - 5
})

function resetMargin() {
 $(element).css( "margin-left", "0" );
checkMargin()
}

Answer 7

Answer №4

After incorporating your suggestions, here is the updated code:

<script>
        function animateSlide(px) {

                    $('#slide').animate({
                        'marginLeft' : px
            });
           var slideMarginLeft = $('#slide').css('margin-left'); // getting the margin-left value
           if(slideMarginLeft < '-3000px'){
              $('#slide').animate({marginLeft: '0px'}, 400);
             } 
           var hide = $('#slide').css('margin-left'); // getting the margin left value
           if(hide >= '-50px'){
              $('.contr-left').addClass('showMe');
             }
           var hideMe = $('#slide').css('margin-left'); // getting the margin left value
           if(hideMe <= '-50px'){
              $('.contr-left').removeClass('showMe');
             }
           }
</script>
<!-- /Review script -->

<section id="reviews">
    <div class="container">
        <div class="row">
            <div class="container">
                <div class="row">
                    <h4>Reviews</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
            <div class="row">
                <div class="col-sm-1" style="width:40px;">
                    <div class="row">
                        <div class="contr-left">
                            <a type="button" value="Move Left" onclick="animateSlide('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-10">
                    <div class="row">
                        <div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
                            <div class="wrapper-outer">
                                <div class="wrapper-inner" id="slide" style="margin-left:0px;">
                                    <?php get_template_part('loop-reviews');?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-1" style="width:40px;">
                    <div class="row">
                        <div class="contr-right">
                            <a type="button" value="Move Right" onclick="animateSlide('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="<?php site_url(); ?>/reviews"><div class="btn btn-06">View all reviews</div></a>
        </div>
</section>

Answer 8

After incorporating your suggestions, here is the updated code:

<script>
        function animateSlide(px) {

                    $('#slide').animate({
                        'marginLeft' : px
            });
           var slideMarginLeft = $('#slide').css('margin-left'); // getting the margin-left value
           if(slideMarginLeft < '-3000px'){
              $('#slide').animate({marginLeft: '0px'}, 400);
             } 
           var hide = $('#slide').css('margin-left'); // getting the margin left value
           if(hide >= '-50px'){
              $('.contr-left').addClass('showMe');
             }
           var hideMe = $('#slide').css('margin-left'); // getting the margin left value
           if(hideMe <= '-50px'){
              $('.contr-left').removeClass('showMe');
             }
           }
</script>
<!-- /Review script -->

<section id="reviews">
    <div class="container">
        <div class="row">
            <div class="container">
                <div class="row">
                    <h4>Reviews</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
            <div class="row">
                <div class="col-sm-1" style="width:40px;">
                    <div class="row">
                        <div class="contr-left">
                            <a type="button" value="Move Left" onclick="animateSlide('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-10">
                    <div class="row">
                        <div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
                            <div class="wrapper-outer">
                                <div class="wrapper-inner" id="slide" style="margin-left:0px;">
                                    <?php get_template_part('loop-reviews');?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-1" style="width:40px;">
                    <div class="row">
                        <div class="contr-right">
                            <a type="button" value="Move Right" onclick="animateSlide('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="<?php site_url(); ?>/reviews"><div class="btn btn-06">View all reviews</div></a>
        </div>
</section>

Disable the moving of the DIV button with a left-margin of 0px

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Surprising outcome when attempting to load a partial view into an Internet Explorer 8 DOM using jQuery Ajax

Retrieving various sets of JSON objects arrays

Navigating from a view to a controller in MVC to reach a different view: a step-by-step guide

How to use JavaScript to retrieve extensive data streams (exceeding 1GB) from the internet

Can we access an element within the document using its context?

What is the reason my bootstrap carousel isn't functioning properly?

Creating a basic live data visualization chart

Extract data from a website with Python and selenium

In my React JS class component, I am looking to have the image display switch each time the button is clicked

Using PHP regular expressions to find the final occurrence trailing after the last match in HTML

using percentage and float to enforce overflow-x

Error in PromisifyAll: Callback parameter must be a function

I'm utilizing bootstrap to design a slider, but the length of the second div inside it is longer than the slider div

Javascript code for scrolling to the top isn't functioning as expected

Adding content to a text field and then moving to the next line

"Using Bootstrap's toast feature repositions every element on the

An error occurred while trying to access the 'length' property of an undefined value in a code using ColdFusion and jQuery DataTable

Problem with CSS layout on Internet Explorer 9

Guide on generating a fresh array of objects that encompass distinct items, alongside their combined prices and quantities using JavaScript

Hyperlinks functioning properly in Mozilla Firefox, yet failing to work in Internet Explorer