Jquery Script not working with Bootstrap

Question

I have a problem with Jquery script, its simply needs to change font-size from select options and it's not working but if i remove link to bootstrap my script works. What type of problem it could be?

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Generate Html with Jquery</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="main_text">
            <h1>Change Headings</h1>
        </div>


        <select id="selection">
            <option value="h1">H1</option>
            <option value="h2">H2</option>
            <option value="h3">H3</option>
            <option value="h4">H4</option>
            <option value="h5">H5</option>
        </select>

        <div class="color_picker">
            <h3>Choose Text Color</h3>
            <input type="color" id="color_picker">
        </div>

        <div class="change_font">
            <h3>Change Font</h3>
            <select id="select_font">
                <option value="Sans-serif">Sans-serif</option>
                <option value="Monospace">Monospace</option>
                <option value="Serif">Serif</option>
                <option value="Fantasy">Fantasy</option>
                <option value="Verdana">Verdana</option>
                <option value="Impact">Impact</option>
            </select>
        </div>

        <div class="change_size">
            <h3>Font Size</h3>
            <select id="change_font_size">
                <option value="14">14</option>
                <option value="18">18</option>
                <option value="22">22</option>
                <option value="24">24</option>
                <option value="26">26</option>
            </select>
        </div>

    </div>


    <script src="jquery-2.1.4.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

Jquery

$(function() {

    $('#selection').change(function () {
        var tag = $(this).val();
        $(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
    });

    $('#color_picker').change(function() {
        var color_p = $(this).val();
        $('.main_text').css("color", color_p);
    });

    $('#select_font').change(function () {
        var change_font = $(this).val();
        $(".main_text").css("font-family", change_font);
    });

    $("#change_font_size").change(function() {
        var font_size = $(this).val();
        $('.main_text').css("font-size", font_size + "px");
    });
});

Can you make a workable stack snippet for it?

John Bupit
– John Bupit

2015-08-27 09:02:09 +00:00
Commented Aug 27, 2015 at 9:02 — John Bupit
– John Bupit, Commented Aug 27, 2015 at 9:02

user4964433 · Accepted Answer · 2015-08-27 09:05:00Z

2

You shold style your h-tags not the parent div.

Something like this:

$('.main_text > *').css("font-size", font_size + "px");

answered Aug 27, 2015 at 9:05

user4964433

Sign up to request clarification or add additional context in comments.

Comments

Ilanus · Accepted Answer · 2015-08-27 09:09:22Z

0

You need to refer to the exact part of the html you want to work with:

$(document).ready(function() {

$('#selection').change(function () {
    var tag = $(this).val();
    $(".main_text > h1").html("<" + tag + ">Change Headings</" + tag + ">");
});

$('#color_picker').change(function() {
    var color_p = $(this).val();
    $('.main_text > h1').css("color", color_p);
});

$('#select_font').change(function () {
    var change_font = $(this).val();
    $(".main_text > h1").css("font-family", change_font);
});

$("#change_font_size").change(function() {
    var font_size = $(this).val();
    $('.main_text > h1').css("font-size", font_size + "px");
});

});

Working JSFIDDLE

answered Aug 27, 2015 at 9:09

Ilanus

6,9585 gold badges15 silver badges37 bronze badges

1 Comment

user4964433 Over a year ago

you are adding the other h elements within your h1 tag, so if some change the h-tags he will not be able to change the font size

Collectives™ on Stack Overflow

Jquery Script not working with Bootstrap

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related