Implement Partner Logo Badges

PHOTO

Sat Jan 08 2022 03:49:33 GMT+0000 (Coordinated Universal Time)

/*-- css for partner tier styles --*/
.tier_level {
     height: auto;
     float: right;
     padding-right: 10px;
}
.tier_level img {
    height: 65px;
    width: auto;
    position: absolute;
    top: -3px;
    right: 275px;
}
@media only screen and (max-width: 600px){
  .tier_level img {
      right: 50px;
      top: 1px;
      height: 55px;
  }
}
 
 
 
// JS to display logos based on group
jQuery(document).ready(function ($) {
 
    var isLoggedIn = !!$(".logged-in").length;
    var myGroups = isLoggedIn ? abUser.group_id : [];
 
    function partnerTierFunction() {
      // set up DOM
      $("#header .wrapper").append('<div class="tier_level"></div>');
      // create object for partner tiers
      var myTier = {
        "19": {
          name: "Steel",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233007/BS_Badge_Steel_White.png"
        },
        "23": {
          name: "Cobalt",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233001/BS_Badge_Cobalt_White.png"
        },
        "24": {
          name: "Sky",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233005/BS_Badge_Sky_White.png",
        },
        "25": {
          name: "Sapphire",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233003/BS_Badge_Sapphire_White.png",
        },
      };
 
      // check if the user is in a tier group
      for (var i = 0; i < myGroups.length; i++) {
        // associate tier label to group values
        var groups = myGroups[i];
        var tier = myTier[groups];
        // populate DOM with tier label
        if (tier !== undefined) {
          var $z = $("div.tier_level");
          $z.append('<img src="' + tier["image"] + '">');
          break;
        }
      }
    }
 
    function visibilityDriver() {
      visScenarios.forEach(function(scenario) {
        if (scenario.condition) {
          scenario.outcome();
        }
      })
    }
    
    var visScenarios = [
      {
        condition: isLoggedIn,
        outcome: function () {
          partnerTierFunction();
        },
      },
    ];
    visibilityDriver();
 
}); // end ready function

COPY

Request: Set up badges as the secondary logo according to the partner type on the Company Form. Ensure a group is created for each partner type Upload the logos under media library (on the back end) Implement the CSS to create the space where we are displaying the images Implement the JavaScript to show a logo, based on the partner type

Save snippets that work from anywhere online with our extensions

Comments

Custom Requests

@rebukt

Update 'Deal' Verbiage Throughout Portal Update Message when Denied Content Access Implement Partner Logo Badges Update Footer Text Hide Filter Tag Hide Available Content Hide Delete Button on Deal Hide Deal Reg Button from Group Hide New & Popular Widget from Company Hide Pipeline Table Columns

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#javascript

Get URL and URL Parts in JavaScript

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search

#javascript

Add event listener to multiple buttons with the same class

    btns = document.getElementsByClassName("saveBtn");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">

<body>
	<textarea class="codemirror-textarea"></textarea>
</body>

<script>

$(document).ready(function(){
    var codeText = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeText, {
        lineNumbers : true
    });
});

</script>

<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #nodejs #commandline

HTTPS Redirect in Nodejs

npm install heroku-ssl-redirect

> More steps

#css

A Modern CSS Reset - Piccalilli

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#javascript #nodejs

Save to MongoDB without Duplicates Using Mongoose

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#javascript

Full Stack Developer

function full_stack_developer() {
    full_stack_developer();
}

#javascript

3 Ways To Detect Selenium Bots Using Javascript - CodingTutz

if (navigator.webdriver) {
    document.body.innerHTML = "This is a Bot";
}

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

#javascript #promises #howto

How to Get the Domain From A URL Using Javascript

var url = "http://scratch99.com/web-development/javascript/";
var urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
var domain = urlParts[0];

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#javascript

Mapping an Object

const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

#javascript

Copy Text to Clipboard with Line Breaks

function copyToClipboard(){

    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);

    emptyArea.select();
    document.execCommand('copy');

    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})

    }

Implement Partner Logo Badges

Save snippets that work from anywhere online with our extensions

Comments

More like this

Custom Requests

Browse more snippets >>

Implement Partner Logo Badges

Save snippets that work from anywhere online with our extensions

Comments

More like this

Custom Requests

Browse more snippets >>

Embed code snippet