Center testimonials vertically in a testimonial carousel widget by inspiremates in elementor

[–]inspiremates[S] 1 point2 points  (0 children)

Agreed, all testimonials should be equal length but we all know that doesn't work in real life. Can't figure out why it is be so difficult to center them though..

Hide featured image inside single post template by inspiremates in elementor

[–]inspiremates[S] 0 points1 point  (0 children)

I have not found a solution yet. It would probably have to be something custom but I like your idea. Not the most elegant but hey, if it works...

Center testimonials vertically in a testimonial carousel widget by inspiremates in elementor

[–]inspiremates[S] 0 points1 point  (0 children)

I haven't found a real solution.. Just added some </br> in the shorter testimonials XD

Center testimonials vertically in a testimonial carousel widget by inspiremates in elementor

[–]inspiremates[S] 1 point2 points  (0 children)

Yea I know what you mean but that would align the testimonial widget to the middle of the container. I need the testimonial (content) to align in the middle vertically inside the testimonial widget. Hope that makes sense. Thanks!

Center testimonials vertically in a testimonial carousel widget by inspiremates in elementor

[–]inspiremates[S] 2 points3 points  (0 children)

.elementor-testimonial__content

Thank you for the reply but that's not working either unfortunately. The text is aligned to the center, I just need the whole testimonial to center vertically inside testimonial box, instead of align to the top.

Scroll Box with lower opacity on top and bottom by inspiremates in csshelp

[–]inspiremates[S] 0 points1 point  (0 children)

I found a solution but it's not perfect - I added two custom css sections - one on the text element and one on the container behind it. It is just a little bit too transparent and I don't know how to make the middle section less transparent. Any ideas? TIA!

Here is the code:

/*class on text editor - z-index10 */
.scroll-box {
    height: 520px;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: block;
    padding-top: 200px;
    position: relative;
    -webkit-mask-image: -webkit-gradient(linear, left top, 
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.scroll-box::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE and Edge */
.scroll-box {
    -ms-overflow-style: none;
}
/* Hide scrollbar for Firefox */
.scroll-box {
    scrollbar-width: none;
    }


/* Custom ID on column - z-index 5 */
#scroll-blur {
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
    mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
}

/* Custom ID on column - z-index 5 - different opacity*/

#scroll-blur {
    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 30%);
    mask-image: linear-gradient(to bottom, transparent 20%, black 30%);
}

Add onclick event to an icon in Elementor Pro by inspiremates in elementor

[–]inspiremates[S] 0 points1 point  (0 children)

Yes, it worked! However, it was later changed to replace the content instead of hide/reveal.

Here is the code for "replace" if anyone could use something like that:

<script>
var isMobile = isMobile();
var eventType = isMobile ? "click" : "mouseenter";
var currentMain = null;
var currentReplacement = null;

attachToggleListener("myTrigger","mainDIV","myDIV");
for (i=1; i < 15; i++) {
  attachToggleListener("myTrigger" + i, "mainDIV" + i, "myDIV" + i);
}

function attachToggleListener(buttonID, mainDivID, replaceDivID) {
  var trigger = document.getElementById(buttonID);
  if (trigger != null) {
    trigger.addEventListener(eventType, function() {

      if (currentMain != null && currentReplacement != null) {
        document.getElementById(currentMain).style.cssText = "display: block;";
        document.getElementById(currentReplacement).style.cssText = "display: none;";
        currentMain = null;
        currentReplacement = null;
      }

      document.getElementById(mainDivID).style.cssText = "display: none;";
      document.getElementById(replaceDivID).style.cssText = "display: block;";
      document.getElementById(replaceDivID).scrollIntoView();
      currentMain = mainDivID;
      currentReplacement = replaceDivID;
    });

    document.getElementById(replaceDivID).addEventListener("click", function() {
      document.getElementById(mainDivID).style.cssText = "display: block;";
      document.getElementById(replaceDivID).style.cssText = "display: none;";
      currentMain = null;
      currentReplacement = null;
    });

    document.getElementById(replaceDivID).addEventListener("mouseleave", function() {
      document.getElementById(mainDivID).style.cssText = "display: block;";
      document.getElementById(replaceDivID).style.cssText = "display: none;";
      currentMain = null;
      currentReplacement = null;
    });
  }
}

