www.webdeveloper.com
Results 1 to 11 of 11

Thread: increasing font by 1 px

  1. #1
    Join Date
    Jun 2013
    Posts
    23

    increasing font by 1 px

    Hello people,

    I have some code. There is a button and text. When the button has been pressed, the text font should increase by 1 pixel every time the button has been pressed. This is de code i have. It should work on this way but i made a mistake at "style.fontsize = fontsize + 1;" but i don't know what the correct code is. Anyone else know?? U should really help me! Thanks.

    Reckimo..


    (CODE)

    <script>

    window.onload = function letsgo (){
    document.getElementById("tekst").style.fontsize = fontsize + 1;

    }

    </script>

    </head>

    <body>

    <h1 id="tekst">"Dit is een stuk tekst."</h1>

    <input type="button" id="knop" value="verander kleur" onclick="letsgo ();">

    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,159
    Try something like this
    Code:
    document.getElementById("tekst").style.fontSize = parseInt(document.getElementById("tekst").style.fontSize) + 1;
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jun 2013
    Posts
    23
    Sup3rkirby thank you for your answer. It worked, but to understand the code, why parseint? Parseint transforms a number to string right? It has to be a number and not a string, am i correct?

    Dont understand correctly this piece of code:
    = parseInt(document.getElementById("tekst").style.fontSize) + 1;

  4. #4
    Join Date
    Jun 2013
    Posts
    23
    Edit: after trying your code the code you wrote doesn't work unfortunately.. Any idea?

  5. #5
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,159
    It's actually the reverse of what you are thinking. parseInt() takes a non-integer and converts it into an integer. So in the case of the font-size attribute it would take a value like "14px" and convert it to 14, allowing you to properly add a number to it (giving you 15 rather than string concatenation which would give you 141).

    [EDIT]
    And my apologies. Since this value is being applied to the font-size attribute it requires a unit. My code would simply return 15 where you would want the value to be "15px". Try this:
    Code:
    document.getElementById("tekst").style.fontSize = (parseInt(document.getElementById("tekst").style.fontSize) + 1) + "px";
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  6. #6
    Join Date
    Jun 2013
    Posts
    23
    Thank you for the answers. An integer means number? Translator doenst give a right answer on that translate.

    About the code:
    Unfortunately still not working. This is what i have:

    http://i62.tinypic.com/5ozbsm.png

    (http://i62.tinypic.com/5ozbsm.png)

  7. #7
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,159
    At this point the problem isn't javascript. There is no font-size set for your <h1> by default. Typically you could set something like that in the CSS. There is no standard (or safe) way to get the font-size of an element if it hasn't been set.

    And to answer your question about integers. An integer is a whole number (no decimals). Hopefully that translates a little better.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  8. #8
    Join Date
    Jun 2013
    Posts
    23
    Oops! My faulty... excuse me.. also i am learning javascript every day .

    Still the code is not working... i'm sorry i have to say it. (A)
    Even if i put the <style> under the <script> its still not working. The button works fine, when i replace the function for a alert the button gives an alert when the button has been clicked.

    My new code with <style>:
    http://i62.tinypic.com/330a54i.png

  9. #9
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,159
    Well, it looks like you can get the font-size via javascript, however this method does not work in IE8 and lower.
    Code:
    	function vergroot() {
    		var $fontSize = document.getElementById("tekst").style.fontSize;
    		if($fontSize == "") {
    			var $style = window.getComputedStyle(document.getElementById('tekst'));
    			$fontSize = $style.getPropertyValue('font-size');
    		}
    		console.log($fontSize);
    		document.getElementById("tekst").style.fontSize = (parseInt($fontSize) + 1) + "px";
    	}
    This version will first check to see if there is a font-size on the element itself. If not, it checks the CSS and gets the font-size from there. Again this requires IE9+, Chrome, Safari, Firefox (or any other modern browser).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  10. #10
    Join Date
    Mar 2009
    Posts
    590
    You can try this trick, which may not work for particular browsers/versions, like so:

    Code:
    // assume the element you want to get the font size of has an id of "d1"
    
    var id, sp;
    
    id = document.getElementById('d1');
    sp = document.createElement('span');
    sp.style.display = 'inline-block';
    sp.style.padding = '0px';
    sp.style.width = '1em';
    sp.style.height = '1em';
    id.appendChild(sp);
    console.log("pxWidth: " + sp.offsetWidth);
    console.log("pxHeight: " + sp.offsetHeight);
    id.removeChild(sp);

  11. #11
    Join Date
    Jun 2013
    Posts
    23
    All the people thanks for help!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.20092 seconds
  • Memory Usage 2,951KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (4)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (11)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (11)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates