jQuery - if, else, elseif condition

0 votes
2,320 views
added Mar 29, 2018 in jQuery by Callum Sergeant (1,440 points)
edited Aug 16, 2018 by LC Marshal

Find .price.at-summary, and add condition. If the text of .price.at-summary  >= 13, .add x-m-price class. else if, .add r-m-price class. Or else, dont add any class.

$('.price.at-summary').each(function(){
  var text = $(this).text();
  var trimtext = $.trim(text);
  if ( trimtext.length >= 13 ) {
    $('.calculator.at-summary').addClass('x-m-price').fadeIn(400);
  }
  else if ( trimtext.length < 11 ) {
    $('.calculator.at-summary').addClass('r-m-price').fadeIn(400);
  } 
  else {
    $('.calculator.at-summary').fadeIn(400);
  }
});

17 Responses

0 votes
responded Apr 2, 2018 by LC Marshal Captain (25,790 points)
edited Aug 16, 2018 by LC Marshal

to check whether body hasClass or not

if ($("body").hasClass('page-property-detail')) {
    $('header.header').hide();
}
0 votes
responded Apr 2, 2018 by LC Marshal Captain (25,790 points)
edited Aug 16, 2018 by LC Marshal

if body contains of this element , do this else show this

$('body').each(function() {
  var expiredprop = $('span.expiry_msg').text();
  if (expiredprop.length > 1) {
    $('.buttons a:first-child').hide();
  } 
  else {
    $('#back-search').fadeIn(400);
  }
});
0 votes
responded Apr 3, 2018 by LC Marshal Captain (25,790 points)
edited Aug 16, 2018 by LC Marshal

Flag if the value is null

var name = $('#name').val();

if ($.trim(name).length <= 3) {
    alert("Your name can't be too short");
    return false;
} 
else if (name==null || name=="") {   
    alert("Your name can't be empty");  
    return false;
}
else {
alert("everything is ok!");
}
0 votes
responded Apr 3, 2018 by anonymous
edited Aug 16, 2018 by LC Marshal

Screen size condition - if screen smaller than 768, alert this, else do this.

if ($(window).width() < 768) {
   alert('This is tab screen size');
}
else {
   alert('This is desktop size');
}
0 votes
responded Apr 3, 2018 by LC Marshal Captain (25,790 points)
edited Sep 26, 2018 by LC Marshal

Hide 'read more' when content less than container height

HTML

<div class="text height" id="text">                         
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum                      
</div>
<div class="link">                
   <a id="readmore" href="#" onclick="changeheight(this)">Read more</a>
</div>  

 

CSS

.text {
    overflow:hidden;
}
.height {
    height:38px;
    overflow:hidden;
}

 

JS

$(document).ready(function(){
    $('.text').each(function(element,index){
        if ($(this)[0].scrollHeight > $(this).height()){
            $(this).next().show()
        } else {
            $(this).next().hide()
        }
    })
})

function changeheight(obj) {
    var fullHeight = $(obj).parent().prev().get(0).scrollHeight ;       
    var readmore = $(obj);
    if (readmore.text() == 'Read more') {
        readmore.text("Read less");
        $(obj).parent().prev().data('oldHeight',$(obj).parent().prev().height());
        $(obj).parent().prev().animate({'height':fullHeight},350);
    } else {
        readmore.text("Read more");
       $(obj).parent().prev().animate({'height':$(obj).parent().prev().data('oldHeight')},350)
    }           
}
0 votes
responded Apr 3, 2018 by LC Marshal Captain (25,790 points)
edited Sep 26, 2018 by LC Marshal

condition for 1 string that has been used by 2 ids

HTML

<div class="landed">
  <input id="built_up" name="" type="text">
</div>

<div class="non-landed">
  <input id="built_up_nl" name="" type="text">
</div>

 

JS

submitUrl += "&sub_type="+sub_type;
submitUrl += "&block="+block;
submitUrl += "&level="+level;
if (property_type == 'l'){
  submitUrl += "&built_up="+built_up;
}
else {
  submitUrl += "&built_up="+built_up_nl;
} 
submitUrl += "&land_area="+land_area;
submitUrl += "&name="+name;
submitUrl += "&email="+email;
submitUrl += "&contact="+contact;
submitUrl += "&state="+ select_state;
0 votes
responded Apr 5, 2018 by LC Marshal Captain (25,790 points)
edited Sep 26, 2018 by LC Marshal

Condition for expiry date element. Few conditions combined.

  1.  if the text.length this much, do this, otherwise do this
  2. If expiry element exist, clone the element and add it into header.
//expiry date
var expiry = $('span.expiry_msg'); 
var expiryTop = $('#get-expired-msg');

$(function() { 
  if ($(expiry).length) { 
   $(expiry).clone().appendTo(expiryTop).addClass('expiry-on-header').fadeIn(500);
  }
});

