I have div container with class="input-group" i am having input field with drop down, which i am creating with the help of bootstrap4
what i am trying to do is when user clicks on any dropdown the selected option should gets populate inside that respective input field
Code Snippet
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<form>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
i have tried the onclick event but id dosn't print any values
How can i do this is there any easy way
You can use the following code:
$(".dropdown-item").click(function() {
$(this).closest(".input-group").find("input").val($(this).text())
});
Working demo
$(".dropdown-item").click(function() {
$(this).closest(".input-group").find("input").val($(this).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<form>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
Related
I'm stuck on showing a search bar, based on a selected option in a dropdown.
My html has the following components:
The style: to hide when not selected;
<style>
.form-inline{
display: none;
}
</style>
My dropdown with the selections;
<div class="dropdown">
<select id="searchEngine" class="form-control mr-sm-2" style="background-color:#00FFFF;">
<option value="Wolfram" >Wolfram</option>
<option value="Approach_Zero">Approach zero</option>
<option value="Google">Google</option>
</select>
</div>
Then my content: my different divs that need to be shown when selected:
<div class="content">
<div id="Wolfram" class="form-inline">
<input class="form-control mr-sm-2" id="search-input1" style="width: 18rem" placeholder="Search Wolfram">
<button class="btn btn-outline-success" id="search-button1">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Approach_Zero" class="form-inline">
<input class="form-control mr-sm-2" id="search-input2" style="width: 18rem" placeholder="Search Approach Zero">
<button class="btn btn-outline-success" id="search-button2">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Google" class="form-inline">
<input class="form-control mr-sm-2" id="search-input3" style="width: 18rem" placeholder="Search Google">
<button class="btn btn-outline-success" id="search-button3">
<i class="fa fa-search"></i>
</button>
</div>
</div>
The script that should take care of the logic:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script>
<script>
$(document).ready(function(){
$("#searchEngine").on('change', function(){
$(".form-inline").hide();
$("#" + $(this).val()).fadeIn(700);
});
});
</script>
But this doesn't seem to work and I can't see why. Anyone an idea what's going wrong??
EDIT
Based on the comments, I try to adjust the code and it works in the demo.
See below.
However(!), It doesn't work in my html but the only thing that I do differently is running the javascript in my html file. But this doesn't work for some reason. Why not??
$(document).ready(function () {
$("#searchEngine").on('change', function () {
$(".form-inline").hide();
$("#" + $(this).val()).fadeIn(700);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class="card text-center">
<div class="card-header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<style>
nav {
font-family: 'Roboto Mono', monospace;
}
.form-inline{
display: none;
}
</style>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'cv_index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'project_index' %}">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'blog_index' %}">Blog</a>
</li>
</ul>
</div>
<div class="dropdown">
<select id="searchEngine" class="form-control mr-sm-2" style="background-color:#00FFFF;">
<option value="Wolfram" >Wolfram</option>
<option value="Approach_Zero">Approach zero</option>
<option value="Google">Google</option>
</select>
</div>
<div class="content">
<div id="Wolfram" class="form-inline">
<input class="form-control mr-sm-2" id="search-input1" style="width: 18rem" placeholder="Search Wolfram">
<button class="btn btn-outline-success" id="search-button1">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Approach_Zero" class="form-inline">
<input class="form-control mr-sm-2" id="search-input2" style="width: 18rem" placeholder="Search Approach Zero">
<button class="btn btn-outline-success" id="search-button2">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Google" class="form-inline">
<input class="form-control mr-sm-2" id="search-input3" style="width: 18rem" placeholder="Search Google">
<button class="btn btn-outline-success" id="search-button3">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
{% block page_content %}{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
and my code looks like this (one html file):
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class="card text-center">
<div class="card-header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<style>
nav {
font-family: 'Roboto Mono', monospace;
}
.form-inline{
display: none;
}
</style>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'cv_index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'project_index' %}">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'blog_index' %}">Blog</a>
</li>
</ul>
</div>
<div class="dropdown">
<select id="searchEngine" class="form-control mr-sm-2" style="background-color:#00FFFF;">
<option value="Wolfram" >Wolfram</option>
<option value="Approach_Zero">Approach zero</option>
<option value="Google">Google</option>
</select>
</div>
<div class="content">
<div id="Wolfram" class="form-inline">
<input class="form-control mr-sm-2" id="search-input1" style="width: 18rem" placeholder="Search Wolfram">
<button class="btn btn-outline-success" id="search-button1">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Approach_Zero" class="form-inline">
<input class="form-control mr-sm-2" id="search-input2" style="width: 18rem" placeholder="Search Approach Zero">
<button class="btn btn-outline-success" id="search-button2">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Google" class="form-inline">
<input class="form-control mr-sm-2" id="search-input3" style="width: 18rem" placeholder="Search Google">
<button class="btn btn-outline-success" id="search-button3">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<script>
$(document).ready(function () {
$("#searchEngine").on('change', function () {
$(".form-inline").hide();
$("#" + $(this).val()).fadeIn(700);
});
});
</script>
</div>
</nav>
</div>
</div>
<div class="container">
{% block page_content %}{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
What's going wrong?
Use:
$("[id='" + $(this).val() + "']").fadeIn(700);
instead of
$("#" + $(this).val()).fadeIn(700);
Reason: The IDs contain spaces and in such cases, you can use an attribute selector. In your code, an element with id 'Approach Zero' is translated as $("#Approach Zero") which is a different selector altogether.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/6052/
I have a bootstrap code for the search bar with a dropdown list but I want to display the option upon selection one from the dropdown list. Currently, it shows "All" and even you click on the dropdown and select any of the options it does not work. Anyone on it using JavaScript or jQuery to make it work
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Search Box With Dropdown List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div class="search-box col-md-5">
<form action="">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Category One</a>
<a class="dropdown-item" href="#">Category Two</a>
<a class="dropdown-item" href="#">Category Three</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated Category</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Search input with dropdown button">
<div class="input-group-append">
<button class="btn btn-success" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>
You could simple add click event on
dropdown-item
see below
$('.dropdown-menu .dropdown-item').click(function(){
var value = $(this).text();
console.log(value)
// Update the value and show it to the user
$(this).parent().parent().find(".dropdown-toggle").html(value);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Search Box With Dropdown List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div class="search-box col-md-5">
<form action="">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Category One</a>
<a class="dropdown-item" href="#">Category Two</a>
<a class="dropdown-item" href="#">Category Three</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated Category</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Search input with dropdown button">
<div class="input-group-append">
<button class="btn btn-success" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>
Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">`
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS -->
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--custom css-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<h1>Welcome to Bootstrap 4.0 !</h1>
<p>This is the platform that was created by twitter and is used in every website today</p>
<form action="" class="form-inline">
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control
form-control-lg" placeholder="Tanveer">
</div>
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control
form-control-lg" placeholder="tanveer#example.com ">
</div>
<button type="submit" class="btn btn-success btn-lg">Submit</button>
</form>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-full"
id="nav-main"> <a class="navbar-brand" href="#">Bootstrap 4.0</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </div> </nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js""></script>
</body>
</html>
One vary basic and simple way to change a html tag to be in the center is to use align attribute:
<form align="center">
This sentence will be in the center!
</div>
Please try and change this code:
<form action="" class="form-inline" >
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Tanveer">
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg" placeholder="tanveer#example.com "> Submit
</div>
</div>
</form>
To:
<form action="" class="form-inline" align="center">
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Tanveer">
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg" placeholder="tanveer#example.com "> Submit
</div>
</div>
</form>
Another way is to add the "text-align: center;" in your CSS file.
You can use below CSS to align form in the center with content.
form {
display: block;
margin: 0 auto;
text-align: center;
}
My JavaScript is not changing the attributes upon calling them from the "Change your style" button. It should change all four paragraphs under the images to a different style. Any assistance would be appreciated. I feel as if it's just a typo somewhere.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<title>Week4-1.html</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="../js/week4-1.js"></script>
<link rel="stylesheet" href="../css/homework.css">
</head>
<body>
<script src="../js/week4-1.js"></script>
<!--Navigation to different links and parts of the website-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">My Rummage Store</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault" aria-
controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Rummage Items</a>
<a class="dropdown-item" href="#">Unique Items</a>
<a class="dropdown-item" href="#">Love that Ink Pen Company</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Who we are</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Our Vision</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="../pages/home.html">Home</a>
<a class="dropdown-item" href="../pages/week1-1.html">Week 1-1</a>
<a class="dropdown-item" href="../pages/week1-2.html">Week 1-2</a>
<a class="dropdown-item" href="../pages/week2-1.html">Week 2-1</a>
<a class="dropdown-item" href="../pages/week2-2.html">Week 2-2</a>
<a class="dropdown-item" href="../pages/week3-1.html">Week 3-1</a>
<a class="dropdown-item" href="../pages/week3-2.html">Week 3-2</a>
<a class="dropdown-item" href="../pages/week4-1.html">Week 4-1</a>
<a class="dropdown-item" href="../pages/week4-2.html">Week 4-2</a>
<a class="dropdown-item" href="../pages/week5-1.html">Week 5-1</a>
<a class="dropdown-item" href="../pages/week5-2.html">Week 5-2</a>
<a class="dropdown-item" href="../pages/week6-1.html">Week 6-1</a>
<a class="dropdown-item" href="../pages/week6-2.html">Week 6-2</a>
<a class="dropdown-item" href="../pages/week7-1.html">Week 7-1</a>
<a class="dropdown-item" href="../pages/week7-2.html">Week 7-2</a>
<a class="dropdown-item" href="../pages/week8-1.html">Week 8-1</a>
<a class="dropdown-item" href="../pages/week8-2.html">Week 8-2</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Submit</button>
</form>
</div>
</nav>
<main role="main">
<!--Main jumbotron-->
<div class="jumbotron">
<div class="container">
<h1 class="display-3" style="text-align:center">Rummage Items</h1>
</div>
<!--Card to display a logo-->
<div class="card" style="width: 18rem; color:black">
<img class="card-img-top" src="../images/week2-1logo.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Rummage it</p>
</div>
<!--Button to change paragraph font-->
<p>
<button type="button" onclick="changeStyles();" class="btn btn-primary btn-lg">Change the Style</button>
</p>
</div>
</div>
<!--Improved columns--->
<div class="container-fluid">
<button type="button" onclick="changeStyles();" class="btn btn-primary btn-lg">Change the Paragraph Style</button>
<div class="row">
<div class="col-md-3 home_box_border home_box_corner home_box_shadow home_box_gradient" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Printers</h2>
<img class="img-circle1" src="../images/product4.jpg" alt="print" align="middle">
<p class="week4-1_Printers">The HPSR printer has a direct feed for over 30 different types of paper. Allowing for ultimate utilization. It also showcases the new style of modern printers. Multifunction printers allow for use of communication via fax.</p>
<p><a class="btn btn-secondary" href="#" role="button">Buy for $299.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_shadow home_box_gradient" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Boots</h2>
<img class="img-circle1" src="../images/product3.jpg" alt="boots">
<p class="week4-1_Boots">The new rummage boot collection. Hand crafted leather for the ultimate rummaging experience. Your feet will thank you during your next rummaging expedition! We look forward to helping you try them on. </p>
<p><a class="btn btn-secondary" href="#" role="button">Buy for $69.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_gradient home_box_shadow" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Lamps</h2>
<img class="img-circle1" src="../images/product5.jpg" alt="Lamp">
<p class="week4-1_Lamps">Lamps are a neccesity during night time. This lamp is hand crafted and made from the finest craftsman we could find. You will not regret buying this lamp, adding a nice piece of decor and bringing some brigtness in your life. </p>
<p><a class="btn btn-secondary" href="../pages/week1-2.html" role="button"> Buy for $39.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_gradient home_box_shadow" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Dressers</h2>
<img class="img-circle1" src="../images/product2.jpg" alt="Lamp">
<p class="week4-1_Dressers">Our Dressers are one of a kind. We have so many variations that you can rummage through and find. Purchase on our site or come in today and take a look! Very sturdy and made with some of the best wood you can buy. </p>
<p><a class="btn btn-secondary" href="../pages/week1-2.html" role="button"> Buy for $239.99 »</a></p>
</div>
</div>
</div>
</main>
<!-- Footer Information -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Here is my js:
function injectStyles(rule) {
var div = $("<div />", {
html: '<style>' + rule + '</style>'
}).appendTo("body")
}
function changeStyles() {
// alert("Hi");
// injectStyles('p { color: red; }');
injectStyles('.week4-1_Printers { border: 10px solid black; font-weight:
500; color: darkblue; border-radius: 10px; }');
injectStyles('.week4-1_Boots { border:10px solid black; font-weight: 500;
color: darkblue; border-radius: 10px; }');
injectStyles('.week4-1_Lamps { border:10px solid black; font-weight: 500;
color: darkblue; border-radius: 10px; }');
injectStyles('.week4-1_Dressers { border:10px solid black; font-weight: 500;
color: darkblue; border-radius: 10px; }');
}
I will update the
function injectStyles(rule) {
$("head").append('<style>' + rule + '</style>');
}
to append style in the head.
I don't think that your issue is with the button, as the code is being executed.
Instead of writing div elements why not just change the style directly? I changed your injectStyles function to accept two arguments: the class name of the elements you want to change and a JavaScript object that contains all the style values you want to set. Then, I just loop through every element that matches the class name, then set the style for every node in the style definition.
(you need to go into full screen to see the snippet work)
function injectStyles(className, styles) {
var elements = document.getElementsByClassName(className);
// loop through every element
for(var i=0; i < elements.length; i++) {
// loop through every style
for(var style in styles) {
elements[i].style[style] = styles[style];
}
}
}
function changeStyles() {
injectStyles('week4-1_Printers', { "border": "10px solid black", "font-weight": "500", "color": "darkblue", "border-radius": "10px" } );
injectStyles('week4-1_Boots', { "border": "10px solid black", "font-weight": "500", "color": "darkblue", "border-radius": "10px" } );
// injectStyles('.week4-1_Lamps { border:10px solid black; font-weight: 500; color: darkblue; border-radius: 10px; }');
// injectStyles('.week4-1_Dressers { border:10px solid black; font-weight: 500; color: darkblue; border-radius: 10px; }');
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<title>Week4-1.html</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="./script.js"></script>
<link rel="stylesheet" href="../css/homework.css">
</head>
<body>
<script src="../js/week4-1.js"></script>
<!--Navigation to different links and parts of the website-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">My Rummage Store</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault" aria-
controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Rummage Items</a>
<a class="dropdown-item" href="#">Unique Items</a>
<a class="dropdown-item" href="#">Love that Ink Pen Company</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Who we are</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Our Vision</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="../pages/home.html">Home</a>
<a class="dropdown-item" href="../pages/week1-1.html">Week 1-1</a>
<a class="dropdown-item" href="../pages/week1-2.html">Week 1-2</a>
<a class="dropdown-item" href="../pages/week2-1.html">Week 2-1</a>
<a class="dropdown-item" href="../pages/week2-2.html">Week 2-2</a>
<a class="dropdown-item" href="../pages/week3-1.html">Week 3-1</a>
<a class="dropdown-item" href="../pages/week3-2.html">Week 3-2</a>
<a class="dropdown-item" href="../pages/week4-1.html">Week 4-1</a>
<a class="dropdown-item" href="../pages/week4-2.html">Week 4-2</a>
<a class="dropdown-item" href="../pages/week5-1.html">Week 5-1</a>
<a class="dropdown-item" href="../pages/week5-2.html">Week 5-2</a>
<a class="dropdown-item" href="../pages/week6-1.html">Week 6-1</a>
<a class="dropdown-item" href="../pages/week6-2.html">Week 6-2</a>
<a class="dropdown-item" href="../pages/week7-1.html">Week 7-1</a>
<a class="dropdown-item" href="../pages/week7-2.html">Week 7-2</a>
<a class="dropdown-item" href="../pages/week8-1.html">Week 8-1</a>
<a class="dropdown-item" href="../pages/week8-2.html">Week 8-2</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Submit</button>
</form>
</div>
</nav>
<main role="main">
<!--Main jumbotron-->
<div class="jumbotron">
<div class="container">
<h1 class="display-3" style="text-align:center">Rummage Items</h1>
</div>
<!--Card to display a logo-->
<div class="card" style="width: 18rem; color:black">
<img class="card-img-top" src="../images/week2-1logo.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Rummage it</p>
</div>
<!--Button to change paragraph font-->
<p>
<button type="button" onclick="changeStyles();" class="btn btn-primary btn-lg">Change the Style</button>
</p>
</div>
</div>
<!--Improved columns--->
<div class="container-fluid">
<button type="button" onclick="changeStyles();" class="btn btn-primary btn-lg">Change the Paragraph Style</button>
<div class="row">
<div class="col-md-3 home_box_border home_box_corner home_box_shadow home_box_gradient" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Printers</h2>
<img class="img-circle1" src="../images/product4.jpg" alt="print" align="middle">
<p class="week4-1_Printers">The HPSR printer has a direct feed for over 30 different types of paper. Allowing for ultimate utilization. It also showcases the new style of modern printers. Multifunction printers allow for use of communication via fax.</p>
<p><a class="btn btn-secondary" href="#" role="button">Buy for $299.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_shadow home_box_gradient" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Boots</h2>
<img class="img-circle1" src="../images/product3.jpg" alt="boots">
<p class="week4-1_Boots">The new rummage boot collection. Hand crafted leather for the ultimate rummaging experience. Your feet will thank you during your next rummaging expedition! We look forward to helping you try them on. </p>
<p><a class="btn btn-secondary" href="#" role="button">Buy for $69.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_gradient home_box_shadow" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Lamps</h2>
<img class="img-circle1" src="../images/product5.jpg" alt="Lamp">
<p class="week4-1_Lamps">Lamps are a neccesity during night time. This lamp is hand crafted and made from the finest craftsman we could find. You will not regret buying this lamp, adding a nice piece of decor and bringing some brigtness in your life. </p>
<p><a class="btn btn-secondary" href="../pages/week1-2.html" role="button"> Buy for $39.99 »</a></p>
</div>
<div class="col-md-3 home_box_border home_box_corner home_box_gradient home_box_shadow" div style="text-align:center; vertical-align:middle">
<hr />
<h2>Dressers</h2>
<img class="img-circle1" src="../images/product2.jpg" alt="Lamp">
<p class="week4-1_Dressers">Our Dressers are one of a kind. We have so many variations that you can rummage through and find. Purchase on our site or come in today and take a look! Very sturdy and made with some of the best wood you can buy. </p>
<p><a class="btn btn-secondary" href="../pages/week1-2.html" role="button"> Buy for $239.99 »</a></p>
</div>
</div>
</div>
</main>
<!-- Footer Information -->
If you want to keep the styles as a string you could parse it into an array using styles.split('delimiter'), but defining it as a JavaScript object makes it super-easy to process.
I have dropdown text box form and open clicking on the dropdown button nothing happens. Below is my code, I am working on an Angular 4 framework:
$('#demo-combo-box-2').click(function(event) {
event.preventDefault();
$(event.currentTarget).parents('.input-group').siblings('.combo-box-scroll').toggleClass('hidden');
});
.hidden { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<form role="form" class="form-inline">
<div class="form-group">
<div class="combo-box">
<div class="input-group">
<input type="text" class="form-control" aria-label="Combobox">
<div class="input-group-btn">
<button class="btn btn-primary btn-icon" type="button" id="demo-combo-box-2">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</div>
<div class="combo-box-scroll hidden">
<div class="list-group">
<a class="list-group-item">Item 1</a>
<a class="list-group-item">Item 2</a>
<a class="list-group-item">Item 3</a>
<a class="list-group-item">Item 4</a>
<a class="list-group-item">Item 5</a>
</div>
</div>
</div>
</div>
</form>