I have a bootstrap 4 page with an image that can be changed by the user interacting with several dropdowns. Based on the selected options, the image source is changed. The images are fairly large, so loading the requested image takes some time. I'd like to display a loading spinner on top of the image while the new image is being loaded, so the user knows that their action had some effect.
It seems like the built-in bootstrap spinners need their own div, so I thought a gif like this could work if placed on top of the image: https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.webp However, I'm not sure how to place it on top of the image and trigger the events necessary to show/hide it. Since my columns are not fixed-width, I want to display the spinner on top of the image rather than swapping the image source for the spinner, so all of the content remains in the correct positions.
Example code:
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-auto" style="background-color:red;">
<h2>Column 1</h2>
</div>
<div class="col-12 col-lg-auto" style="background-color:green;" >
<h2 class="header-2">Column 2</h2>
<img class="img-fluid" src="https://via.placeholder.com/500x350">
</div>
<div class="col-12 col-lg-auto" style="background-color:blue;">
<h2>Column 3</h2>
</div>
</div>
</div>
First, right after the tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Then, add this javascript to your page (preferably at the end of your page, before your closing </body> tag, of course):
$(window).load(function() {
$('#loading').hide();
});
</script>
Finally, adjust the position of the loading image and the background-color of the loading div with the style class.
This is it, should work just fine. But of course you have to have an ajax-loader.gif somewhere. Freebies here. (Right-click > Save Image As...)
Related
I want to show a part of next slide (10%), then when I move over that part of next slide it will show (30%).
Something like this: http://karimrashid.com/
Here's what I did till now:
<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
<h2>Show the left and the right slides</h2>
<div class="slideshow-container">
<div class="slideshow responsive"
data-cycle-fx=carousel
data-cycle-timeout=1000
data-cycle-carousel-visible=1
data-cycle-carousel-fluid=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach4.jpg">
</div>
</div>
CSS Code:
.slideshow-container {
overflow: hidden !important;
width: 50%;
}
.slideshow {
overflow: visible !important;
width: 90%;
margin-right: 10%;
}
http://jsfiddle.net/CairoCoder/x89sQ/259/
Is there's any existing slider that can do the trick?
why do you want to look some other slider. use what has used in that existing site.
http://karimrashid.com/js/script.js
Please let me know if you need further help.
I'm just learning Bootstrap and trying to figure out a good way to display content with an opaque background image. I'm currently using a "well" but don't have to. I can get the image "inside" the well and opaque but I can't get it "behind" the other content. Here is a small sample of the html:
.background1{
background-size:cover;
opacity: .25;
max-width: 1130px;
}
<div class="well">
<div class="row">
<img class="img-rounded background1" src="/Images/housing-4-1213183.jpg" alt="housing" />
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
If there is a better class to use for the content please let me know.
This should do it for you. Bootstrap doesn't have a component for this, so you're stuck making it yourself.
How it works:
By putting the img as the first child in the parent container, it gets drawn first. The absolute positioning guarantees it fills the parent container size, and the container's relative position means the children's absolute are relative to the parent container. (otherwise, the image would be absolute compared to the body, and fill up the entire window). Then, the Text is drawn, and as it is defined AFTER the image, rendered next, drawing on top of the image.
.covered {
position:relative; /* make a new "render context", so absolute positioning is relative to this parent container */
padding:30px; /* only needed for this demo */
}
.covered-img {
background:url('https://source.unsplash.com/random/800x600');
opacity: .25;
background-size:cover; /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
background-position:center; /* vs the top-left that is default */
position:absolute; /* take me out of the render context! let me define my own positioning */
top:0;bottom:0;left:0;right:0; /* this could also work with width:100%; height:100%;, but is simpler */
}
<div class="row">
<div class="col-xs-12 covered">
<div class="covered-img"></div>
<h3>Dat content doe</h3>
<p>So much glorious content</p>
</div>
</div>
try :
.background1 {
background:url('/Images/housing-4-1213183.jpg');
background-size:cover;
opacity: .25;
max-width: 1130px;
}
and
<div class="well">
<div class="row">
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
If you only want the background image (and not the text) to appear translucent try this:
.background1 {
background-image: linear-gradient(to bottom, rgba(255,255,255,0.3)0%,rgba(255,255,255,0.3) 100%), url("/Images/housing-4-1213183.jpg");
background-size:cover;
max-width: 1130px;
}
and in the HTML you'd want the div surrounding the content like this:
<div class="well">
<div class="row">
<div class="background1">
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
</div>
Image faded in the background and text on top of it which is not faded. I believe if this is what you are looking for.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.container {
position:relative;
left:100px;
top:100px;
}
.container h3 {
position:absolute;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQBK3FmyjIENz16NWEl1iJcIWj8I5n8hs-rl5JPixzw-XppNfKx" alt="Forest" width="170" height="100">
<span>
<h3>Hello
</span>
</div>
</body>
</html>
the background image css should be for the container element, and not as a tag inside the content...
<div class="image">
Text Content <!-- Right -->
</div>
<div>
<img class="image" /> <!-- Wrong -->
Text Content
</div>
.image{
background-image : url(.../);
}
I have created Bootstrap thumbnails as link images to other parts of a web application. Used Bootstrap 3 square tile display to create my thumbnails with an <a> tag incorporated inside the thumbnail. Trying to add additional information using <p> inside the thumbnail <div>. The <p> tags are overlapping each element. For example the last <p> tag overlaps any tag before it. (This is only true when I add the class "Thumbnail" to the <p> tags. Tried various ways to solve this, but have not been able to come up with a solution. Please see code below or at http://www.bootply.com/boXJrupqT0 (You will see the overlapping text at the very bottom of the Thumbnail)
My goal: To get the <a> and two <p> tags viewable on the same <div> while text wrapping (if needed). Any help with this would be greatly appreciated.
Thank you.
HTML:
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 capabilitiesTiles">
<div class="squareThumbnails"></div>
Test A
<p>Dkadlgjaklsgjasdglajdslkgjaklsjg</p>
<p>agdagsdvasbaerasdhadgasdgasdhasdhadhasdhahasha</p>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 capabilitiesTiles">
<div class="squareThumbnails"></div>
Test B
<p>Dkadlgjaklsgjasdglajdslkgjaklsjg</p>
<p>agdagsdvasbaerasdhadgasdgasdhasdhadhasdhahasha</p>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 capabilitiesTiles">
<div class="squareThumbnails"></div>
Test C
<p>Dkadlgjaklsgjasdglajdslkgjaklsjg</p>
<p>agdagsdvasbaerasdhadgasdgasdhasdhadhasdhahasha</p>
</div>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
.squareThumbnails {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align:center;
padding-top:calc(50% - 110px);
}
.capabilitiesTiles {
margin: 0px 10px -15px 65px;
}
.row .thumbnail {
border-width: 3px;
border-style: solid;
}
It's because your thumbnails have position:absolute
Just add height attribute to your thumbnail class fiddle
http://codepen.io/Thisisntme/pen/rVRyJE is a test of my website. I am attempting to add a flickity carousel, and for some reason it will not render the second image in the divs. Here is the carousel without all the other html and css stuff. http://codepen.io/Thisisntme/pen/waOeWa
<div class="gallery js-flickity">
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/ART.JPG" alt="art">
</div>
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/STUFF.jpg" alt="stuff">
</div>
<div class="gallery-cell">
</div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.gallery {
padding: 50px 0px 0px 0px;
}
.gallery img {
display: block;
width: 100%;
height:auto;
}
Heres proof the image links are good
Oh, and no jQuery.
EDIT: for those of you who still care, the images don't work anymore. Google Drive stopped letting you host from their servers.
Your .gallery-cell just needed a width of 100%, and at least for me, your img tags needed to be explicitly closed. To get around a sizing issue, I explicitly initialized Flickity using JS, instead of implicitly using the HTML class.
JSFiddle: https://jsfiddle.net/3qr6hub1/2/
var flkty = new Flickity('.gallery');
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.gallery {
padding: 50px 0px 0px 0px;
}
.gallery-cell {
width: 100%;
}
.gallery img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>
<div class="gallery">
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/ART.JPG" alt="art" />
</div>
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/STUFF.jpg" alt="stuff" />
</div>
<div class="gallery-cell">
</div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
OK, so I ran into this problem as well, leaving this here for when the next Googler comes through. Whenever I added an image to the carousel it wouldn't show up.
This is because when the cell is appended the image has not loaded yet. Meaning Flickity takes this cell to have no content, making the .flickity-viewport element have a height of 0px.
So what you need to do is make sure that your item that is being appended is tagged to be lazyLoaded. This lets Flickity know that it needs to wait for imagesLoaded before parsing the content.
Example:
myNewCell = '<img src="src.png" data-flickity-lazyload="src.png" />
flkty.append(myNewCell);
I have user photo which I want to put on top other image, so as to make that image complete.
Here is my code
<div id="containerDiv">
<figure>
<img id="someImage" src="../images/someImage.gif" >
</figure>
<div id="buttonDiv">
<button>Done</button>
</div>
</div>
I have other image which I am taking from cache and putting in some
<img src=cachedImage />
I want to style it so that I can put the cached image on top of someImage also The entire containerDiv should be responsive to the browser window. So, I want to get the css part of this. I tries using relative and absolute positioning
<style>
#containerDiv{
position:relative; width:100%; height:300px;
}
#someImage{
position:absolute; top:10px; left:100px;
}
#buttonDiv{
position:absolute; top:100px; left:200px;
}
</style>
I want the button to be responsive with the someImage too. But it does not move along with the image. Also the cached image should be in sync with someImage. Thanks in advance.
i am not aware with your code but try this hope this helps you
<div class="div on which you want to show overlay">
<div class="overlay overlay-div">
<center>
<div class="overlay-content"><p>your overlay content,img goes here</p>
</div>
</center>
</div>
</div>
and css for overlay is :
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
you can show overlay div on mouse hover/in/out events.