$('.listing-summary').each(function(){
  var summaryprice = $('.price.at-summary').text();
  var trimsummaryprice = $.trim(summaryprice);
  if ( trimsummaryprice.length <= 8 ) {
    $(this).find(expiry).addClass('s-m-expired').fadeIn(400);
  }
  else if ( trimsummaryprice >= 11 ) {
    $(this).find(expiry).addClass('x-m-expired').fadeIn(400);
  }
  else {
    $(this).find(expiry).fadeIn(400);
  }
});

$(expiryTop).each(function() {
  if ($(window).width() < 1060) {
     $(this).hide();
  }
  else { 
  }
});
0 votes
responded Apr 11, 2018 by LC Marshal Captain (25,790 points)
edited Sep 26, 2018 by LC Marshal
//hide toggle expandable on short description
$('body.page-property-detail').each(function() {
    var propDetailContent = $('.page-property-detail .listing-expandable').text();
    var pdtrimcontent = $.trim(propDetailContent);
    if(pdtrimcontent.length < 1100) {
      // alert('hey!');
      $('.readmore.font-sans').hide();
    }
    else {
      $('.readmore.font-sans').show();
    }
  });

$('body.page-property-detail.cleanmode').each(function() {
  var propReviewContent = $('.page-property-detail.cleanmode .listing-expandable').text();
  var prtrimcontent = $.trim(propReviewContent);
  if(prtrimcontent.length < 4000) {
    $('.readmore.font-sans').hide();
  }
  else {
    $('.readmore.font-sans').show();
  }

});
0 votes
responded Apr 11, 2018 by LC Marshal Captain (25,790 points)
(function($){
 if ($("body").hasClass('page-forum-')) {
    alert('hey!');
 }
})(jQuery);
0 votes
responded May 4, 2018 by LC Marshal Captain (25,790 points)

If body hasClass, change text of certain element, and change a href of specific element

if($('body').hasClass('page-node-add-forum')) {
    var crumbForumAdd3 = $('ol.breadcrumb li:nth-child(3)'),
        forumPage = '/property-forum/',
        crumbForumAdd = $('ol.breadcrumb li:nth-child(2)');

    $('h1.page-header').text( function() {
        return $(this).text().replace("Create Forum topic", "Create a Question"); 
    });

    $(crumbForumAdd3).text( function() {
        return $(this).text().replace("Create Forum topic", "Create a Question"); 
    });

    $(crumbForumAdd).html("<a href='/forum'>Forum</a>");
}

 

0 votes
responded May 4, 2018 by LC Marshal Captain (25,790 points)
edited Sep 26, 2018 by LC Marshal
// Condition for screen. If screen <425, show this text, otherwise, shortened it
if ($(window).width() < 425 ) {
  $(".header-search input[type='text']").attr("placeholder","Search for projects and photos..");
} else { 
  $(".header-search input[type='text']").attr("placeholder","Search..");
}
0 votes
responded May 23, 2018 by LC Marshal Captain (25,790 points)
edited Sep 26, 2018 by LC Marshal

Condition for google map

if($('body').hasClass('page-area-outlook')) {
    var outlookMap = $('#outlook-map');

    $(outlookMap).closest('section');
    $('html,body').animate({
        scrollTop: ($(outlookMap).offset().top) - 48
    },1000,"easeOutQuart",function(){
        if(heatmap == null){
            initHeatmap();
        }
    });
}
0 votes
responded Jun 1, 2018 by LC Marshal Captain (25,790 points)
edited Sep 26, 2018 by LC Marshal
// Check whether the class or its contents exist
$(function() {
  var prddd = $('.price-listing');  
  if ($(prddd).length) { 
   alert('heyyyyyy');
  }
});
0 votes
responded Jun 5, 2018 by LC Marshal Captain (25,790 points)
edited Sep 26, 2018 by LC Marshal
//condition for newlaunch listings if there's no list
$(function() { 
  var newlaunchListingstxt = $('ul#newlaunch-development-listings li a').text();
  if (newlaunchListingstxt.length < 1) {
   $('#newlaunch-element').hide();
  }
  else {
    $('#newlaunch-element').show();
  }
});
0 votes
responded Oct 31, 2018 by LC Marshal Captain (25,790 points)
//if value is empty, do this
if ($commentContainerTextarea.val() !== "") {
    $commentContainerFormControls.show();
}

 

0 votes
responded Jul 9, 2019 by LC Marshal Captain (25,790 points)
if ($(window).width() < 768) {
  if((parallaxFlg.css('display') == 'none')){
    parallaxAdCon.hide();  
  }
  else {
    contentPara.css({'margin-top': '600px'});
    parallaxFlg.css({'position': 'fixed', 'top': '140px', 'left': '0'});
    
    $(window).scroll(function() {
        parallaxAdCon.show(); 
        if (window.scrollY > 1300 ) {
          parallaxAdCon.hide(); 
        } else {
          parallaxAdCon.show(); 
        }
    });

  }
}

 

0 votes
responded Aug 14, 2019 by LC Marshal Captain (25,790 points)
//if the url is not empty
if(window.location.href != ''){
  $('#edit-combine').val(getParameterByName('combine'));
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...