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>
Related
I have got a bootstrap grid with dynamically generated images.
If the last element is alone in the row it should be centered.
And if there are two elements in row, the second element should float right.
This is what I want:
Two elements in row:
A B D
E F G
H I
One element in row:
A B D
E F G
H
HTML Code:
<div class="row">
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
</div>
This is what I get:
Two elements in row:
A B D
E F G
H I
One element in row:
A B D
E F G
H
I tried it with :last-child:nth-child(odd) and :last-child:nth-child(even), but in the first row the first element is odd, in the second row the first element is even, in the third row the first element is odd again and so on.
Notice that the content size variates.
You can use a mixture of nth-child and last-child:
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col-md-6 {
width: 33.3333%;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
.col-md-6:last-child:nth-child(3n+2) {
/* push second child to right if last child */
margin-left: auto;
border-color: red;
}
.col-md-6:last-child:nth-child(3n+1) {
/* push first child to middle if last child */
margin: auto;
border-color: red;
}
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-6">
3
</div>
<div class="col-md-6">
4
</div>
<div class="col-md-6">
5
</div>
<div class="col-md-6">
6
</div>
<div class="col-md-6">
7
</div>
<div class="col-md-6">
8
</div>
</div><br>
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-6">
3
</div>
<div class="col-md-6">
4
</div>
<div class="col-md-6">
5
</div>
<div class="col-md-6">
6
</div>
<div class="col-md-6">
7
</div>
</div>
If you need this to work with bootstrap 3, rather than 4, then you can just use
.col-md-4:last-child:nth-child(3n+2),
.col-md-4:last-child:nth-child(3n+1){
/* push second child to right if last child */
margin-left: 33.333333%;
border: 1px solid red;
}
Example bootply
You can do it using flex.
var numberOfFlexItmes = $('.flex').children('div').length;
if((numberOfFlexItmes%2) == 0){
$('.flex').css('justify-content','space-between');
}
else{
$('.flex').css('justify-content','space-around');
}
.flex{
width: 300px;
flex:1;
display: flex;
flex-wrap: wrap;
}
.flex-item{
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
<div class='flex-item'>
A
</div>
<div class='flex-item'>
B
</div>
<div class='flex-item'>
C
</div>
<div class='flex-item'>
D
</div>
<div class='flex-item'>
E
</div>
<div class='flex-item'>
F
</div>
<div class='flex-item'>
G
</div>
<div class='flex-item'>
H
</div>
</div>
What you can do, is work out if it's got a remaining 2 or 1 when dynamically generating it and use the col-x-push-x to push it that many columns
Fiddle with two Remaining Image
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4 col-md-push-4">
<img src="https://via.placeholder.com/50x50" />
</div>
</div>
</div>
Fiddle with One Remaining Image
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4 col-md-push-4">
<img src="https://via.placeholder.com/50x50" />
</div>
</div>
</div>
You could approach the layout you want using flexbox.
Add justify-content: center to the row. This will center an item if it is in a row by itself.
Also target the second last item in a row. Set margin-right to auto. In a row with only two items, this will align the last item to the right.
Example:
body {
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
width: 33.3333%;
}
.col:nth-last-child(2) {
margin-right: auto;
}
img {
width: 100%;
height: auto;
display: block;
}
<div class="row">
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
</div>
<br><br>
<div class="row">
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
</div>
I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number
You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.
Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.
i want to add bootstrap row with col-lg-3class. my div contains different heights.hope to add articles with different length texts.
my output is but designed expected output and here. code as follows
<div class="row">
<div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
<div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
<div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
<div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
Updated
values put as 1,2,3 etc comes from mysql database. so the height is equal to text row numbers. php code is follows
`
foreach ($value as $add) {
echo "<div class='col-md-3'><p>";
echo $add->item;
echo "</p></div>";
}
?>`
Perhaps, I ruin your original code. I change everywhere. I hope this helps you.
Add customized stylesheet inside tag head:
<style>
.col-md-3{padding:0px;} // default: 15px -> left and right.
</style>
Here's the code:
<div class="container">
<div class="col-md-12">
<div class="col-md-3">
<div class="col-md-12" style="background-color: #c5d5cb;height: 150px;">
1
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #173e43;height: 44px; color:white;">
5
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #9fa8a3;height: 200px;">
2
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #b56969;height: 70px;">
6
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #e3e0cf;height: 50px;">
3
</div>
<div class="col-md-12" style="background-color: #daad86;height: 20px;">
7
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #b3c2bf;height: 60px;">
4
</div>
<div class="col-md-12" style="background-color: #5a5c51;height: 35px;">
8
</div>
</div>
</div>
</div>
Because I don't know what version of your bootstrap, I use v3.1.1 for clearfix ... you can customize this based on your version.
You are on right track. This will definitely work. You need to use col-md-3 like this :
<div class="row">
<div class="col-md-3">
<p>1</p>
<p>5</p>
</div>
<div class="col-md-3">
<p>2</p>
<p>6</p>
</div>
<div class="col-md-3">
<p>3</p>
<p>7</p>
</div>
<div class="col-md-3">
<p>4</p>
<p>8</p>
</div>
</div>
I think try this
<div class="row">
<div class="col-lg-5">
<div id="1" ></div>
<div id="5" ></div>
</div>
<div class="col-lg-5">
<div id="2" ></div>
<div id="6" ></div>
</div>
<div class="col-lg-5">
<div id="3" ></div>
<div id="7" ></div>
</div>
<div class="col-lg-5">
<div id="4" ></div>
<div id="8" ></div>
</div>
</div>
Hope this will help you..
You can first use columns with col-lg-3 and then place your blocks inside each one. That way you will get your desired result.
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
</div>
</div>
CSS:
.grid-row{
margin-left: -15px;
margin-right: -15px;
}
.left-block{
float: left;
width: 100%;
}
Jsfiddle: https://jsfiddle.net/debraj/6dufsc4u/1/
Hope that helps.
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.