How to make an image fit into a simple auto-playing slideshow? - javascript

My question is regarding sizing of images into a section, which I think is called a container. Does anybody happen to know how to do this.
I've included the code of the aspects involved.
HTML
<div id="slideshow">
<div>
<img src="Img1.jpg">
</div>
<div>
<img src="Img2.jpg">
</div>
<div>
<img src="Img3.jpg">
</div>
</div>
CSS
img {
width: 100%;
height: auto;
display: block;
}
#slideshow {
margin: 80px auto;
position: absolute;
top: 20%;
left: 22%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.slideshow {
height: 300px;
width: 300px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
JS
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>

First of all, I love your energy man, amazing. :)
You are only couple of lines from the result you want.
One of the errors was that you didnt actually target the slideshow div in your css, you were targeting it as .slideshow, and that is wrong because slideshow is an ID, so you should say #slideshow in your css.
And the last thing that you gotta do is make your images always fully fit your container, you can do this by using width : 100%; height: 100%; object-fit: cover;
Just replace your current css with this one, and it should work :)
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#slideshow {
margin: 80px auto;
position: absolute;
top: 20%;
left: 22%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow {
height: 300px;
width: 300px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}

Related

How to make opacity gradually scale

I have a div, imgCover that overlaps an image. imgCover has a background set at rgba(255,255,255,.7), but I am wanting the opacity to gradually go from 0.0 - 1.0.
Is there anyway that I can get the imgCover's opacity to be at 0.0 at the far left and then at the far right 1.0?
jsfiddle
#conveyorSec {
padding: 50px 0;
height: auto;
width: 100%;
}
#conveyorInner {
margin: 0 5%;
width: 90%;
height: 100%;
position: relative;
}
#conveyorInner img {
width: 100%;
height: auto;
}
#imgCover {
width: 40%;
height: 100%;
position: absolute;
background-color: rgba(255,255,255,.7);
right: 0;
top: 0;
z-index: 99;
}
<section id="conveyorSec">
<div id="conveyorInner">
<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
<div id="imgCover"></div>
</div>
</section>
Use linear gradient instead of background-color:
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
#conveyorSec {
padding: 50px 0;
height: auto;
width: 100%;
}
#conveyorInner {
margin: 0 5%;
width: 90%;
height: 100%;
position: relative;
}
#conveyorInner img {
width: 100%;
height: auto;
}
#imgCover {
width: 40%;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
right: 0;
top: 0;
z-index: 99;
}
<section id="conveyorSec">
<div id="conveyorInner">
<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
<div id="imgCover"></div>
</div>
</section>

two divs inside a container ovelayed

I have a container DIV that has two DIVs inside. The first DIV (my-canvas) needs to be positioned absoulte at 0 0 inside the container. I want the second DIV to take up the remaining 50% of space below. The finished product needs to be responsive. I am stuck on how to position the second DIV.
I have the following HTML:
<div class="container map-container">
#include('maps.world-map')
<div id="my-canvas"></div>
<div id="their-canvas"></div>
</div>
My CSS is:
.map-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#my-canvas,
#their-canvas {
padding: 0;
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
left: 0;
top: 0;
}
I am trying to figure out the CSS for the canvas below
#their-canvas {
????
}
Thanks!
You can set second div using botton:0px, height: 50%;. check updated snippet below
$('.map-container').height($(window).height()-55);
$(window).resize(function(){
$('.map-container').height($(window).height()-55);
})
body {
padding: 0px;
margin: 0px;
}
.map-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#my-canvas,
#their-canvas {
padding: 0;
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
left: 0;
top: 0;
background: red;
}
#their-canvas {
height: 50%;
bottom: 0px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container map-container">
<div id="my-canvas">my-canvas</div>
<div id="their-canvas">their-canvas</div>
</div>
It is unclear what you mean by "it needs to be responsive".
But if you want to put your second canvas below, you can set a top: 50%; property. Since you are using relative values for the height and top of your canvas, its parent needs to have a defined height or min-height
See https://jsfiddle.net/NotANumber/3k2go0qf/
Try following code, Using CSS itself you can achieve,
*{
padding:0px;
margin:0px;
}
.map-container {
position: absolute;
display: block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
height:100%;
}
#my-canvas,
#their-canvas {
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
background: red;
}
#their-canvas {
bottom: 0px;
background: green;
}
<div class="container map-container">
<div id="my-canvas"></div>
<div id="their-canvas"></div>
</div>

