Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts

    Angry html5 increasing font size in a simple step?

    I want to increase the font size of items on my shopping list temporarily when I click on them.
    So I want

    var shoppingitem, fontsize=10;

    if clickedon==True {
    context.font.size++;
    }

    context.fillText(shoppingitem,10, shoppingitemnum*20);


    Problem is increasing font size seems to require a context.font = "big long string detailing font and font size in px"

    Is there a way to increment font size integer without having to turn it all into a concateated string and send it to context.font =
    ?


    www.donoi.hostoi.com
    Last edited by donna1; 12-01-2012 at 05:08 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,150
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Change the className of the <span> or <p> onclick to a new class with a different font size/color/whatever.
    If you want to revert to the original size on a second click, you need to count the clicks odd/even.
    You may be looking for onmouseover rather than onclick.

    Djokovic won against the background of his current father's illness. - Commentator Radio 4
    Last edited by Philip M; 12-02-2012 at 10:31 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Try this


    Code:
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title></title>
    <style type="text/css">
    span:hover {font-size: medium;}
    #pagecontent {font-size: small;}
    </style>
    </head>
    <body>
    <div id="pagecontent">
    <span>Test</span><br />
    <span>Test1</span><br />
    <span>Test2</span><br />
    <span>Test3</span><br />
    </div>
    </body>
    </html>

  • #4
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    That is a neat solution Jane, thank you

    but I want to do it in javascript on a canvas
    I really havent got the hang of this CSS stuff so was hoping to avoid it

    I got stuck with the <div> command early on so switched to javascript for everything but the canvas.text command takes a string rather than a number to set the size
    Last edited by donna1; 12-02-2012 at 07:34 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •