Hi dharmendrThanks 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 fontsize 15pxWhen is greater than 100 it reads shortstring but doesnrsquot read class name longstringThis what I have when data displays 212 charactersTemperature 684deg 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 Leve

Hi slb2013You need to change the if conditionPlease refer below sampleHTMLltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset34utf834 gt lttitlegtlttitlegtltheadgtltbodygt ltstyle type34textcss34gt longstring fontsize 15px fontfamily 39Segoe UI39 shortstring fontsize 12pt fontfamily Arial ltstylegt ltdiv id34dvDetails34gtTemperature 684deg 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 8134 Voltage 0 ltdivgt ltscript type34textjavascript34gt windowonload function LessMore function LessMore var text documentgetElementById34dvDetails34innerHTML if textlength lt 30

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

slb2013

SOLVED CLOSED ACTIVE ANSWERED
User: slb2013
Posted: on Feb 14, 2022 09:43 PM
Forum: HTML and CSS
Answer: 1
Views: 1975

Hi dharmendr,

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

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

arjunv

0 2

Reply
ANSWER
User: arjunv
Replied: on Feb 14, 2022 11:06 PM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

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

Company

Explore

Follow us

Contact Us