Last active
October 2, 2022 14:58
-
-
Save RR-Helpdesk/8c0893d83444fee2658e412465f32c4e to your computer and use it in GitHub Desktop.
Webflow CSS #webflow #css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| $( function() { | |
| function changeTab() { | |
| var tabName = window.location.hash.substr(1); | |
| var tabEl = $('[data-w-tab="' + tabName + '"]'); | |
| if (tabEl.length) { | |
| tabEl.click(); | |
| } | |
| } | |
| //when page is first loaded | |
| if(window.location.hash){ | |
| changeTab(); | |
| } | |
| //internal page linking | |
| $(window).on('hashchange', changeTab); | |
| $('[data-w-tab]').on('click', function(){ | |
| history.pushState({}, '', '#'+$(this).data("w-tab")); | |
| }); | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| PHONE VALIDATION | |
| <script src="https://cdn.jsdelivr.net/npm/libphonenumber-js@1/bundle/libphonenumber-min.js"></script> | |
| <script> | |
| const DEFAULT_COUNTRY = 'US' | |
| const formatter = new libphonenumber.AsYouType(DEFAULT_COUNTRY) | |
| const phoneInput = document.getElementById('phoneNumber') | |
| phoneInput.addEventListener('input', function (event) { | |
| formatter.reset() | |
| const newValue = formatter.input(phoneInput.value) | |
| phoneInput.value = newValue | |
| if (!libphonenumber.isValidPhoneNumber(newValue, DEFAULT_COUNTRY)) { | |
| phoneInput.setCustomValidity('Invalid phone number') | |
| } else { | |
| phoneInput.setCustomValidity('') | |
| } | |
| }) | |
| </script> | |
| START BODY ELEMENT | |
| <link href="https://cdn.jsdelivr.net/npm/@loomchild/webflow- | |
| alpinejs@2/dist/style.css" rel="stylesheet"> | |
| END OF BODY ELEMENT | |
| <script src="https://cdn.jsdelivr.net/combine/npm/@loomchild/webflow-alpinejs@2,npm/@loomchild/webflow-alpinejs@2/dist/components/phone.js"></script> | |
| ADD TO PHONE ELEMENT | |
| x-data="phone({ country: 'US' })" | |
| x-bind="input" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| EMAIL VALIDATION | |
| function form(){ | |
| return { | |
| username: {errorMessage:'', blurred:false}, | |
| email: {errorMessage:'', blurred:false}, | |
| password:{ errorMessage:'', blurred:false}, | |
| passwordConf: {errorMessage:'', blurred:false}, | |
| blur: function(event) { | |
| let ele = event.target; | |
| this[ele.name].blurred = true; | |
| let rules = JSON.parse(ele.dataset.rules) | |
| this[ele.name].errorMessage = this.getErrorMessage(ele.value, rules); | |
| }, | |
| input: function(event) { | |
| let ele = event.target; | |
| let rules = JSON.parse(ele.dataset.rules) | |
| this[ele.name].errorMessage = this.getErrorMessage(ele.value, rules); | |
| }, | |
| getErrorMessage: function() { | |
| // to be completed | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%-- place in <head> --%> | |
| <style> | |
| body { overflow-wrap: break-word; } | |
| </style> | |
| <style> | |
| .class-name p, a { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: auto; | |
| -ms-hyphens: auto; | |
| -moz-hyphens: auto; | |
| hyphens: auto; | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%-- place in <head> --%> | |
| <style> | |
| .mask { | |
| -webkit-text-fill-color: transparent; | |
| -webkit-background-clip: text; | |
| -webkit-text-stroke: 1px #fff; | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%-- place in <head> --%> | |
| .truncate { white-space: nowrap; text-overflow: ellipsis; } | |
| <%-- | |
| There are 2 conditions for ellipsis to work: | |
| The element’s width must be constrained in px (pixels). Width in % (percentage)won’t work. | |
| The element must have overflow:hidden and white-space:nowrap set. | |
| --%> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| https://webflow.com/made-in-webflow/website/type-parallax?s=type-parallax | |
| <style> | |
| .clipme { | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| CHECKBOX REQUIRED | |
| <script> | |
| $(document).ready(function(){ | |
| //Check if checkbox is checked | |
| $(".[*submit button class]").click(function(){ | |
| var isChecked = false, | |
| checkboxContainer = $(".[*checkboxes container class]"); | |
| checkboxContainer.find("input").each(function(){ | |
| if($(this).prop("checked") == true){ | |
| isChecked = true; | |
| } | |
| }); | |
| if(!isChecked){ | |
| //this error message uses flexbox. If you want to display 'block', 'inline', or 'inline-block', then swap out 'flex' for your preferred display method | |
| $(".[*error message class]").css('display', 'flex') | |
| return false; | |
| } | |
| }); | |
| //Hide error message if checkbox is checked | |
| $(".[*checkboxes container class]").find("input").click(function(){ | |
| if( $(".[*error message class]").is(":visible") && $(this).prop("checked") == true){ | |
| $(".[*error message class]").css('display', 'none'); | |
| } | |
| }); | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| https://github.com/mattboldt/typed.js/ | |
| <style> | |
| /* add custom cursor */ | |
| .typed-words::after { | |
| content: "|"; | |
| display: inline; | |
| animation: blink 1s infinite; | |
| } | |
| /* custom cursor animation */ | |
| @keyframes blink { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script> | |
| <script> | |
| var typed = new Typed(".typed-words", { | |
| strings: ["Hello, my name is John.", "Hello, my name is Lisa.", "Hello, my name is Beetlejuice."], | |
| typeSpeed: 75, | |
| backSpeed: 50, | |
| backDelay: 800, | |
| startDelay: 500, | |
| loop: true, | |
| showCursor: false, | |
| cursorChar: "|", | |
| attr: null, | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment