Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

What part of this Javascript dictates the visibility of the <li> values?

Posted on 2016-08-05
2
Medium Priority
?
101 Views
Last Modified: 2016-08-08
For those of you who've been tuning in, this actually "Part III" of a detailed deconstruction of some JavaScript code. I'm hoping to establish the bottom line in this installment that will allow me to facilitate the change that I need to make.

Here's a screenshot of the page that I'm working with:

screenshot
When a user checks the "transactions" box, all of the "events" that bear the category of "transactions" go away. Take a look:

no more transactions
Here's the stylesheet that goes along with this page:

.app_account_timeline.widget.bigheader.subheaded{
  overflow:auto;
  height:100%;
  width:100%;
  padding-bottom:0;
  padding-top:0;
}

.app_account_timeline.widget.bigheader.subheaded .widget_header{
    position:relative;
    top:0;
    left:0;
    height:auto;
}

.app_account_timeline.widget.bigheader.subheaded .header{
    float:right;
    width:350px;
}

.app_account_timeline.widget.bigheader.subheaded .widget_subhead{
    position:relative;
    top:0;
    left:0;
}

.app_account_timeline .widget_subhead{
    height:auto;
}

.app_account_timeline .container{
  position:relative;
}

.app_account_timeline .widget_wrapper{
  padding:0;
}

.bigwelcome{
  padding-top: 50px;
  line-height: 1.3em;
  font-size: 2em;
  color: #aaaaaa;
  font-weight: lighter;
}

.searchresults{
  position:relative;
}

.transaction .encounter,.transactions .encounter{
  text-transform: uppercase;
  color:#bbbbbb;
  font-weight: 400;
}

.transaction .dos,.transactions .dos{
  float:right;
  color:#bbbbbb;
  font-weight: 400;
}

.searchresults ul{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
  height:200px;
  overflow:auto;
  border:1px solid #dedede;
  margin:0;
  border-top:20px solid transparent;
}

.searchresults li {
  cursor:pointer;
  text-align: left;
  list-style: none;
  display: block;
  border-top: 1px solid #eaeaea;
  padding: 10px;
}

.searchresults li[data-accountkey]:hover{
  background-color:#fafafa;
}

.searchresults li:first-of-type{
  border-top:none;
}

.searchresults .name{
  width:55%;
  display:inline-block;
}

.searchresults .title{
  background:#555555;
  color:#ffffff;
  position:absolute;
  left:0;
  top:0;
  height:20px;
  line-height: 20px;
  padding:0 10px;
  width:100%;
}

.searchresults li .patientid,.searchresults li .patientdob,.searchresults li .pfid {
  width:15%;
  display:inline-block;
  text-align: right;
}

.app_account_timeline *{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
  list-style:none;
}

.at_gutter .print{
  background-color: #ffffff;
  border: 1px solid #dfdfdf;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  margin-top:15px;
  background-color: #ffffff;
  border: 1px solid #dfdfdf;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-family: "Open Sans" sans-serif;
  font-weight: 100;
  cursor:pointer;
}

.at_gutter .print:hover{
  background-color:#fafafa;
}

.at_gutter .print span{
  display:inline-block;
  width:23px;
  height:20px;
  background:url('/assets/images/app/icon-print.png') center center no-repeat;
  margin-right:20px;
  vertical-align: middle;
}

.at_title{
  background-color: #4a5c7b;
  position:relative;
  color: #ffffff;
  vertical-align: middle;
  width: 100%;
  height: 85px;
  line-height: 85px;
  padding-left:20px;
  z-index: 2;
}

.at_title .widgetname{
  font-size: 2em;
  font-weight: 400;
  padding-right:20px;
}

.at_searchwrap input{
  display:block;
  width: 100%;
  height: 100%;
  border: 1px solid #d7d7d7;
  border-right:none;
  border-radius: 2px 0 0 2px;
  outline: none;
  padding-left: 10px;
}

