Κουμπί για αλλαγή μεγέθους γραμματοσειράς και φόντου σε .html

silve · 13 Μαρτίου 2015

Γεια χαρά!

Φτιάχνω ένα project αυτές τις μέρες με .html, και χρειάζομαι να βάλω ένα κουμπί κάπου μέσα στη σελίδα, για να μπορεί να αλλάζει το μέγεθος της γραμματοσειράς μου. Όπως επίσης και εάν είναι δυνατόν το φόντο.

Όπως θα δείτε στο παρακάτω link, στα δεξιά υπάρχουν ορισμένα κουμπιά που κάνουν τα παραπάνω που ανέφερα.

http://www.frontidamazi.gr/

Πως μπορώ να έχω και εγώ κάτι παρόμοιο στη δικιά μου σελίδα; Φαντάζομαι πως είναι εφικτό αλλά τι χρειάζεται;

Ευχαριστώ πολύ!

libereas · 13 Μαρτίου 2015

Μια ωραία απάντηση που βρήκα ψάχνοντας είναι αυτή...

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var changeFontSize = function (increaseFont) {
    var fontTargets = new Array('h5', 'p');
// όσα στοιχεία βάζεις στο array σου μόνο αυτά θα αυξάνονται πχ το h4 παραμένει ίδιο 
 
    fontTargets.forEach(function (element) {
        var $element = $(element);
        var newFontSize;
        var currentFontSize = $element.css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);

        if (increaseFont) {
            $element.css('font-size', 0);
            newFontSize = currentFontSizeNum * 1.2;
        } else {
            newFontSize = currentFontSizeNum * 0.8;
        }

        $element.css('font-size', newFontSize);
    });
};

$(document).ready(function () {
    // Reset Font Size
    var originalFontSize = $('html').css('font-size');

    $(".resetFont").click(function () {
        $('html').css('font-size', originalFontSize);
    });
    // Increase Font Size
    $(".increaseFont").on('click', function () {
        changeFontSize(true);
    });
    // Decrease Font Size
    $(".decreaseFont").on('click', function () {
        changeFontSize(false);
    });
});
});
</script>
</head>
<body>
<input class="increaseFont" type="button" value="Increase font" /> <br />
<input class="decreaseFont" type="button" value="decrease font" /> <br />
<input class="resetFont" type="button" value="reset font" /> <br />
<p>paragrafos</p>
<h5>h5 epikefalida</h5>
<h4>h4 epikefalida</h4>
</body>
</html>

Για να επιλέξεις εσύ ότι θέλεις να αυξομειώνεται

silve · 14 Μαρτίου 2015

Ευχαριστώ πάρα πολύ! Να είσαι καλά!

Απλά παρατήρησα ότι δε δουλεύει το κουμπί επαναφοράς της γραμματοσειράς στο αρχικό μέγεθος. Τι πρέπει να πειράξω για να δουλεύει και αυτό;

Ευχαριστώ και πάλι!

EDIT:

Επίσης μπορεί να γίνει κάτι παρόμοιο και για αλλαγή του φόντου;

Επεξ/σία 14 Μαρτίου 2015 από silve

libereas · 14 Μαρτίου 2015

Οταν λες για αλλαγή φόντου??? Τώρα για την επαναφορά .....

βάλε αν θές στο κουμπί χωριστά για κάθε element ένα μέγεθος άμα είναι

$(".resetFont").click(function () {

$('h5').css('font-size', '15px');

$('p').css('font-size', '12px');

});

και στο css όρισε τα πάλι με το ίδιο μέγεθος.

silve · 15 Μαρτίου 2015

Επειδή τελικά δε μπορώ να το φτιάξω μόνος μου, υπάρχει κάποιος developer που να μπορεί να βοηθήσει στο κομμάτι αυτό;

http://www.insomnia.gr/classifieds/various/jobs/422249-%CF%88%CE%AC%CF%87%CE%BD%CF%89-web-developer-%CE%B3%CE%B9%CE%B1-%CF%83%CF%84%CE%B1%CF%84%CE%B9%CE%BA%CE%AE-%CF%83%CE%B5%CE%BB%CE%AF%CE%B4%CE%B1/

Σύνδεση

Κουμπί για αλλαγή μεγέθους γραμματοσειράς και φόντου σε .html

Προτεινόμενες αναρτήσεις

silve

libereas

silve

libereas

silve

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση