JQuery propagating to children and disable/enable click event

JQuery propagating to children and disable/enable click event

by Akram kamal

HTML

<body>
  <div id="container">
    <img id="logo" src="http://westmiworks.org/images/wmw-logo.png" alt="wrong" />
    <div id="JSlc" class="lc">
      <p class="lcp"><a href="#">Job Search<br>Tools</a></p>
      <div id="JSb" class="sc">
        <a href="#"><img class="imgback" src="back.png" alt="wrong" /></a>
      </div>
      <div id="JSscl" class="sc">
        <p class="scp"><a href="#">Job<br>Searching</a></p>
      </div>
      <div id="JSscul" class="sc">
        <p class="scp"><a href="#">Applications</a></p>
      </div>
      <div id="JSscu" class="sc">
        <p class="scp"><a href="#">Resumes</a></p>
      </div>
      <div id="JSscur" class="sc">
        <p class="scp"><a href="#">Cover<br>Letters</a></p>
      </div>
      <div id="JSscr" class="sc">
        <p class="scp"><a href="#">Interviewing</a></p>
      </div>
      <div id="JSscrd" class="sc">
        <p class="scp"><a href="#">Personal<br>Branding</a></p>
      </div>
      <div id="JSscd" class="sc">
        <p class="scp"><a href="#">Blank<br>Blank</a></p>
      </div>
    </div>

    <div id="UIAlc" class="lc">
      <p class="lcp"><a href="#">Unemployment<br>Agency</a></p>
      <div id="UIAb" class="sc">
        <a href="#"><img class="imgback" src="back.png" alt="wrong" /></a>
      </div>
      <div id="UIAscl" class="sc">
        <p class="scp"><a href="https://www.michigan.gov/documents/uia/1583_268058_7.pdf">Work Search<br>Form</a></p>
      </div>
      <div id="UIAscul" class="sc">
        <p class="scp"><a href="#">Fact Sheet<br>On-line Filing</a></p>
      </div>
      <div id="UIAscu" class="sc">
        <p class="scp"><a href="#">Script<br>Telephone Filing</a></p>
      </div>
      <div id="UIAscur" class="sc">
        <p class="scp"><a href="#">Marvin<br>Script</a></p>
      </div>
      <div id="UIAscr" class="sc">
        <p class="scp"><a href="#">FAQ</a></p>
      </div>
      <div id="UIAscrd" class="sc">
        <p class="scp"><a href="#">UIA 1734<br>Inquiry...

CSS

#container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-weight: bold;
}

#JSlc {
  top: calc(42% - (150px/2));
  left: calc(30% - (150px/2));
  overflow: hidden;
}

#UIAlc {
  bottom: calc(20% - (150px/2));
  left: calc(40% - (150px/2));
  overflow: hidden;
}

#WMWlc {
  bottom: calc(20% - (150px/2));
  right: calc(40% - (150px/2));
  overflow: hidden;
}

#WEAlc {
  top: calc(20% - (150px/2));
  right: calc(50% - (150px/2));
  overflow: hidden;
}

#CRlc {
  top: calc(42% - (150px/2));
  right: calc(30% - (150px/2));
  overflow: hidden;
}

.lc {
  position: absolute;
  display: flex;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  border-width: 5px;
  border-color: black;
  border-style: solid;
  box-shadow: 5px 5px 5px #A9A9A9;
  background-color: #FFFFFF;
  z-index: 3;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: Aileron;
  font-weight: bold;
}

.lc p {
  vertical-align: middle;
}

#logo {
  position: fixed;
  width: 300px;
  height: 128px;
  top: calc(50% - (128px/2));
  left: calc(50% - (300px/2));
}

.imgback {
  position: absolute;
  top: calc(50% - (80px/2));
  left: calc(50% - (80px/2));
  width: 80px;
  height: 80px;
  margin: auto;
}

.sc {
  opacity: 0;
  width: 144px;
  height: 144px;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 144px;
  border-width: 5px;
  border-color: black;
  border-style: solid;
  display: flex;
  box-shadow: 5px 5px 5px #A9A9A9;
  z-index: 3;
  position: absolute;
  text-align: center;
  justify-content: center;
  align-items: middle;
  font-size: 21px;
  font-family: Aileron;
  font-weight: bold;
  background-color: #FFFFFF;
}

.scp {
  margin: auto;
}

a {
  text-decoration: none;
  color: black;
}

#JSb,
#UIAb,
#WMWb,
#WEAb,
#CRb {
  left: -175px;
  bottom: -175px;
  background-color: #000000;
  margin: auto;
}

#JSscl,
#UIAscl,
#WMWscl,
#WEAscl,
#CRscl {
  left: -240px;
  top: 0;
  bottom: 0;
  margin-top:...

JavaScript

amtzoom = 1.8;
scfadein = 1000;

$(document).ready(function() {
  $('.lc').click(function(e) {
    e.stopPropagation();
    var lc = $(this)
    ojst = parseInt($(this).css('top'));
    ojsl = parseInt($(this).css('left'));

    var clcw = ($(window).width() - $(this).width() * amtzoom) / 2;
    var clch = ($(window).height() - $(this).height() * amtzoom) / 2;
    var lch = parseInt($(this).css('height'));
    ojslch = lch + "px";
    var nlch = lch * amtzoom + "px";
    var lcw = parseInt($(this).css('width'));
    ojslcw = lcw + "px";
    var nlcw = lcw * amtzoom + "px";
    var cflc = parseInt($(this).css('font-size'));
    ojsflc = cflc + "px";
    var nflc = cflc + 12 + "px";
    console.log(lch)
    if (lch>150) return false;
   lc.css({
      'overflow': 'visible'
    }).siblings().animate({
      'opacity': "0"
    }, 300).css({
      'visibility': "hidden"
    });

    lc.animate({
      'font-size': nflc,
      'height': nlch,
      'width': nlcw,
      'top': clch + 'px',
      'left': clcw + 'px'
    }, 300, function() {
      console.log("big")
      lc.find(".sc").each(function(i) {
        console.log(i, this)
        $(this).delay(i * 100).animate({
          opacity: 1
        }, scfadein)
      })
    });
  });
  $('.sc:has(.imgback)').click(function(e) {
    e.stopPropagation();
    var lc = $(this).closest(".lc")
    lc.siblings().css({
      'visibility': "visible"
    }).each(function(i) {
      $(this).delay(i* 100).animate({
        'opacity': "0"
      }, scfadein);
    })

    lc.css({
      'overflow': 'hidden'
    });
    lc.animate({
      'font-size': ojsflc,
      'height': ojslch,
      'width': ojslcw,
      'top': ojst + 'px',
      'left': ojsl + 'px'
    }, 300);
    lc.siblings().animate({
      'opacity': "1"
    }, 300);


  });
	$('.sc').click(function(e) {
		e.stopPropagation();
	});
});