On the first slide you will see there is a link that is pushed to the back as soon as the image of the glasses is overlayed, I have tried using z-index and parallaxlevel to control the layering but it doesnt seem to have any effect on this issue and I notice that if z-index is applied that layerslider overwrites it with 0 making it impossible to force the link to appear on top of the slide (but below the controls for the slider.
It has been a couple days since I reported this issue on here, and longer since reported on envato is the issue being looked at? or has this ticket dropped into the depths?
You will need to edit the slider markup in the source code to achieve this. The order of the layers determines which one is on top, so you need to rearrange the layers in the code.
<h3 class="ls-l" style="background: #ffffff; padding-right:10px; padding-left:10px; border-radius:4px;top:10px;left:70px;font-weight: 300;font-size:50px;color:#000000;white-space: nowrap;" data-ls="offsetxin:50;durationin:1000;rotatexin:0;transformoriginin:0% 0% 0;offsetxout:-50;durationout:3000;rotateyout:-60;transformoriginout:left 50% 0;">Our Prices Have To Be Seen To Be Believed</h3> <p class="ls-l" style="top:210px;left:300px;font-weight: 200; text-align: center;font-size:40px;color:#FFFFFF;background: #FF7F02; padding-right:10px; padding-left:10px; border-radius:4px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;rotateout:-90;transformoriginout:left bottom 0;">Click Here To See For Yourself</p> <a href="/Shop/Contact_Lenses/grid/1/?Brand=3" class="ls-link"></a>
as normal html ordering the z-index of the last item makes it the top level item in rendering.
Ok tested reversing the order and exactly as before the link is pushed back by the js code it only appear on top before the animations start, so regardless if its the last item added (as in my original code) or placing it first as suggested both result in the issue being exactly the same.
This has worked previously in version 5 but the issue arose after upgrading to the latest version so I can only assume its the js that is causing it as I can see that even though I do not set the z-index when the page is loaded the js sets the z-index of the link to 0 and if I do set it the js overrides my setting and sets it to 0
Which version are you using? There was some z-index issue in pre 6.1.0 versions, but with 6.1.0 this should work. If not, please show me the slider where I can check this issue. Thank you and sorry for your inconveniences.
OK I can see it now. You need the link to be always at the top of all the other layers. You can easily do this by adding the following css code into your site:
I can confirm this fix works as long as applied to stylesheet and not within the slider itself, if style placed inline (on the element) then layerslider overwrite its with z-index:0; but if applied in the html of the page or separate stylesheet the fix does force the link to display as it should.
On the first slide you will see there is a link that is pushed to the back as soon as the image of the glasses is overlayed, I have tried using z-index and parallaxlevel to control the layering but it doesnt seem to have any effect on this issue and I notice that if z-index is applied that layerslider overwrites it with 0 making it impossible to force the link to appear on top of the slide (but below the controls for the slider.
Any chance you have a fix for this?
Hi,
It has been a couple days since I reported this issue on here, and longer since reported on envato is the issue being looked at? or has this ticket dropped into the depths?
Hey ided,
You will need to edit the slider markup in the source code to achieve this. The order of the layers determines which one is on top, so you need to rearrange the layers in the code.
so to clarify your saying it needs to be the first item in the list as it currently is the last item in the code as shown below
<img src="/pubfiles/image/Marketing/SliderImages/shop-items-blur.jpg" class="ls-bg" alt="Slide background - Item List">
<img src="/pubfiles/image/Marketing/SliderImages/to-be-replaced-glasses-items.png" data-ls="delayin:1000;filterin:blur(25px); scalexin: 3;scaleyin: 3;" style="width:1170px;margin-top:-150px;" class="ls-l" />
<h3 class="ls-l" style="background: #ffffff; padding-right:10px; padding-left:10px; border-radius:4px;top:10px;left:70px;font-weight: 300;font-size:50px;color:#000000;white-space: nowrap;" data-ls="offsetxin:50;durationin:1000;rotatexin:0;transformoriginin:0% 0% 0;offsetxout:-50;durationout:3000;rotateyout:-60;transformoriginout:left 50% 0;">Our Prices Have To Be Seen To Be Believed</h3>
<p class="ls-l" style="top:210px;left:300px;font-weight: 200; text-align: center;font-size:40px;color:#FFFFFF;background: #FF7F02; padding-right:10px; padding-left:10px; border-radius:4px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;rotateout:-90;transformoriginout:left bottom 0;">Click Here To See For Yourself</p>
<a href="/Shop/Contact_Lenses/grid/1/?Brand=3" class="ls-link"></a>
as normal html ordering the z-index of the last item makes it the top level item in rendering.
Ok tested reversing the order and exactly as before the link is pushed back by the js code it only appear on top before the animations start, so regardless if its the last item added (as in my original code) or placing it first as suggested both result in the issue being exactly the same.
This has worked previously in version 5 but the issue arose after upgrading to the latest version so I can only assume its the js that is causing it as I can see that even though I do not set the z-index when the page is loaded the js sets the z-index of the link to 0 and if I do set it the js overrides my setting and sets it to 0
Hello,
Which version are you using? There was some z-index issue in pre 6.1.0 versions, but with 6.1.0 this should work. If not, please show me the slider where I can check this issue. Thank you and sorry for your inconveniences.
Best Regards,
George | Kreatura Dev Team
http://ocspecs.azurewebsites.net/ is a dev version containing two slides both having the same issue.
OK I can see it now. You need the link to be always at the top of all the other layers. You can easily do this by adding the following css code into your site:
.ls-link {
z-index: 1000 !important;
}
Best Regards,
George | Kreatura Dev Team
I can confirm this fix works as long as applied to stylesheet and not within the slider itself, if style placed inline (on the element) then layerslider overwrite its with z-index:0; but if applied in the html of the page or separate stylesheet the fix does force the link to display as it should.
Yes, the slider is overwriting the z-index you specified in the style attribute of an element.
Best Regards,
George | Kreatura Dev Team