SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing text size w/ links?

    Hi, I was wondering, is there any way to change the global text-size, without reloading the page (no variables as such) by just clicking on a link?

    I looked into it, and found something, but it posted alerts everywhere saying 'Trial of text-sizer' or something.

    Thanks all

  2. #2
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sounds like a javascript problem to me.... ask in javascript forum
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  3. #3
    d^_^b Iain G's Avatar
    Join Date
    Nov 2005
    Location
    Gloucester, UK
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    
    <head>
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    function blah()
    {
    	document.body.style.fontSize = '1em';
    	document.getElementById('button').onclick = function()
    	{
    		var textSize = parseFloat(document.body.style.fontSize.replace('em', ''));
    		textSize += 0.5;
    		document.body.style.fontSize = textSize + 'em';
    	}
    }
    
    window.onload = blah;
    </script>
    </head>
    
    <body>
    <p>Press the button below and the text should get bigger.</p>
    <p id="button">Button</p>
    </body>
    
    </html>
    Something like this might work for you.
    Coding and design philosophy:
    Keep It Simple, Stoopid

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply, but how would I make it work? I tried

    Code:
    <p id="button"><img src="increase.gif"></p>
    And
    Code:
    <a href="#" id="button">Increase font -size</a>
    And loads of other variations, none work. I would like it in a text-link, without refreshing the page. I'm not used to using the method with the ''getElemenyById'' so I'm a bit confused.

    Thanks alot for the reply.

  5. #5
    d^_^b Iain G's Avatar
    Join Date
    Nov 2005
    Location
    Gloucester, UK
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's the code you're using?
    Coding and design philosophy:
    Keep It Simple, Stoopid

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    function blah()
    {
    	document.body.style.fontSize = '1em';
    	document.getElementById('button').onclick = function()
    	{
    		var textSize = parseFloat(document.body.style.fontSize.replace('em', ''));
    		textSize += 0.5;
    		document.body.style.fontSize = textSize + 'em';
    	}
    }
    
    window.onload = blah;
    </script>
    Like you posted above. Lol.

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,253
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)

    CSS change link

    Here's an old script I found
    HTML Code:
    <html><head><title>CHANGING STYLES BY TAG EXPANDED</title>
    <script type="text/javascript">
    changeStyle=function(){
    var switcher=document.getElementById('switcher');
    if(!switcher){
    return;
    }
    var divs=document.getElementsByTagName('div');
    if(!divs){
    return;
    }
    // change style
    switcher.onclick=function(){
    for(var i=0;i<divs.length;i++){
    var d=divs[i];
    d.className=='default'?d.className='accessible':d.className='default';
    }
    return false;
    }
    }
    window.onload=function(){
    if(document.getElementById){
    changeStyle();
    }
    }
    </script>
    <style type="text/css">
    .default {
    font: normal 12px "Arial", Helvetica, sans-serif;
    color: #000;
    background: #fff;
    margin-bottom: 10px;
    }
    .accessible {
    font: 300% "Arial", Helvetica, sans-serif;
    color: #ff0;
    background: #000;
    }
    </style>
    </head>
    <body>
    <p><a href="#" title="Change Style" id="switcher">Change style</a></p>
    <div class="default"><p>Content for div 1 goes here...Content for div 1 goes here...</p></div>
    <div class="default"><p>Content for div 2 goes here...Content for div 2 goes here...</p></div>
    <div class="default"><p>Content for div 3 goes here...Content for div 3 goes here...</p></div>
    </body>
    </html>

  8. #8
    d^_^b Iain G's Avatar
    Join Date
    Nov 2005
    Location
    Gloucester, UK
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.firelightning.com/test/textresize.html

    Works without any problems for me in IE, Opera and Firefox. Need to see your exact code in its entirety to work out why it won't work for you.
    Coding and design philosophy:
    Keep It Simple, Stoopid

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,253
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)

    text size

    You can't replace
    HTML Code:
    <p id="button">Button</p>
    with
    HTML Code:
    <a href="#" id="button">Button</a>
    ???


Bookmarks

Posting Permissions

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