8 Replies - 1678 Views - Last Post: 17 March 2013 - 09:03 AM

#1 InVaSiOn  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 22-February 13

CSS button to change page font-size

Posted 03 March 2013 - 08:42 AM

I want to change the font-size of the page when I click the image which is the button.
I'm not sure if I implemented the button in the right way.



<style>
img.btn
{
    display:inline;
    
    h1{font-size:20px;}
}
</style>

<body>
  <h1> Test </h1>

<a href="#" class="btn">
    <img src ="A.png" width="80" height="60"></a>
</body>



Is This A Good Question/Topic? 0
  • +

Replies To: CSS button to change page font-size

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3608
  • View blog
  • Posts: 12,399
  • Joined: 12-December 12

Re: CSS button to change page font-size

Posted 03 March 2013 - 09:08 AM

No, that is not correct.

Firstly, the img does not have the class 'btn'.
You cannot nest css-rules like that (with h1 { } inside of img.btn { }).
Css-rules cannot, in any case, refer to elements other than child (or adjacent) elements.
If you want something to happen when you click a button you need to create Javascript code to do this.

You need to study the fundamentals of CSS.

css-tricks (child and sibling selectors)

This post has been edited by andrewsw: 03 March 2013 - 09:06 AM

Was This Post Helpful? 0
  • +
  • -

#3 InVaSiOn  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 22-February 13

Re: CSS button to change page font-size

Posted 07 March 2013 - 12:33 PM

Thanks used Javascript. Will go and read a bit more about CSS.
Was This Post Helpful? 0
  • +
  • -

#4 CynicalSolution  Icon User is offline

  • New D.I.C Head

Reputation: -3
  • View blog
  • Posts: 15
  • Joined: 17-March 13

Re: CSS button to change page font-size

Posted 17 March 2013 - 06:49 AM

View Postandrewsw, on 03 March 2013 - 09:08 AM, said:

If you want something to happen when you click a button you need to create Javascript code to do this.


Not entirely true, This css hack works fine.

.imageClass {
/*CSS Rules before click*/
}
.imageClass:target {
/*CSS Rules Once Clicked*/
}



Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3608
  • View blog
  • Posts: 12,399
  • Joined: 12-December 12

Re: CSS button to change page font-size

Posted 17 March 2013 - 07:46 AM

There is information about the :target pseudo-selector here at css-tricks.

This post has been edited by andrewsw: 17 March 2013 - 07:47 AM

Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: CSS button to change page font-size

Posted 17 March 2013 - 08:12 AM

View PostCynicalSolution, on 17 March 2013 - 01:49 PM, said:

Not entirely true, This css hack works fine.

It does work, I'll give you that. How "fine", however, is highly questionable. Compared to Javascript, it's painfully limited, and it's not supported on anything older than IE9.

Realistically not an option for most web development. Not yet, anyway.
Was This Post Helpful? 0
  • +
  • -

#7 Koyume  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: CSS button to change page font-size

Posted 17 March 2013 - 08:24 AM

View PostAtli, on 17 March 2013 - 09:12 AM, said:

View PostCynicalSolution, on 17 March 2013 - 01:49 PM, said:

Not entirely true, This css hack works fine.

It does work, I'll give you that. How "fine", however, is highly questionable. Compared to Javascript, it's painfully limited, and it's not supported on anything older than IE9.

Realistically not an option for most web development. Not yet, anyway.

To expand on Atli a bit more. When it come so to Web Development, you have to remember that not everyone will have the latest browsers/computers, especially if your demographic is older (Or low income). So it's best to use something that all browsers can use. Javascript in this would be best (Such as an onclick function to change the CSS).
Was This Post Helpful? 0
  • +
  • -

#8 AVReidy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 65
  • View blog
  • Posts: 431
  • Joined: 17-February 11

Re: CSS button to change page font-size

Posted 17 March 2013 - 08:48 AM

I recommend using jQuery. You could do something like this:

<html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- font size input -->
    <input id="sizebox" type="text">
    <button id="changefont">Change</button>
    <div id="content">THIS IS TEXT</div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#changefont').click(function() {
                $('#content').css("font-size", $('#sizebox').val())
            });
        });
    </script>
</html>



(This actually works, so feel free to try it out)
Was This Post Helpful? 0
  • +
  • -

#9 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: CSS button to change page font-size

Posted 17 March 2013 - 09:03 AM

If you have jQuery loaded, then I would agree. However if it's not, then this isn't really any reason to load it. (It's fairly expensive to load a library like jQuery.) This would work just as well in pretty much all browsers:
window.onload = function() {
    document.getElementById("changefont").onclick = function() {
        var size = document.getElementById("sizebox").value;
        document.getElementById("content").style.fontSize = size + "px";
    }
}



Although in both cases you should validate the number before using it:
window.onload = function() {
    document.getElementById("changefont").onclick = function() {
        var size = parseInt(document.getElementById("sizebox").value);
        if (!isNaN(size)) {
            document.getElementById("content").style.fontSize = size + "px";
        }
        else {
            alert("Font size must be a number, genius!")
        }
    }
}



P.S.
Your HTML structure is all messed up. There should at the very least be a Doctype, a <head> and a <body> section. Even in simple examples! (While we know better than to use this type of truncated example structure in real code, passing newbies may not.)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1