Broker Check

Tips and Tricks

Please save work as a draft before implementing any changes and check to make sure that the changes are correct before publishing.

WARNING! Any script codes bypass compliance so any of these changes should be preapproved by their compliance department.  Also, the use of script does incur a 1 hour fulfillment charge.

JQuery

Very powerful tool that works on the dashboard. Here is a reference to help you use JQuery and learn its syntax.

Knowledge Awaits

Additions

  • Adding Element (after something entirely)

    • $( 'Enter in html tags and text' ).insertAfter( "selector" );

      Example: $( '<p>Test</p>' ).insertAfter( ".inner" );

  • Adding Element (after element but still within that element)

    • $( 'Enter in html tags and text' ).appendTo( "selector" );

      Example: $( '<p>Test</p>' ).appendTo( ".inner" );

  • Adding Element (before something entirely)

    • $( 'Enter in html tags and text' ).insertBefore( "selector" );

      Example: $( '<p>Test</p>' ).insertBefore( ".inner" );

  • Adding Element (before element but still within that element)

    • $( 'Enter in html tags and text' ).prependTo( "selector" );

      Example: $( '<p>Test</p>' ).prependTo( ".inner" );

Anchors

  • Creating Anchor Tags

    • Anchor tags are used to jump to a section of the website page. To do this, you can hyperlink a word or button at the top of the page, like the Departments page, and it will go to a section on that page by scrolling up or down.

      Example:

      Hyperlink you click: <a href="#billing">Billing</a>h

      Where it goes to: <div id="billing"></div> or <a name="billing"></a>

  • Scroll Effect

    • This effect is to make the transition a little smoother from the top of the page to that section of the page you want to go to.  You can speed up or slow down the speed by changing the 500 number.  The smaller the number the faster it is.  

      JQuery( Add to Advanced Footer in Design)

      <script>
      // Select all links with hashes
      $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function(event) {
      // On-page links
      if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
      && location.hostname == this.hostname
      ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
      // Only prevent default if animation is actually gonna happen
      event.preventDefault();
      $('html, body').animate({
      scrollTop: target.offset().top
      }, 500);
      }
      }
      });
      </script>


  • Fixed scroll down button

    • JQuery( Add to Advanced Footer in Design)CSS

      <script>
      $('<p id="home-intro-arrow-btn" class="home-intro-arrow bounce">
      <a href="#section_0"><i class="fa fa-2x fa-chevron-circle-down" aria-hidden="true"></i></a></p>').insertAfter('.homepage');
      </script>
      <script>
      // Select all links with hashes
      $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function(event) {
      // On-page links
      if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
      && location.hostname == this.hostname
      ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
      // Only prevent default if animation is actually gonna happen
      event.preventDefault();
      $('html, body').animate({
      scrollTop: target.offset().top
      }, 500);
      }
      }
      });
      </script>


      .home-intro-arrow {
      position: absolute;
      left: 0;
      top: 485px;
      width: 100%;
      text-align: center;
      display: block;
      height: auto;
      color: #03819ead;
      font-size: 3em;
      }

      .home-intro-arrow a{
      color: #03819ead;
      }

       

      @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      }
      40% {
      -moz-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
      }
      60% {
      -moz-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      }
      }

      .bounce {
      -moz-animation: bounce 3s infinite;
      -webkit-animation: bounce 3s infinite;
      animation: bounce 3s infinite;
      }