.at_searchwrap .magnificon{
  cursor:pointer;
  display: inline-block;
  height: 100%;
  width: 40px;
  border: 1px solid #dfdfdf;
  border-left: none;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 2px 2px 0;
  background:url('/assets/images/app/icon-magnify.png') center center no-repeat #ffffff;
  background-size:50%;
}

.widget_subhead .at_searchwrap{
  float:right;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
  display:inline-block;
  width:350px;
  height:30px;
  padding-right:40px;
  position:relative;
  margin-top:5px;
}


.at_title .searchbar{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -260px;
  margin-top: -22px;
  width:520px;
  display: inline-block;
  background-color: #ffffff;
  height: 45px;
  line-height: 25px;
  padding: 10px 34px 10px 10px;
  vertical-align: middle;
  border-radius: 6px;
}

.at_title .searchbar .search{
  position:absolute;
  right:13px;
  top:13px;
}

.at_title .searchbar input{
  color: #555555;
  font-size: 1.1em;
  width:100%;
  height:100%;
  outline:none;
}


.yearheader{
  font-family: "Open Sans", sans-serif;
  font-size: 2.5em;
  letter-spacing: -1px;
  position: relative;
  line-height: 1em;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #dfe1e1;
}

.monthheader{
  display:block;
  background:#F6F6F6 url('/assets/images/bg_f6_noise.png') fixed;
  position:relative;
  margin-bottom:70px;
}

.monthheader .circle{
  display: block;
  width: 120px;
  height: 120px;
  letter-spacing: -1px;
  border-radius: 60px;
  border: 10px solid #e0e0e0;
  line-height: 100px;
  font-family: 'Open Sans';
  background-color: #ffffff;
  margin: auto;
  position: relative;
  color: #646b6b;
  font-weight: 600;
  font-size: 1.3em;
  text-align: center;
  text-transform: uppercase;
}

.at_timeline_list{
  width:100%;
  padding: 40px 0;
  margin: 0;
}

.at_tl_topper, .at_tl_footer{
  position:absolute;
  height:6px;
  width:50px;
  border-radius: 3px;
  left:50%;
  margin-left:-25px;
  background-color:#cccccc;
}

.at_tl_topper{
  top:0;
}
.at_tl_footer{
  bottom:0;
}

.event{
  width: 100%;
  margin-top:-70px;
  padding:10px 0;
  font-family:'Open Sans', sans-serif;
  font-size: .85em;
  font-weight: 600;
}

.event .ev_container{
  width:50%;
  padding:0 30px 0 20px;
} 

.event.right .ev_container{
  position: relative;
  padding:0 20px 0 30px;
  left: 50%;
}

.event_header{
  text-transform: uppercase;
  padding:10px 0;
  text-align: left;
  color:#538ea5;
  font-weight:700;
  font-size: 1.3em
}

.event_body{
  position:relative;
  background-color: #ffffff;
  border:1px solid #dfdfdf;
  padding:15px;
  border-radius:2px;
  line-height: 1em;
  width:100%;
  box-shadow: 2px 3px 2px #f2f2f2, inset 1px 1px 0px #ffffff;
}

.event_body .content{
  padding-bottom:5px;
  color:#4a5353;
  line-height: 1.3em;
}

.event_body .amount{
  font-size: 1.3em;
  padding-bottom:10px;
  color:#165e88;
  letter-spacing: -1px;
}

.event_body .datefoot{
  color:#8f9393;
  margin-top:5px;
  line-height:23px;
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: 300;
}

.event_body .datefoot .clock{
  margin-right:5px;
  width:23px;
  height:23px;
  vertical-align: top;
  display:inline-block;
  background:url('/assets/images/app/icon-time.png') center center no-repeat;
}

.event_icon{
  display: inline-block;
  position:relative;
  width: 45px;
  margin-right: 10px;
  vertical-align: middle;
  text-align: center;
  height: 40px;
  line-height: 36px;
  border-radius: 10px;
  background-color:#538ea5;
}

.event.transactions .event_body{
  padding:0;
}
.event.transactions .datefoot{
  padding:0 15px 15px 15px;
}

.event.transactions ul{
  margin:0;
}

