I want to change the menu text automatically when resizing the window to 768px or lower.
Any solution for that?
The code below doesn't work.
function menu() {
let w = window.outerWidth;
let y = document.getElementById("home");
if (w <= 768) {
y.innerText = "Menu";
} else {
y.innerText = "Home";
}
}
menu();
The above code works, you probably just need to call it whenever the resize event fires. Ex, if the above code is in a a function called "menu":
function menu(){
let w = window.outerWidth;
let y = document.getElementById("home");
if (w <= 768) {
y.innerText = "Menu";
} else {
y.innerText = "Home";
}
}
window.onresize = menu;
That said, though, it makes much more sense to do this with CSS media queries.
Related
I am having issues with a js script on a menu. I have the same menu but styled differently for pc and smaller versions. And I want this script to only affect the menu when the screen is lower than x width. How can I achieve this?
This is my script
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
}
Check the width of the window (cross-browser) then conditionally run your script.
var x = 400,
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (w < x) {
console.log(w, 'true')
// do stuff here when screen is smaller
} else {
console.log(w, 'false')
// do stuff here when screen is larger
}
You can use window width property of JQuery
if ($(window).width() < x)
{
//Code here
}
To check the width of window (cross-browser), you may use window, screen and width property of JavaScript.
It might help you :
//Smaller screen sizes
var size = 768;
if(window.screen.width < size) {
//Your code for smaller screen sizes here
}
else
{
//Your code for Larger screen sizes here
}
I'm working through a Lynda.com tutorial on responsive web experience. My Javascript is mostly working. From the instructor the goal of the JS is "we are determining the windowWidth based on the window outerWidth." Then we output that info and whether the screen is small, medium or large (the #media breakpoints).
As in, "945 (931+14) is large". My work so far is live with it.
The problem is that 'large' isn't changing to 'medium' and then 'small' as the window width changes.
Thanks!
If it's helpful, here's a codepen with all the HTML/CSS code. And here's the JS.
/* JavaScript Document */
var windowSize = '';
var windowWidth = 0;
var actualSize = 0;
$(document).ready(function () {
checkBrowserSize();
loadHero();
});
function checkBrowserSize() {
windowWidth = window.outerWidth;
var contentWidth = $('body').width();
var sizeDiff = windowWidth - contentWidth;
actualSize = windowWidth - sizeDiff;
if (actualSize > 800) { newWindowSize = 'large'; }
if (actualSize <= 800 && actualSize > 500) {newWindowSize = 'medium'; }
if (actualSize <= 500){ newWindowSize = 'small'; }
$('h1').html(windowWidth +' ('+contentWidth+'+'+sizeDiff+')'+' is '+newWindowSize);
}
function loadHero() {
$('#hero').load('content/hero_content_large.html');
}
Your problem is that the function only runs once on document ready. You have to bind your function to an onresize event so the function runs every time the resize event gets triggered (read about event handlers)
Here is a JavaScript example: http://www.w3schools.com/jsref/event_onresize.asp
And here is a jQuery example:
http://www.w3schools.com/jquery/event_resize.asp
I have a function name onresizeWindow() and onresizeWindow2() that i put in the head of my page to change the height of a div .
function onResizeWindow() {
if (window.innerHeight && document.getElementById("divListItem"))
document.getElementById("divListItem").style.height = window.innerHeight - 135;
else if (document.getElementById("divListItem"))
document.getElementById("divListItem").style.height = document.body.clientHeight - 135;
}
function onResizeWindow2() {
if (window.innerHeight && document.getElementById("divListItem"))
document.getElementById("divListItem").style.height = window.innerHeight - 275;
else if (document.getElementById("divListItem"))
document.getElementById("divListItem").style.height = document.body.clientHeight - 275;
}
}
Then in the footer of my page I put this
window.onresize = onResizeWindow;
onResizeWindow();
When user click a button, i put this code
function showDiv(){
var tr = document.getElementById('tdSearch');
if (tr.style.display =="table-row"){
tr.style.display = "none";
window.onresize= null;
window.onresize= onResizeWindow();
onResizeWindow();
}else{
tr.style.display = "table-row";
window.onresize= null;
window.onresize= onResizeWindow2();
onResizeWindow2();
}
}
The problem is after clicking the button, page onresize function of the page doesn't work anymore. How to fix it?
Just like your original assignment, you shouldn't use (). Use:
window.onresize = onResizeWindow;
// and
window.onresize = onResizeWindow2;
Adding the () immediately calls the functions and assigns their return value to the onresize property. These functions return nothing, so undefined is the returned value, meaning nothing runs when the window is resized.
When you do window.onresize= onResizeWindow();, you're effectively setting window.onresize to undefined, since you are running onResizeWindow and setting onresize to the return value.
Just remove the parentheses.
function showDiv() {
var tr = document.getElementById('tdSearch');
if (tr.style.display === "table-row") {
tr.style.display = "none";
window.onresize = onResizeWindow;
onResizeWindow();
} else {
tr.style.display = "table-row";
window.onresize = onResizeWindow2;
onResizeWindow2();
}
}
I have the following code. It set a filter bar in a search results page in a fixed position in the window after scrolling down to a certain point:
var docked;
var filters = document.getElementById('filters');
var init = filters.offsetTop;
function scrollTop() {
return document.body.scrollTop || document.documentElement.scrollTop;
}
window.onscroll = function () {
if (!docked && (init - scrollTop() < 0)) {
filters.style.top = 0;
filters.style.position = 'fixed';
filters.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
filters.style.position = 'absolute';
filters.style.top = init + 'px';
filters.className = filters.className.replace('docked', '');
docked = false;
}
}
My issue is (and it's more curiosity) - if I place this code at the top of my file (in the <head>), it doesn't work at all. The filter section doesn't scroll with the window as it should. However, when I place this code at the bottom of the file (right above the closing </body> tag), it works just fine.
Why is this? Does this have something to do with the way the code works? Or could it be just a quirk or bug in the rest of my file causing this?
Wrap your assignments in window.onload = function(){ /* your code here */ }; and it will run. The reason being that your assignment of var filters = document.getElementById('filters'); comes back as undefined since that element does not exist during page load at the time you reference it.
Example:
var docked;
var filters;
var init;
window.onload = function(){
filters = document.getElementById('filters');
init = filters.offsetTop;
};
if you do this, it should work:
$(document).ready(window.onscroll = function () {
if (!docked && (init - scrollTop() < 0)) {
filters.style.top = 0;
filters.style.position = 'fixed';
filters.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
filters.style.position = 'absolute';
filters.style.top = init + 'px';
filters.className = filters.className.replace('docked', '');
docked = false;
}
}
);
I have this very usefull little piece of javascript that centers mig div. By i would like to make it apply to 3 divs on the same site, without repeating the same piece of code 3 times.
Any ideas on how to do it?
Putting all 3 divs into 1 divs that takes care of it, is not and option.
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('outer');
var contentHeight = contentElement.offsetHeight;
if (windowHeight < 570) {
contentElement.style.position = 'relative';
contentElement.style.top = '30px';
}
else if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
}
else {
contentElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setContent();
}
window.onresize = function() {
setContent();
}
//-->
</script>
Regards Troels
You don't need to check if document.getElementById exists. It has been supported since the Roman Empire.
Pass the id or the actual element that has to be centered to your function. That removes the dependency on a fixed element (#outer) in your case and makes it more flexible. Also try to name your functions to be indicative of what they are actually doing. setContent is a very generic name and doesn't indicate the centering aspect anywhere.
function centerElementWithId(id) {
..
var contentElement = document.getElementById(id);
..
}
Then call it thrice,
centerElementWithId('outer')
centerElementWithId('secondDiv')
centerElementWithId('thirdDiv');