Pass parameters to HTML to control font size

Question

I have an HTML page with references to css file.

<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Limelight|Flamenco|Federo|Yesteryear|Josefin Sans|Spinnaker|Sansita One|Handlee|Droid Sans|Oswald:400,300,700" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/fontawesome.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/project.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/funny-positions.css" media="screen" rel="stylesheet" type="text/css" />

In the stylesheets/funny-positions.css file I have the follwoing definition:

 .container .row-fluid .span12 .div-1 .page-header h1 {
   font-family:"handlee";
   font-weight: normal;
   font-size: 42px;
   color: #555555;
 }

How can I control the font-size via the html URL? In other words, How can I pass parameters to the HTML via URL and read these parameters in the css file?

something like: http://www.mywebpage.com/index.html/?font-size=50

Edit1

I'm not a web developer so I will need "answer for dummies". I not sure which language I'm using since I created the page using "html online editor" (Easel). You can find me page here: http://www.insites-m.com/articals/funny_sex_positions/

I tried the following and it didn't worked:

 .container .row-fluid .span12 .div-1 .page-header h1 {
   id:"myH1";
   font-family:"handlee";
   font-weight: normal;
   font-size: 42px;
   color: #555555;
 }

Then in the html:

    <html lang="en">
      <head>
        <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Limelight|Flamenco|Federo|Yesteryear|Josefin Sans|Spinnaker|Sansita One|Handlee|Droid Sans|Oswald:400,300,700" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/fontawesome.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/project.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="stylesheets/funny-sex-positions.css" media="screen" rel="stylesheet" type="text/css" />

    <script type="text/javascript">document.getElementById("myH1").style.fontSize=window.location.href.split("?")[1].replace("font-size=","")+"px";</script>
    <title>funny_sex_positions</title>
  </head>

  <body>
    <div class="container">
      <div class="row-fluid">
.....

Thanks.

you won't be able to read those parameters _in the CSS file_, but you can read them with JS and then adjust the styles of the elements you need also with JS. — andi, Jun 04 '14 at 15:56
Forget javascript because it only change the font size afterwards and that will look terrible. I can answer you if you tell me which web development language you are using? — Marco Prins, Jun 04 '14 at 16:03
@MarcoPrins why would it look terrible? OP specified the languages used: Javascript, HTML, CSS. — putvande, Jun 04 '14 at 16:04
Because it will render the wrong font size first, and then the javascript will kick in and change it aftwerwards @putvande — Marco Prins, Jun 04 '14 at 16:05
@MarcoPrins Thanks, I not a web developer so I will need "answer for dummies". I not sure which language I'm using since I created the page using "html online editor" (Easel). You can find me page here: http://www.insites-m.com/articals/funny_sex_positions/ Thanks — Shoham Ben-Har, Jun 05 '14 at 03:57
This site will only provide so much help. Don't expect a complete, debugged solution. See the about page: http://stackoverflow.com/about. Note _Stack Overflow is a question and answer site for professional and enthusiast programmers._ The answers you get will be targeted to that level. — Jon P, Jun 05 '14 at 04:47
@MarcoPrins you are absolutely right. I tried the java script solution and it is look terrible. I'm using html standard, I'm not a web developer so I'm using a html editor tool and then I edited the html for more functionality. B.T.W. The tool I'm using is: https://www.easel.io/ — Shoham Ben-Har, Jun 13 '14 at 12:18
It's not possible doing this with just html. In what language is your server-side code written? It's probably easy as pie to just embed the varable with inline styling, if you can just find out what the server application is written in? — Marco Prins, Jun 13 '14 at 12:50
@MarcoPrins Thanks, I'm not sure in what the server application is written. I'm using HostGator hosting. I try to find out from this link :http://support.hostgator.com/articles/hosting-guide/hardware-software/what-software-and-program-versions-does-hostgator-offer but I'm not an expert web developer — Shoham Ben-Har, Jun 13 '14 at 13:09

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

What about a JS code that read the parameter and then, like via jQuery for instance, apply it to the desired classes ?

Read URL parameters through JS: Get current URL in web browser

Then you can do this:

$(your-selectors).css('font-size', your-font-size-variable );

edited May 23 '17 at 12:20

Community

1
1

answered Jun 04 '14 at 15:51

avcajaraville

9,041
2
28
37

Do you also have a plain JS version? In case OP doesn't use jQuery? – putvande Jun 04 '14 at 16:00
Right now, I dont because I have to leave, but wont be difficult to do it with pure JavaScript. – avcajaraville Jun 04 '14 at 16:04
I'm not a web developer so I'll need a "answer for dummies". Can you please write the exact code line in the html/css. Thanks. – Shoham Ben-Har Jun 05 '14 at 04:39
Seems you already have your answers, dont you ? I will be glad about help, but its pointless. Let me know if you need something else. – avcajaraville Jun 05 '14 at 07:23

nicael · Accepted Answer · 2014-06-05T04:47:35.700

1

First of all, id your h1 (add attribute id="myH1", your h1 now looks like <h1 id="myH1" ... >)

Then, use place this javascript anywhere in <head>:

<script>
body.onload=function(){
document.getElementById("myH1").style.fontSize=window.location.href.split("?")[1].replace("font-size=","")+"px";
}
</script>

Now you can use your http://www.mywebpage.com/index.html/?font-size=50 to set font size to 50 px.

edited Jun 05 '14 at 04:47

answered Jun 04 '14 at 15:56

nicael

18,550
13
57
90

Tried it and did not worked. See edited answer please. Thanks. – Shoham Ben-Har Jun 05 '14 at 04:38
@Rami Ok, I'll clarify my answer. – nicael Jun 05 '14 at 04:41
A good method for grabbing a parameter from the URL: http://stackoverflow.com/a/11582513/405180 – Fiddles Jun 05 '14 at 05:54

Pass parameters to HTML to control font size

2 Answers2