.event.transactions li{
  position:relative;
  padding:15px;
  border-bottom: 1px solid #dadada;
}

.event.transactions .runningbal{
  padding:15px 15px 0 0;
}

.event_icon .appicons{
  vertical-align: middle;
}

.event .runningbal{
  text-align: right;
}

.event .txntime {
  color: #aaa;
  font-weight: 100;
  display:block;
  text-align:right;
}

.appicons.transaction, .appicons.transactions{
  background:url('/assets/images/app/icon-event-transaction.png') center center no-repeat;
  width:17px;
  height:16px;
  display:inline-block;
}
.appicons.call{
  background:url('/assets/images/app/icon-event-call.png') center center no-repeat;
  width:18px;
  height:16px;
  display:inline-block;
}
.appicons.note{
  background:url('/assets/images/app/icon-event-note.png') center center no-repeat;
  width:11px;
  height:16px;
  display:inline-block;
}
.appicons.statement{
  background:url('/assets/images/app/icon-event-statement.png') center center no-repeat;
  width:16px;
  height:18px;
  display:inline-block;
}
.appicons.comment {
  background:url('/assets/images/app/icon-event-comment.png') center center no-repeat;
  width:18px;
  height:16px;
  display:inline-block;
}


.arrow{
  width:13px;
  height:24px;
  background-image: url('/assets/images/app/bg-at_event_arrow.png');
}

.event .arrow{
  position:absolute;
  top:32px;
  margin-top:-12px;
}

.event.left .arrow{
  left:100%;
  background-position:-13px 0;
}

.event.right .arrow{
  right:100%;
  background-position:0 0;
}

.event .arrow .point{
  display:block;
  width:22px;
  height:22px;
  position:absolute;
  top:0;
  background-color:#f6f6f6;
}

.event.left .arrow .point{
  margin-left:7px;
  left:100%;
}

.event.right .arrow .point{
  margin-right:7px;
  right:100%;
}

.arrow .point .circle{
  display:block;
  width:22px;
  height:22px;
  background-color: #dddddd;
  border-radius: 11px;
}

.amount .float{
  position:absolute;
  right:10px;
  top:10px;
  height:26px;
}

.payer, .transtype{
  display:none;
  font-size: .8em;
  height:26px;
  width:26px;
  border-radius: 4px;
  color:#ffffff;
  line-height:26px;
  text-align: center;
  -webkit-box-shadow: inset 10px 10px rgba(0,0,0,.2);
  box-shadow: inset 0 0 10px rgba(0,0,0,.2);
}

.payer.P{
  background-color: #317ae0;
  display:inline-block;
}

.payer.I{
  background-color: #317ae0;
  display:inline-block;
}

.amount .transtype{
  margin-left:10px;
}

.transtype.C{
  background-color: #ce2c2e;
  display:inline-block;
}

.transtype.A{
  background-color: #75aaed;
  display:inline-block;
}

.transtype.P{
  background-color: #169d20;
  display:inline-block;
}

.at_timeline{
  border-left:300px solid transparent;
  height:100%;
  padding:20px 0;
  overflow:scroll;
}

.at_timeline .at_timeline_wrapper{
  position:relative;
  min-height: 100%;
}

.at_timeline .line{
  width:10px;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-5px;
  height:100%;
  background-color: #cccccc;
}

.subhead .container{
  height:100%;
}

.at_filters, .at_filters li{
  height:100%;
  line-height: 40px;
  margin:0;
  display:inline-block;
  white-space: nowrap;
}

.at_filters li{
  margin-right:20px;
}

/*.at_filters{
  height: 50px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #f9f9f9;
  border-bottom: 1px solid #dedede;
}

.at_filters li{
  height:50px;
  padding:0 20px;
  line-height: 50px;
  font-size:1.2em;
  color:#4a5c7b;
  border-right:1px solid #f0f0f0;
  display:inline-block;
}*/

.at_gutter{
  position:absolute;
  top:20px;
  width:300px;
  left:0;
  padding:0 25px 25px 0;
}

