Im not sure this can be done, but I have a h1 element thats full width within a div, and within that div is also a button thats position is set to top right and absolute.
What Im attempting to do is gather the width of the button which i have done, and also on page load I have got the width of the h1 element.
But what I need to happen is to set the width of the h1 element minus the width of the button.
This is what I have so far, and its good so far, but its the way of setting the width of the h1 element minus the width of the button.
.container h1 {
overflow-wrap: break-word;
margin: auto;
}
var buttonWidth = document.getElementById('btnEdit').clientWidth;
var h1Width = $('.container').find(".propertyH1").width();
console.log(buttonWidth);
console.log(h1Width);
var h1WidthReduced = h1Width - (buttonWidth * 2);
console.log(h1WidthReduced);
$(".container .propertyH1").css("width", h1WidthReduced);
This works above but only on page load, how can I do it on the fly, and if the user drags the browser in from the right
I use this below, but when i start to resize the window myself from the right, the h1 element just goes to literally a few pixels wide and its completely wrong
$(function () {
$(window).on('resize', function () {
var buttonWidth = document.getElementById('btnEdit').clientWidth;
var h1Width = $('.container').find(".propertyH1").width();
console.log(buttonWidth);
console.log(h1Width);
var h1WidthReduced = h1Width - (buttonWidth * 2);
console.log(h1WidthReduced);
$(".container .propertyH1").css("width", h1WidthReduced);
});
});
Sorry to butt in to a js thread but that sounds like a job for CSS?
Why do you need to set the width of the H1?
You can put the button to the right and have the text wrap as required quite easily unless I’m missing some important requirements. I can’t think of a good reason why you would want to do this.
It may require changing the html so perhaps you are stuck with some legacy code or something? A demo or code example would help to identify if this can be done without the need for a script.
I wouldn’t like to add a resize script to check the width and that will make the page pretty janky!
Or you could apply a fixed width to the button by default and use calc to get the remaining width for the h1 width:calc(100% -100px). However I still feel this can be done automatically anyway.
Well whats happening is the button in the top right is set to absolute, and then the h1 title sits on the same line full width and centered.
When the screen width is smaller and the name of the hotel that goes in the h1 is very long, the letters go over the button, it has to stay like that, and the button sometimes changes width, so what im trying to do is on page load it takes the button width into consideration, and changes the h1 width, then on page resize it adapt continually.
OOOO this is interesting, havent seen this before, only trouble is the button I need to protect can be different widths on different pages, but great little bit of code that.
Thinking about it I wonder if I could put this in the query and pass through the button width on page load, so use jquery to control the css, would that work
OK took the window on load function away and getting somewhere now, and its saying calc is not defined, is this going to stop this working, I jope not as its the best way by far, hopefully you think so to Paul
It works perfectly on single lines and when the line wraps. It gets a little bit squeezed at small widths but I guess most times a media query would be changing layout anyway for smaller screens.
I haven’t tried with grid yet but I’m sure there’s another answer in there somewhere
I might throw this out for one of my old CSS quizzes
