[Solved] Set CSS using JavaScript based on characters length not working

slb2013
 
on Feb 14, 2022 09:43 PM
781 Views

Hi dharmendr,

Thanks for your time and help. Look good, but there is something is not right.  

Less than 25 characters font size 12px and More than 100 characters font-size 15px

When is greater than 100 it reads shortstring but doesn’t read class name longstring?

This what I have when data displays: 212 characters

Temperature: 68.4° F , Pressure: Pressure Sensor Error (Transducer Error or Cable Break).  , Current A: 0 Amps , Current B: 0 Amps , Current C: 0 Amps , Mode: Inactive, Sound Level: Abnormal DB 81.34, Voltage: 0   

7 characters

68.4° F

5 characters

77° F

22 characters

Relay 1: Off, Relay 2: Off

See the code:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<script type="text/javascript">
    window.onload = function () {
        LessMore();
    }
        function LessMore() {
        var text = document.getElementById("dvDetails").innerHTML;
        if (text.length < 30) {
            document.getElementById("dvDetails").className = 'longstring';
           /* document.getElementById("dvDetails").className = 'shortstring';*/
        }
        if (text.length > 250) {
            document.getElementById("dvDetails").className = 'shortstring';
            /*document.getElementById("dvDetails").className = 'longstring';*/
        }
    }
</script>


 

<style type="text/css">
    .longstring {
        font-size: 12px;
        font-family: Calibri;
        color:orangered;
    }

    .shortstring {
        font-size: 18px;
        font-family: Arial;
        color: #b200ff;
    }   
</style>

 

 <div class="col-6 my-4 text-wrap longstring, shortstring" id="dvDetails" data-guid="<%= DataMsg %>"><%:item.DisplayData %> </div>

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Feb 14, 2022 11:06 PM

Hi slb2013,

You need to change the if condition.

Please refer below sample.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <style type="text/css">
        .longstring {
            font-size: 15px;
            font-family: 'Segoe UI';
        }

        .shortstring {
            font-size: 12pt;
            font-family: Arial;
        }
    </style>
    <div id="dvDetails">Temperature: 68.4° F , Pressure: Pressure Sensor Error (Transducer Error or Cable Break).  , Current A: 0 Amps , Current B: 0 Amps , Current C: 0 Amps , Mode: Inactive, Sound Level: Abnormal DB 81.34, Voltage: 0 </div>
    <script type="text/javascript">
        window.onload = function () {
            LessMore();
        }

        function LessMore() {
            var text = document.getElementById("dvDetails").innerHTML;
            if (text.length < 30) {
                document.getElementById("dvDetails").className = 'longstring';
            }
            if (text.length >= 30 && text.length <= 250) {
                document.getElementById("dvDetails").className = 'longstring';
            }
            if (text.length > 250) {
                document.getElementById("dvDetails").className = 'shortstring';
            }
        }
    </script>
</body>
</html>

Demo