Toggle two classes d-block and d-none using mat-slide toggle. When toggled is checked I need to change the d-none class to d-block and d-block to d-none
<mat-slide-toggle >
View All Statuses
</mat-slide-toggle>
<div class="row">
<div class="col-12 d-block">
<svg id="bar-chart" width="550" height="300"></svg>
</div>
<div class="col-12 d-none">
<svg id="stacked-bar-chart" width="550" height="300"></svg>
</div>
</div>
try this it will works, otherwise you can use [ngClass]="bool ? 'd-block' : 'd-none'"
$("#toggleclick").click(function () {
if($(".d-block").hasClass("hide"))
{
$(".d-block").removeClass("hide");
$(".d-none").addClass("hide");
}
else if($(".d-none").hasClass("hide")) {
$(".d-none").removeClass("hide");
$(".d-block").addClass("hide");
}
})
.d-block{
background:#ff0;
}
.d-none{
background:#0ff;
}
.hide{
display:none;
}
mat-slide-toggle{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<mat-slide-toggle id="toggleclick">
View All Statuses
</mat-slide-toggle>
<div class="row">
<div class="col-12 d-block">
<svg id="bar-chart" width="550" height="300"></svg>
D-Block
</div>
<div class="col-12 d-none hide">
<svg id="stacked-bar-chart" width="550" height="300"></svg>
D-None
</div>
</div>
Below code using Angular's ngClassdirective
HTML:
<mat-slide-toggle [(ngModel)]="checked">
View All Statuses
</mat-slide-toggle>
<div class="row">
<div class="col-12" [ngClass]="checked ? 'd-none' : 'd-block'">
<svg id="bar-chart" width="550" height="300"></svg>Hello
</div>
<div class="col-12" [ngClass]="checked ? 'd-none' : 'd-block'">
<svg id="stacked-bar-chart" width="550" height="300"></svg>World
</div>
</div>
CSS:
.d-block {
display: block;
}
.d-none {
display: none;
}
Related
Here I have 2 rows and 2 columns in each row. I want the yellow blocks to have a margin and take all the available space in the column besides the margin. But as you can see, the margin completely misaligns the yellow content.
.row {
background: green;
}
.col {
background: red;
border: 1px solid blue;
height: 60px;
}
.content-margin {
margin: 10px;
background: yellow;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
</div>
</div>
The result I want is similar to this:
THE QUESTION: Is there any way to achieve that by adding margin to the yellow block?
NOTE: I know I can achieve that by adding padding to the COL itself, but that's no good for my real world use case.
https://jsfiddle.net/39zp4tc0/
Just use a padding on the parent (col) instead of a margin on the child:
.row {
background: green;
}
.col {
background: red;
border: 1px solid blue;
height: 60px;
padding: 10px
}
.content-margin {
background: yellow;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-100 d-flex"></div>
</div>
</div>
</div>
I do recommend using margin to positioning and padding for that spaces between components. You can use margin: auto in combination with display flex to make a div in a specific position. You can view more information on https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change the height of the yellow column to 60% with margin: 12px 0;
Try this:
.row {
background: green;
}
.col {
background: red;
border: 1px solid blue;
height: 60px;
}
.content-margin {
margin: 12px 0;
background: yellow;
}
.h-60 {
height: 60%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-60 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-60 d-flex"></div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="content-margin w-100 h-60 d-flex"></div>
</div>
<div class="col col-lg-6">
<div class="content-margin w-100 h-60 d-flex"></div>
</div>
</div>
</div>
I'd still use padding, but if you can't put it on the columns put it on an inner element acting as a wrapper for your yellow boxes.
.row {
background: green;
}
.col {
background: red;
border: 1px solid blue;
height: 60px;
}
.bg-yellow {
background: yellow;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container-fluid">
<div class="row gx-0 justify-content-md-center">
<div class="col col-lg-6">
<div class="w-100 h-100 px-2 py-2">
<div class="w-100 h-100 bg-yellow"></div>
</div>
</div>
<div class="col col-lg-6">
<div class="w-100 h-100 px-2 py-2">
<div class="w-100 h-100 bg-yellow"></div>
</div>
</div>
</div>
<div class="row gx-0 justify-content-md-center">
<div class="col col-lg-6">
<div class="w-100 h-100 px-2 py-2">
<div class="w-100 h-100 bg-yellow"></div>
</div>
</div>
<div class="col col-lg-6">
<div class="w-100 h-100 px-2 py-2">
<div class="w-100 h-100 bg-yellow"></div>
</div>
</div>
</div>
</div>
Ok, so I found a way to effectively apply MARGIN to the yellow div elements.
I'm using d-flex and align-items-stretch classes on the COL elements and using flex-grow-1 class on the yellow div elements. If we stretch the yellow elements this way, the MARGIN is respected and does not ruin the layout.
<div class="container">
<div class="row g-0 justify-content-md-center">
<div class="col col-lg-6 d-flex align-items-stretch">
<div class="content-margin flex-grow-1 d-flex"></div>
</div>
<div class="col col-lg-6 d-flex align-items-stretch">
<div class="content-margin flex-grow-1 d-flex"></div>
</div>
</div>
<div class="row g-0 justify-content-md-center">
<div class="col col-lg-6 d-flex align-items-stretch">
<div class="content-margin flex-grow-1 d-flex"></div>
</div>
<div class="col col-lg-6 d-flex align-items-stretch">
<div class="content-margin flex-grow-1 d-flex"></div>
</div>
</div>
</div>
https://jsfiddle.net/dwjk5upn/1/
NOTE: I'm using the g-0 class on the COL elements as well to get rid of the default COL paddings.
I have 6 different cards all that display different content. Each card has a read more button and when clicked a modal shows up. The modal needs to show the content of the correct card that was clicked. how can I go about doing this?
I have got the modal functionality to work, just need help getting the correct card and modal pair to link together
card code:
<div class="card">
<div class="info">
<h5>This is to test card 1</h5>
<div class="button">
<a id="open-modal" class="btn">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="info">
<h5>This is to test card 2</h5>
<div class="button">
<a id="open-modal" class="btn">Read More</a>
</div>
</div>
</div>
modal code:
<div class="modal">
<div class="modal-box">
<div class="modal-box__exit-button">
<svg stroke="currentColor" fill="currentColor" stroke-
width="0" version="1.2" baseProfile="tiny"
viewBox="0 0 24 24" class="btn" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17.414 6.586c-.78-.781-2.048-.781-2.828 0l-2.586 2.586-2.586-2.586c-.78-.781-2.048-.781-2.828 0-.781.781-.781 2.047 0 2.828l2.585 2.586-2.585 2.586c-.781.781-.781 2.047 0 2.828.39.391.902.586 1.414.586s1.024-.195 1.414-.586l2.586-2.586 2.586 2.586c.39.391.902.586 1.414.586s1.024-.195 1.414-.586c.781-.781.781-2.047 0-2.828l-2.585-2.586 2.585-2.586c.781-.781.781-2.047 0-2.828z">
</path>
</svg>
</div>
<div class="modal-content">
<h5>This is to test modal 1</h5>
</div>
<div class="modal-box__contact-button">
Contact Us
</div>
</div>
</div>
<div class="modal">
<div class="modal-box">
<div class="modal-box__exit-button">
<svg stroke="currentColor" fill="currentColor" stroke-
width="0" version="1.2" baseProfile="tiny"
viewBox="0 0 24 24" class="btn" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17.414 6.586c-.78-.781-2.048-.781-2.828 0l-2.586 2.586-2.586-2.586c-.78-.781-2.048-.781-2.828 0-.781.781-.781 2.047 0 2.828l2.585 2.586-2.585 2.586c-.781.781-.781 2.047 0 2.828.39.391.902.586 1.414.586s1.024-.195 1.414-.586l2.586-2.586 2.586 2.586c.39.391.902.586 1.414.586s1.024-.195 1.414-.586c.781-.781.781-2.047 0-2.828l-2.585-2.586 2.585-2.586c.781-.781.781-2.047 0-2.828z">
</path>
</svg>
</div>
<div class="modal-content">
<h5>This is to test modal 2</h5>
</div>
<div class="modal-box__contact-button">
Contact Us
</div>
</div>
</div>
You can find them with custom data that connect with the element you clicked on
function showModal(){
alert(document.querySelectorAll("[data-target='"+this.id+"']")[0].innerText);
}
document.addEventListener("DOMContentLoaded", function() {
var cards = document.getElementsByClassName('card');
for(var i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", showModal);
}
});
.d-none{
display:none;
}
<div class="card" id="1">One</div>
<div class="card" id="2">Two</div>
<div class="card" id="3">Three</div>
<div class="card" id="4">Four</div>
<div class="card" id="5">Five</div>
<div class="card" id="6">Six</div>
<div data-target="1" class="d-none">Description 1</div>
<div data-target="2" class="d-none">Description 2</div>
<div data-target="3" class="d-none">Description 3</div>
<div data-target="4" class="d-none">Description 4</div>
<div data-target="5" class="d-none">Description 5</div>
<div data-target="6" class="d-none">Description 6</div>
I've made some research already online but I can't find any solution to my problem:
I've a web app which is using JQuery and bootstrap, on desktop is working as intended but when I try it on mobile (on Android I've tried Chrome an Brave) but it doesn't work on a single tap on the button but to trigger it need to long press until animation is finished
Here the front-end part and JQuery code:
$(document).on("click ", "#triggerCena", function(e) {
e.preventDefault();
$('#dettaglioCena').slideToggle("fast", function() {
delay = 0;
$('#dettaglioCena .cibo').each(function() {
if (!$(this).hasClass('animate__animated animate__bounceInLeft')) {
delay += 0.02;
$(this).css("animation-delay", delay + "s");
$(this).addClass('animate__animated animate__bounceInLeft');
$(this).css("visibility", "visible");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row animate__animated animate__zoomInDown" style="margin:0px;margin-top:15px;margin-bottom:15px;animation-delay:1s;">
<div class="col-2">
<img class="mx-auto d-block rounded" width="62" height="50" src="images/pictures/img_community/cena.jpg">
</div>
<div class="col-7">
<h1 style="color:white;margin-left:15px;font-size:20px;">Cena</h1>
</div>
<div class="col-1">
</div>
<div class="col-1" style="margin-right:10px;">
<i class="fa fa-plus addMeal" style="color:white;font-size:20px;" data-toggle="modal" value="3" data-target="#modalAlimenti"></i>
</div>
</div>
<div class="row bg-light-grey animate__animated animate__zoomInDown" style="margin:0px;margin-bottom:0px;animation-delay:1s;">
<div class="col-1">
</div>
<div class="col-6">
<i style="color:black;">4 Voci</i>
</div>
<div class="col-3">
</div>
<div class="col-1">
<a class="fa fa-angle-down" style="color:black;" id="triggerCena" role="button"></a>
</div>
</div>
<div class="collapse" id="dettaglioCena" style="display: none;">
<div class="row bg-light-grey" id="175" style="margin:0px;"></div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="176" style="margin: 0px; visibility: visible; animation-delay: 0.02s;">
<div class="col-4">
Grano saraceno </div>
<div class="col-3">
50 g </div>
<div class="col-3">
171 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="176"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="177" style="margin: 0px; visibility: visible; animation-delay: 0.04s;">
<div class="col-4">
Coniglio </div>
<div class="col-3">
150 g </div>
<div class="col-3">
295 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="177"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="178" style="margin: 0px; visibility: visible; animation-delay: 0.06s;">
<div class="col-4">
Broccoli </div>
<div class="col-3">
300 g </div>
<div class="col-3">
102 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="178"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="179" style="margin: 0px; visibility: visible; animation-delay: 0.08s;">
<div class="col-4">
Olio di oliva </div>
<div class="col-3">
30 ml </div>
<div class="col-3">
265 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="179"></i></div>
</div>
</div>
I'm also using Animate.css to make animations.
I've already tried to add touchstart and touchend but nothing seems to change the behaviour.
Any help is very appreciated
Every tap comes with a delay, because it might be that someone is not really clicking but it's the start of a swipe, for example. This is why there's a delay and I think that's what you're talking about?
See here: https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
how can i writing in java script, that when i click on just Read less button jump to the first element, i solved that with this code >> toggle_switch[0].scrollIntoView(false)
it jumps up to where the button in read less position is, but i wanna set the position totally top of button where the first element (div) is
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
solution without any library or framework:
button.addEventListener("click", function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
});
you can calculate the exact position of the div you want to scroll-to
const bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
an than use the variable "offset" in the scroll() function.
top: offset
Edit:
javascript:
const btn = document.querySelector(".btn");
const elementToShow = document.querySelector(".element-to-show");
btn.addEventListener("click", function () {
if (btn.textContent === "Read More") {
btn.textContent = "Read Less";
elementToShow.style.display="flex";
}
else if (btn.textContent === "Read Less") {
btn.textContent = "Read More";
elementToShow.style.display="none";
const bodyRect = document.body.getBoundingClientRect(),
elemRect = document.querySelector(".target-container").getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
window.scroll({
top: offset,
left: 0,
behavior: 'smooth'
});
}
});
just add this class to your element, wich you want to be seen/not seen
.element-to-show {
display: none;
flex-direction: column;
}
<div class="container">
<div class="row element-to-show" id="collapse" >
<div class="col-md-4 mb-4 aktion-text">
also add the class ".target-container" to the div to wich you want to scroll to.
and remove the styling in the HTML file. styling in html has the highest priority so it overwrites the external styles.
const btn = document.querySelector(".btn");
const elementToShow = document.querySelector(".element-to-show");
btn.addEventListener("click", function () {
if (btn.textContent === "Read More") {
btn.textContent = "Read Less";
elementToShow.style.display="flex";
}
else if (btn.textContent === "Read Less") {
btn.textContent = "Read More";
elementToShow.style.display="none";
const bodyRect = document.body.getBoundingClientRect(),
elemRect = document.querySelector(".target-container").getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
window.scroll({
top: offset,
left: 0,
behavior: 'smooth'
});
}
})
.element-to-show {
display: none;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container target-container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row element-to-show" id="collapse" >
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I have an image that is supposed to appear on a website page. It works in Firefox, but does not appear in either Safari or Chrome for some reason. This is the line I have used for the image in the JS file:
$("#picture").append("<img src='/images/sub1/Green_graph.png' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")
I can't seem to figure out why it appears in one browser but not the others and have not yet found an answer to this problem.
Edit: this is the code from the HTML file:
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<img id="picture">
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
You are appending an img to an img. I'm surprised that worked at all.
Either change the parent tag:
<span id="picture"></span>
$(document).ready(function(){
$("#picture").append("<img src='https://www.fillmurray.com/300/250' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<span id="picture"></span>
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
Or set the attributes on the existing tag.
$(document).ready(function(){
$("#picture").attr("src", "https://www.fillmurray.com/300/250");
$("#picture").attr("alt", "Bill is awesome");
//Style should really come from a stylesheet, but I'll leave it for now
$("#picture").attr("style", "width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<img id="picture">
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>