1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Jquery window size. change text character limit

Discussion in 'jQuery' started by Divvy, Jul 29, 2017.

  1. #1
    Hello guys,
    SEMrush
    Can someone give me a little help here?

    I'm trying to use this JQuery to limit some text characters in different window size:
    http://jsfiddle.net/5SM9u/32/

    That code example works perfectly.

    But not in my website:
    http://thebtcdude.com/
    Code (markup):
    At first look, it seems to work fine. Appears the green bar with full text.
    In window resize, the bar changed to red and the text is limited. Everything good here.
    The problem is that when I come back to initial resolution, the bar dont change from red to green like in the example.

    What I'm doing wrong?

    The code that I used:

    
    <script src="http://thebtcdude.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    function checkWidth() {
    if ($(window).width() < 700) {
    $('#menu2').addClass('f-nav');
    $("#menu2").each(function(i){
    len=$(this).text().length;
    if(len>30)
    {
    $(this).text($(this).text().substr(0,30)+'...');
    }
    })
    } else{
    $('#menu2').removeClass('f-nav');
    $("#menu2").each(function(i){
    $(this).text($(this).data('originalTxt'));
    });
    }
    }
    $("#menu2").each(function(){
    $(this).data({originalTxt: $(this).text()});
    });
    $(window).resize(checkWidth);
    </script>
    Code (markup):
    Thanks :)
     
    Divvy, Jul 29, 2017 IP
    SEMrush
  2. Blank ™

    Blank ™ Well-Known Member

    Messages:
    223
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #2
    Works just fine on Chrome (59.0.3071.115 (Official Build) (64-bit)). Anything in console (Inspector)?
     
    Blank ™, Jul 29, 2017 IP
  3. Divvy

    Divvy Well-Known Member

    Messages:
    725
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #3
    Hey,

    Thank you for trying to help me.
    Is not working fine...

    Please take a look, 1024 resolution:

    [​IMG]

    720 Resolution:
    [​IMG]

    But when I come back to 1024, the text appears limited, and must appear like in the 1st screenshot:
    [​IMG]
     
    Divvy, Jul 29, 2017 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,851
    Likes Received:
    1,084
    Best Answers:
    22
    Trophy Points:
    400
    #4
    I don't know what you're doing, but I believe you're doing a lot of work for nothing. Why would you want to shorten the text for mobile devices? How is it going to create a good UX and help anyone if they have no clue what this or that sentence is?

    Secondly, you were using text-overflow: ellipsis; in that other thread: https://forums.digitalpoint.com/threads/limit-text-length-using-css-problem.2810903/#post-19488742 just place a similar css code for this example between the @media (max-width: 720px) {} instead of using jquery.
     
    qwikad.com, Jul 29, 2017 IP
  5. Divvy

    Divvy Well-Known Member

    Messages:
    725
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #5
    qwikad, I want to shorten the text for mobile devices because I have some big texts that broke my website layout.

    I tried CSS but unfortunately breaks my layout too and I cant find a fix without break something else besides the text.

    But here I'm very close for the solution, I just need to understand why is working fine in the code example url and not in my website. Any idea?

    Thanks!
     
    Divvy, Jul 29, 2017 IP
  6. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #6
    lol! CSS is the right job for this, not jquery.

    --
    G r e e n h o r n
    j a m i e
     
    j a m i e, Jul 29, 2017 IP
  7. Blank ™

    Blank ™ Well-Known Member

    Messages:
    223
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #7
    I doubt it. While yes, you can achieve that with the help of CSS, you end up having one thing on the screen and something else in the source code, which is not right. If you do want to change something, change it instead of hiding from the users eyes.
     
    Blank ™, Jul 30, 2017 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #8
    And... the basis for this is... what, exactly? What you show to the user is all about presentation, which is CSS' job. What is in the source-code is completely and utterly irrelevant to users of GUI-based browsers. For users that doesn't use GUI-based browsers (like screen readers), presenting it via CSS makes the full text available to them - which is usually what you want. I fail to see how your answer is even remotely correct...
     
    PoPSiCLe, Jul 31, 2017 IP
  9. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #9
    KaBoom goes the dynamite portrayed as an illustrious playboy bunny named PoPSiCLe (~:

    Here's an alternative CSS concoction that might be a good replacement for the jQuery function your trying to integrate.
    jsfiddle.net/xs0m7gex/

    Best regards,
    G r e e n h o r n
    j a m i e

    "This thread is being monitored, surveillanced, recorded, and archived" -NSA (i'm watching you)
     
    j a m i e, Aug 1, 2017 IP
  10. Blank ™

    Blank ™ Well-Known Member

    Messages:
    223
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #10
    Poor you. Unfortunately. By source code I mean html, which as per you example could be also used by non-GUI-based browser users, like bots and such. Having something in the source and not having it in the front-end will definitely confuse both systems and users if they will ever try to look at it.
     
    Blank ™, Aug 2, 2017 IP
  11. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #11
    Uhm... no? It will not. First of all, bots ONLY see the source. So it makes perfect sense to have the whole text in the HTML. Bots don't care about CSS or JS. If the user want to look at the HTML, and fails to understand what s/he sees... that is really not something that should concern you.
    This is a visual difference, based on different physical traits. Hence, it should be modified using CSS. It makes no sense doing it with javascript - why is that better, exactly?
     
    PoPSiCLe, Aug 2, 2017 IP