I have a full-display revolution-slider with afew of layers on a Webpage. Any time I resize the height of the viewport, the layers moving from the left Side to the center. How can I stop this behavior?
This is my code:
`
<div class="rev-slider-mask"></div>
<!-- main text layer -->
<div class="tp-caption tp-resizeme sliderMainText"
id="slide-layer-01"
data-frames='[{"delay":200,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[-100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":500,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
data-type="text"
data-whitespace="nowrap"
data-x="['left','left','left','left']" data-hoffset="['70','20','50','30']"
data-y="['middle','middle','middle','middle']" data-voffset="['50','100','85','120']"
data-width="auto"
data-height="auto"
data-fontsize="['70','60','60','40']"
data-lineheight="['80','80','80','50']"
data-letterspacing="['0','0','0','0']"
data-responsive="off"
data-responsive_offset="off"
data-paddingtop="['0','0','0','0']"
data-paddingbottom="['15','8','8','8']"
data-paddingright="['0','0','0','0']"
data-paddingleft="['0','0','0','0']"
style="text-shadow: 0 0 20px rgba(0,0,0,0.3); font-weight: 700; color:#fff;">Some Text to show!
</div>
<!-- btn layer -->
<div class="tp-caption tp-resizeme btn_1"
data-actions='[{"event":"click","action":"scrollbelow","offset":"3130px","delay":"","speed":"300","ease":"Linear.easeNone"}]'
id="slide-layer-03"
data-x="['left','left','left','left']" data-hoffset="['70','20','50','30']"
data-y="['middle','middle','middle','middle']" data-voffset="['260','310','282','225']"
data-whitespace="nowrap"
data-type="button"
data-responsive="off"
data-responsive_offset="off"
data-frames='[{"delay":1200,"speed":1000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[-100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
data-textAlign="['center','center','center','center']" style="line-height: 1; padding: 10px 15px; font-size: 16px;font-weight: 600;">Button_Text
</div>
</li>
`
I have searched for parallax-parameters, but I couldn't find any useful ones.
Related
I want to switch between two slides by using a scroll and I want to have an indicator
to show which of the two slides that are being shown.
Building the scroll part was not very difficult and has been done.
My problem is:
How can I extract the idx value from the for loop to know which one of the to slides that is being shown?
This so that I can present which slide I am on with the indicators.
Scrolling
This is the code for scrolling between the two images.
HTML
<div class="container_large">
<div v-for="(i,idx) in this.slider_header " class="scroll" :key="idx" >
<div :style="{height:'82px', width:'100%'}" v-if="idx==0" >
Slide 1
</div>
<div v-if="idx==1" :style="{height:'92px', width:'100%'}" >
Slide 2
</div>
</div>
</div>
CSS
.container_large{
width: 100%;
/* width: 90%; */
display: flex;
overflow-x: scroll;
margin-left: 0%;
height: 99px;
position: absolute;
margin-top: 27%;
z-index: 2;
}
.scroll{
min-width:388px;
position: relative;
margin-top: 0%;
border-radius: 8px;
display: flex;
height: 92px;
z-index: 1;
margin-left: 2%;
object-fit: cover;
}
Indicators
This code is for the indicators to show which of the two images that are being shown at the moment.
<div :style="{height:'15px', position:'absolute',marginTop:'51%',borderRadius:'8px',zIndex:'3', width:'30px',marginLeft:'43%',backgroundColor:'grey'}">
<div id="slide1" :style="{borderRadius:'50%',height:'13px',marginLeft:'8%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
<div id="slide2" :style="{borderRadius:'50%',height:'13px',marginLeft:'51%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
</div>
I would like to add v-if="idx==0" and v-if="idx==1" to id="slide1" and id="slide2" respectively to show which one of them that is being seen but
since they fall outside of the for loop this doesn't work.
Question
How can I catch the idx value or solve this in some other way to present which slide that I am on?
Ok so I think you have too much v-if inside your v-for.
There is no need to create all of your slides with to then only render one of them with series of conditions.
Have you considered something like this?
<div class="container_large">
<div
class="slide"
:style="slides[activeSlide].style">
{{slides[activeSlide].text}}
</div>
</div>
I have a bootstrap tooltip which I have custom styled. There seems to be an issue with it. Whenever we hover over it, it opens and then immediately closes.
HTML -
<div class="container" style="padding-top:300px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
Here's an inline link to jsFiddle
UPDATED
I made a few changes. Try this: https://jsfiddle.net/2h7jbt9n/6/
HTML
<div class="container" style="padding-top:30px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
JS
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
container: '.info-circle'
});
});
The issue was with padding for the info-circle. I wrapped it in a container. It doesn't flicker now.
Hope it helps.
You are no longer using the tooltip-arrow as the visual arrow you are using the :before and :after after as the visual arrow. The problem is that you have made the arrow bigger and made your own triangles. When you make your css arrow you are using borders. You have set your top border colors to white and blue to make it seem like the arrow has a border as well. In doing this you have forgotten that your arrow still has a bottom transparent border and this transparent border is covering up the element that you are hovering over to deploy the tooltip. So set your :before and :after psuedo elements for your .tooltip-arrow to have a bottom border of none. Like so:
.tooltip.top .tooltip-arrow:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -17px;
top: -5px;
border-width: 12px;
border-top-color: #003f6e;
border-bottom:none;
}
.tooltip.top .tooltip-arrow:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -15px;
top: -5px;
border-width: 10px 10px 0;
border-top-color: #fff;
border-bottom:none;
z-index: 1;
}
I am working with a third party website which allows me to modify code to suit my needs. I have a product page with responsive columns. Administrative users can upload images for the products which end users can order. I've set it so the images are responsive as well, but because the product images are not all the same aspect ratio, I have some items which are taller than others, making the page leave spaces in the column blank. I want the images to stay responsive and keep their aspect ratio, but have the containers they are in all have the same height and responsive width. Changing max-height and min-height just gives the same response as setting height. How do I do that while keeping the width correct?
<div class="col-xs-12 text-center">
<div class="well text-center">
<href="product/{{LineItem.Product.InteropID}}">
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<img class="img-responsive" style="max-height: 200px; min-height: 200px; width: auto; margin: auto;" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</figure>
<div class="empty" ng-hide="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl">
<span class="fa empty"><i class="fa fa-camera"></i></span>
</div>
</a>
</div>
</div>
The best solution would be to force users to upload an image of a certain height/width, but barring that, you could just put the responsive images inside of a div that has a fixed size and it's css overflow property set to hidden.
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<div style="height:200px; width:200px;overflow:hidden;">
<img class="img-responsive" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</div>
</figure>
Now, the image is fully responsive, but any portions of it that are bigger than its container will be clipped.
HTML
<div class="img-wrap ratio-4-3">
<div class="img-content">
<img src="https://picsum.photos/200" />
</div>
</div>
SCSS
.img-wrap{
position: relative;
.img-content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
> img{
max-width: 100%;
max-height: 100%;
width: auto;
}
}
&.ratio-4-3{
padding-top: 75%;
}
&.ratio-16-9{
padding-top: 56.25%;
}
&.ratio-3-2{
padding-top: 66.66%;
}
&.ratio-8-5{
padding-top: 62.5%;
}
}
https://jsfiddle.net/huypn/pcwudrmc/25813/
The concept of frames is being used on a website I am tasked with testing. However, the frames do not use frame tags, one is for example a div that is filled by GET/POST. Selenium cannot access the element inside of the frame (ElementNotVisibleException) because it must first switch to the frame. But, I can't switch to the frame because it is not technically a frame in Selenium's eyes. How can I access the content of the frame without manipulating the DOM? (The point of testing is that we test what is there as an end user and don't change it). So, I cannot use JavaScript executor. I have tried using action building to click elements/move to the element, but it returns errors.
EDIT:
Here is the basic form of the html I'm trying to access. I cannot use selenium to access any elements inside el1. I need to select an option for el6.
<div id="el1" style="width: 960px; height: 230px; margin-bottom: 6px;">
<div style="width: 955px;padding: 5px 0px 0px 5px;">
<span>Text Here</span>
<form id="el2" action="pageName.jsp?action=blah" method="POST" style="height: 300px;" name="el2">
<div id="el3" style="width: 600px; margin: 20px 0px 0px 60px;">
<div id="el4" style="height: 20px;">
<div id="el5" style="height: 20px; padding-left: 40px;">
<div style="width: 400px;">
<span style="font-weight: bold;">More Text Here</span>
</div>
<div style="width: 400px;">
<select id="el6" onchange="javascriptfunction(this)" name="el6" style="width: 400px;">
<option selected="selected" value="">A Select Box Option</option>
<option value="NumberHere">More Options Populated By JSP</option>
</select>
</div>
</div>
</div>
</div>
<!--Some Unnecessary content here-->
</form>
</div>
</div>
Here is style calculation for el6. I have tried manually adjusting height with WebDriver in attempt to get rid of ElementNotVisibleException. This did not work.
font-family MS Shell Dlg
body Helvetica,Arial,Sans-Serif
div Arial,Helvetica,Geneva,sans-serif
body Arial,Helvetica,Geneva,sans-serif
font-size 13.3333px
div 14px
body 13px
color rgb(0, 0, 0)
#container #333
text-align start
#wrapper left
.bodyStyle center
width 400px
margin-top 0px
margin-right 0px
margin-bottom 0px
margin-left 0px
padding-top 0px
padding-right 0px
padding-bottom 0px
padding-left 0px
why can't you switch to any available iframe without specifying the ID or name.
you can do this just switch to iframe..
try this
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe")));
If you are getting ElementNotVisibleException,it means element is invisible at that time.You can use explicit wait to achieve this :
WebDriverWait wait = new WebDriverWait(driver,<Time>);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("el6")));
First,you calculate time which is taken by element to visible and replace with <Time>.
For more detail,you can [see][1].
[1]: http://docs.seleniumhq.org/docs/04_webdriver_advanced.jsp
I want to create a header similar to facebook where position:fixed. and when you zoom-out the whole page centers itself and when I zoom-in the header also streches..
When I use position:fixed and zoom-in some contents disappear due to lack of space on the window..
<div id="header_line" ></div>
<div id="header">
<div id="heading_name" >Home </div>
<div id="heading_name" style="left:28%;">Advertisement Board</div>
<div id="heading_name" style="left:46%;">Advertise</div>
<div id="heading_name" style="left:60%;">Sign In</div>
<div id="heading_name" style="left:76%;">About Us</div>
</div>
<style>
#header_line{
position:fixed;
top:0%;
left:0%;
width:1370px;
height:7px;
z-index:20;
background-color:#F60;
}
#header{
position:fixed;
left: 0px;
z-index:20;
top: 7px;
width:1370px;
height: 30px;
background-color:#003;
border-bottom:thick;
border-bottom-color:#000;
box-shadow:2px 5px 5px 1px #033;
}
</style>