I have just started exploring Cypress and came across such a problem:
Is it possible to select/ set a value in a slider component?
For example lets take this simple piece of code
<div class="col-10 projection_percentile_slider form-group"><label for="cc_7of9b5za1" class=""></label>
<div class="ccr-slider form-control ccr-marks-below ccr-tick-marks">
<div class="rc-slider rc-slider-with-marks">
<div class="rc-slider-rail"></div>
<div class="rc-slider-track" style="left: 0%; right: auto; width: 26.5306%;"></div>
<div class="rc-slider-step"><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 0%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 1.02041%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 2.04082%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 3.06122%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 4.08163%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 5.10204%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 6.12245%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 7.14286%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 8.16327%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 9.18367%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 10.2041%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 11.2245%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 12.2449%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 13.2653%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 14.2857%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 15.3061%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="display: none; left: 16.3265%;"></span>
.........
none; left: 82.6531%;"></span><span class="rc-slider-dot" style="display: none; left: 83.6735%;"></span><span class="rc-slider-dot" style="display: none; left: 84.6939%;"></span><span class="rc-slider-dot" style="display: none; left: 85.7143%;"></span><span class="rc-slider-dot" style="display: none; left: 86.7347%;"></span><span class="rc-slider-dot" style="display: none; left: 87.7551%;"></span><span class="rc-slider-dot" style="display: none; left: 88.7755%;"></span><span class="rc-slider-dot" style="display: none; left: 89.7959%;"></span><span class="rc-slider-dot" style="display: none; left: 90.8163%;"></span><span class="rc-slider-dot" style="display: none; left: 91.8367%;"></span><span class="rc-slider-dot" style="display: none; left: 92.8571%;"></span><span class="rc-slider-dot" style="display: none; left: 93.8776%;"></span><span class="rc-slider-dot" style="display: none; left: 94.898%;"></span><span class="rc-slider-dot" style="display: none; left: 95.9184%;"></span><span class="rc-slider-dot" style="display: none; left: 96.9388%;"></span><span class="rc-slider-dot" style="display: none; left: 97.9592%;"></span><span class="rc-slider-dot" style="display: none; left: 98.9796%;"></span><span class="rc-slider-dot" style="display: none; left: 100%;"></span></div>
<div tabindex="0" class="rc-slider-handle" role="slider" aria-valuemin="1" aria-valuemax="99" aria-valuenow="27" aria-disabled="false" style="left: 26.5306%; right: auto; transform: translateX(-50%);"></div>
<div class="rc-slider-mark"><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 0%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 1.02041%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 2.04082%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 3.06122%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 4.08163%;">
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">5</div>
</div>
</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 5.10204%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 6.12245%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 7.14286%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 8.16327%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 9.18367%;">
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">10</div>
</div>
</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 10.2041%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 11.2245%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 12.2449%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 13.2653%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 14.2857%;">
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">15</div>
</div>
</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 15.3061%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 16.3265%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 17.3469%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 18.3673%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 19.3878%;">
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">20</div>
</div>
</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 20.4082%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 21.4286%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 22.449%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 23.4694%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 24.4898%;">
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">25</div>
</div>
</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 25.5102%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="transform: translateX(-50%); left: 26.5306%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 27.551%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 28.5714%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 29.5918%;">
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">30</div>
</div>
.......
.......
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">85</div>
</div>
</span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 86.7347%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 87.7551%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 88.7755%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 89.7959%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 90.8163%;">
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">90</div>
</div>
</span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 91.8367%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 92.8571%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 93.8776%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 94.898%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 95.9184%;">
<div class="ccr-mark-with-number">
<div class="ccr-slider-tick-label">95</div>
</div>
</span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 96.9388%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 97.9592%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 98.9796%;"><span class="ccr-tick-mark"></span></span><span class="rc-slider-mark-text" style="transform: translateX(-50%); left: 100%;"><span class="ccr-tick-mark"></span></span></div>
</div>
</div>
</div>
here is what I have tried, but the value doesn't change
cy.get('.rc-slider-handle').eq(0).invoke('attr', 'aria-valuenow', '20')
cy.get('.rc-slider-handle').eq(1).invoke('attr', 'aria-valuenow', 30)
here are the pictures of the html:
dragging itself doesnt work as far as i know, you can use the arrowkeys like this
// Move the focus to slider, by clicking on the slider's circle element
cy.get(selector).click({ multiple: true, force: true });
// Press right arrow two times
cy.get(selector).type(
"{rightarrow}{rightarrow}"
);
Related
I used the append function of jquery to transfer value to other side. so i append input type number which the value automatically equal to 1.
The question if I increment the value of input type number how the price double if i increase the value of number?
blade
#foreach($service->invoices as $invoice)
<tr>
<td class="text-right">{{ $invoice->description }}</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">{{ $invoice->price }}
<td class="total"></td>
</tr>
#endforeach
script.js
<script>
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var amount = parseInt(e.target.value);
if (!amount || amount < 0)
return;
var $parentRow = $(e.target).parent().parent();
var cost = parseFloat($parentRow.find('.cost').text());
var total = (cost * amount).toFixed(2);
$parentRow.find('.total').text(total);
}
</script>
css
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
My input number is like this.
You can use click and input event to achieve above . I have removed updateTotal function and have merge all code in one . In below code i have use $(this).closest('tr') to get closest tr where the buttons or the input-box is located and then i have use .find to get require values from input and finally added total to .total td .
Demo Code :
//when - or + click or qty input
$(".minus , .plus , .quantity").on("click input", function() {
var selectors = $(this).closest('tr'); //get closest tr
var quan = selectors.find('.quantity').val(); //get qty
if (!quan || quan < 0)
return;
var cost = parseFloat(selectors.find('.cost').text());
var total = (cost * quan).toFixed(2);
selectors.find('.total').text(total); //add total
})
nput[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="text-right">A</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<!--just add minus class-->
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">13
<td class="total"></td>
</tr>
<tr>
<td class="text-right">B</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">135
<td class="total"></td>
</tr>
</table>
Here's the problem:
For Chrome, Opera, Safari everthing is fine:
chrome, opera, edge thumb-bar
But firefox has a problem:
firefox thumbbar
The problem is caused by the x-scrollbar which pushes each ".thumbs" and
their children up. The children keep their aspect/ratio thanks to the
combination of height: 100% and object-fit contain, not leaving any gap between them, EXCEPT under firefox. It seems that ".thumbs" doesn't want to wrap correctly around its child image. The height gets adapted, but not the width. I've tried already different combinations of flex: - shorthands, but nothing helped.
.scroll_wrapper {
position: relative;
overflow: hidden;
height: 100px;
}
.thumbs_container {
position: absolute;
display: -webkit-box;
display: -moz-box;
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-flow: row nowrap;
overflow-x: scroll;
height: 100%;
width: 100%;
}
.thumbs {
display: -webkit-box;
display: -moz-box;
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
height: 100%;
}
.thumbs_imgs {
height: 100%;
object-fit: contain;
}
<div class="scroll_wrapper">
<div class="thumbs_container">
<div class="thumbs">
<img src="http://placeimg.com/170/110/any" alt="1" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/115/any" alt="2" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/120/any" alt="3" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/125/any" alt="4" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/130/any" alt="5" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/135/any" alt="6" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/135/any" alt="7" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/140/any" alt="8" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/145/any" alt="9" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/150/any" alt="10" class="thumbs_imgs"/>
</div>
</div>
</div>
I found a solution with a js-workaround:
firefox bug:
js loops through the width of each img and gives each parent ".thumbs" the corresponding width.
x-scrollbar-hide:
-js gets the height of the outer .scroll-wrapper
-js gets the difference of .thumbs_container - .thumbs to get the width of the scrollbar (exactly for each browser, because different)
-js gives the heights of .scroll-wrapper + scrollbar-height to .thumbs_container
window.onload = function() {
scrollbarHide()
}
function scrollbarHide(){
var modalThumbsScrollWrapper = document.getElementsByClassName("scroll_wrapper")[0];
var modalThumbsScrollWrapperHeight = modalThumbsScrollWrapper.offsetHeight;
var modalThumbsContainer = document.getElementsByClassName('thumbs_container')[0];
var modalThumbsContainerHeight = modalThumbsContainer.offsetHeight;
var modalThumbs = document.getElementsByClassName('thumbs')[0];
var modalThumbsHeight = modalThumbs.offsetHeight;
var scrollbarHeight = modalThumbsContainerHeight - modalThumbsHeight;
var newModalThumbsContainerHeight = modalThumbsScrollWrapperHeight + scrollbarHeight;
modalThumbsContainer.style.height = newModalThumbsContainerHeight + "px";
modalThumbsWidthCorrectionFF()
}
function modalThumbsWidthCorrectionFF(){
var modalThumbs = document.getElementsByClassName('thumbs');
var modalThumbsLength = modalThumbs.length;
var modalThumbsImgs = document.getElementsByClassName('thumbs_imgs');
for (var i = 0; i < modalThumbsLength; i++) {
modalThumbs[i].style.width = modalThumbsImgs[i].offsetWidth + "px";
}
}
.scroll_wrapper {
position: relative;
overflow: hidden;
height: 100px;
}
.thumbs_container {
position: absolute;
display: -webkit-box;
display: -moz-box;
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-flow: row nowrap;
overflow-x: scroll;
height: 100%;
width: 100%;
}
.thumbs {
display: -webkit-box;
display: -moz-box;
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
height: 100%;
}
.thumbs_imgs {
height: 100%;
object-fit: contain;
}
<div class="scroll_wrapper">
<div class="thumbs_container">
<div class="thumbs">
<img src="http://placeimg.com/170/110/any" alt="1" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/115/any" alt="2" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/120/any" alt="3" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/125/any" alt="4" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/130/any" alt="5" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/135/any" alt="6" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/135/any" alt="7" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/140/any" alt="8" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/145/any" alt="9" class="thumbs_imgs"/>
</div>
<div class="thumbs">
<img src="http://placeimg.com/170/150/any" alt="10" class="thumbs_imgs"/>
</div>
</div>
</div>
So I want to make a row of images that are inside skewed containers. Please see the image to fully understand:
The best I've gotten so far is skewing the container around an image, but there are 2 problems with this: the image inside becomes skewed and there are gaps on the far left and the far right.
HTML:
<section>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
</section>
What I have so far:
CSS:
html, body {
width: 100%;
}
section {
display: flex;
height: 250px;
overflow: hidden;
}
.image-wrap {
width: 20%;
height: 100px;
transform: skew(-5deg);
img {
width: 100%;
height: 140px;
}
}
http://codepen.io/mildrenben/pen/oXjzrK
There is a way to do this pretty nicely with clip-path but the problem is this isn't very well supported at the moment. See more on that here and learn more about clip-path here.
Here is an example:
html, body {
width: 100%;
}
section {
display: flex;
height: 250px;
overflow: hidden;
}
.image-wrap {
width: 30%;
height: 100px;
-webkit-clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
margin-left: -3%;
}
.image-wrap:last-child {
-webkit-clip-path: none;
clip-path: none;
}
img {
width: 100%;
height: 140px;
}
<section>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
</section>
One possible solution (but not really really elegant) would be to skew the parent container in one direction, and then the children to the opposite direction. In the same time, if you could set those images as bg images would be better because you'd have a greater control over background size.
The downsizes for this approach would be:
setting background images as inline styles (if they are dynamic);
you need to calculate the exact percentage needed to pull child image to left/right so you could fill the entire space created by the skew's transformation angle (I've set it to 5%, just for demo purposes).
To sum up, it's your choice if you could integrate this into your app.
html,
body {
width: 100%;
}
section {
display: flex;
height: 250px;
overflow: hidden;
}
.image-wrap {
border: 1px solid blue;
width: 20%;
height: 120px;
transform: skew(-5deg);
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
.image-wrap img,
.image-wrap .thumb {
transform: skew(5deg);
position: absolute;
right: -5%;
left: -5%;
top: 0;
bottom: 0;
}
<section>
<div class="image-wrap">
<div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
</div>
<div class="image-wrap">
<div class="thumb" style="background: url('http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg') no-repeat transparent;"></div>
</div>
<div class="image-wrap">
<div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
</div>
<div class="image-wrap">
<div class="thumb" style="background: url('http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg') no-repeat transparent;"></div>
</div>
<div class="image-wrap">
<div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
</div>
</section>
I know it's not the cleanest solution but this is what I came up on the moment.
Based on your example you can make it something like this. Just play with the .image-wrap height to achieve perfect balance between the image and the wrap :)
*{
margin: 0;
}
html, body {
width: 100%;
}
section {
display: flex;
height: 250px;
overflow: hidden;
}
.image-wrap {
width: 20%;
height: 250px;
-webkit-transform: skew(-5deg);
-ms-transform: skew(-5deg);
transform: skew(-5deg);
overflow: hidden;
}
.image-wrap img {
width: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: skew(5deg);
-ms-transform: skew(5deg);
transform: skew(5deg);
}
<section>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
<div class="image-wrap">
<img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
</div>
<div class="image-wrap">
<img src="http://i.imgur.com/pHCV0Vt.jpg">
</div>
</section>
I am making a fake website for a class at school. For some reason it won't let me scroll. Any ideas? I am a total beginner so you will have to excuse my cluelessness.
Live Site:
http://ec2-54-187-248-132.us-west-2.compute.amazonaws.com/pizzaplace/
Source:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>The Pizza Place</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{text-align: center;}
table{margin-left:auto; margin-right:auto;}
h1{font-style: italic;
font-size: 450%;}
div.title{
position: fixed;
top:10px;
left:10px;
}
div.contents{
background-color: red;
position: fixed;
top:200px;
left:420px;
padding:20px;
-webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
-moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
}
</style>
</head>
<body>
<h1>The Pizza Place</h1>
<div class="title"><img src="pizza.gif"></div>
<div class="contents"><br><br>
<form name="orderdetail" action="MAILTO:ndespai7#bruinmail.slcc.edu"
method="post" enctype="text/plain">
<b>Name:</b><input type="text" name="Name" value="Enter Your Name" size="30" max length="30">
<b>Phone:</b><input type="text" name="Phone" value="Enter Your Phone Number" size="30" max length="30"><br><br><br>
<b>Size:</b> <input type="radio" name="size" value="S"/> Small
<input type="radio" name="size" value="S"/> Medium
<input type="radio" name="size" value="S"/> Large
<input type="radio" name="size" value="S"/> Family Size
<br><br><br>
<b>Crust:</b> <select name="crust"><option value='Thin'>Thin Crust</option>
<option value="Original">Original Crust</option>
<option value="Stuffed Crust">Cheese Stuffed Crust</select><br><br>
<div><b>Toppings:</b></div>
<table>
<tr><td><input type="checkbox" name="toppings" value="P" checked/></td><td>Pepporoni</td></tr>
<tr><td><input type="checkbox" name="toppings" value="S" checked/></td><td>Sausage</td></tr>
<tr><td><input type="checkbox" name="toppings" value="GP" checked/></td><td>Green Peppers</td></tr>
<tr><td><input type="checkbox" name="toppings" value="C" checked/></td><td>Chicken</td></tr>
<tr><td><input type="checkbox" name="toppings" value="J" checked/></td><td>Jalapenos</td></tr>
</table>
<br><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Send"><br><br>
</form>
<br><br>
</div>
<br><br><br>
</body>
</html>
That's because you have all the contents fixed into place. Remove position: fixed; from div.contents in your styles.
I'm Not sure what are the things you don't want to move but you can scroll down by replacing position: fixed; with position: relative; in the style
div.contents{
background-color: red;
position: fixed; /*replace This*/
top:200px;
left:420px;
padding:20px;
-webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
-moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
}
The fixed position is holding the div content down without letting them to appear. Hope This helped.
Edited code
div.contents{
background-color: red;
position: relative;
top:200px;
left:420px;
padding:20px;
-webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
-moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
}
I think i found a strange bug in firefox.
When i have an hover class on a div with a background-size property (with a change in the opacity) the size of some of the image a use in the background, changes by one pixel in horizontal, or in vertical.
I made an example of the probleme here:
http://jsfiddle.net/xz4F8/
the html:
<div class="group cont_tutto">
<div class="conteiner_articoli_cinema">
<div class="back_navigazione_articoli-mag">
<div class="articolo_mag">
<div class="tipo-articoli-mag">speciale cinema</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/Now-You-See-Me--I-maghi-del-crimine_articolo.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">speciale cinema</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/theloneranger384470.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">rcensione fumetti</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/Nodo-alla-gola_articolo.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div></div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">recensione cinema</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/15072013/Distribuzione-cinema-e-dvd_articolo.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">recensione serie tv</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/08072013/trueblood-stagione6309717.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">recensione blu-ray</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/13072013/ax967523.jpeg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
<div class="articolo_mag">
<div class="tipo-articoli-mag">recensione cinema</div>
<a href="http://www.google.it">
<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/12072013/lareligiosa825433.jpg')"></div>
</a>
<div class="mag_titolo">
<h2>the lone ranger </h2>
</div>
</div>
</div>
</div>
</div>
The css:
#charset "utf-8";
/* CSS Document */
.articolo_mag {
background-color: #EFEFEF;
float: left;
width: 129px;
margin-right: 6px;
}
.articolo_mag_cover {
width: 129px;
height: 177px;
background-size:129px 177px;
background-color: #333;
}
.articolo_mag_cover:hover {
background-size:129px 177px;
opacity: 0.9;}
.mag_titolo {}
.mag_titolo h2 {display: table-cell;
vertical-align: middle;
background-color: #FFF;
font-size: 10px;
font-family: Lato, Arial;
font-weight: bold;
border: 1px solid #D9D9D9;
text-align: center;
text-transform: uppercase;
padding-top: 0px;
padding-bottom: 0px;
height: 30px;}
.mag_titolo h2:hover { color: #09F;
background-color: #E4E4E4;}
.mag_titolo h2 a {
display: block;
color: #000000;
text-decoration: none;
text-transform: uppercase;
width: 119px;
line-height: normal;
padding-right: 4px;
padding-left: 4px;
padding-bottom: 0px;
}
.tipo-articoli-mag {
background-color: rgba(0,0,0,0.75);
height: 17px;
width: 115px;
color: #FFF;
font-family: Lato, Arial;
font-size: 10px;
font-weight: bold;
padding-top: 3px;
padding-left: 5px;
text-transform: uppercase;
left: 5px;
z-index: 25;
position: relative;
float: left;
margin-top: 150px;
}
If i use the cover option for the background-size,the size problems seems attenuated, but, some of the images start to flicker during the update of the page, or the hover state (seems to me, firefox can't decide witch is the right size of the image )
It seems that the problem is triggered by the div container that i use to center all the content in my page (cont_tutto) witch has a 951px in width..
No problem at all on all the other browsers!
You had to add "-moz-backface-visibility: hidden" to solve the problem. Here is the solution: http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/
Try to add
transform: rotate(360deg);
somewhere as i did to the following image that was moving 1px when hover
.btnRoll:hover img {
filter: alpha(opacity=80);
opacity: 0.8;
transform: rotate(360deg);
}
I have recently experienced the same problem, which is the exact reason I have chosen to stick to the built in "Inspect Element" function in Firefox
Tanner