jQuery 4 divs swap problems

I have been looking for a solution for this problem for 3 days so far and I can't figure out what's wrong. I have 4 divs (two in a row, two in column) in a square
<div id="menuWrapper">
<div id="imageSearch">
</div>
<div id="usualSearch">
</div>
<div id="dataBaseSearch">
</div>
<div id="cartoonSearch"></div>
</div>
JQuery
$('#usualSearch').click(function () {
$('#imageSearch').hide('slide', {direction: 'left'}, '100');
$('#dataBaseSearch').hide('slide', {direction: 'down'}, '100');
$('#cartoonSearch').hide('slide', {direction: 'right'}, '100');
$(this).delay('100').animate({height: '100%'}, 'fast').css({
'z-index': '2',
'border-radius': '50px 50px 50px 50px'
});
$(this).animate({width: '100%'}, 'fast');
});
CSS
#imageSearch{
border-radius: 50px 0 0 0;
background-color: #68f431;
width: 50%;
height: 50%;
float: left;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
#usualSearch{
border-radius: 0 50px 0 0;
background-color: #f46f4d;
float: right;
width: 50%;
height: 50%;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
#dataBaseSearch{
border-radius: 0 0 0 50px;
background-color: #71c3f4;
width: 50%;
height: 50%;
float: left; !important;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
#cartoonSearch{
border-radius: 0 0 50px 0;
background-color: #f46fef;
width: 50%;
height: 50%;
float: right;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}
This is my problem - I would like these to become height: 100% and width: 100% within the #menuWrapper when clicked, but the other three to stay beneath. My problem is that all other elements jump around and a page is a whole mess. Thanks everybody for the help and if you need additional info just tell me.
The easiest way to achieve your requirements is to add some CSS styles to the elements. I would suggest, adding a class with jQuery, but keep the styles in CSS.
#menuWrapper {
position: relative;
}
#menuWrapper > div.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Then, you need to add the class to the element with jQuery.
$("#menuWrapper div").click(function() {
$(this).addClass("active");
}
Similar to that, you're then able to remove that class afterwards again.
I would suggest adding another class (like .element or so) for every div (instead of #menuWrapper div).
The transition/animation can be achieved with CSS3 styles:
#menuWrapper > div {
transition: 0.5s ease all;
}

jQuery animate() expanding DIV

I am not an expert in jQuery (and to be honest, I am taking my first steps).
I have the example below, and what I am trying to do is choose the direction of the expansion of my div. I am using animate() and expanding the width and height.
At the moment it is expanding to the right, but I want it to change it, so it would expand to the left. The only way I could make the div expand to the left, is to add float: right; in the CSS of #map element.
I want it to know if there is another way to get to this, without changing the float of #map.
jsFiddle.
Snippet:
$(document).ready(function () {
$('#expand').click(function (expandir) {
this.value = 'collapse';
if ($(this).data('name') === 'show') {
$('#map').animate({ width: '600', height: '400' });
$('#inside').animate({ width: '600', height: '336' });
$('#expand').animate({ top: '370' });
$(this).data('name', 'hide');
} else {
this.value = 'expand';
$('#map').animate({ width: '300', height: '250' });
$('#inside').animate({ width: '300', height: '169' });
$('#expand').animate({ top: '220' });
$(this).data('name', 'show');
}
});
});
html, body {
width: 100%;
height: 100%;
}
#map {
z-index: 1;
position: relative;
width: 300px;
height: 250px;
border: 1px solid;
}
#expand {
z-index: 4;
position: absolute;
top: 220px;
left: 10px;
width: 70px;
height: 25px;
}
#inside {
z-index: 2;
position: absolute;
top: 40px;
right: 0;
background-color: #000000;
width: 300px;
height: 169px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#close {
position: absolute;
margin-top: 0;
margin-left: 0;
background-color: #34FF56;
width: 100px;
height: 50px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#btn {
z-index: 3;
position: relative;
float: left;
margin: 2px;
background-color: #FF9834;
width: 70px;
height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
<input type="button" data-name="show" value="expand" id="expand" />
<div id="inside"></div>
<div id="btn"></div>
</div>
You can change the positioning inside #map to absolute and add right:??%.The percentage works off the 100% in body tag. Hope this helps for what you need :}
#map {
z-index: 1;
position: absolute;
width: 300px;
height: 250px;
border: 1px solid;
right: 50%;
}

Opacity or Page Background is showing on half page on Pop Up

I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.

Categories