.badge{
  position:relative;
  background-color:#ffffff;
  border:1px solid #dfdfdf; 
  border-radius:2px;
  padding:0;
  line-height: 1em;
  width:100%;
  box-shadow: 2px 3px 2px #f2f2f2, inset 1px 1px 0px #ffffff;
}

.badge .patientname{
  padding:20px;
  font-size: 2em;
  line-height: 1.2em;
}

.badge .patientname div{
  padding:0;
}

.badge .patientid{
  padding:12px 20px;
  height:50px;
  border-top: 1px solid #dfdfdf;
  border-bottom:1px solid #dfdfdf;
}

.badge .balances{
  padding:12px 20px;
  border-bottom:1px solid #dfdfdf;
}

.badge .balances .balhead{
    text-align: center;
    font-weight: bold;
}

.badge .bottom{
  padding: 20px;
  padding-top:20px;
}

.badge{
  font-family:'Open Sans', sans-serif;
  color:#4a5353;
  font-weight: 300;
  text-transform: uppercase;
}

.badge .last{
  font-weight:700;
  padding-bottom:0;
}

.badge label{
  font-family:'Open Sans', sans-serif;
  font-weight: 300;
  color: #bdc0c0;
  font-size: .85em;
  display:inline-block;
  margin:0;
  margin-left:-5px;
  float:left;
  width:22%;
  line-height: 26px;
}

.badge .bottom span{
  font-weight: 600;
}

.badge span{
  width:78%;
  display:inline-block;
  float:right;
  line-height: 26px;
}

.badge div{
  clear:both;
  padding-bottom:.3em;
}

.paytypekey{
  margin-left:0;
  font-family:'Open Sans';
  font-weight: 100;
}

.paytypekey li{
  height:26px;
  line-height: 26px;
  color:#aaaaaa;
  margin-top:8px;
  position:relative;
  padding-left:36px;
  text-transform: uppercase;
}

.paytypekey li.title{
  color:#777777;
  font-size:1.2em;
  text-transform:none;
  height:40px;
  line-height: 40px;
  padding-left:0;
}

.paytypekey li span{
  position:absolute;
  left:0;
  top:0;
}

.address{
  padding:6px 0;
}

.address span, .address label{
  line-height: 1.3em;
}

.timeline_stopper{
  display:block;
  height:9px;
  width:10px;
  position:absolute;
  left:50%;
  margin-left:-5px;
  background-color:#f6f6f6;
}

.timeline_stopper span{
  display:block;
  position:absolute;
  width:10px;
  height:10px;
  border-radius: 5px;
  background-color: #cccccc;
  left:0;
}

.timeline_stopper.top{
  bottom:100%;
}

.timeline_stopper.top span{
  bottom:4px;
}

.timeline_stopper.bottom{
  top:100%;
}

.timeline_stopper.bottom span{
  top:4px;
}

@media screen and (max-width: 979px) {
  .widget_subhead .at_searchwrap{
    float:none;
    width:100%;
    display:block;
    display:block;
  }
}

@media screen and (max-width: 700px) {

    .app_account_timeline.widget.bigheader.subheaded{
        height:auto;
    }

    .at_timeline {
        width: 100%;
        position: relative;
        display: block;
        height: auto;
        border: 0;
    }

    .at_gutter {
        width: 100%;
        display: block;
        position: relative;
    }

}

Open in new window


...and here's the JS that make all of the magic happen:

