Change the css-ribbon position from right to left on a div - javascript

I want to change the position of css-ribbon from right-side to the left-side and the direction of ribbon should also be changed accordingly on the left side.The items like some images and text will be placed in the div and these elements will not be disturbed by the ribbon itself.And this is my html code.
<div class="content-box">
<div id="ribbon-container">
CSS-Ribbon
</div>
</div>
And this is my css code below.
* {
padding: 0;
/* Standard Reset, and we're adding box-sizing:border-box because it's awesome. */
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.content-box {
width: 100%;
height: 400px;
max-width: 80%;
margin: 94px auto 0 auto;
position: relative;
/* So we can position the banner within the box */
background: gray;
border: 5px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
position: absolute;
top: 15px;
right: -20px;
overflow: visible;
/* so we can see the pseudo-elements we're going to add to the anchor */
font-size: 18px;
/* font-size and line-height must be equal so we can account for the height of the banner */
line-height: 18px;
}
#ribbon-container:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
left: 0;
border-top: 29px solid rgba(0, 0, 0, .3);
/* These 4 border properties create the first part of our drop-shadow */
border-bottom: 29px solid rgba(0, 0, 0, .3);
border-right: 29px solid rgba(0, 0, 0, .3);
border-left: 29px solid transparent;
}
#ribbon-container:after {
/* This adds the second part of our dropshadow */
content: "";
height: 3px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -3px;
left: 58px;
right: 3px;
}
#ribbon-container a {
display: block;
padding: 20px;
position: relative;
/* allows us to position our pseudo-elements properly */
background: #0089d0;
overflow: visible;
height: 58px;
margin-left: 29px;
color: #fff;
text-decoration: none;
}
#ribbon-container a:after {
/* this creates the "folded" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
bottom: -15px;
right: 0;
border-top: 15px solid #004a70;
border-right: 15px solid transparent;
}
#ribbon-container a:before {
/* this creates the "forked" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
left: -29px;
border-top: 29px solid #0089d0;
border-bottom: 29px solid #0089d0;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}
#ribbon-container a:hover {
background: #009ff1;
}
#ribbon-container a:hover:before {
/* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
border-top: 29px solid #009ff1;
border-bottom: 29px solid #009ff1;
}

Here is a live fiddle:
http://jsfiddle.net/covn07uh/14/
HTML (The same):
<div class="content-box">
<div id="ribbon-container">
CSS-Ribbon
</div>
</div>
The CSS:
* {
padding: 0;
/* Standard Reset, and we're adding box-sizing:border-box because it's awesome. */
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.content-box {
width: 100%;
height: 400px;
max-width: 80%;
margin: 94px auto 0 auto;
position: relative;
/* So we can position the banner within the box */
background: gray;
border: 5px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
position: absolute;
top: 15px;
left: -20px;
overflow: visible;
/* so we can see the pseudo-elements we're going to add to the anchor */
font-size: 18px;
/* font-size and line-height must be equal so we can account for the height of the banner */
line-height: 18px;
}
#ribbon-container:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
right: 0;
border-top: 29px solid rgba(0, 0, 0, .3);
/* These 4 border properties create the first part of our drop-shadow */
border-bottom: 29px solid rgba(0, 0, 0, .3);
border-left: 29px solid rgba(0, 0, 0, .3);
border-right: 29px solid transparent;
}
#ribbon-container:after {
/* This adds the second part of our dropshadow */
content: "";
height: 3px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -3px;
right: 58px;
left: 3px;
}
#ribbon-container a {
display: block;
padding: 20px;
position: relative;
/* allows us to position our pseudo-elements properly */
background: #0089d0;
overflow: visible;
height: 58px;
margin-right: 29px;
color: #fff;
text-decoration: none;
}
#ribbon-container a:after {
/* this creates the "folded" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
bottom: -15px;
left: 0;
border-top: 15px solid #004a70;
border-left: 15px solid transparent;
}
#ribbon-container a:before {
/* this creates the "forked" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
right: -29px;
border-top: 29px solid #0089d0;
border-bottom: 29px solid #0089d0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
}
#ribbon-container a:hover {
background: #009ff1;
}
#ribbon-container a:hover:before {
/* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
border-top: 29px solid #009ff1;
border-bottom: 29px solid #009ff1;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.content-box {
width: 100%;
height: 400px;
max-width: 80%;
margin: 94px auto 0 auto;
position: relative;
background: gray;
border: 5px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
position: absolute;
top: 15px;
left: -20px;
overflow: visible;
font-size: 18px;
line-height: 18px;
}
#ribbon-container:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
right: 0;
/* here right will be zero to move ribbon right to left */
border-top: 29px solid rgba(0, 0, 0, .3);
border-bottom: 29px solid rgba(0, 0, 0, .3);
border-right: 29px solid transparent;
/* in same way border right will be transparent instead of border left */
border-left: 29px solid rgba(0, 0, 0, .3);
}
#ribbon-container:after {
content: "";
height: 3px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -3px;
right: 58px;
/* here just left property is renamed with right property */
left: 4px;
}
#ribbon-container a {
display: block;
padding: 20px;
position: relative;
background: #0089d0;
overflow: visible;
height: 58px;
margin-right: 29px;
/* here margin left is replaced with margin right */
color: #fff;
text-decoration: none;
}
#ribbon-container a:after {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
bottom: -15px;
left: 0;
/* right is replaced with left */
border-top: 15px solid #004a70;
border-left: 15px solid transparent;
/* here border left is transparent instead if border right */
}
#ribbon-container a:before {
/* this creates the "forked" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
right: -29px;
/* here left is replaced with right */
border-top: 29px solid #0089d0;
border-bottom: 29px solid #0089d0;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}
#ribbon-container a:hover {
background: #009ff1;
}
#ribbon-container a:hover:before {
/* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
border-top: 29px solid #009ff1;
border-bottom: 29px solid #009ff1;
}
<div class="content-box">
<div id="ribbon-container">
CSS-Ribbon
</div>
</div>

Related

Set Border Color of Tooltip Arrow with CSS

I was trying to set border colour white of my tooltip's arrow key. I was able to set tooltips bottom border colour white, how can I set bottom border colour of arrow too? Here is what I tried:
.hint {
position: relative;
display: inline-block;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
z-index: 100;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
position: absolute;
transform: translateX(-50%);
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 0.8);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -18px 0;
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: -12px;
border-width: 12px;
/*margin-left: -56px;*/
border-color: rgba(194, 225, 245, 0);
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #f0f0f0;
}
<br /><br /><br /><br />
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
<a>Assalaamu 'Alaikum</a>
</div>
For clarification, I am including sample picture here. Right now I have this:
But I need something like the given image below:
I had struggled to draw triangle before, too. Almost tricks such as here and here dealing with triangles in HTML handles border. So painting borders of triangles is impossible with this kind of tricks.
One alternative is to rotate a square and hide a half. The advantage of this method is that drawing border is easy, but I didn't find super clean method to hide half of the square. So when the tooltip or the triangle have opacity less than 1, this is not a desirable method.
Maybe this is what you want. Jsfiddle.net demo is here.
.hint {
position: relative;
display: inline-block;
margin-top: 40px;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: rgba(0, 0, 0, 1);
width: 6px;
height: 6px;
transform: translateX(-50%) rotate(45deg);
z-index: 2;
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 1);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
z-index: 1;
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -12px 0;
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: 0px;
/* border-width: 2px; */
width: 24px;
height: 24px;
/* margin-left: -56px; */
border: solid white;
border-width: 0 1px 1px 0;
border-top-left-radius: 100%;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
/* border-top-color: rgba(0, 0, 0, 0.8); */
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #f0f0f0;
}
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
<a>Assalaamu 'Alaikum</a>
</div>
First of all your html is very strange. Adding class attribute twice on an element is pointless. Also the br are not good practice for making space.. Use margins instead or something else.
For your problem, you need another triangle with red border positioned under your black triangle. This red triangle should be bigger.
Then, the small black triangle should have a z-index bigger than your tooltip so it will cover the red border of the tooltip
I added all the new code at the beginning of the snippet. See below
You need to change a little bit the animation. But it should be easy
.border-triangle {
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
position: absolute;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
opacity: 0;
transition: 0.3s ease-out;
border-top: 20px solid red;
}
.hint:hover .border-triangle {
opacity: 1;
}
.hint {
position: relative;
display: inline-block;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
z-index: 100;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
position: absolute;
transform: translateX(-50%);
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 1);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -18px 0;
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
z-index: 1;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: -10px;
border-width: 12px;
/*margin-left: -56px;*/
border-color: rgba(194, 225, 245, 0);
border-top-color: rgba(0, 0, 0, 1);
z-index: 2;
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 2px solid red;
}
<br>
<br>
<br>
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub"> <!-- intro-sub second class is usless -->
<div class="border-triangle">
</div>
<a>Assalaamu 'Alaikum</a>
</div>

