Menu
I am trying to change the width of some HTML element using Javascript; the aim is to determine it using the the innerWidth property.
Below is my code:
$(document).ready(function () {
var footer = document.getElementsByTagName('footer')[0];
var header = document.getElementsByTagName('header')[0];
footer.style.width = window.innerWidth - 400;
header.style.width = window.innerWidth - 400;
});
I'm using Javascript to assign header and footer width so as to prevent a possible bleeding, resulting in an overflow with the addition of a scrollbar.
Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="img_container">
<a href="#"><img id="header" src="img/Header.png"></a>
</div>
<nav>
<ul>
<li><a href="#">text</a>
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">Text</a></li>
</ul>
</li>
<li><a href="#">Text</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<a href="#"><img id="img" src="img/img.png"></a>
</header>
<footer>
<div id="footer_container">
<div id="footer_el">
<span class="header">Services</span>
<hr> Bunch of links and text
</div>
<div id="footer_el">
<span class="header">Text</span>
<hr> Bunch of links and text
</div>
<div id="footer_el">
<span class="header">About us</span>
<hr>
<a href="#">Some text</a>
<br>Contact us:
<br>Email
<br>Phone number
</div>
<div id="footer_el">
<span class="header">Partners</span>
<hr> Yaadiyaadiyaa
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>Some text...
</div>
</footer>
</body>
</html>
The image below shows the actual error I get in my Google Chrome browser console:
617
Your code certainly should return a header and footer if there is one present on your page. If there isn't one on your page you would get the above error. You may also need to add "px" to the end of the statements to get the width setting to work.
$(document).ready(function() {
var footer = document.getElementsByTagName('footer')[0];
var header = document.getElementsByTagName('header')[0];
footer.style.width = (window.innerWidth - 400) + "px";
header.style.width = (window.innerWidth - 400) + "px";
});header {
background-color: red;
}
footer {
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h1>Header</h1>
</header>
<footer>
<h1>Footer</h1>
</footer>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
