CODEWITHSUNDEEP
javascriptjquery
RNPF
RNPF

Reputation: 261

Responsive text with JS and jQuery

I'm trying to set up a simple title on my site, that if the window is scaled or loaded below a certain px width, changes the text within to be shorter, then if scaled larger again pops back to the original HTML again. However, for some reason, this is proving to be very difficult.

Right now I have:

<script>
if ( $(window).width() > 480) {    
    $(".title").html("<a class='title' href='/'>LONGTEXTLONGTEXT</a>");
}
</script>

<script>
window.addEventListener('resize', function(event){
    if ( $(window).width() < 480) {    
        $(".title").html("<a class='title' href='/'>SHORTTEXT</a>");
    }
});
</script>

But for some reason it simply fails.

Any ideas?

Upvotes: 0

Views: 1470

Answers (5)

Dinever
Dinever

Reputation: 690

There is an alternative way to achieve this by CSS:

Style:

@media only screen and (min-width: 960px) {
    .title-small {
        display: none;
    }
}

@media only screen and (max-width: 960px) {
    .title-small {
      display: block;
    }

    .title {
      display: none;
    }
}

HTML:

<h1 class="title">Hello This is a long title.</h1>
<h1 class="title-small">Short title</h1>

Upvotes: 0

Pablo Pazos
Pablo Pazos

Reputation: 3216

Try font awesome. It is a good solution for responsive text.

Upvotes: 0

RNPF
RNPF

Reputation: 261

Figured it out.

<script>
 $(document).ready(larg);

 $(window).resize(larg);

 function larg(){
if ( $(window).width() < 480) {    
$(".title").html("<a class='title' href='/'>Smaller Text</a>");
}
else {
$(".title").html("<a class='title' href='/'>Text</a>");
}
}
</script>

Will replace the text on both load, and resize.

Upvotes: 1

Rhumborl
Rhumborl

Reputation: 16609

As suggested, this is better done without JavaScript using CSS media queries (and without just changing the font size).

Put the long and short title links on the page and show/hide them depending on the width:

div.title { background-color:#ff0; border-bottom:1px solid #000; }

/* this is for anything less than 480px */    
.title > .title { display:none; }
.title > .titlesmall { display:initial; }

/* greater than 480px */
@media screen and (min-width: 480px){
  .title > .title { display:initial; }
  .title > .titlesmall { display:none; }
}
<div class="title">
  <a class='title' href='/'>Some really long title</a>
  <a class='titlesmall' href='/'>CD</a>
</div>

Alternatively fixing the syntax error, and preferably also using jQuery to listen to the resize event, should also work well enough:

<div class="title">
  <a class='title' href='/'>Some really long title</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  if ($(window).width() < 480) {
    $(".title").html("<a class='title' href='/'>CD</a>");
  }
</script>

<script>
  $(window).on('resize', function(event) {
    if ($(window).width() < 480) {
      $(".title").html("<a class='title' href='/'>CD</a>");
    }
  });
</script>

Upvotes: 1

Sarah L.
Sarah L.

Reputation: 51

This can and should be done with CSS. Here is how I would do it:

/* this is for anything less than 480px */    
.title{ font-size: 1em; }

...

/* greater than 480px */
@media screen and (min-width: 480px){ /*change min-width to em if you prefer*/
    .title{ font-size: 1.25em; }
}

You can chose whichever font sizes you want. Out of curiosity, was there a particular reason you wanted to do it with JavaScript?

Upvotes: 0

Related Questions