Bootstrap Minimum Height for a Div - javascript

I have a banner in my page. I managing the design with bootstrap. The image with the id ”mybanner” is created dynamically from the code. So there are times that my code may not have at all the image element.
I would like to specify a minimum height for the div id ” myhorizontalbanner” so if there is not present at all the image element to display as banner the div id ” myhorizontalbanner” colored with red color.
My code when the image is there
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
<img id="mybanner" src="images/mybannerimage.jpg" class="img-fluid" /> <!--This Image
element is comming dynamically-->
</div>
</div>
</div>
My code when I dont have image
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
</div>
</div>

Have you tried with min-height ?
For example:
#myhorizontalbanner {
min-height: 150px;
}

Related

Card image and content area to be fixed size as per percentage

Hope someone can suggest or help as I am a bit new. Card below needs to have a fixed width of 38% image area and 62% of content area irrespective of content size (Height can increase if text is more)
Notice in above image the image width changes based on card title. I want the card to only increase in height and have a fixed image/card content ratio as mentioned above.
Card code :
<div class="ibm-columns mainCard ibm-widget-processed ibm-sameheight-processed" data-items=".ibm-card" data-widget="setsameheight" style="width: 100%;">
<div class="uc1 card ibm-col-12-3" style="display:block">
<div class="ibm-card mobileFlex ibm-no-border" style="height: auto;">
<div class="ibm-card__image">
<img id="use-case-img-1" class="thumbnailImage" src="data:image/png;=" alt="card_3"></div>
<div class="ibm-card__content">
<p id="use-case-title-3" class="cardTitle">IBM Watson Learning experience system</p>
<p id="use-case-sub-title-3" class="cardSubtitle">Lear how to find customers</p>
<p class="ibm-ind-link">
<span class="ucExplore">Explore</span>
</p>
</div>
</div>
</div>
<div class="uc4 card ibm-col-12-3" style="display:block">
<div class="ibm-card mobileFlex ibm-no-border" style="height: auto;">
<div class="ibm-card__image">
<img id="use-case-img-4" class="thumbnailImage" src="data:image/png;" alt="card_4"></div>
<div class="ibm-card__content">
<p id="use-case-title-4" class="cardTitle" style="height:78px">UC4</p>
<p id="use-case-sub-title-4" class="cardSubtitle">IBM customer usecase 4 subtitle change</p>
<p class="ibm-ind-link">
<span class="ucExplore">Explore</span></p>
</div>
</div>
</div>
</div>
Adding flex-shrink:0 to ibm-card__image

Image Gallery - Slider

