CODEWITHSUNDEEP
jquerytwitter-bootstrap
Viktor
Viktor

Reputation: 722

Jquery Script not working with Bootstrap

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");
    });
});

Upvotes: 1

Views: 637

Answers (2)

Ilanus
Ilanus

Reputation: 6928

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

Upvotes: 0

user4964433
user4964433

Reputation:

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

Something like this:

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

Upvotes: 2

Related Questions