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
Related
Given is the use case:-
I want to render a box n times. How to implement for loop from 0 to n in weex template.
<template>
<div>
<div class="box" ></div>
<div class="box" ></div>
<div class="box" ></div>
<div class="box" ></div>
<div class="box" ></div>
<div class="box" ></div>
<div class="box" ></div>
<!--n times-->
</div>
</template>
<style scoped>
.box {
border-width: 2px;
border-style: solid;
border-color: #BBB;
width: 250px;
height: 250px;
margin-top: 250px;
margin-left: 250px;
background-color: #EEE;
}
</style>
Vue has v-for directive:
new Vue({
el: "#app",
data: {
n: 10
}
})
.box {
border-width: 2px;
border-style: solid;
border-color: #BBB;
width: 250px;
height: 250px;
margin-top: 250px;
margin-left: 250px;
background-color: #EEE;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<div class="box" v-for="i in n" :key="i"></div>
</div>
See also weex example
Below is the code :
I want to select the radio button which is present within the span class. Could you please help in identifying a successful xpath ?
<div id="quicklinkbox" class="col-md-2" data-position="left" data-intro="You can directly download payslip PDFs for the last 3 or 6 months. (India payslip only)" data-step="4">
<div style="background-color: transparent; margin-top: 28px;">
<div id="panel-title" ng-click="changeExpand(expand);" style="position: relative; left: 24px; cursor: pointer; font-weight: 500;">Quick Download</div>
<div id="panel-title" class="panel-body" style="text-align: left; font-weight: lighter; padding: 5px 0px 0px 50px; font-weight: 400">
<span style="margin-left: -16px;">Payslips for</span>
<form class="ng-pristine ng-valid">
<div class="form-group">
<div class="radio">
<span same-heightcol="" style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" style="cursor: pointer;" value="3" name="payslipradio"/>
<span style="font-size: 16px; position: relative; top: -5px;">Last 3 months</span>
</span>
</div>
<div class="radio">
<span style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" value="6" name="payslipradio" style="cursor: pointer;"/>
<span style="font-size: 16px; position: relative; top: -5px;"> Last 6 months</span>
</span>
</div>
<img style="margin-bottom: -12px; margin-left: -16px; cursor: pointer;" ng-click="downloadbulkpayslip()" src="appResources/images/Download-button.png"/>
</div>
</form>
</div>
</div>
</div>
</div>
You can use:
//span/input[#name='payslipradio' and #value='6']
Explanation:
//span -> Will search in all HTML al span tag
/input -> Will searth inside the span tag previous selected a input tag
[#name='payslipradio' and #value='6'] -> Will search in the previous selected tags one that the name attr is equals to 'pslpradio' and value attr equals to '6'
//*span[input#class='ng-pristine ng-valid' and #type='radio']))
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'm using the Kendo-UI Tabstrip, and would like to add a class to one specific tabpanel. Is this possible? Using .SpriteCssClasses within the items.Add() section only seems to add the class to the tab itself, and not the actual panel.
Any help is greatly appreciated.
You can try to get the specific panel using the ID because kendo will add a div with specific ID depending on the name of the tab strip and the tab number (order), for example:
#(Html.Kendo().TabStrip()
.Name("Main")
.Items(Main =>
{
Main.Add()
.Text("test1 title").Content(#<text>
test1
</text>);
Main.Add()
.Text("test2 title")
.Content(#<text>
test2
</text>);
})
)
This will generate the following HTML:
<div class="k-tabstrip-wrapper" style="">
<div id="Main" class="k-widget k-tabstrip k-header" data-role="tabstrip" tabindex="0" role="tablist" aria-activedescendant="Main_ts_active">
<ul class="k-reset k-tabstrip-items">
<li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="Main-1" style="" aria-selected="true">
<span class="k-loading k-complete"></span>
test1 title
</li>
<li class="k-item k-state-default k-last" role="tab" aria-controls="Main-2" style="">
<span class="k-loading k-complete"></span>
test2 title
</li>
</ul>
<div id="Main-1" class="k-content k-state-active" role="tabpanel" aria-expanded="true" style="height: auto; overflow: hidden; opacity: 1; display: block;">
<div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
<div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
</div>
test1
</div>
<div id="Main-2" class="k-content" role="tabpanel" aria-expanded="false" style="height: auto; overflow: hidden; opacity: 0; display: none;" aria-hidden="true">
<div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
<div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
</div>
test2
</div>
</div>
</div>
Note the divs with IDs "Main-1" and "Main-2" are the IDs of the actual panels which is what you want from what I understand so you can add CSS on the IDs:
#Main-1 {
background-color: #E3F7A8;
}
I'm using Foundation4 as my framework and I want fadein animations to trigger when scrolling down. More like this website: www.isaacpvl.com . I have four divs and they're responsive if these information matters. Thanks to whoever answers! I already tried using firebug and I still can't find how. I'm a newbie when it comes to javascript.
Here are the codes I've done so far. It's just a mock-up to see how things would look like, not too much on the design yet.
<div class="row">
<div style="background-color: black;" id="head" class="large-12 columns">
</div>
</div>
<div class="row">
<div style="background-color: red;" id="section1" class="large-6 columns">
</div>
<div style="background-color: red;" id="section1" class="large-6 columns">
<img class="animated fadeInRight" src="img/hongkong/hongkongdragon.gif" />
</div>
</div>
<div class="row">
<div style="background-color: blue;" id="section2" class="large-12 columns">
</div>
</div>
that's the body so far and the css of the divs
.row.full-width { width: 100%; max-width: 100%; }
.row {min-width:100% !important; background-color: black;}
.section1{
/*background-image: url("../img/hongkong/background.png");*/
background-color:red;
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.section2{
/*background-image: url("../img/hongkong/background.png");*/
background-color: black;
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
As you can see there is an image source with the animated class, that's the image that I want to animate. It's a full-screen kind of website.
I'm using animate.css from http://daneden.me/animate/ btw