I developed an image gallery. In a main box (large box) I introduce the first image of the array, the rest are arranged horizontally below that image.
Is there a way to get the big box to function as an image slider?
At this point try to apply, however I have some problems :( the secondary images do not appear below the main one, nor is the slider working correctly, when I move to the second image, all the others are loaded.
I chose to use * ngFor to load secondary images, in case I can have an array with indeterminate quantities of images.
DEMO
CODE
<div class="col-md-6">
<div class="drop">
<div class="abc">
<img class="img-fluid Images" [src]="images[0].img" >
</div>
</div>
<div class="row">
<div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>
<img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
</div>
</div>
</div>
<!-- -------------------------------SLIDER----------- -->
<div class="col-md-6">
<ngb-carousel *ngIf="images">
<div class="drop">
<div class="abc">
<ng-template ngbSlide>
<img [src]="images[0].img" alt="Random first slide">
</ng-template>
</div>
</div>
<ng-template ngbSlide>
<div class="row">
<div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>
<img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
What I want with the functional slider
I intend that when clicking on the buttons on the slider it will display the secondary images (the images shown below the main image)
you have to use corousel-Api to get change event.
corousel emit slide event when image is change(automatic or via button)
so you have to add an event to corousel change i have added change($event) to (slide) output.
<ngb-carousel id="carousel" #carouse *ngIf="data" (slide)="change($event)" >
<ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="imgIdx.image" [alt]="">
</div>
<div class="carousel-caption">
<h3>{{imgIdx.head}}</h3>
<p>{{imgIdx.data}}</p>
</div>
</ng-template>
</ngb-carousel>
<div *ngFor="let imgIdx of belowImageData; let i = index" style="width:80px" >
<img class="col-sm" [src]="imgIdx.image" style="width: 100%; height: 100%;">
</div>
then in chnage event i have updated belowImageData array according to image loded in upper corousel.
constructor(){
this.belowImageData = JSON.parse(JSON.stringify(this.data));
this.belowImageData.splice(0,1);
}
change(data){
console.log(data.current)
this.belowImageData = JSON.parse(JSON.stringify(this.data));
this.belowImageData.splice(data.current, 1);
}
you can also add this line to pause automatic slide
this.carousel.pause();
i have developed a stackblitz for you(without proper css).

How do I copy an active slide's text color and apply it to another div

Hello I am using slick to create text slider. The slider has a title above it that I would like to change the color of the text depending on the current active slides text colour.
So as the slides changes so does the title text color.
Below is code on the page.
<div id="title" class="title">
<h3>I just want to say...</h3>
</div>
<div class="myslider">
<div id="slide1" class="slide">
<div class="text-wrapper">
<h1>Hello World!</h1>
</div>
</div>
<div id="slide2" class="slide">
<div class="text-wrapper">
<h1>How are you?</h1>
</div>
</div>
</div>
I have tried this with no avail
<script>
document.getElementById("title").style.color = document.getElementsByClassName("slick-current").style.color;
</script>
Any advice would be greatly appreciated.
document.getElementById("title").style.color = document.getElementById("slide").style.color;
You dont have element with ID of slide, you have of slide1 and slide2. You can try and grab color from slide1 for example...
document.getElementById("title").style.color = document.getElementById("slide1").style.color;

wonky problems with bootstrap -> rows not consistent width only on large screens

So I have this weird problem with bootstrap and rows. It only seems to happen in the LG view which is greater than 1200px. For some reason random rows are not conforming to the full amount they should(in this case 1140px) and instead are smaller.
I am including a few pictures to show exactly the issue I am talking about to see if I can figure out what is going on. Any help would be appreciated.
If i make the width smaller to simulate a smaller screen everything works without issue.
https://s21.postimg.org/8i0w6wtpz/Screen_Shot_2016_09_18_at_7_22_08_PM.png
https://s22.postimg.org/xr3ekeyf5/Screen_Shot_2016_09_18_at_7_23_09_PM.png
https://s22.postimg.org/dkzwlj2rl/Screen_Shot_2016_09_18_at_7_23_28_PM.png
<section class="inner">
<div class="container portfolio-container">
<h2>PORTFOLIO</h2>
<div class="prcnr" ng-repeat="port in portfolio">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<a rel="{{port._id}}" class="fancybox" href="images/uploads/{{ port.main_image }}">
<img src="images/uploads/{{ port.main_image }}" alt="" class="main_portfolio_image img-responsive">
</a>
<div class="hidden">
<a rel="{{port._id}}" ng-repeat="image in port.images" class="fancybox" href="images/uploads/{{image}}">
<img src="images/uploads/{{image}}" alt="">
</a>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 port-txt">
<h4><b>{{ port.title }}</b></h4>
<p ng-bind-html="port.description"></p>
</div>
</div>
</div>
</div>
</section>
Custom CSS Pertaining to this code :
.portfolio-container h4 {
font-size: 22.5px;
}
.portfolio-container .port-txt p {
font-size: 15px;
}
#media (min-width: 1200px) {
.main_portfolio_image {
width: 570px;
height: 385px;
}
}
those picture are not slimier to your code.
there is 2 col-lg-6 column I found where one column contain a hidden filed. that's not a problem. And you are using bootstrap so you don't need to set media query for image . Just simply use img-responsive and set the image with a min-width of 100% like and add container-fluid in html part
img.img-responsive{
min-width:100% !important;
}

jQuery Progress animate to predefined width - Multiple Div

How can I animate multiple div width using animate, when a div has already a width defined in the css of html.
For example. If I have style="width:30%;" in the html, and I want to animate that div from 0 to 30% how can I do it? And do that in multiple divs with the same class?
To animate a div that has no width defined, to a certain value, I know I can do it like this $('div').animate({ width: 'value' }, milisecs); but I don't want to set the width value on the JS and repeating this line multiple times.
I created this Fiddle that may help better understanding.
Thank you in advance.
Try to use data() like,
HTML
<p>Single</p>
<div class="container">
<div class="fill" data-width="80%">
<span><b>Bar One</b></span>
</div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
<div class="fillmult" data-width="90%">
<span><b>Bar 1</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="50%">
<span><b>Bar 2</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="70%">
<span><b>Bar 3</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="20%">
<span><b>Bar 4</b></span>
</div>
</div>
SCRIPT
$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
var width=$(this).data('width');
$(this).animate({ width: width }, 1500);
});
Live Demo

Categories