Hatchwald
Hatchwald

Reputation: 300

change tag <h1>, if change page

I have some JavaScript code, and if the homepage or index (e.g. at malaspulang.com) the tag <h1> does not change. But if I change the page (e.g. at malaspulang.com/lifestyle), the tag <h1> will be replaced with <h2>.

This my code:

<div id="header" class="hide"><h1>this my title</h1></div>
<script>
if(window.URL === 'malaspulang.com'){

}else{

 $('#header').empty();
 $('#header').html('<h2>this my title</h2>');
}
</script>

In my homepage site, the tag <h1> should replace with <h2> I think that my code is true, but I am so confused with this code. So if anyone can help me, I will be happy :)

NB: If anyone that's code with PHP, you can tell me :)

Upvotes: 0

Views: 419

Answers (7)

jack
jack

Reputation: 109

Maybe like this :

<div class="hide" id="header">
  <h1>this my title</h1>
</div>
<script>
   $(document).ready(function(){
      console.log(document.URL);//this optional , just display your link at now
      var uri= document.URL;
      if(uri == 'http://malaspulang.com/'){ //use full link from your site
      //do nothing , because logical true
      }else{
          $('#header').empty();
          $('#header').html('<h2>this my title</h2>');
      }
   });
</script>

hope this help you

Upvotes: 2

Bustedll
Bustedll

Reputation: 1

if($("body").hasClass("home")) {
    // don't do anything.
} else{
    // fire your code.
}

Upvotes: 0

Masoud Darvishian
Masoud Darvishian

Reputation: 3964

Instead of using window.URL try to use window.location.href and also write complete url name: http://malaspulang.com

<div id="header" class="hide">
  <h1>this my title</h1>
</div>
<script>
if (window.location.href === 'https://fiddle.jshell.net/_display/') { // current url
    document.getElementById('header').innerHTML = "";
    document.getElementById('header').innerHTML = "<h1>this my title (h1)</h1>";
}
else {
    document.getElementById('header').innerHTML = "";
    document.getElementById('header').innerHTML = "<h2>this my title (h2)</h2>";
}
</script>

You can also try it on jsfiddle

Upvotes: 0

CyanCoding
CyanCoding

Reputation: 1037

Your problem is that your element does not have a class defined. As seen here: <div id="header"><h1>this my title</h1></div>, it has the id of 'header' not the class of header. This means that your JavaScript needs to be calling for an id of 'header' and not a class.

Here is the code that will work:

$('#header').html('<h2>This is my title</h2>');

Upvotes: 0

Eleven
Eleven

Reputation: 886

Use $('#header') instead of $('.header') (select by id, not by class). And you do not need $('.header').empty().

Upvotes: -1

Amira
Amira

Reputation: 9

Replace $('.header') with $('#header')

$('#header') - targeting element with id attribute 'header'.

$('.header') - targeting element with class attribute 'header'.

Upvotes: 0

rijin
rijin

Reputation: 1757

Access id using #header

$('#header').empty();
$('#header').html('<h2>this my title</h2>');

Upvotes: 0

Related Questions