Columns

  • Columns w/class

    • The screen is broken into 12 parts. Our dashboard has a class of col-md-6 which would divide the section into half of that available screen. For example:

      div<div class="col-md-6">
      <p style="text-align: center;">January 2018 Workshop Seminar Part 1</p>
      <p style="text-align: center;"><iframe width="560" height="315" src="https://www.youtube.com/embed/VxOjoQ0QkRw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></p>
      </div>
      <div class="col-md-6">
      <p style="text-align: center;">January 2018 Workshop Seminar Part 2</p>
      <p style="text-align: center;"><iframe width="560" height="315" src="https://www.youtube.com/embed/1IsT9Dl03yo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></p>
      </div>

  • Creating own Class

    • First create the class with CSS, then you can use the class for any section.  Change the width to be whatever width that you would like.  This is the same coding that is used on the Dashboard Intro.  

      CSS (Place in Advanced Header)HTML

      .walkthrough {
      width: 50%;
      display: inline-block;
      padding:15px;
      }
      @media (max-width:992px) {
      .walkthrough {
      width: 100%;
      }
      }

      To keep the columns the same height and size if the dimensions are the same.
      .walkthrough .inner {
      height100%;
      display: flex;
      flex-direction: column;
      }


      <div class="walkthrough"><div class="inner">Insert what you want</div></div>

      Best example: If you need to manually code out a column that is mobile responsible, here is another way:

      CSS (Place in Advanced Header)HTML

       

      .containerCustom {
      width:50%;
      display:inline-block;
      vertical-align: middle;
      }
      @media (max-width: 992px) {
      .containerCustom {
      width:100%;
      display:block;
      text-aligncenter;
      }
      }

      <div class="containerCustom">
      <h2>Financial Planning</h2>
      <p>A bucket plan can help you be better prepared for a comfortable retirement.<br /> <a href="http://www.stockerwoods.com/resource-center/videos" class="c-btn c-box__btn sectionButton" style="color: #ffffff; background-color: rgba(249, 189, 57, 1); border-color: #f9bd39;"> <span>More Videos</span> </a></p>
      </div>
      <div class="containerCustom">
      <p><iframe src="//fast.wistia.com/embed/iframe/3rb4tugk4z?videoWidth=630&amp;videoHeight=354&amp;volumeControl=true&amp;controlsVisibleOnLoad=false&amp;autoPlay=true&amp;endVideoBehavior=reset" allowtransparency="true" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" oallowfullscreen="" msallowfullscreen="" frameborder="0" class="wistia_embed video-player" name="wistia_embed" width="100%" height="344px"></iframe></p>
      </div>