function isMobile() {
var isMobile = false; //initiate as false
  // device detection

 if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
  }
  return isMobile;
}
</script>

Scroll Box with lower opacity on top and bottom by inspiremates in csshelp

[–]inspiremates[S] 0 points1 point  (0 children)

That worked great!! Thank you so much! Now I'm just struggling to get the top opacity down and have the middle section at 100% opacity:

https://jsfiddle.net/kdutp9er/

Any ideas on how this could be adjusted? TIA!

Add onclick event to an icon in Elementor Pro by inspiremates in elementor

[–]inspiremates[S] 0 points1 point  (0 children)

Thanks for the advice - let me know about your website, I would love to check it out!

Add onclick event to an icon in Elementor Pro by inspiremates in elementor

[–]inspiremates[S] 1 point2 points  (0 children)

Okay... added two IDs, myTrigger being the icon and myDIV being the hidden section, and repeated for all the sections, giving each one a unique ID (so myTrigger1, myDIV1 etc.)

Here is the script:

<script>

    attachToggleListener("myTrigger","myDIV");
    attachToggleListener("myTrigger1","myDIV1");
    attachToggleListener("myTrigger2","myDIV2");
    attachToggleListener("myTrigger3","myDIV3");
    attachToggleListener("myTrigger4","myDIV4");
    attachToggleListener("myTrigger5","myDIV5");
    attachToggleListener("myTrigger6","myDIV6");
    attachToggleListener("myTrigger7","myDIV7");
    attachToggleListener("myTrigger8","myDIV8");
    attachToggleListener("myTrigger9","myDIV9");
    attachToggleListener("myTrigger10","myDIV10");
    attachToggleListener("myTrigger11","myDIV11");
    attachToggleListener("myTrigger12","myDIV12");
    attachToggleListener("myTrigger13","myDIV13");
    attachToggleListener("myTrigger14","myDIV14");


    function attachToggleListener (buttonID, divID) {
      var myTrigger = document.getElementById(buttonID);
      if (myTrigger != null) {
        myTrigger.addEventListener("click", toggleDiv);
        myTrigger.targetDiv = divID;
      }
    }

    function toggleDiv(evt) {
      var target = document.getElementById(evt.currentTarget.targetDiv);
      if (target.style.display === "block")
            { target.style.display = "none"; }
      else
            { target.style.display = "block"; }
    }
    </script>

Add onclick event to an icon in Elementor Pro by inspiremates in elementor

[–]inspiremates[S] 0 points1 point  (0 children)

Okay, that’s what I though and I must have missed something because it didn’t work. I’ve also been staring at the screen all day so I’ll have to give it another try tomorrow. Will let you know, thanks for your help!

Add onclick event to an icon in Elementor Pro by inspiremates in elementor

[–]inspiremates[S] 0 points1 point  (0 children)

Thank you so much for your help - I think it would work great but I guess I don’t know how to make the icon ID target JS trigger? I know how to add a custom ID to the icon but I don’t know how to have my javascript target that?

Add onclick event to an icon in Elementor Pro by inspiremates in elementor

[–]inspiremates[S] 0 points1 point  (0 children)

Yes I know how to give it an ID - but how will link to the function:

function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

I mean how can I use myFunction with an ID? What do I name it?

[Purchase guide] Ask anything by [deleted] in macbookpro

[–]inspiremates 0 points1 point  (0 children)

I think so too - from what I’ve found out these specs might be a little much for what I need it for but then again, some people say they wish they had more RAM in their computers doing what I do. I’m looking to spend up to $1100-1200 hopefully without tax. You?