1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Rotate Card by Link instead of whole card

Daniel pro asked 8 years ago

Hello Perhaps you have a idea how this element: http://mdbootstrap.com/components/cards/#section6 (rotating card) Could be made rotate by "click on the Link" instead of "click on the card"? It would be nice to use for a Profile > Click on Edit > it Rotates > you edit/submit > rotate back For this feature I need to restrict the event on the link only. Can this be done? I have seen it with other frameworks, as example here: http://demos.creative-tim.com/rotating-card

Michal Szymanski staff answered 7 years ago

Hi, this topic is outdated. Rotating card are working now as expected if you follow our documentation. Remember please - we provide our users SUPPORT if something doesn't work as expected according to MDB documentation. If you need a custom feature - you need to develop it on your own or submit a feature request - then we'll consider to implement it in the future.

Fitrepreneur pro answered 7 years ago

Hello MDB - First, Michal - the external button you created on the Cards page is not working & you did not include the code <here it is> <i class="fa fa-share-alt"></i> Now my question(s) I am going to take this to the next level and add a level of difficulty to it: 1) I would like to use a class="btn-group" and type="radio" for my buttons AND 1a) I would like for it to rotate three cards in a group ;-) Jonathan

Dawid Adach pro answered 8 years ago

@Daniel Actually we didn't build it ourselves. We are using bbpress plugin to maintain our forum and apparently it's coming with @mentions out of the box. Dawid

Daniel pro answered 8 years ago

Hey, I notice something... You use @mentions here. They auto-create Links to profiles... Can you tell me more about this? I implemented a working solution using @mentions (with auto-suggest!!) using GitHub markdown (:,# and @) and a JS Library (AtWho.js) But i'm not happy, as I can only mention peoples but yet not link to profiles automatically. I suppose you regex the_content and look for @user_names? Or do you create WP Tags on the fly, as the WP Theme P1/P2 does? That is advanced DEV I know but who knows, you could do a TUT or something :P

Daniel pro answered 8 years ago

@Michal this is amazing stuff- Now I have to figure out how to make the Width and Height of those Cards "dynamic" (means, auto-adjusting to my dynamic content) I think so far I can do :D Thank you so much for your attentions, Support and MDB.

Michal Szymanski staff answered 8 years ago

Here is a ready solution for you. Works with the latest MDB vesrion: New rotating cards

Michal Szymanski staff answered 8 years ago

OK, here is an easier way: 
<script>
        $('button').click(function () {
            $('.card1').toggleClass('flipped');
        });
    </script>
Where 'button" is a button which you use to flip the card. It's enough you add this code below script section. But it will still rotate also when clicking a card. If you want to keep only 'button' way, you have to remove this code from MDB.js file: 
/* ROTATING CARDS */
(function () {
    var cards = document.querySelectorAll(".card1.effect__click");
    for (var i = 0, len = cards.length; i < len; i++) {
        var card1 = cards[i];
        clickListener(card1);
    }

    function clickListener(card) {
        card.addEventListener("click", function () {
            var c = this.classList;
            c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
        });
    }
})();

dward free answered 8 years ago

Could you provide a little more detail here please?

Michal Szymanski staff answered 8 years ago

It's possible, you have to play a little with that code and change a click listener: 
/* ROTATING CARDS */
(function () {
    var cards = document.querySelectorAll(".card1.effect__click");
    for (var i = 0, len = cards.length; i < len; i++) {
        var card1 = cards[i];
        clickListener(card1);
    }

    function clickListener(card) {
        card.addEventListener("click", function () {
            var c = this.classList;
            c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
        });
    }
})();
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
card rotate
About author
Daniel
Pro User 10Support score
15Questions 21Answers 0Snippets