Cool Features

  • Accordian

    • Please place the code in the respective places.

      CSS (Place in Advanced Header)JQueryHTML

      #accordian ul {
      list-style-type: none;
      }
      #accordian h3 {
      background-color: #0a486b;
      padding: 5px;
      color: white;
      margin-bottom: 0px;
      border-radius: 5px;
      cursor: pointer;
      }
      #accordian h3:hover {
      background-color: #0a486ba1;
      }
      #accordian ul ul {
      display: none;
      background-color: transparent;
      }

      $(document).ready(function() {
      $("#accordian h3").click(function() {
      //slide up all lists
      $("#accordian ul ul").slideUp();
      //slide down the link list below the h3 clicked
      if (!$(this).next().is(":visible")) {
      $(this).next().slideDown();
      }
      })
      });

      <div id="accordian">
      <ul style="padding-left: 0;">
      <li>
      <h3>Accordian</h3>
      <ul>
      <li>

      </li>
      </ul>
      </div>

  • Autoplay videos

    • https://support.gospacecraft.com/hc/en-us/articles/202694610-How-can-I-set-a-Video-to-autoplay-on-my-page-

      Add ?autoplay=1 to the end of the video source in the iframe code.
      (i.e. <iframe src="https://player.vimeo.com/video/161181924?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>).

      For YouTube videos, add ?rel=0;&autoplay=1 to the iframe source.
      (i.e. <iframe width="560" height="315" src="https://www.youtube.com/embed/iG9CE55wbtY?rel=0;&autoplay=1" frameborder="0" allowfullscreen></iframe>)

  • Button over image

    • CSS (Place in Advanced Header)HTMLResult
      .module {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
      width: 400px;
      height: 300px;
      position: relative;
      overflow: hidden;
      margin: 20px;
      }
      .module > a {
      position: absolute;
      bottom: 15px;
      left: 115px;
      }


      <div class="module">

      <a href="https://www.w3schools.com/" class="c-btn c-box__btn sectionButtonHover" style="">
      <span>w3schools.com</span>
      </a>
      </div>
  • Lightbox (Pop Up) Image

    • Please place the code in the respective places.

      CSS (Place in Advanced Header)JQueryHTML

      .lightbox {
      position:fixed; /* keeps the lightbox window in the current viewport */
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:#00000082;
      text-align:center;
      display:none;
      }
      .lightbox img {
      box-shadow:0 0 25px #111;
      -webkit-box-shadow:0 0 25px #111;
      -moz-box-shadow:0 0 25px #111;
      max-width: 100%;
      }
      .lightbox p {
      text-align:right;
      color:#fff;
      margin-right:20px;
      font-size:12px;
      }


      $('.lightbox_trigger').click(function(){
      $('.lightbox img').attr('src', this.src);
      $('.lightbox').fadeIn();
      });
      $('.lightbox').click(function(e){
      if($(e.target).closest('#popImage').length === 0){
      $('.lightbox').fadeOut();
      }
      });
      <img class="lightbox_trigger" src="//static.fmgsuite.com/media/images/2f29f5cb-7a8d-4e7d-a38d-710219014f03.png" style="width: 100%;" />
      <div class="lightbox">
      <p>Click to close</p>
      <div id="content"><img id="popImage" src="#" /></div>
      </div>
  • Image Responsive CSS

    • .responsiveImg {
      width: 100%;
      height: auto;
      }

  • Image Responsive Full Width image

    • 1) In a RTE section, upload the image as an attachment instead of as an image
      2) pull the https or http address from the source code of the attachment you just uploaded. There should be "media" somewhere in that url, just a way for you to know you've uploaded it correctly
      3) put that https or http into an image tag surrounded with div tags so <div class="full-teamImage"><img src="https-here" width="100%"></div>
      4) delete anything else you have in that RTE source code
      5) Go to the Custom CSS
      6) add the following
      .homepage #section_0 .container {
      width: 100%;
      }
      .homepage #section_0 div {
      line-height: 0;
      }

  • Rotator Speed Adjustment

    • <script>
      $(document).ready( function() {
      $(Page.Heros.__slideshowInterval = 9000);
      });
      </script>

  • Sticky Masthead

    • Please place the code in the respective places.

      CSS (Place in Advanced Header)JQueryHTML

       @media (min-width: 992px) {
      .homepage #section_0 {
      height: 100vh;
      }
      }
      @media (min-width: 992px) {
      header.c-header-modern {
      position: fixed;
      z-index: 10;
      padding:20px 0;
      width: 100%;
      transition: .2s;
      -webkit-transition: .2s
      -moz-transition: .2s;
      background-color:transparent;
      }
      }
      @media (min-width: 992px) {
      .scrollDown {
      padding: 0 !important;
      background-color:#1a3668 !important;
      }
      }
      @media (max-width: 992px) {
      header.c-header-modern {
      background: transparent;
      width:100%;
      position:absolute;
      }
      }

      $('.c-header-modern').removeAttr('style');
      $(document).on("scroll", function(){   
      if($(document).scrollTop() > 100){       
      $("header").addClass("scrollDown");   
      }   
      else{       
      $("header").removeClass("scrollDown");
      }
      });

Embed

  • Embed Anything Google

  • Embed a Dropbox Video

    • <div class="video-container"><p style="text-align: center;"> <video width="800" height="450" controls="controls">
      <source src="https://www.dropbox.com/s/ldf4304jewgy2ph/Tyrone%20French%2030Sec%20TV%20%281%29.mp4?raw=1" type="video/mp4" />
      </video></p>
      </div>

      First, create a share link to the video, then modify the link by changing the ?dl=0 at the end to ?raw=1

  • Embed Google Calendar

  • Embed Google Maps

    • If you would like to embed a map on the website, you can either go to google maps and click on share and get the emebd code or go to https://www.embedgooglemap.net/.

  • Embed Google Slides

    • To embed Google Slides, open up the slideshow and click on file.  Then, click on Publish to Web.  Choose the embed option and hit publish.  Grab the embed code and place it anywhere on your site.  If you update the Google Slides file then it will be updated on the website as well.

      Example: <div class="video-container"><p style="text-align: center;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSn0b0A2yvHwYSEpTYjStxjLnh4E_6D4_7FQBtbJ_DeSQGewpmZ_8CRwlqiw_0c1_ltrW7ZI60e6-Jo/embed?start=false&amp;loop=false&amp;delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></p></div>

  • Embed PDF

    • <p style="text-align: center;"><iframe width="100%" height="1200px" src="//static.fmgsuite.com/media/documents/743ec3ef-0403-4533-80ec-ac096280de3c.pdf"></iframe></p>

