CODEWITHSUNDEEP
javascripthtmlcss
user3011784
user3011784

Reputation: 839

change fontsize on resize inside a div with javascript

I am fairly new with javascript, but i'm trying to lurn.

I have an image with a div container over the image. The div container contains 2 inner div for a Title and some text. THe font size of the title is bigger than the text.

My screen innerwidth that I use to work and develop is 768.

I want to have the javascript change the fontsize on load and on resize based on proportion of the browser window... so if the browser window is 30% larger... the font should be 30% larger then defined in the css... This is the code I made.. but it's not working.

  <head>
<style type="text/css">
#container{
    position: absolute;
    top:10%;
    left: 10%;
    background-color:#F30;

}

#boxtitle{
    font-size:3em;
}
#boxtxt{
    font-size:0.9em;
}
</style>
<script>
onresize=onload=function()
{ 
    var innerW = window.innerWidth;
    var boxtitle = document.getElementById("boxtitle").style.fontSize;
    var boxtxt = document.getElementById("boxtxt").style.fontSize;
    var ratio = innerW / 768;

    boxtitle = boxtitle * ratio;
    boxtxt = boxtxt * ratio;
}
</script>
</head>

<body>
<img src="main_pic3.jpg" width="100%" />
<div id="container">
<table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div id="boxtitle">TITLE</div></td>
  </tr>
  <tr>
    <td><div id="boxtxt">TXT</div></td>
  </tr>
</table>

</div>
</body>

Upvotes: 0

Views: 2325

Answers (5)

ZipoDev
ZipoDev

Reputation: 1

For the font-size, simply increase the size of the frame because today it is not possible to apply style to elements inside an iframe. Like this :

.trustpilot-widget iframe {
    transform: scale(2);
    margin:auto;
}

Upvotes: 0

juminoz
juminoz

Reputation: 3218

How about using percentage for font sizes instead so everything stay proportional also. You just have to bound top level with font size that is not in percentage like in the example. Otherwise, you will have a nightmare trying to maintain so many font sizes in Javascript.

Here's an example: http://jsfiddle.net/yL89q/

HTML:

<div id="container">
    <h1>Title</h2>
    <div class="description">Description</div>
</div>

CSS:

#container{
    font-size: 13px;
}

.container h1{
    font-size: 150%;
}

.container .description{
    font-size: 100%;
}

JS:

onresize=onload=function(){ 
    var innerW = window.innerWidth;
    var ratio = innerW / 768;

    var boxtitle = Math.round(13 * ratio);
    document.getElementById("container").style.fontSize = boxtitle + 'px';
}

Upvotes: 0

Josh Beam
Josh Beam

Reputation: 19802

You are setting the value of your variables to the font sizes (you are not storing references to the DOM elements.) Also, try using parseInt to make sure you get any strings out of your numbers.

Try:

var innerW = parseInt(window.innerWidth),
    boxtxt = parseInt(document.getElementById("boxtxt").style.fontSize),
    ratio = innerW / 768;

document.getElementById("boxtxt").style.fontSize = (boxtxt * ratio) + 'px'; //etc.

One thing to note (I haven't tested it in other browsers) is that in Firefox for Mac, style.fontSize only returns a font-size that's inline to an element, and not the font-size on your stylesheet.

So, an option is this:

function getStyle(object,prop) {
    if(getComputedStyle) {
        return getComputedStyle(object)[prop];
    } else if (object.currentStyle) {
        return object.currentStyle[prop]; //IE  
    }
}

//implement it

getStyle(document.getElementById('someElement'),'fontSize'); //for example, outputs 12px

One thing I want to point out is that if you try to multiply an empty string by a number (for example, if you use style.fontSize where there are no inline styles and multiply that [which is now an empty string] by an integer, such as your screen width [which in this case is 768]), it will output 0, which would set your font-size to 0, thus making it disappear:

console.log(document.getElementById('download').style.fontSize * 768);

    //outputs 0

Additionally, I noticed you are using resize along with your onload handler. I might suggest putting resize inside your onload handler instead, unless you know that you won't be putting other code inside your onload handler (because this would cause lots of stuff to happen every single time the window is resized.)

Another option for handling font size based on screen size are CSS media queries (I suggest a Google search for that.)

Upvotes: 1

pwolaq
pwolaq

Reputation: 6381

first of all, you have to store original values, otherwise you will be getting different font sizes on every resize

then, you just have to append it

onresize=onload=function()
{
    var ratio = window.innerWidth / 768;
    document.getElementById("boxtitle").style.fontSize = 3*ratio + 'em';
    document.getElementById("boxtxt").style.fontSize = 0.9*ratio + 'em';
}

another approach is to use viewport based metrics - http://snook.ca/archives/html_and_css/vm-vh-units

Upvotes: 0

Victor Soto
Victor Soto

Reputation: 234

onresize=onload=function()
{ 
    var innerW = window.innerWidth;
    var boxtitle = document.getElementById("boxtitle").style.fontSize;
    var boxtxt = document.getElementById("boxtxt").style.fontSize;
    var ratio = innerW / 768;

    boxtitle = boxtitle * ratio; //<--- try appending px example below up to you how you append it
    document.getElementById("boxtitle").style.fontSize = '100px'
    boxtxt = boxtxt * ratio; //<--- try appending px
}

Upvotes: 0

Related Questions