Fix Form size HTML
Hi experts, I wish to fix the size of the paragraph (<p>) that, even minimizing the form of the page, it would remain intact its size.
My code shown below is one street sentence when i open the page. When i do minimize its page the sentence will turn double or even triple. Is it possible to fix the size of the paragraph? Hope you get my point. Thanks!
<!DOCTYPE html>
<html>
<body>
<h3>Enroll</h3>
<div>
<p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>
</body>
</html>
My code shown below is one street sentence when i open the page. When i do minimize its page the sentence will turn double or even triple. Is it possible to fix the size of the paragraph? Hope you get my point. Thanks!
<!DOCTYPE html>
<html>
<body>
<h3>Enroll</h3>
<div>
<p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>
</body>
</html>
Comments inside the code:
HTML:
JQuery:
You can calculate your window height and set a new factor constant
HTML:
<h3>Enroll</h3>
<div>
<p id="container">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>
JQuery:
$( window ).resize(function() {
//First I took the fontSize of p in px
var logoHeight=$('#container').css('font-size');
//I took the window innerheight in px.If i divide the window
// height/logoheight it produce 13.12 almost 13.This is a constant
//number that I use later as a factor to regulate the fontsize of paragraph
var windowHeight=window.innerHeight;
if(windowHeight>210){
windowHeight=210;
}
var factor=13;
$('#container').css('font-size',(windowHeight/factor));
});
You can calculate your window height and set a new factor constant
Hi Leonidas, I tried your code but it doesn't work on me. I attached here the code to let you know if I implementing the code correctly. I took 1 picture to show you the result while trying to run the code. Thank you!
Reflows.html
A.bmp
Reflows.html
A.bmp
Senior Engineer
Hi Whing,
Have you tried to change the width of the div !!!
if you do minimize its page the sentence will not turn double or even triple
<div style="width: 1200px">
Have you tried to change the width of the div !!!
if you do minimize its page the sentence will not turn double or even triple
<div style="width: 1200px">
Whing I think that I understand now.Change the height to width.In my screen is 710px;So the factor is 45.Check this:
$( window ).resize(function() {
//First I took the fontSize of p in px
var logoHeight=$('#container').css('font-size');
//I took the window innerwidth in px.If i divide the window
// width/logoheight it produce 45.01 almost 45.This is a constant
//number that I use later as a factor to regulate the fontsize of paragraph
var windowWidth=window.innerWidth;
console.log(windowWidth);
var factor=45;
$('#container').css('font-size',(windowWidth/factor));
});
Hi Leonidas, It's still not working. I've got the same result. My pc screen resolution is 1024 by 768 pixels. By the way where did you get that 45?
Whing my apologies I was not clear and I had wrong approach of the problem. SO...Initially I measured the innerWidth of the window in px.Then I measured the font size of <p> element (in px that).I divide these two and I get a number that I named factor.This factor is going to be a constant so every time that the width of the window reduced then and the font size (necessarily) must reduced to keep the factor costant.As these the correct code (tested in Liveweave) is this:
var logoHeightInit=$('#container').css('font-size');
var windowWidthInit=window.innerWidth;
var factor=windowWidth/parseInt(logoHeight);
$( window ).resize(function() {
var logoHeight=$('#container').css('font-size');
var windowWidth=window.innerWidth;
$('#container').css('font-size',(windowWidth/factor));
});
Hi Experts, I do believed that Leonidas solution above is correct but when I tred to run it to my server, still not working. I tried to use some script below to test if the code is running, but then I've got no result or no alert upon doing it. I have no idea which part of it getting wrong. Thank you!
<script>
var factor=windowWidth/parseIn
alert(factor);
</script>
<script>
var factor=windowWidth/parseIn
alert(factor);
</script>
Did you have put the JQuery library into a script?You can check the factor value like this:
var logoHeightInit=$('#container').css('font-size');
var windowWidthInit=window.innerWidth;
var factor=windowWidth/parseInt(logoHeight);
$( window ).resize(function() {
var logoHeight=$('#container').css('font-size');
var windowWidth=window.innerWidth;
console.log(factor);
$('#container').css('font-size',(windowWidth/factor));
});
Let me attached here once again the entire code, still the same result when I tried. I doubt the way I implemented the code. Please have a look. Thank you!
Reflows100.html
Reflows100.html
Hi Leonidas, Sorry, but I think there's a miss leading the way I ask my question. My problem is that when i minimize the page the line of the paragraph will merge each other leading to not readable to the clients. I pasted here the HTML and CSS for you to see the problem. Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5, CSS3 and JavaScript demo</title>
<link rel="stylesheet" href="WinStyle.css"/>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6
crossorigin="anonymous"></
</head>
<body>
<!-- Start your code here -->
<h3>Enroll</h3>
<div id="navHeadb2">
<p id="container">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>
<script>
var logoHeightInit=$('#contain
var windowWidthInit=window.inn
var factor=windowWidth/parseIn
$( window ).resize(function() {
var logoHeight=$('#container')
var windowWidth=window.innerWi
console.log(factor);
$('#container').css('font-
});
</script>
<!-- End your code here -->
</body>
</html>
CSS
#navHeadb2
{
line-height:0px;
height:20px;
width:100%;
float:left;
font-size: 16px;
background-color:yellow;
margin: 8px 1px 1px 1px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5, CSS3 and JavaScript demo</title>
<link rel="stylesheet" href="WinStyle.css"/>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6
crossorigin="anonymous"></
</head>
<body>
<!-- Start your code here -->
<h3>Enroll</h3>
<div id="navHeadb2">
<p id="container">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>
<script>
var logoHeightInit=$('#contain
var windowWidthInit=window.inn
var factor=windowWidth/parseIn
$( window ).resize(function() {
var logoHeight=$('#container')
var windowWidth=window.innerWi
console.log(factor);
$('#container').css('font-
});
</script>
<!-- End your code here -->
</body>
</html>
CSS
#navHeadb2
{
line-height:0px;
height:20px;
width:100%;
float:left;
font-size: 16px;
background-color:yellow;
margin: 8px 1px 1px 1px;
}
Gain unlimited access to on-demand training courses with an Experts Exchange subscription.
Get AccessWhy Experts Exchange?
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
Jim Murphy
Programmer at Smart IT Solutions
When asked, what has been your best career decision?
Deciding to stick with EE.
Mohamed Asif
Technical Department Head
Being involved with EE helped me to grow personally and professionally.
Carl Webster
CTP, Sr Infrastructure Consultant
Did You Know?
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE
Ask ANY Question
Connect with Certified Experts to gain insight and support on specific technology challenges including:
- Troubleshooting
- Research
- Professional Opinions