Footer

  • Hide Email in Footer

    • <style>

      footer a[href*="mailto"] { display: none; }

      </style>

  • Add Multiple Emails (Footer and Contact Page)

    • Instructions:

      1. Add the addition emails to the emailArr variable by making sure the individual emails end with a starting/ending quotation. Example "email@example.com".
      2. Also comma separate the individual emails. Example "email1@example.com" , "email2@example.com ".
      3. Add as many emails as you need.
      4. Place the code below in the ADD ADVANCED FOOTER HTML of the CMS. Website > Design Access to website's <head> ADD ADVANCED FOOTER HTML.  

      <script type="text/javascript" src="https://fmg-websites-custom.s3.amazonaws.com/confluence_code_snippets/add_emails_contact_footer/script.js">

      //SPACE

      </script>

      <script type="text/javascript">

         //Enter Emails Here

         var emailArr = ['email1@example.com', 'email2@example.com', 'email3@example.com', 'email4@example.com'];

         appendEmails(emailArr);

      </script>

Hide/Remove Items

  • About Page - Hide Agent Photo

    • <script>
      setTimeout(function(){
      $('.page-about #agentContent img').hide();
      }, 500);
      </script>
  • About Page - Hide Agent Photo, Email, and Number

    • <script>
      setTimeout(function(){
      $('.page-about #agentContent > img:first-of-type, .page-about #agentContent > p:first-of-type, .page-about #agentContent > h2:first-of-type').hide();
      }, 500);
      </script>
  • Quicklinks - Hide on all pages

    • <script>setTimeout(function(){$('footer .quickLinks').remove();
      $('footer .container aside .wrapper .contact').css("width","100%"); }, 500);</script>

       

      For Moonlight (will create gap between Contact Info and Disclosure): 

      footer .quickLinks {
       display: none;
      }

Replacements

  • Replace Hyperlinks

    • <script>

      $(function() {

      var oldSrc = 'http://fmg-websites-custom.s3.amazonaws.com/348157-bonine/resources/map.pdf';

      var newSrc = '//static.fmgsuite.com/media/documents/f84e65c9-30e8-4ff4-99a2-260a7e979f9d.pdf';

      $('a[href="' + oldSrc + '"]').attr('href', newSrc);

      });

      </script>

  • Replace Photo

    • <script>

      $(function() {

      var oldSrc = '//static.fmgsuite.com/media/images/9601a48c-ab2c-4cb1-b2fe-f052d633b7bb.jpg';

      var newSrc = '//static.fmgsuite.com/media/images/25c34a49-4797-405d-abfa-21a94fa49a7f.jpg';

      $('img[src="' + oldSrc + '"]').attr('src', newSrc);

      });

      </script>

  • Replace Text

    • To only replace text within a specific field please do the following:
      $('selector').text('Enter Text Here');

      To replace an item entirely:
      $('selector').replaceWith('Enter in html tag and text here');

  • Move Rotator

    • $('.hero-container').insertAfter('#section_1');

      To fix some rotator spacing issues:
      <style>
      @media (min-width: 992px) {
      #hero .heroImages,
      #hero .heroDesc {
      margin-top: 25px;
      }
      }
      </style>

Social Media

  • Edit Tag Info

    • To edit the information that shows up while sharing a link on social media, you would need to edit the meta data in the advanced header of the website. This would set all tag information to be the same for every page of their website.

      Most common edit would be to change the image:  <meta property="og:image" content="insert image to be the thumbnail" />

      Further help.

  • Sharing Debuggers

Video

  • Responsive Videos - 1

    • <!-- 16:9 aspect ratio for widescreen-->
      <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="..."></iframe>
      </div>

      <!-- 4:3 aspect ratio -->
      <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="..."></iframe>
      </div>

  • Responsive Videos - 2

    • CSS (Place in Advanced Header)HTML

      .video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
      }

      .video-container iframe, .video-container object, .video-container embed {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      }

      <div class="video-container">
      <iframe width="853" height="480" src="Insert video link here" frameborder="0" allowfullscreen</iframe>
      </div>