Preventing the flipping effect with jquery flippy

Question

Preventing the flipping effect with jquery flippy

Hey there! I've been using a cool flippy jquery plugin that I found on this website. It's working great, but I have run into an issue. When the element flips, I want to include a button on the flip side that takes the user to a different page.

The problem is that if any div inside the flipped element is clicked, it triggers the flipping animation again.

I'm looking for a solution to prevent the flip from happening when a div within the flipped element is clicked.

Check out my code here: http://jsfiddle.net/hw7rP/2/

<div class="left bigbox sponsor">
    <div class="sponsorFlip">
        the front
    </div>

    <div class="sponsorData">
        <div class="ifIgetClickedDontFlip">click me</div>
    </div>
</div>

JavaScript:

$('.sponsorFlip').bind("click",function(){
    var elem = $(this);
    
    if(elem.data('flipped'))
    {
        elem.revertFlip();
        elem.data('flipped',false)
    }
    else
    { 
        elem.flip({
            direction:'lr',
            speed: 350,
            color: '#000',
            onBefore: function(){
                elem.html(elem.siblings('.sponsorData').html());
            },
            onEnd: function(){
                //ajax requests every second
            }
        });
        
        elem.data('flipped',true);
    }
});

Can anyone provide some assistance with this? Thank you!

javascript jquery html css

Answer 1

Answer №1

If you decide to redirect to a different page after flipping, simply click on the page or button again to make it happen.

$('.sponsorFlip').bind("click",function(){
    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
    var elem = $(this);
    // data('flipped') is a flag we set when we flip the element:
    if(elem.data('flipped'))
    {
      // If the element has already been flipped

      // Your code to redirect it to another page goes here.

     }else{ // Using the flip method defined by the plugin:
           elem.flip({
           direction:'lr',
           speed: 350,
           color: '#000',
           onBefore: function(){
            // Insert the contents of the .sponsorData div (hidden
            // from view with display:none) into the clicked
            // .sponsorFlip div before the flipping animation starts:

                       elem.html(elem.siblings('.sponsorData').html());
                      },
              onEnd: function(){
            //iniatiate ajax requests every second
                     }
           });
        // Setting the flag:
        elem.data('flipped',true);
     }
});

Within if(elem.data(flipped)), insert the code to redirect to the desired page.

Answer 2

If you decide to redirect to a different page after flipping, simply click on the page or button again to make it happen.

$('.sponsorFlip').bind("click",function(){
    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
    var elem = $(this);
    // data('flipped') is a flag we set when we flip the element:
    if(elem.data('flipped'))
    {
      // If the element has already been flipped

      // Your code to redirect it to another page goes here.

     }else{ // Using the flip method defined by the plugin:
           elem.flip({
           direction:'lr',
           speed: 350,
           color: '#000',
           onBefore: function(){
            // Insert the contents of the .sponsorData div (hidden
            // from view with display:none) into the clicked
            // .sponsorFlip div before the flipping animation starts:

                       elem.html(elem.siblings('.sponsorData').html());
                      },
              onEnd: function(){
            //iniatiate ajax requests every second
                     }
           });
        // Setting the flag:
        elem.data('flipped',true);
     }
});

Within if(elem.data(flipped)), insert the code to redirect to the desired page.

Answer 3

Answer №2

To ensure that the element clicked or any of its parent elements do not have the class .doNotFlipMe, and if they do, prevent flipping. Simple!

HTML:

<div class="left bigbox sponsor">
    <div class="sponsorFlip">the front</div>
    <div class="sponsorData">
        <div>Some other content here
            <div class='doNotFlipMe'><a href="www.somesite.com">click me</a>
            </div>
        </div>
    </div>
</div>

Javascript:

$('.sponsorFlip').bind("click", function (e) {
        var elem = $(this);
        if (elem.data('flipped')) {
            targetEl = $(e.target);
            if (targetEl.hasClass('doNotFlipMe') || targetEl.parents('.doNotFlipMe').length) {
                // Do nothing
            } else {
                elem.revertFlip();
                elem.data('flipped', false);
            }
        }

Demo: http://jsfiddle.net/robschmuecker/5EnfW/

Answer 4

To ensure that the element clicked or any of its parent elements do not have the class .doNotFlipMe, and if they do, prevent flipping. Simple!

HTML:

<div class="left bigbox sponsor">
    <div class="sponsorFlip">the front</div>
    <div class="sponsorData">
        <div>Some other content here
            <div class='doNotFlipMe'><a href="www.somesite.com">click me</a>
            </div>
        </div>
    </div>
</div>

Javascript:

$('.sponsorFlip').bind("click", function (e) {
        var elem = $(this);
        if (elem.data('flipped')) {
            targetEl = $(e.target);
            if (targetEl.hasClass('doNotFlipMe') || targetEl.parents('.doNotFlipMe').length) {
                // Do nothing
            } else {
                elem.revertFlip();
                elem.data('flipped', false);
            }
        }

Demo: http://jsfiddle.net/robschmuecker/5EnfW/

Preventing the flipping effect with jquery flippy

Answer №1

Answer №2

Similar questions

What is the best way to retrieve the page slug within the layout file in Next.js, specifically when using the app folder structure?

Exploring the various possibilities of establishing multiple types of many-to-many relationships between two tables using Sequelize technology

Maximizing the power of datatables with ajax integration

What could be causing the failure of isElementPresent function?

Struggling to make the ajax callback function functional?

Angular.js hierarchical model issue: grandchildren functionality not functioning as expected

Tips for anchoring an element when scrolling reaches its highest point

Attempting to dynamically fill a dropdown menu based on the values chosen in the two previous selections

Can you guide me on creating a post and get request using ReactJS, Axios, and Mailchimp?

The Google font feature is causing an issue where text cannot be selected when trying to print a

Browse through different states by clicking on the <a> </a> tag

Challenges faced when subscribing to global events in JavaScript

The webpage containing the authRequired meta briefly flashes on the screen, even if there are no active login sessions on Firebase

The images in Bootstrap 5 are displayed individually on separate lines, even though they could easily be accommodated within a

Using Threejs JSONLoader and OOP to easily add models to a scene post-loading

Ways to break apart a string of text without a regular pattern

Setting up GameClosure on a Windows machine

Ensure that the images in the final row of the flexbox gallery are consistent in size with the rest

What could be causing Jest to prevent me from using the node testing environment, especially when they have made changes to it?

Progress bar for AJAX file loading for Flash player