How to get an Image in the foreground with Bootstrap? - javascript

I'm trying to set a loading-GIF in the foreground of the users screen during an Ajax-request. The Gif should be in the middle of the webpage also if the user scrolls down or up. Is there a layout method in Bootstrap to realize this?
I'm not sure where to place this HTML snippet
<div id='loading' style='display: none'>
<img src="fonts/loading.gif" title="Loading" class="img-responsive center-block"/>
</div>

You can do it with CSS. Create an overlay wich will cover the page (overlay) by setting the z-index to 9999 to make sure it's at the foreground. To actually set the spinner in the center of the screen you can use top and translate properties. For example:
CSS:
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.loading-overlay > .inner
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The HTML markup looks like this:
<div class="loading-overlay"><div class="inner"><img src="fonts/loading.gif" title="Loading" class="img-responsive center-block"/></div></div>
To add a transculent background to the overlay, simply add background: rgba(0,0,0,0.85); to the .loading-overlay class.
Good luck!

You can place it anywhere but you would need to style the div using CSS to keep it in the middle of the page
This should work for you:
#loading{
position: fixed;
top: 50%;
left: 50%;
}

Related

Two images on each other with responsive behavior and proportional scaling

I would like to do something pretty standard in HTML/CSS/javascript I think but somehow I didn't find any solution for now: I want to have multiple images on each other with some of them being clickable. For example:
submarine with red circle button as window in this case the submarine is one img and the red circle is an input type="image" working as a button.
I want those multiple images to behave "as one" in term of responsivness and scaling so that I still see the same overall image independantly of the size of my window.
If I use this trick here: How do I position one image on top of another in HTML? and make both images responsive then the circle is not scaling down simultanuously with the submarine. Moreover, since the red circle is positioned in an absolute way it is not staying at the same place relative to the submarine.
here is my current code:
.div{
position: relative;
}
.responsive {
max-width: 100%;
}
#test2 {
width: 12.3%;
position:absolute;
z-index: 2;
left: 73%;
top: 62%;
}
#test
{
width: 100%;
position:relative;
z-index: 1;
}
<div>
<img src="/submarine.png" id="test" class="responsive" />
<input type="image" src="/red_circle.png" id="test2" class="responsive" />
</div>
In order to achive that, you can work with percentages, so if you reduce the scale of the window the size of the images reduce as well.
CSS:
.submarine {
width: 30%;
height: 55%;
position: relative;
}
.redDot {
width: 2%;
position: absolute;
}
HTML:
<div>
<img src="submarine.jpg" clas="submarine">
<img src="redDot.png" class="redDot">
</div>
Then play with the margins in orther to position the red dot in the submarine.
Dimensions and positions in percentages relate to the dimensions of the parent element. In your case the window of the submarine should be positioned as a percentage of the submarines dimensions. What you should do to make this is work is to put the window as a child in the submarine. Easiest would be to work with divs with background-images and use background-size: 100% to make the background-images scale with the elements.
Also you could use the "padding-bottom trick" to set the "height" of the div to a percentage of the parent's width.
#submarine {
background: yellow;
width: 30%;
padding-bottom: 20%;
position: absolute;
left: 20%;
top: 20%;
}
#window{
position: absolute;
background: red;
width: 20%;
padding-bottom: 20%;
right: 5%;
top: 40%;
background: red;
}
<div id="submarine">
<div id="window"></div>
</div>

Could background-color have different z-index than img?

I need to one image overlap an another. But the second image have background color and I need the first image between the second and second's background-color. It is possible? Already tried to made a new "div class" instead of style="background-color". Now i am stuck with this:
.mainRunner {
position: relative;
}
.firstimage {
position: relative;
z-index: 2;
}
.secondimage {
position: relative;
z-index: 3;
top: -75px;
}
.background {
position: relative;
z-index: 1
}
<div class="firstimage" style="max-width: 1170px;"><img src="" alt="" title="" style="width: 100%;" max-width="1168" height="399" caption="false" /></div>
<div class="background" style="background-color: #f2e5df;">
<div class="secondimage">
<img src="" alt="" title="" />
</div></div>
You can't give certain properties of an element different z-index values. However for certain elements like a div you can use ::before and ::after pseudo elements. And you can set a z-index on those, effectively creating three layers. More information here.
In this case you can create a div with the middle img inside. Then add a ::before and ::after to that div. Giving one a background color and a z-index of -1. And the other a background image and a z-index of 1.
In the example below I also added some margin and a border around the inital div so you can better see what is going on.
.image {
margin: 20px 0 0 20px;
position: relative;
border: 3px solid coral;
width: 200px;
height: 300px;
}
.image::before,
.image::after {
content: '';
display: block;
width: 200px;
height: 300px;
position: absolute;
}
.image::before {
z-index: -1;
background: cornflowerblue;
top: 20px;
left: 20px;
}
.image::after {
z-index: 1;
background: url("https://www.fillmurray.com/200/300");
top: -20px;
left: -20px;
}
<div class="image"><img src="https://www.fillmurray.com/200/300" /></div>
If I understand right what you're trying to achieve, you probably should be placing the images within background div and placing the second image with position: absolute:
<style>
.mainRunner {
position: relative;
}
.firstimage {
position: relative;
z-index: 2;
}
.secondimage {
position: absolute;
z-index: 3;
top: 20px; /* use top and left values to place the image exactly where you want it over the first image */
left: 20px
}
.background {
position: relative;
z-index: 1;
background-color: #f2e5df;
}
</style>
<div class="mainRunner">
<div class="background">
<img src="image1.png" class="firstimage" />
<img src="image2.png" class="secondimage " />
</div>
</div>
It sets the background color as the back-most element, then on top of it the secondimage and the firstimage.
Thank everyone for their ideas. In the end the solution was simple. In the style was the double definition of second image. And the first of them was just partly commented. So my first post working right like this:
.secondimage img{
max-width: 100%;
height: auto;
position: relative;
top: -75px;
margin: 5px;
margin-bottom: 10px;
}
Now just need to find out how to close this question...
Thank you :)
The answer is simply no... there is no way to address a z-index to specifically a background of an element, z-index and all the other CSS properties work on the entire element, not on only its background.
You're going to have to find another way to do this, have you thought of using a div with not content, and the same size of the image, and then just setting a background color to that specific div?