footer button in Android Browser

I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>
Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.

Nouislider slider is not working in react

I using the below code to intialise the nouilslider-react. But it's css is not being loaded. What should I do?
I have imported the react-nouislider. Functionalities are working fine. But I am seeing the sliders as text like below
<SliderInput
range={{min: 0, max: 200}}
start={[0, 100]}
tooltips
/>
Thank you in advance
u have to add some style on that slider
try this example style.css code below (from https://codepen.io/mshwery/pen/CBslE)
body {
text-align: center;
padding: 20px;
}
.no-ui-slider {
width: 100%;
max-width: 500px;
margin: 50px auto;
}
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
}
.noUi-origin {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
its values is > 50%. */
z-index: 10;
}
.noUi-stacking + .noUi-origin {
/* Fix stacking order in IE7, which incorrectly
creates a new context for the origins. */
*z-index: -1;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 10px;
}
.noUi-horizontal .noUi-handle {
width: 20px;
height: 20px;
left: -10px;
top: -7px;
}
.noUi-horizontal.noUi-extended {
padding: 0 15px;
}
.noUi-horizontal.noUi-extended .noUi-origin {
right: -15px;
}
/* Styling;
*/
.noUi-background {
background: #3182bd;
}
.noUi-connect {
background: #3FB8AF;
box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
-webkit-transition: background 450ms;
transition: background 450ms;
}
.noUi-origin {
border-radius: 2px;
background: #eee;
}
.noUi-target {
border-radius: 2px;
}
.noUi-target.noUi-connect {
box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
}
/* Handles and cursors;
*/
.noUi-dragable {
cursor: w-resize;
}
.noUi-vertical .noUi-dragable {
cursor: n-resize;
}
.noUi-handle {
border-radius: 2px 2px 0 0;
background: #fff;
cursor: default;
box-shadow: 0 0px 1px rgba(0,0,0,0.5);
}
.noUi-active {
}
/* Handle stripes;
*/
.noUi-handle:after {
content: "";
display: block;
position: absolute;
left: 0px;
top: 100%;
border-top: 11px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.noUi-handle:before {
content: "";
display: block;
position: absolute;
left: -0px;
top: 100%;
margin-top: 1px;
border-top: 11px solid rgba(0,0,0,0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
/* Disabled state;
*/
[disabled].noUi-connect,
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled] .noUi-handle {
cursor: not-allowed;
}

Bootstrap modal issue on iOS 8.1.3

I am having an issue in Bootstrap Modal on iOS 8.1.3 version only. I have vertical scroll able div inside modal. When I touch the modal background then try to scroll the text inside that div, the text sometimes vanished or freeze then after few secs again I can scroll. Which is something weird. Any help will be really appreciable.
Thanks!
<section class="parent">
<h1>Modal a Different Way <small>Using CSS and JS</small></h1>
<div class="child">
<button class="cakeModalJS">Click Me!</button>
<p>I have same behaviour what you have using to Modal concept except common UI issues.</p>
</div>
<div class="cake-modal cake-hidden">
<div class="modal-body">
<button class="modal-close">x</button>
<h3>
Look I'm your inbuild Modal module
</h3>
</div>
</div>
<footer>
<p>Cake Modal by Color Cake. All Right Recieved © 2018</p>
</footer>
</section>
$('.cakeModalJS').click(function(){
$('.cake-modal').removeClass('cake-hidden');
});
$('.cake-modal').on('click', function(e) {
if (e.target !== this)
return;
$('.cake-modal').addClass('cake-hidden');
});
$('.modal-close').click(function(){
$('.cake-modal').addClass('cake-hidden');
});
$color1: #5b5b5b;
$color2: #fff;
#mixin btn-gray {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border: 1px solid $color1;
cursor: pointer;
background: $color2;
&:hover{
-moz-box-shadow: inset 1px 0px 4px $color1;
-webkit-box-shadow: inset 1px 0px 4px $color1;
box-shadow: inset 1px 0px 4px $color1;
text-shadow: 0.01px 0.01px 0.01px rgba(91, 91, 88, 0.4);
}
}
.cake-hidden{
display: none;
}
.parent{
position: relative;
padding: 10px;
height: 95vh;
border: 2px solid $color1;
text-align: center;
color: $color1;
z-index: 1;
h1{
margin-top: 0;
border-bottom: 1px solid;
small{
font-size: 40%;
}
}
}
.child{
text-align: left;
button{
border: 1px solid $color1;
padding: 10px;
cursor: pointer;
#include btn-gray;
}
p{
display: inline;
color: $color1;
}
}
.cake-modal{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: rgba(91, 91, 88, 0.2);
z-index: 2;
.modal-body{
position: absolute;
width: calc(100vw/2);
height: calc(100vh/2);
background: $color2;
z-index: 3;
-moz-box-shadow: 1px 0px 4px $color1;
-webkit-box-shadow: 1px 0px 4px $color1;
box-shadow: 1px 0px 4px $color1;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: left;
padding:10px;
h3{
margin-top: 0;
}
.modal-close{
float: right;
padding: 8px 8px;
line-height: 10px;
font-weight: 600;
#include btn-gray;
}
}
}
footer{
position: absolute;
color:$color2;
background: $color1;
padding: 10px;
right: 0;
left: 0;
bottom: 0;
p{
font-size: 10px;
}
}

Unslider Dots and Arrows

I'm using the Unslider image slider on a SharePoint site, and I'm having issues with the dots and arrows. At this point, I'm seeing small squares that are acting as "dots" and two text arrows that appear on top of each other (but are acting as arrows should).
I really need to place the text arrows with arrow images that appear next to each other and function as the arrows do now. (Changing the squares to dots would be helpful as well, but not a requirement.
Can someone help? This isn't my area of expertise and I'm having issues. The following is the CSS I am using:
dots {
}
.dots LI {
BORDER-BOTTOM: #101 2px solid; BORDER-LEFT: #101 2px solid; TEXT-INDENT: -999em; MARGIN: 0px 4px; WIDTH: 10px; DISPLAY: inline; HEIGHT: 100px; BORDER-TOP: #101 2px solid; CURSOR: pointer; BORDER-RIGHT: #101 2px solid; opacity: .4; border-radius: 100%; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s
}
.dots LI.active {
BACKGROUND: #101; opacity: 1
}
.arrows {
POSITION: absolute; TEXT-ALIGN: right; BOTTOM: 16px; DISPLAY: inline; HEIGHT: 50px; FONT-SIZE: 11pt; RIGHT: 300px; FONT-WEIGHT: bold; LEFT: 10px
}
A IMG {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
Thanks so much!!
Hi try Css included in this file
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com arrow example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
</ul>
</div>
←
→
</div>
</body>
</html>

Categories