CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lel
lel

Reputation: 327

Changing content of a href

I want to change the content "Hi" to something else when the width of screen is 480px. I tried using Pseudo elements but is not showing. Javascript, Jquery and css is fine for answer provide. Thanks!

HTML

<li><a href="#service-tab-1" class="service-tab-1">Hi</a></li>

CSS

#service-tabs ul li a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #eaeaea;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 100px;
    text-align: center;
    margin-right: 5px;
}

Upvotes: 1

Views: 80

Answers (5)

Kiran Shahi
Kiran Shahi

Reputation: 7980

You can use following jQuery Code.

$(document).ready(function () {
  $(window).resize(function () {
    width=$(window).width();
    if (width == 480){
      $(".service-tab-1").text("something else");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#service-tab-1" class="service-tab-1">Hi</a></li>

Here $(window).width(); gets the current width of the window and $(".service-tab-1").text("something else"); changes the text of the element based on class name. And the $(window).resize() event is sent to the window element when the size of the browser window changes

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

Jquery can help with this. Just make sure to change the selectors once you incorporate it to your project.

In my snippet it changes when the screen is below or equal 480. If you want it for only 480 width, change the if to:

if ($(window).width() == 480)

Happy to help with that if needed

if ($(window).width() <= 480) {
  $('li a').text('Something else');
}
#service-tabs ul li a {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #eaeaea;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 100px;
  text-align: center;
  margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<li><a href="#service-tab-1" class="service-tab-1">Hi</a></li>

Upvotes: 0

Casper
Casper

Reputation: 1539

Try like this,

.service-tab-1:before {
    content: 'Hi';
}

@media screen and (max-width: 480px) {
    .service-tab-1:before {
        content: 'Hello';
    }
}
<a href="#service-tab-1" class="service-tab-1"></a>

Upvotes: 4

A.D.
A.D.

Reputation: 2372

You can use document or window as per your need with following code.

 <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 <script>
 $(function(){if ($(window).width() = 480) {
      $(".service-tab-1").text("blab blab blab");
   }
 });
 </script>

Upvotes: 0

Jinu Kurian
Jinu Kurian

Reputation: 9416

I have done a quick demo with the Pseudo elements [Pure CSS method]. Check out the snippet and resize it to see the text change. You can try different methods to achieve this.

Here is the fiddle if you want to play around

li a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #eaeaea;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 100px;
    text-align: center;
    margin-right: 5px;
}

li a:before {
  content: 'Hola';
  color: red;
  display: none;
}

@media screen and (max-width: 480px) {
  li a{
    color: transparent;
  }
  li a:before {
    display: block;
  }
}
<li><a href="#service-tab-1" class="service-tab-1">Hi</a></li>

Upvotes: 0

Related Questions