I want to be able to preview my images before upload like this and I have been doing research online and looking at past questions which is kind of related to mine, But each time I try to copy the JS code and do some modifications it doesn't really work for me. Probably, because I'm still trying to learn JavaScript and J query Any one with suggestions on methods of achieving this?
Here are my HTML and CSS
var count = 0;
function handleFileSelect(evt) {
var $fileUpload = $("input#Photofile[type='file']");
count = count + parseInt($fileUpload.get(0).files.length);
if (parseInt($fileUpload.get(0).files.length) > 4 || count > 3) {
alert("You can only upload a maximum of 3 photos");
count = count - parseInt($fileUpload.get(0).files.length);
evt.preventDefault();
evt.stopPropagation();
return false;
}
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
$('#Photofile').change(function(evt) {
handleFileSelect(evt);
});
$('#list').on('click', '.remove_img_preview', function() {
$(this).parent('span').remove();
//this is not working...
var i = array.indexOf($(this));
if (i != -1) {
array.splice(i, 1);
}
// tried this too:
//$(this).parent('span').splice( 1, 1 );
count--;
});
form .post-image-collection {
margin: -20px 0px 0px -20px;
overflow: hidden;
}
form .post-image {
position: relative;
float: left;
height: 152px;
width: 170px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.mrm {
margin-right: 20px;
}
.mts {
margin-top: 10px;
}
form .post-image img {
max-width: 80px;
max-height: 80px;
width: auto;
height: auto;
vertical-align: top;
border-radius: 3px;
overflow: hidden;
}
form .post-image .icon-camera {
display: none;
}
form .post-image input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
form .post-image.empty {
position: relative;
float: left;
height: 130px;
width: 130px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
vertical-align: top;
}
form .post-image.empty .icon-camera {
display: block;
height: 30px;
line-height: 30px;
left: 40%;
position: absolute;
text-align: center;
top: 50%;
width: 30px;
cursor: inherit;
margin: -15px 0px 0px -15px;
}
form .post-image.empty .icon-camera img {
height: 60px;
width: 60px;
}
form .post-image.empty input {
cursor: pointer;
}
form .post-image p,
.file_container-orange p {
margin: 10px 0;
margin: 1rem 0;
text-align: center;
font-family: "OpenSansSemiBold", sans-serif;
}
.uppercase {
text-transform: uppercase;
}
#list {
float: left;
}
.thumb {
height: 130px;
width: 130px;
margin-right: 20px;
margin-top: 10px;
}
.remove_img_preview {
position: relative;
top: -46px;
right: 40px;
font-size: 20px;
line-height: 1;
padding: 4px 6px;
background: white;
border-radius: 0px 0px 0px 3px;
text-align: center;
cursor: pointer;
}
.remove_img_preview:before {
content: "×";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="row row-images">
<label for="image">Images*</label>
<div class="column image_container">
<div class="post-image-collection">
<label id="list"></label>
<label class="post-image post-image-placeholder mrm mts empty">
<input type="file" id="Photofile" name="images[]" required="required" multiple />
<span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>
<p class="uppercase">Photo</p>
</label>
</div>
</div>
</form>
on reference of This link which it is assumed to be a duplicate of
$(function(){
$("#Photofile").change(function() {
if (this.files && this.files[0]){
var reader = new FileReader();
reader.onload = function(e) {
$('#imageDisplay,#imageDisplay1,#imageDisplay2').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
});
form .post-image-collection {
margin: -20px 0px 0px -20px;
overflow: hidden;
}
form .post-image {
position: relative;
float: left;
height: 152px;
width: 170px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.mrm {
margin-right: 20px;
}
.mts {
margin-top: 10px;
}
form .post-image img {
max-width: 80px;
max-height: 80px;
width: auto;
height: auto;
vertical-align: top;
border-radius: 3px;
overflow: hidden;
}
form .post-image .icon-camera {
display: none;
}
form .post-image input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
form .post-image.empty {
position: relative;
float: left;
height: 130px;
width: 130px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
vertical-align: top;
margin-top:50px;
}
form .post-image.empty .icon-camera {
display: block;
height: 30px;
line-height: 30px;
left: 40%;
position: absolute;
text-align: center;
top: 50%;
width: 30px;
cursor: inherit;
margin: -15px 0px 0px -15px;
}
form .post-image.empty .icon-camera img {
height: 60px;
width: 60px;
}
form .post-image.empty input {
cursor: pointer;
}
form .post-image p,
.file_container-orange p {
margin: 10px 0;
margin: 1rem 0;
text-align: center;
font-family: "OpenSansSemiBold", sans-serif;
}
.uppercase {
text-transform: uppercase;
}
#list {
float: left;
}
.thumb {
height: 130px;
width: 130px;
margin-right: 20px;
margin-top: 10px;
}
.remove_img_preview {
position: relative;
top: -46px;
right: 40px;
font-size: 20px;
line-height: 1;
padding: 4px 6px;
background: white;
border-radius: 0px 0px 0px 3px;
text-align: center;
cursor: pointer;
}
.remove_img_preview:before {
content: "×";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<img id="imageDisplay" alt="uploaded Image"/>
<img id="imageDisplay1" alt="uploaded Image"/>
<img id="imageDisplay2" alt="uploaded Image"/>
<div class="row row-images">
<label for="image">Images*</label>
<div class="column image_container">
<div class="post-image-collection">
<label id="list"></label>
<label class="post-image post-image-placeholder mrm mts empty">
<input type="file" id="Photofile" name="images[]" required="required" multiple />
<span class="icon-camera">
<img src="https://cdn.onlinewebfonts.com/svg/img_134042.png">
</span>
<p class="uppercase">Photo</p>
</label>
</div>
</div>
</form>
Related
My first question on Stackoverflow :) I have this situation. I build a slider trying to get with js the value and displaying in a box. Additionally I want to hide the slider thumb and replace it with my icon.. in Chrome is all nice and good but the in Firefox the original thumb of the slider is still rendered and displayed.
Any I dean what I'm doing wrong in CSS? Thanks in advance!
let slider = document.getElementById("slider_qt");
let selector = document.getElementById("selector");
let SelectValue = document.getElementById("SelectValue");
SelectValue.innerHTML = slider.value;
slider_qt.oninput = function () {
SelectValue.innerHTML = this.value;
selector.style.left = this.value + "%";
};
.container_quality_tools {
width: 100%;
margin-top: 20%;
}
.slider_text {
font-size: 10px;
margin-bottom: 1%;
margin-left: 20px;
}
#slider_qt {
-webkit-appearance: none;
width: 100%;
margin-left: 3%;
margin-right: 0%;
height: 7px;
outline: none;
border-radius: 3px;
}
#slider_qt::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#selector {
position: absolute;
left: 85%;
margin-top: -10%;
}
.SelectorBtn {
height: 14px;
width: 14px;
background-image: url("../media/slider-icon-14.jpg");
background-size: cover;
background-position: center;
border-radius: 50%;
bottom: 0;
}
#SelectValue {
width: 20px;
height: 20px;
position: absolute;
top: -25px;
left: -2px;
background: #feb360;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}
#SelectValue::after {
content: "";
border-top: 12px solid #feb360;
border-left: 10px solid #f1f0f0;
border-right: 10px solid #f1f1f1;
position: absolute;
bottom: -4px;
left: 0;
z-index: -1;
}
<div class="row no-gutters">
<div class="col-6">
<div class="container_quality_tools">
<p class="slider_text">Quality Tools</p>
<input type="range" min="1" max="100" value="90" id="slider_qt">
<div id="selector">
<div class="SelectorBtn"></div>
<div id="SelectValue"></div>
</div>
</div>
</div>
</div>
Chrome:
Firefox:
Make background and border disappear with -moz-range-thumb pseudo selector.
#slider_qt::-moz-range-thumb {
background-color: #fff;
border: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
It looks broken in the snippet, but I think it would work in your code.
let slider = document.getElementById("slider_qt");
let selector = document.getElementById("selector");
let SelectValue = document.getElementById("SelectValue");
SelectValue.innerHTML = slider.value;
slider_qt.oninput = function() {
SelectValue.innerHTML = this.value;
selector.style.left = this.value + "%";
};
.container_quality_tools {
width: 100%;
margin-top: 20%;
}
.slider_text {
font-size: 10px;
margin-bottom: 1%;
margin-left: 20px;
}
#slider_qt {
-webkit-appearance: none;
width: 100%;
margin-left: 3%;
margin-right: 0%;
height: 7px;
outline: none;
border-radius: 3px;
}
#slider_qt::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#slider_qt::-moz-range-thumb {
background-color: #fff;
border: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#selector {
position: absolute;
left: 85%;
margin-top: -10%;
}
.SelectorBtn {
height: 14px;
width: 14px;
background-image: url("../media/slider-icon-14.jpg");
background-size: cover;
background-position: center;
border-radius: 50%;
bottom: 0;
}
#SelectValue {
width: 20px;
height: 20px;
position: absolute;
top: -25px;
left: -2px;
background: #feb360;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}
#SelectValue::after {
content: "";
border-top: 12px solid #feb360;
border-left: 10px solid #f1f0f0;
border-right: 10px solid #f1f1f1;
position: absolute;
bottom: -4px;
left: 0;
z-index: -1;
}
<div class="row no-gutters">
<div class="col-6">
<div class="container_quality_tools">
<p class="slider_text">Quality Tools</p>
<input type="range" min="1" max="100" value="90" id="slider_qt">
<div id="selector">
<div class="SelectorBtn"></div>
<div id="SelectValue"></div>
</div>
</div>
</div>
</div>
``` in the end I was able to solve it like this! Thx all for support! ``
#slider_qt::-moz-range-thumb {
-webkit-appearance: none;
background: transparent;
border-color: transparent;
color: transparent;
width: 20px;
height: 20px;
cursor: pointer;
}
I have this code Codepen to modify a working mp3 player, it works fine everywhere, even in small windows in desktop. but the buttons wouldn't show up in mobile phones. I figured out it was because of the Mediaelementplayer that I'm using, but could not solve the problem. Thanks If you would fork that pen and show me a better way to do it.
var audio = {
init: function() {
var $that = this;
$(function() {
$that.components.media();
});
},
components: {
media: function(target) {
var media = $('audio.fc-media', (target !== undefined) ? target : 'body');
if (media.length) {
media.mediaelementplayer({
audioHeight: 40,
features : ['playpause', 'current', 'duration', 'progress', 'volume', 'tracks', 'fullscreen'],
alwaysShowControls : true,
timeAndDurationSeparator: '<span></span>',
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
}
},
},
};
audio.init();
*:focus{
outline: none;
}
html {
background: #f2f2f2;
height:100%;
}
body {
margin: 0;
font-family: "Raleway",sans-serif;
height:100%;
}
h1 {
margin: 0;
font-size: 33px;
color: #fff;
padding: 0 10%;
}
h3 {
margin: 0;
font-size: 17px;
font-weight: 500;
color: #ccc;
padding: 0 10%;
}
.container {
display: block;
width: 100%;
height: 750px;
margin: auto;
overflow: hidden;
background-repeat: repeat;
background-size: cover;
}
.music-player {
display: block;
position: relative;
width: 400px;
height: 570px;
margin: auto;
margin-top: auto;
border-radius: 0 0 10px 10px;
background: transparent linear-gradient(to bottom,rgba(10,11,31,0.9) 50%,rgb(10,11,31) 70%) repeat scroll 0 0;
box-shadow: 1px 10px 20px 5px #222;
}
.series-name
{ font-family:"Times New Roman", Times, serif;
font-size:39px;
text-align:center;
width:100%;
margin: auto;
margin-top: auto;
color:#ccc;
width:400px;
background:#090b1f;
box-shadow: 1px 10px 20px 5px #222;
border-radius: 10px 10px 0 0;
`
}
.cover {
float: left;
width: 100%;
height: 66%;
}
.cover img {
display: block;
position: absolute;
top: 8%;
left: 14%;
width: 70%;
margin: auto;
text-align: center;
}
.titre {
float: left;
width: 100%;
}
.lecteur {
width: 100%;
display: block;
height: auto;
position: relative;
float: left;
}
.mejs__button>button:focus {
outline: 0px dotted #999;
}
.mejs__container {
position: relative;
background-color: transparent;
min-width: auto !important;
}
.mejs__controls {
padding: 0 10%;
background: transparent !important;
display: block;
position: relative;
}
.mejs__controls div {
display: block;
float: left;
position: relative;
}
.mejs__controls .mejs__playpause-button {
position: absolute !important;
right: 8%;
bottom: 95%;
width: 40px;
}
.mejs__controls .mejs__playpause-button button {
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 23px;
color: #5bbb95;
background: transparent;
padding: 0;
margin: 0;
}
.mejs__controls .mejs__play button:before{
content:"\f04b";
}
.mejs__controls .mejs__pause button:before{
content:"\f04c";
}
.mejs__controls .mejs__volume-button button {
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 20px;
color: #5bbb95;
background: transparent;
margin: 0;
padding: 0;
}
.mejs__controls .mejs__mute button:before {
content: "\f028";
}
.mejs__controls .mejs__unmute button:before {
content: "\f026";
}
.mejs__controls .mejs__time {
width: 100%;
margin-top: 7%;
margin-bottom: 3%;
color: #fff;
height: auto;
padding: 0;
overflow: visible;
min-width: 100%;
}
.mejs__controls .mejs__time span {
font-size: 15px;
}
.mejs__controls span.mejs__duration {
float: right;
text-align: right;
color: #ccc;
}
.mejs__controls span.mejs__currenttime {
font-weight: 700;
float: left;
}
.mejs__controls .mejs__time-rail {
width: 100%;
margin: 0;
}
.mejs__controls .mejs__time-rail span {
position: absolute;
top: 0;
width: 100%;
height: 4px;
border-radius: 50px;
cursor: pointer;
}
.mejs__controls .mejs__time-rail .mejs__time-loaded {
background: rgba(255,255,255,0.2);
}
.mejs__controls .mejs__time-rail .mejs__time-float {
display: none;
top: -40px;
width: 40px;
height: 25px;
margin-left: 0px;
text-align: center;
font-size: 10px;
background: #fff;
border: 0;
}
.mejs__controls .mejs__time-rail .mejs__time-float-current {
display: block;
position: relative;
top: 0;
margin: 0;
line-height: 26px;
color: #100d28;
}
.mejs__controls .mejs__time-rail .mejs__time-float-corner {
top: auto;
bottom: -9px;
left: 50%;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.mejs__controls .mejs__time-rail .mejs__time-current {
background: #5BBB95 none repeat scroll 0 0;
}
.mejs__controls .mejs__time-handle {
display: none;
}
.mejs__controls .mejs__volume-button {
position: relative;
position: absolute !important;
top: 70px;
right: 25%;
width: 40px;
height: 40px;
}
.mejs__controls .mejs__horizontal-volume-slider {
display: block;
position: absolute !important;
position: relative;
top: 70px;
right: 10%;
width: 60px;
height: 4px;
margin-top: 18px;
border-radius: 50px;
line-height: 11px;
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-total,
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.1);
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
background: #fff;
}
#media only screen and (max-width: 600px) {
.container {
height:400px;
}
.music-player {
display: block;
position: relative;
width: 100%;
height:100%;
margin: auto;
border-radius: 10px 10px 10px 10px;
background: transparent linear-gradient(to bottom,rgba(10,11,31,0.9) 50%,rgb(10,11,31) 70%) repeat scroll 0 0;
box-shadow: 1px 10px 20px 5px #222;
}
.series-name
{ display:none;
}
}
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sermon</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://readamind.com/music1/music1/index.css" />
</head>
<body>
<div class="contain">
<div class="container">
<div class="series-name">Album</div>
<div class="music-player">
<div class="cover">
<img src="http://readamind.com/music1/music1/data/frame.png" alt="">
</div>
<div class="titre">
<h3>Artist Name</h3>
<h1>Song Title</h1>
</div>
<div class="lecteur">
<audio style="width: 100%;" class="fc-media">
<source src="http://readamind.com/music1/music1/data/acousticbreeze.mp3" type="audio/mp3"/>
</audio>
</div>
</div>
</div>
</div>
<script src="http://readamind.com/music1/music1/index.js"></script>
</body>
</html>
<!--Test-->
I am appending the div .soonOverlay to specific .smallCatalogBlock's. What I can't seem to figure out is how I get the height of soonOverlay to be only as tall as the img in smallCatalogBlock. Right now its height covers the entire container.
Does anyone see what I am doing wrong or how I can fix this?
$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
console.log("It should be working");
}
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 60%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogBlock img {
width: 80%;
height: auto;
box-shadow: 10px 5px 5px rgba(0,0,0,.3);
display: block;
margin: 0px auto 15px auto;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.comingSoonSmall {
position: relative;
}
.comingSoonSmall .soonOverlay {
width: 80%;
height: 100%;
background: #b82222;
opacity: .8;
position: absolute;
top: 0;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 2.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782" alt="Fastening Technology Catalog">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
I have updated the script below.
$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
console.log("It should be working");
var img_w = $('.smallCatalogBlock > img').width();
var img_h = $('.smallCatalogBlock > img').height();
$('.soonOverlay').width(img_w).height(img_h);
}
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 60%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogBlock img {
width: 80%;
height: auto;
box-shadow: 10px 5px 5px rgba(0,0,0,.3);
display: block;
margin: 0px auto 15px auto;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.comingSoonSmall {
position: relative;
}
.comingSoonSmall .soonOverlay {
width: 80%;
height: 100%;
background: #b82222;
opacity: .8;
position: absolute;
top: 0;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 2.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782" alt="Fastening Technology Catalog">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
Problem: Want to create a simple javascript/jquery auto image slider, but something doesn't seem to work.
// jquery //
$(document).ready(function() {
$("#imgSlider_img1").show();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
})
// slider //
var current_image_number = 1;
function slider() {
if (current_image_number == 1) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").show('fast');
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
current_image_number = 2;
}
if (current_image_number == 2) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").show('fast');
$("#imgSlider_img4").hide();
current_image_number = 3;
}
if (current_image_number == 3) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").show('fast');
current_image_number = 4;
}
if (current_image_number == 4) {
$("#imgSlider_img1").show('fast');
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
current_image_number = 1;
}
}
window.setInterval(slider, 4000);
.imgSlider {
height: 500px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
box-shadow: 5px 5px 5px #333;
}
.imgSlider img {
width: 100%;
height: 100%;
}
<div class="imgSlider">
<img id="imgSlider_img1" src="images/index/imgSlider_img1.png">
<img id="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
<img id="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
<img id="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>
Logic: I want to make a simple auto slider using the current html scheme. I want to be able to either increment inside the 'imgSlider' div or change images through ID's (like the current one). But the problem is that after each interval, all the images get displayed.
Any help is appreciated!
With 4 if's, all the if's are executed. So, let us say at the entry point the value of index is 1. It will be true for first if and it will set the index to 2. Now, second if condition also becomes true and it will set index to 3. And so on till it resets the value back to 1.
Hence, in place of 4 if's you need to use if else
// jquery //
$(document).ready(function(){
$("#imgSlider_img1").show();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
})
// slider //
var current_image_number = 1;
function slider() {
if (current_image_number == 1) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").show('fast');
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
current_image_number = 2;
} else if (current_image_number == 2) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").show('fast');
$("#imgSlider_img4").hide();
current_image_number = 3;
} else if (current_image_number == 3) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").show('fast');
current_image_number = 4;
} else if (current_image_number == 4) {
$("#imgSlider_img1").show('fast');
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
current_image_number = 1;
}
}
window.setInterval(slider, 4000);
.imgSlider {
height: 500px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
box-shadow: 5px 5px 5px #333;
}
.imgSlider img {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgSlider">
<img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png">
<img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
<img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
<img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>
You can further simplify your code to following
// jquery //
$(document).ready(function(){
$(".imgSlider > img").hide(); // hide all images
$("#imgSlider_img1").show(); // show 1st image
});
var current_image_number = 1;
function slider() {
$(".imgSlider > img").hide(); // hide all images
current_image_number = ++current_image_number > 4 ? 1 : current_image_number; // calculate the next image
$("#imgSlider_img" + current_image_number).show('fast'); // show the image
}
window.setInterval(slider, 4000);
.imgSlider {
height: 500px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
box-shadow: 5px 5px 5px #333;
}
.imgSlider img {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgSlider">
<img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png">
<img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
<img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
<img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>
I've simplified your JS logic a bit to make it more clear what's going on. The simplified JS will also allow you to add or remove images from your HTML without having to touch your JS:
// all images
var images = document.querySelectorAll('.imgSlider img');
// currently active number
var active = 1;
// slider
function activate() {
for (var i=0; i<images.length; i++) {
images[i].style.display = 'none';
}
// display the active image;
document.querySelector('#imgSlider_img' + active).style.display = 'block';
// increment the active image number
active++;
if (active > images.length) active = 1;
}
window.setInterval(activate, 3000);
activate();
.imgSlider {
height: 500px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
box-shadow: 5px 5px 5px #333;
position: relative;
}
.imgSlider img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="imgSlider">
<img id="imgSlider_img1" src="https://placeimg.com/640/480/1.jpg">
<img id="imgSlider_img2" src="https://placeimg.com/640/480/2.jpg">
<img id="imgSlider_img3" src="https://placeimg.com/640/480/3.jpg">
<img id="imgSlider_img4" src="https://placeimg.com/640/480/4.jpg">
</div>
To make this work, you needed to increment the integer that stores the currently active image. You want to do that inside the function that changes the images.
When you increment that active image number, you also should check if the incremented number is greater than the max number of images. If so, you should set the active image number to 1.
That's all there is to it!
If many images occurs means if condition which is stated above deals with problem. So i have suggested to use below type of JavaScript image slider.
var _imgPath = {
"imageDetails": [{
"Id": "F0001",
"Name": "figure1.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png'
},
{
"Id": "F0002",
"Name": "figure2.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png'
},
{
"Id": "F0003",
"Name": "figure3.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/baboon.png'
},
{
"Id": "F0004",
"Name": "figure4.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/barbara.png'
},
{
"Id": "F0005",
"Name": "figure5.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/boat.png'
},
{
"Id": "F0006",
"Name": "figure6.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/cat.png'
},
{
"Id": "F0007",
"Name": "figure7.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/fruits.png'
},
{
"Id": "F0008",
"Name": "figure8.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/frymire.png'
},
{
"Id": "F0009",
"Name": "figure9.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/girl.png'
},
{
"Id": "F00010",
"Name": "figure10.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/monarch.png'
}
]
}
var currentImage, LastImage;
function initLoader(arg_imgPath) {
if (arg_imgPath.imageDetails.length > 0) {
sliderImgTag.src = arg_imgPath.imageDetails[0]['Src'];
sliderImgTag.setAttribute('cid', arg_imgPath.imageDetails[0]['Id']);
sliderImgTag.setAttribute('alt', arg_imgPath.imageDetails[0]['name']);
currentImage = 0;
document.querySelector('.Prod_Arrow.left').style.visibility = "hidden"
}
document.querySelector('.Prod_Arrow.right').addEventListener('click', function () {
btnArrowShift((currentImage + 1), true);
})
document.querySelector('.Prod_Arrow.left').addEventListener('click', function () {
btnArrowShift((currentImage - 1), false);
})
}
initLoader(_imgPath);
document.querySelector('.Prod_Arrow.right').addEventListener('click', function () {
btnArrowShift((currentImage + 1), true);
})
document.querySelector('.Prod_Arrow.left').addEventListener('click', function () {
btnArrowShift((currentImage - 1), false);
})
function btnArrowShift(value, types) {
if (types) {
if (value != _imgPath.imageDetails.length) {
document.querySelector('.Prod_Arrow.left').style.visibility = "visible"
sliderImgTag.src = _imgPath.imageDetails[value]['Src'];
sliderImgTag.setAttribute('cid', _imgPath.imageDetails[value]['Id']);
sliderImgTag.setAttribute('alt', _imgPath.imageDetails[value]['name']);
currentImage = value;
if (value === (_imgPath.imageDetails.length - 1)) {
document.querySelector('.Prod_Arrow.right').style.visibility = "hidden";
}
}
} else {
if (value != _imgPath.imageDetails.length) {
document.querySelector('.Prod_Arrow.right').style.visibility = "visible"
sliderImgTag.src = _imgPath.imageDetails[value]['Src'];
sliderImgTag.setAttribute('cid', _imgPath.imageDetails[value]['Id']);
sliderImgTag.setAttribute('alt', _imgPath.imageDetails[value]['name']);
currentImage = value;
if (value === 0) {
document.querySelector('.Prod_Arrow.left').style.visibility = "hidden";
}
}
}
}
setInterval(function () {
if (currentImage != _imgPath.imageDetails.length) {
if (currentImage === (_imgPath.imageDetails.length - 1)) {
currentImage = 0;
document.querySelector('.Prod_Arrow.right').style.visibility = "visible";
document.querySelector('.Prod_Arrow.left').style.visibility = "hidden";
} else if(currentImage === (0)) {
currentImage = currentImage + 1;
document.querySelector('.Prod_Arrow.left').style.visibility = "visible";
} else if(currentImage !== (0)){
currentImage = currentImage + 1;
document.querySelector('.Prod_Arrow.left').style.visibility = "visible";
}
sliderImgTag.src = _imgPath.imageDetails[currentImage]['Src'];
sliderImgTag.setAttribute('cid', _imgPath.imageDetails[currentImage]['Id']);
sliderImgTag.setAttribute('alt', _imgPath.imageDetails[currentImage]['name']);
}
}, 5000)
#import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");
/* font-family: 'Nunito', sans-serif; */
:after,
:before,
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*::selection {
background: transparent;
}
.Prod-dialog * {
font-family: "Nunito", sans-serif;
}
.Prodclear {
clear: both;
}
.Prod-pull-right {
float: right !important;
}
.Prod-pulk-left {
float: left !important;
}
.Prod-col-4 {
width: 45%;
float: left;
padding: 0px 15px;
}
.Prod-col-8 {
width: 55%;
float: left;
padding: 0px 15px 0px 30px;
}
/* dialog start */
.Prod-dialog.active {
visibility: visible;
position: fixed;
background: rgb(33, 32, 32);
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
transition: all 0.5s;
padding: 30px;
z-index: 99999;
}
.Prod-container {
max-width: 1440px;
background: #fff;
margin: auto;
/* box-shadow: 0px 0px 15px #ffffff; */
padding: 0px;
margin-top: 50px;
max-height: calc(100vh - 90px);
overflow-y: auto;
background: linear-gradient(to right, white 44%, #f9fafb 44%);
}
.Prod-Gallery-footer .Prod-col-8 {
padding-right: 0px;
}
/* width */
.Prod-container::-webkit-scrollbar,
.Prod_slider::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
.Prod-container::-webkit-scrollbar-track,
.Prod_slider::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.Prod-container::-webkit-scrollbar-thumb,
.Prod_slider::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
/* Handle on hover */
.Prod-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.Prod-scroll-hidden {
overflow: hidden;
}
#Prod-dialog-close {
position: absolute;
right: 40px;
top: 15px;
width: 40px;
height: 40px;
opacity: 1;
background: #fff;
border-radius: 50%;
}
#Prod-dialog-close:hover {
opacity: 1;
}
#Prod-dialog-close:before,
#Prod-dialog-close:after {
position: absolute;
left: 19px;
content: " ";
height: 24px;
width: 2px;
background-color: #212020;
z-index: 4;
/* z-index: 888; */
top: 9px;
}
#Prod-dialog-close:before {
transform: rotate(45deg);
}
#Prod-dialog-close:after {
transform: rotate(-45deg);
}
/* dialog end */
/* header start */
.Prod-header h2 {
color: #252525;
font-size: 26px;
font-weight: 700;
line-height: 33px;
text-align: left;
position: relative;
margin: 0px 0px 25px 0px;
padding: 0px 0px 15px 0px;
}
.Prod-header h2:before {
position: absolute;
content: "";
width: 65px;
height: 3px;
background: #fa7000;
bottom: 0px;
}
/* header end*/
/* footer start */
.Prod-footer {
padding: 15px;
background: #fff;
}
.Prod-footer p {
color: #6a7070;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
margin: 0px;
}
.Prod-footer p a {
color: #6a7070;
text-decoration: none;
}
/* footer end */
/* form start*/
.Prod-invoice-sec {
max-width: 994px;
margin: auto;
/* background: #f1f1f1;
background: linear-gradient(to right, white 40%, #f9fafb 40%); */
margin-bottom: 0px;
padding-bottom: 0px;
padding: 30px;
border-bottom: 1px solid #979797;
}
.Prod-col-6 {
width: 50%;
padding: 0px 15px;
float: left;
}
.Prod-row {
margin: 0px -15px;
}
.Prod-form-row {
margin-bottom: 15px;
}
.Prod-form-row label {
color: #9b9b9b;
font-size: 16px;
font-weight: 600;
line-height: 19px;
}
.Prod-form-row p {
color: #252525;
font-size: 16px;
font-weight: 600;
line-height: 22px;
margin: 0px;
}
/* form end*/
/* Gallery Start */
.Prod-Gallery {
margin: 15px 0px;
}
.Prod-Gallery-Header {
position: relative;
border-bottom: 1px solid #979797;
padding-bottom: 8px;
}
.Prod-Gallery-Header h2 {
color: #6a7070;
font-size: 16px;
font-weight: 900;
line-height: 19px;
margin: 0px;
padding: 10px 0px;
display: inline-block;
}
.Prod-tabs {
margin: 0px;
padding: 0px;
position: absolute;
right: 0px;
top: 5px;
}
.Prod-tabs li {
margin: 0px;
padding: 0px;
display: inline-block;
font-size: 16px;
line-height: 32px;
padding: 0px 8px 0px 8px;
position: relative;
cursor: pointer;
border-radius: 6px;
}
ul.Prod-tabs img {
width: 18px;
vertical-align: middle;
cursor: pointer;
}
li#Prod-tab1.active,
li#Prod-tab2.active {
background: #ddd;
}
.Prod-Gallery-body {
padding: 15px 0px 15px 0px;
}
/* Gallery Start */
/* Tab Start */
.Prod-tab-link.current {
background: #d8d8d8;
color: #5b5b5b;
}
.Prod-tab-link.current {
display: inline-block;
}
.Prod-tab-content {
display: none;
}
.Prod-tab-content.current {
display: block;
}
li#ProdSelectedTab.current {
background: transparent;
}
/* Tab End*/
/* selected */
.Prod-grid-group li {
position: relative;
}
.Prod-grid-group li.selected {
position: relative;
}
.Prod-grid-group li.selected:after {
content: "";
display: block;
position: absolute;
background: rgba(250, 112, 0, 0.6);
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.Prod-grid-group li.selected:before {
content: "";
display: block;
width: 18px;
height: 30px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
position: absolute;
top: 35px;
left: 50px;
z-index: 1;
}
.Prod-grid-group {
margin: 0px;
padding: 0px;
margin-left: -15px;
}
.Prod-grid-group li {
margin: 0px;
padding: 0px;
width: 110px;
height: 110px;
list-style-type: none;
display: inline-block;
overflow: hidden;
margin-left: 16px;
margin-bottom: 16px;
border-radius: 5px;
}
.Prod-grid-group li img {
max-width: 100%;
}
table.Prod-table {
border-collapse: collapse;
width: 100%;
}
table.Prod-table tfoot tr td {
border-top: 1px solid #979797;
border-bottom: 1px solid #979797;
padding: 18px 0px;
font-size: 18px;
}
table.Prod-table td,
table.Prod-table th {
text-align: left;
}
table.Prod-table tr th,
table.Prod-table tr td {
padding: 5px 40px 10px 0px;
}
.Prod-table thead th {
font-weight: 700;
color: #6a7070;
font-size: 16px;
}
.Prod-table tbody td {
font-size: 16px;
font-weight: 600;
line-height: 22px;
text-align: left;
color: #252525;
}
.Prod-table tfoot td {
font-weight: 700;
color: #252525;
font-size: 16px;
}
.Prod-payment-action {
padding: 50px 0px 0px 0px;
text-align: right;
}
.Prod-payment-action button {
border: 2px solid #fa7000;
opacity: 0.8;
border-radius: 5px;
display: inline-block;
padding: 8px 15px;
background: transparent;
text-transform: uppercase;
color: #fa7000;
font-weight: 700;
margin-left: 15px;
}
.Prod-payment-action button:hover {
color: #fff;
background-color: #fa7000;
box-shadow: 0 2px 6px 4px rgba(250, 112, 0, 0.25);
}
/* slider start */
.Prod_slider {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 35px;
}
.lSSlideOuter .lSPager.lSGallery img {
width: 100%;
}
/* slider End */
.Prod_slider ul li {
white-space: nowrap;
margin-bottom: 0px;
}
.Prodt-mark {
position: relative;
width: 20px;
height: 20px;
border: 1px solid #bfc3c3;
float: left;
margin-right: 10px;
top: 5px;
border-radius: 4px;
}
.Prodt-mark::before {
content: "";
display: block;
width: 6px;
height: 14px;
border: solid transparent;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: 0px;
left: 6px;
z-index: 1;
}
.Prod-tab-link.current .Prodt-mark {
background: #bfc3c3;
}
.Prod-tab-link.current .Prodt-mark::before {
content: "";
display: block;
width: 6px;
height: 14px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: 0px;
left: 6px;
z-index: 1;
}
.Prod-Caption {
margin: 8px 0px 0px 0px;
font-size: 14px;
}
.newImgViewer {
width: 150px;
height: 800px;
}
.Prod_slider {
position: relative;
}
.Prod_Arrow {
width: 50px;
height: 50px;
background: #bfc3c3;
border-radius: 50%;
position: absolute;
cursor: pointer;
}
.Prod_Arrow.left {
left: 0px;
top: 45%;
}
.Prod_Arrow.left::before {
position: absolute;
content: "";
top: 20px;
left: 20px;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.Prod_Arrow.right {
right: 0px;
top: 45%;
}
.Prod_Arrow.right::before {
position: absolute;
content: "";
top: 20px;
left: 20px;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.Prod-slider-view {
text-align: center;
position: relative;
height: 450px;
}
.Prod-slider-view img {
height: 400px;
border-radius: 6px;
vertical-align: middle;
margin-top: 25px;
}
.Prod_Selected {
width: 50px;
height: 50px;
position: absolute;
top: 30px;
right: 200px;
border-radius: 4px;
}
.Prod_Selected[isselected="true"]::before {
content: "";
display: block;
width: 8px;
height: 16px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
position: absolute;
top: 15px;
left: 20px;
z-index: 1;
}
.Prod_Selected::after {
content: "";
display: block;
position: absolute;
background: #bfc3c3;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border-radius: 6px;
}
.allitems li {
display: none;
}
.allitems li.selected {
display: inline-block;
}
#Prod-grid-slider li.isactive {
border: 4px solid #fa7000;
}
#Prod-grid-slider li {
border: 4px solid transparent;
}
#ProdSelectedTab.current span.ProdAllImages {
display: none;
}
span.ProdAllImages {
display: none;
}
.Prod-tab-link.current span.ProdSelectedImg {
display: inline-block;
}
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="src/index.css" />
</head>
<body>
<div class="Prod-dialog">
<div class="Prod-container">
<div class="Prod-invoice-sec">
<div class="Prod-header">
<h2>Slider</h2>
</div>
<div class="Prod-container-body">
<div class="Prod-Gallery">
<div class="Prod-Gallery-body">
<!--Wrapper to contain interchanging content-->
<div class="Prod-tabs-wrapper">
<div id="ProdSliderContent" class="Prod-tab-content current">
<div class="Prod-slider-view">
<img id="sliderImgTag">
<div class="Prod_Arrow left"></div>
<div class="Prod_Arrow right"></div>
</div>
<div class="Prod_slider">
<ul class="Prod-grid-group" id="Prod-grid-slider"> </ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Prod-footer">
<p>Prasanna Brabourame</p>
<p>Open Source Enthusiasts</p>
<p>Place:
<a> Puducherry,Pondicherry,INDIA</a>
</p>
<p>Email:
prasanna18101994#gmail.com
</p>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
Here is my html struct, simple
<div> <img style="width:100%;height:100%"/> </div>
div shows in the chrome:
and the image, there is a gap between the div and image
noticed that the image supposed to cover the div,
if I change the height of div more than 10px, looks perfect.
the image cover the div
I've tested if the height of div is less, the gap is bigger.
So what's the problem?
there is a example I copy a part of the code from my project, need to point to that image in the chrome dev tools:
._display_style {
display: none;
}
.sketchup_display_style {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
.cab_list_form #shape div img {
width: 80%;
height: 80%;
}
/*
.cab_list_form #shape {
width:150px;height:200px;
}*/
.cab_list_form #shape div {
/*
width:160px;
height:160px;
float:left;
*/
padding: 0.2em 0 0.6em;
text-align: center;
background-repeat: no-repeat;
cursor: pointer;
}
.cab_list_form #shape div span {
width: 100%;
display: block;
}
.toggle-red {
border: 2px solid red;
}
.cab_style_img {
background-color: #fff;
border: 2px solid #ebebeb;
text-align: center;
}
.cab_style_img img {
width: 290px;
height: 240px;
}
.question_img {
padding-right: 1em;
float: left;
}
#cab_condition table td label {
/*
background-repeat:no-repeat;
text-align:center;
padding:0.1em 0.8em 0.3em;
cursor:pointer;
width:50px;
height:100%;
line-height:20px;
margin:auto;
text-align:center;
*/
border-radius: 20px;
text-align: center;
width: 55px;
height: 20px;
line-height: 20px;
margin: auto;
background-color: #ffffff;
cursor: pointer;
padding: 0 0.5em;
}
#cab_condition table td label input {
display: none;
}
#cab_condition table td label span {
margin: 0.1em 0.6em;
}
.howmanypart_td span {
margin: 0.1em 0.7em;
}
.down_search div {
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
height: 30px;
line-height: 30px;
color: #30b2ba;
/*
padding:0.5em 0;
width:50px;
*/
}
.priceDiv select {
border: 1px solid #bdbdbd;
width: 130px;
height: 28px;
border-radius: 20px;
/*text-align:center;*/
color: #30b2ba;
cursor: pointer;
}
.door-background {
position: absolute;
border: 2px solid #000;
border-collapse: collapse;
text-align: center;
padding: 0;
margin: 0;
}
.door-background th,
.door-background td {
border: 2px solid #999;
border-width: 0 2px 2px 0;
padding: 0;
}
.tableizer-table {
border: 1px solid #000;
border-collapse: collapse;
width: 100%;
text-align: center;
}
.tableizer-table th,
.tableizer-table td {
border: 1px solid #999;
border-width: 0 1px 1px 0;
padding: 2px;
}
.wardrobe_type_list {
width: 100%;
height: 40px;
}
.wardrobe_type_list .groups_check {
float: left;
margin-right: 25px;
height: 25px;
line-height: 25px;
}
.wardrobe_type_list .groups_check img {
height: 100%;
}
.wardrobe_type_list .groups_check input[type=radio] {
height: 25px;
line-height: 25px;
}
.display-none {
display: none;
}
.search-container {
float: left;
}
body {
font-size: 14px;
margin: 15px;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
}
.pax_highlight {
position: absolute;
border: solid 3px #329afb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 3;
}
.pax_highlight_text {
color: #329afb;
font-weight: bold;
font-size: 12px;
bottom: 0px;
margin-bottom: -19px;
position: absolute;
text-align: center;
}
#groups_list {
left: 10px;
position: relative;
}
#white_hide_menu {
background-color: white;
height: 51px;
position: absolute;
top: 517px;
width: 5px;
display: none;
}
.menu_groups {
height: 140px;
overflow: hidden;
position: relative;
width: 100%;
}
.thumbs_layers_div_a {
display: none;
}
.items div {
float: left;
}
.items {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
}
.thumbs_layers_group {
height: 100px;
}
.thumbs_layers_div {
background-color: white;
cursor: pointer;
float: left;
margin-left: 8px;
padding: 1px;
width: 93px;
height: 93px;
text-align: center;
display: inline-block;
display: inline;
}
.thumbs_layers_div_selected {
border-color: #389CFC;
border-width: 3px;
background-color: #389CFC;
}
.thumbs_layers_div img {
border-color: #D1D1D1;
border-style: solid;
border-width: 1px;
height: 91px;
}
.thumbs_layers_add_item {
width: 100%;
text-align: center;
height: 25px;
line-height: 25px;
overflow: hidden;
}
.thumbs_layers_div_selected img {
border-color: #389CFC;
}
.pax {
height: 180px;
}
#layers_pax_buffer {
pointer-events: none;
}
#layers_pax_buffer {
display: none;
border: 1px solid #CCCCCC;
width: 1048px;
height: 585px;
position: absolute;
top: 98px;
}
.val {
width: 1048px;
height: 150px;
}
#dialog-confirm,
#dialog-confirm2 {
display: none;
}
.pax_h_dimension {
display: none;
position: absolute;
height: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #444444;
line-height: 23px;
margin-top: -12px;
}
.pax_v_dimension {
display: none;
position: absolute;
width: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #444444;
}
.pax_h_rule {
height: 1px;
background: #444444;
border: none;
margin: 3px 0 0px 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
.pax_v_rule {
width: 1px;
background: #444444;
border: none;
margin: 0 3px 0 0;
position: absolute;
left: 3px;
}
.pax_v_text {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
margin-left: 88px;
display: block;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
font-size: 11px;
font-style: italic;
pointer-events: none;
}
.drawboard {
xborder: 2px solid grey;
position: relative;
margin: 10px auto;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
xborder: 1px solid green;
background: #f0f0f0;
overflow: hidden;
}
.pax_highlight {
position: absolute;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
z-index: 3;
border-width: 3px;
border-style: solid;
border-color: rgb(50, 154, 251);
}
#main {
min-width: 800px;
margin: 0 auto;
height: auto;
}
.attr {
width: 90%;
float: left;
}
.name {
width: 90%;
text-align: left;
margin: 10px;
}
.selectOption {
width: 130px;
float: left;
margin-left: 8px;
text-align: center;
/*cursor: pointer;*/
}
.selectPic {
width: 100px;
height: 100px;
border: 3px solid #eee;
margin: 0 auto;
overflow: hidden;
}
.selectPic img {
width: 100%;
}
.selectRadio {
width: 100%;
font-size: 12px;
}
.choice_collection {
width: 70px;
height: 18px;
border: 1px solid #bbb;
float: left;
margin: 5px;
padding: 5px;
text-align: center;
cursor: pointer;
}
#message {
width: 140px;
height: 80px;
border: 3px solid #ddd;
margin: 5px;
padding: 10px;
float: left;
background: #eee;
}
#message div {
margin-bottom: 10px;
}
.button {
width: 150px;
height: 40px;
padding: 10px;
float: right;
xmargin-top: 300px;
}
.button button {
color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
background: rgb(51, 204, 255);
width: 80px;
height: 30px;
margin: 5px;
font-size: 14px;
xfloat: right;
}
.pax {
border: 3px solid #eee;
height: auto;
margin: 20px;
overflow: hidden;
min-width: 800px;
xoverflow-y: hidden;
}
#items_scroll {
overflow-x: scroll;
padding: 5px;
}
.thumbs_layers_div {
overflow: hidden;
height: 120px;
}
.wardrobe_type_list {
xpadding-top: 10px;
xpadding-left: 10px;
xwidth: 90%;
margin: 10px;
margin-bottom: 0;
}
#items {}
.thumbs_layers_div_selected .thumbs_layers_add_item {
color: white;
}
.v #items img {
width: 95px;
height: auto;
}
.v .thumbs_layers_div {
height: 70px;
}
<div id="drawboard1" class="drawboard" style="width: 250px; height: 300px;">
<div name="%E5%B7%A6" class="pax_layer" style="top: 0px; left: 4px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>%E5%B7%A6</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="copyRight" class="pax_layer" style="top: 0px; left: 125px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>copyRight</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 243.75px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 0px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="dingxian" class="pax_layer" style="top: -8.125px; left: -6.25px; width: 262.5px; height: 8.125px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="http://i4.piimg.com/4851/4195cbf23b1d9389.jpg">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>dingxian</div>
<div>宽度:2100</div>
<div>高度:65</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div class="pax_highlight" style="width: 121px; height: 300px; top: 0px; left: 125px; display: none;"></div>
</div>
Try to this
img {
vertical-align: top;
}
because img vertical-align is
baseline - the default value.
more about vertical-align
#Zange-chan you aren't exactly right,once you set the position of one element as "absolute",it would be separated from the DOM flow,and it'd still wrap its subelements actually.
The problem is easy to solve ,one solution is setting the display attribute as block for the img.
please try it
img{
display:block;
}