I'm trying to add a class to the body tag just on the homepage and that it. However, it's not working. What am I doing wring?
<script type="text/javascript">
$(document).ready(function() {
if(window.location.href===window.location.hostname) {
$("body").addClass("home");
}
});
</script>
I'm trying to add a class to the body tag just on the homepage and that it. However, it's not working. What am I doing wring?
<script type="text/javascript">
$(document).ready(function() {
if(window.location.href===window.location.hostname) {
$("body").addClass("home");
}
});
</script>
-
1
Do you need
jQueryto do that? – anmarti Commented Oct 22, 2015 at 14:02 - No. I actually thought plain old javascript would work better. – Xarcell Commented Oct 22, 2015 at 14:03
-
Why not set class in the HTML markup?
<body class="home">– anmarti Commented Oct 22, 2015 at 14:04 - 1 I'm wondering how you debug it, seems easy to see what's going wrong – A. Wolff Commented Oct 22, 2015 at 14:05
- @anmarti as mentioned, just homepage only. – Xarcell Commented Oct 22, 2015 at 14:06
5 Answers
Reset to default 3window.location.href will never be the same as window.location.hostname since the former will contain protocol part (e.g.: http://) where as the latter doesn't.
I don't think
if(window.location.href===window.location.hostname) {
}
will ever be true. hostname will host be something like stackoverflow. where href will include protocol, ports and other things that may be apart of full url. You want to check if
if(window.location.href.indexOf("home.html") != -1) {
}
Or something of that nature. But as pointed out in ment this seems much simpler to just add to that html file or do it on the server if you generate the HTML.
window.location.href contains protocol information and will never equal window.location.hostname
As per W3
- window.location.href returns the href (URL) of the current page
- window.location.hostname returns the domain name of the web host
- window.location.pathname returns the path and filename of the current page
You should rather check the pathname for home page location:
var path = window.location.pathname;
if (path == '/' || path == '/home.html') {
$("body").addClass("home");
}
It is possible without jquery very easy.
window.addEventListener("load", MyFunction);
function MyFunction(){
if(window.location.origin == window.location.href) {
var body = document.getElementsByTagName('body');
body[0].className = "myclass";
}
}
or
window.addEventListener("load", MyFunction);
function MyFunction(){
if(window.location.origin == window.location.href) {
document.getElementsByTagName('body')[0].className = "myclass";
}
}
body[0] because document.getElementsByTagName return value is an array.
With the ments being made, it got me thinking. I tried this and it worked.
<script type="text/javascript">
$(document).ready(function() {
switch (window.location.pathname) {
case '':
case '/index.php':
$('body').addClass('home')
}
});
</script>
I forgot to mention in the question that it is on a PHP powered website. I answered my own question to help others who one day might have the exact same question.