1

This is what I'm trying to do. On my html page I have to have 4 different font sizes one that's 10px 20px 30px 40px then reset.

When I click or rollover on 10px the font size changes and displays the new size of the font in the div box.

I also have an input box so when I type in the input box and press submit it shows the text you typed in and displays it within the div box with the font assigned in the CSS.

5
  • 2
    Please, show your code in JSFiddle to us edit Jan 25, 2013 at 13:47
  • 1
    What is the problem? Where is the code? Modern day browsers have zoom functions built in, I never understand why people do the font size adjustment. Jan 25, 2013 at 13:49
  • zoom by browser sometimes make the style be broken since the 'zoom' not really zoom everything in the same way.
    – benbai123
    Jan 25, 2013 at 13:54
  • I need it for a school project, and my teacher wont help me with my questions Jan 25, 2013 at 13:58
  • @MikeCollins - I've included my answer below. If there's anything you would like for me to change or if you have anymore questions, please let me know. Thanks.
    – Chase
    Jan 25, 2013 at 14:26

4 Answers 4

1

bsAs for the HTML you want want something like this

<ul id="sizes">
    <li class="size" rel="10">10px</li>
    <li class="size" rel="20">20px</li>
    <li class="size" rel="30">30px</li>
    <li class="size" rel="40">40px</li>
    <li>
        <input class="manual" type="text" />
    </li>
<ul>
<div id="content">The font size to change goes here</div>

And for the jQuery

$( '#sizes' ).on({

    mouseover: function ( event ) {

        var $target = $( event.target );

        if ( $target.is( '.size' ) ) {
            $( '#content' ).css( 'font-size', $target.attr( 'rel' ) );
        }

    },
    blur: function ( event ) {

        var $target = $( event.target );

        if ( $target.is( '.manual' ) ) {
            $( '#content' ).css( 'font-size', parseInt( $target.val(), 10 ) );
        }

    }

});

That should be enough to get you started

4
  • I believe the OP wanted a javascript only solution.
    – Chase
    Jan 25, 2013 at 13:54
  • Yeah javascript only please sorry its for a stupid school project and im finding it really hard and the teacher is not helping at all Jan 25, 2013 at 13:56
  • Oh well, nothing wrong with JavaScript only, just so much easier with jQuery, hence it's there
    – whitneyit
    Jan 25, 2013 at 13:58
  • For sure i understand but my teacher said javascript only so i have to do it that way thanks for the JQuery way Jan 25, 2013 at 14:02
0

This may not be exactly what you're wanting, but it should get you started and it's a pure JavaScript solution:

HTML

<div id="fonts">
    <button value="10px">10px</button>
    <button value="20px">20px</button>
    <button value="30px">30px</button>
    <button value="40px">40px</button>
    <button value="15px">Reset</button>
</div>

<div id="text">The font size to change goes here</div>

You'll notice that I've set the Reset button to 15px, but I wasn't sure what the default font size should be in your case.

Javascript:

var text = document.getElementById("text");
var size = "15px";

var changeFontSize = function(e){
    var target = e.target;
    if(target.nodeName.toLowerCase() === "button"){
        text.style.fontSize = target.value;
        if(e.type.toLowerCase() === "click"){
            size = target.value; 
        }    
    }
};

var mouseOut = function(e){
    text.style.fontSize = size;
}

document.addEventListener("click", changeFontSize, false);
document.addEventListener("mouseover", changeFontSize, false);
document.addEventListener("mouseout", mouseOut, false);

Depending on the browser compatibility you need to have, you may need to look into addEventListener and attachEvent.

When doing event handlers and messing with the e value, things get a bit tricky between browsers. This is mostly why the jQuery solutions are popular, since it generally takes care of the compatibility problems.

EXAMPLE

13
  • Thanks A lot ill try to work with this see if i can make it work Jan 25, 2013 at 14:33
  • Sure, let me know if you need anything or if I can change it to work better in your situation. I'm currently at work, so my replies may be slightly delayed...but I'll be around. Good luck!
    – Chase
    Jan 25, 2013 at 14:36
  • I tried this and it doesnt seem to work for me. honestly im a total newbie to javascript its like Chinese for me. I kind of get what you did, i tried the example it didnt work. i tried to fix it but im obv not good enough Jan 25, 2013 at 14:40
  • The example on jsfiddle didn't work? Or when you tried to get it to work locally? What browser/version are you using?
    – Chase
    Jan 25, 2013 at 14:46
  • both actually and im using firefox newest one Jan 25, 2013 at 14:51
0

This should get you started; a button that changes font size of a div, and a button that copies text from a textbox to the div:

<div id="demo"></div>

<input type="button" value="Size 10" onclick="document.getElementById('demo').style.fontSize='10px';" />

<input type="text" id="demotext" />
<input type="button" value="Use text" onclick="document.getElementById('demo').innerHTML=document.getElementById('demotext').value;" />

Demo: http://jsfiddle.net/Guffa/AzmMc/

1
  • Why the downvote? If you don't explain what it is that you think is wroing, it can't improve the answer.
    – Guffa
    Jan 25, 2013 at 13:53
0
 $("p1").mouseover(function(){
 $("p").css("fontsize","10px");
 });

 $("button ").onclick(function(){1
 $("p").css("fontsize","10px");
 });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.