更改的文字 <h1> 如果屏幕缩小

Question

I have a code trying to change the text of an h1 if the screen is reduced in size, here's the actual code I have, but is not working. Someone could help me to correct it and to understand it? thanks!

HTML

<h1 id="text1">Test</h1>

JAVASCRIPT

if($(window).width() <= 500){
$('#text1').Text('testing');  
}else{
$('#text1').Text('buuu');
}

Answer 1

You need to work along with window resize event. Other option is using CSS pseudo code.

 @media (min-width: 500px) { #text1:after { content: "foo"; } } @media (max-width: 499px) { #text1:after { content: "bar"; } } 

 <h1 id="text1"></h1> 

Edited As per Niet the Dark Absol suggestion.

 @media (min-width: 500px) { #text1 > .tiny { display: none; } } @media (max-width: 499px) { #text1 > .big { display: none; } } 

 <h1 id="text1"> <span class="big">Bigger Content</span> <span class="tiny">Smaller Content</span> </h1> 

Answer 2

Maybe CSS could help you here:

---

use data- attributes to validate HTML5 and mediaqueries to show its value. Old text-indent method to erase at screen text hold in the tag itself.

You can use it without id or class for entire site, but data- attribute will need to be there and filled, else a class to set wherever needed, or id for a single use.

  @media all and (max-width:500px) { h1 { text-indent:-9999px; } h1:before { content:attr(data-text); text-indent:0; float:left; } } 

 <h1 data-text="short text">My long text stands here</h1> 

Answer 3

You have to catch the window's resizing events. Pretty easy to do it with jquery . Try this:

$(window).resize(function(){
    if ($(window).width() <= 500){
        $('#text1').Text('testing');  
    }
    else {
        $('#text1').Text('buuu');
    }
});

http://jsbin.com/puzanajepe/1/edit?html,js,output