Generating an Instagram Token

Custom Code

Boxy Button
Boxy Button

How to add an anchor tag

How to create hover on an image

  • Add an image to a content module
  • Paste this code into the Page Settings > Page Specific CSS
    /*GROW*/
    .grow img {
    height: 225px;
    width: 375px;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    }

    .grow img:hover {
    width: 500px;
    height: 300px;
    }

Snipcart Autogenerate Variants

CSS to hide cognito forms Logo

a[href*='https://www.cognitoforms.com'] {
visibility: hidden;
}

MEDIA QUERY FOR HERO SLIDER

How to link directly to googles "leave a review" 

Step 1 use this URL https://search.google.com/local/writereview?placeid=XXXXXXXXXXXXXXXXXXX

Step 2 Replace XXXXXXXXXXXXXXXXXXX with your places ID How to get your places ID https://developers.google.com/places/place-id

How to Get a google Maps API
***IF i4 is generating the API let the client know this will be $5.00 hosting

Google Drive Link

 

Mike's Leave a Review Widget

Titanium Version:
Google Drive Link

Wordpress Version:
Google Drive Link

HTML 5 Form Validation Script

How to anchor a navigation/menu item

Anchor nav item to a word or an image on another page

  1. Go to the page you want to add an anchor tag to.
    • Click Edit,
    • Go to the module you want to add an anchor to and click Edit,
    • Put your cursor by the item you want the nav title to link to,
    • Click the anchor icon,
    • Give it a name e.g., services,
    • Click Save,
    • Click Save again.
  2. Create a redirect page and use the full URL plus /#anchorID in the Redirect URL box.
    • For example, http://i4new.demo.i4.net/#anchorID.
    • Use only the link name for URL Name: Example, anchorID.
    • The URL will have to be updated once the site is launched or else the anchor will break.
  3. Optional: Add this to the Page Specific CSS to make the transition from the nav item to the anchor smooth { scroll-behavior: smooth; }

Smooth Anchor Scrolling 

**Note: Found an easy way to do this through CSS (found here):

html {
scroll-behavior: smooth;
}

--------- Script method below ---------

<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();

// Store hash
var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){

// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>

Link Email, Phone, & Text Message on websites

Link email to send new email

Link phone number to call i4 Solutions

Link phone number to text (sms) [Brandon's Phone]

Form Anti Spam Trick

  1. Create the form on a "hidden" page
  2. "Inspect" the form and then copy all of the form HTML
  3. Navigate to the page where the form should exist and add a custom code module
  4. paste the HTML copied from step 2
  5. add id="" to the form opening tag (You can create your own)
  6. add the following after the form:
    <script>
	$("#formID").submit(function(e) {
		e.preventDefault(); // avoid to execute the actual submit of the form.
		var form = $(this);
		$.ajax({
		   type: "POST",//From the form method
		   url: '',//The URL of the form action
		   data: form.serialize(), //serializes the form's elements.
		   success: function(data) {
			   //redirect to thank-you page
			   window.location='/thank-you';
		   }
		 });
	});
</script>
  7. change the formID in the first line of the script to match the form id added in step 5 above
  8. Cut the "action" from the form opening tag and paste it into the "url:" of the $.ajax function in the script pasted from step 6
  9. Copy the "thank you page" url from the form admin and paste it into the "window.location=''" in the script from step 6
  10. save the module
  11. save the page
  12. test the form

VERY IMPORTANT! Make sure you remove the url from the  "action ="..." in the form opening tag - this is the key to make sure that spammers don't get that info and use it to spam our client.

ALSO VERY IMPORTANT! The form that you create on the hidden page can onlyuse the following field validations: email and No Validation.

Change the Breakpoint of the hamburger menu CSS

Change the 1235px to the pixels you want the breakpoint to be changed to

For Screen Grabbers!! Change Hamburger Breakpoint and "fancy" sidemenu navigation drop down

Make A form a "Multistep" form

  1. create the form with each "step" as an individual fieldgroup.
  2. add this code (right click and click "save file as") to a custom code module on the page.

 

Lazy Load Youtube Videos to Speed Up Site

    1. Go to the Youtube video and copy the video ID from the URL.
    2. Paste the code below into the module where you would like the youtube video. Change the VIDEO_ID to the id from step 1. If you are replacing a existing youtube iframe replace the iframe code with this code. 
      <div class="youtube-player" data-id="VIDEO_ID"></div>
    3. Add the following css styles. 
        .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }

  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }

  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url('//i.imgur.com/TxzC70f.png') no-repeat;
    cursor: pointer;
  }
    4. Add the following script

      <script>
      function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute(
      'src',
      'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0'
    );
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute(
      'allow',
      'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
    );
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.getElementsByClassName('youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace(
        'ID',
        videoId
      );
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

  document.addEventListener('DOMContentLoaded', initYouTubeVideos);
      </script>

Example