Position element perfectly to center (not just for fullscreen)

So, I need to position my element perfectly to the center. It displays correctly in fullscreen mode, however when it's not in fullscreen mode, the element is moved slightly down due to the top of the browser (tabs, URL bar, etc..)
I am using this CSS:
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have a feeling it's centered relative to the screen resolution? (Which explains why it's centered perfectly to fullscreen).
Here are images of what I mean:
https://i.stack.imgur.com/f63l7.jpg
https://i.stack.imgur.com/xwNfs.png
Is there any way to fix this? I don't mind using HTML/CSS/JS to solve this issue, I can also use JavaScript libraries.
Thanks for any help!
Edit:
My element is inside the body, like this:
<body>
<img class="centered" src="image.png">
</body>
Make use of the vh unit by changing your code like so:
.centered {
position: absolute;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
}
You need to set parent to position: relative.
.parent {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<span class="centered">I am centered</span>
</div>

How to center a scrollable image that is larger than the screen

I'd like to make an image viewer that centers an image regardless of how big it is and allows scrolling to view the entire image.
The problem I'm running into is that, while centering images smaller than the container is easy, when they're larger tranform I'm doing positions the image off the right and top of the screen.
Here is the fiddle that has some fixup javascript to make it work: http://jsfiddle.net/d3y0b8bd/
The code below will work for smaller images (e.g. https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png)
But for larger, the translate(-50%, -50%) transform will translate the image past the left and top margins of its parent.
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
/*aesthetic*/
background-color: red;
}
.lightboxImg {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*aesthetic*/
background-color: blue;
}
html:
<div class="lightboxRoot">
<div class="lightboxImg">
<img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"></img>
</div>
</div>
here's a fiddle in which JS is updating the position of scrollTop and scrollLeft, so to set the scroll to center of img.
Figured it out, in retrospect kind of silly: Just make a containing div that can't get any larger than the parent element, and make sure that it has the overflow property set so it gets the scrollbars. then the image inside can get is big as it wants: http://jsfiddle.net/abrady0/d3y0b8bd/2/
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
/*aesthetic*/
background-color: red;
}
.lightboxContainer {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
overflow: auto;
/*aesthetic*/
background-color: blue;
}
and the html:
<div class="lightboxRoot">
<div class="lightboxContainer">
<div>
<img id="imgElt" src="foo"></img>
</div>
</div>
</div>
one thing to fix in this case is that I'd still like the div's scroll centered with pure CSS, but this is a good first step.

Overlaying am image on top of an image

I'm trying to overlay a logo on top of a background image and I'm having a bit of trouble with it. Here is my html for the background image; the javascript makes the image refresh every second so it is like a video stream. The dublin-rememberance-floor2 is the image, there is some other javascript that gets this image from a database and puts it here full screen. The logo is logo.svg, I want this to go up in the left hand top corner but at the moment it is just going in behind the background and I have tried a couple of methods without success.
<body>
<img class="fullBG" evercam='dublin-rememberance-floor2' refresh="1000" alt="" /> <div class="logo">
<img height="25" src="http://www.evercam.io/img/logo.svg" border="0" width="175" alt="http://www.evercam.com/" />
</div>
width="175" alt="http://www.evercam.com/" />
<img />
<script>
$(document).ready(function () {
Evercam.setApiUrl('http://api.evercam.io/v1');
});
</script>
</body>
Here is my css for the fullBG and logo;
.fullBG {
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
z-index: 1;
width:100%;
height:100%;
}
.logo{
position: absolute;
top: 0;
right: 0;
}
I changed my css and this seemed to work
.fullBG {
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
width:100%;
height:100%;
}
.logo{
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
One thing you can do is that you can give z-index of logo > z-index of background so it will come on top of background..
I think you should position your a href link of logo also absolute.
another thing there is no separate closing img as you have done and trying to put "a href" in between of images.

Categories