define(['/assets/js/views/app2/custom_checkbox_and_radio.js','jquery'],function(){
    return function(){
      $('.at_filters label').click(function(){
        $(this).siblings('.checkbox').click();
      });
      $('input[name="filt"]').on('change',function(){
        if(this.value=='all'){
          if($(this).is(':checked')) $('input[name="filt"]').attr('checked', true);
          else $('input[name="filt"]').attr('checked', false);
        } else {
          $('input[name="filt"][value="all"]').attr('checked', false);
        }
        var show = [];
        var left = true;
        $('input[name="filt"]:checked').each(function(){
          show.push($(this).val());
        });
        var year = '';
        var month = '';
        $('.at_timeline_list li').each(function(){
          if($(this).hasClass('yearheader')){
            if(year && year.data('delete')) year.slideUp();
            else if(year) year.slideDown();
            year = $(this);
            year.data('delete', true);
          } else if($(this).hasClass('monthheader')){
            if(month && month.data('delete')) month.slideUp();
            else if(month) month.slideDown();
            month = $(this);
            month.data('delete', true);
          } else if($(this).hasClass('event')){
            if(show.indexOf($(this).data('type'))!=-1){
              $(this).removeClass('left').removeClass('right');
              $(this).addClass(left?'left':'right');
              left=!left;
              if($(this).css('display')!='list-item') $(this).slideDown();
              year.data('delete',false);
              month.data('delete',false);
            } else {
              if($(this).css('display')=='list-item') $(this).slideUp();
            }
          }
        });
        if(year && year.data('delete')) year.slideUp();
        else if(year) year.slideDown();
        if(month && month.data('delete')) month.slideUp();
        else if(month) month.slideDown();
      });

      //Account Search
      $('input.at_search').keypress(function(e){
        if(e.which == 13){
          $(this).siblings('.magnificon').click();
        }
      });
      $('.at_searchwrap .magnificon').click(function(){
        if(!$('.at_search').val()) return;
        pf.ajax({
          url:'/app/accounttimeline',
          data:{searchfor:$('.at_search').val()},
          type:'post',
          dataType:'json',
          success:function(res){
            if(res.success && res.body){
              if(res.loadAccount){
                pf.apps.loadApp({
                  appurl:'/app/accounttimeline',
                  postdata:{accountkey:res.loadAccount},
                  refresh:new Date()
                });
              } else pf.dialog(res.body, 'Search Results');
            } else {
              pf.dialog('There has been an issue processing your request. I apologize for the inconvenience, please try again.', 'Error');
            }
          }
        });
      });

      setupLabel();
    };
});

Open in new window


The JS is looking for the values that are coming from the "filt" checkboxes that fall beneath the "at_filters" label. Clunky, but that's what in place right now. It looks like this:

 <ul class="at_filters">
      <li>
        <span class="checkbox">
          <input type="checkbox" name="filt" value="all" checked/>
        </span><label>All</label>
      </li>
      <li>
        <span class="checkbox">
          <input type="checkbox" name="filt" value="transaction" checked/>
        </span><label>Transactions</label>
      </li>
      <li>
        <span class="checkbox">
          <input type="checkbox" name="filt" value="statement" checked/>
        </span><label>Statements</label>
      </li>
      <li>
        <span class="checkbox">
          <input type="checkbox" name="filt" value="note" checked/>
        </span><label>Notes</label>
      </li>
      <li>
        <span class="checkbox">
          <input type="checkbox" name="filt" value="comment" checked/>
        </span><label>Task Comments</label>
      </li>
	  <li>
        <span class="checkbox">
          <input type="checkbox" name="filt" value="personal_payments" checked/>
        </span><label>Personal Payments</label>
      </li>
    </ul>

Open in new window


Here's the question: How does the above JS create a situation where the "transaction" boxes go away?

Here's a screenshot of the boxes' code as they appear when they're visible:

visible event
When I look for "event transactions left" in the CSS, I don't find anything. And yet, my "nose" tells me that when the "left" dynamic is removed, perhaps that's what causes the box to vanish.

Yes?

How does this work?
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 9

Accepted Solution

by:
James Bilous earned 2000 total points
ID: 41744373
All checked boxes thrown into array "show":

        
$('input[name="filt"]:checked').each(function(){
          show.push($(this).val());
        });

Open in new window


Looping through each timeline list, check if its not in the checked box array:

  if(show.indexOf($(this).data('type'))!=-1){

Open in new window


If its not, do a "slideup" to hide it:

 if($(this).css('display')=='list-item') $(this).slideUp();

Open in new window

0
 

Author Comment

by:brucegust
ID: 41747165
Thanks, James!
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question