Unslider Dots and Arrows - javascript

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>

Related

How to place a div beside input box on focus?

I have a scenario,that I used css for extending search box on focus,when I focussed on search box then the search box must decrease and the cancel button must be placed beside of search box.
Css:
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
}
: content-box;
font-size: 100%;
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing
}
Here is my plunker link:
https://plnkr.co/edit/Z7mfglWEoDyjbDfFDbLM?p=preview
And the expected output will be like this:
Is it possible with Angularjs or JavaScript?
Possible solution would be to position the div you want absolutely. Then on focus of the input, make the div visible or slide it into view;
Using your plunk, add the following CSS:
.clrble{
position: relative;
}
.frmcntr:focus + .btn{
display: block;
}
.btn{display: none; position: absolute; right: 0;}
and here's the HTML:
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div class="btn">button here</div>
</div>
It's not perfect, but i think it will point you in the right direction.
with float property you can mange the side by side positions.
use float:left; css property for you textbox class and that will work for your requirement and the placement of button also can be handle by css also.
css for textbox
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
You can just hide and show a span with 'cancel' in it.
/* Styles go here */
.clrble .frmcntr {
background: url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family: SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color: rgba(247, 247, 247, 1);
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
background-color: rgba(247, 247, 247, 1);
background: url("images/search.png") no-repeat 10px center;
padding-left: 40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
.clrble {
position: relative;
}
.frmcntr:focus+.btn {
display: block;
}
.btn {
display: none;
position: absolute;
right: 0;
}
.cancel {
visibility: hidden;
color: blue;
font-family: sans-serif;
font-size: 20px;
}
.frmcntr:focus + .cancel {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<span class="cancel">Cancel</span>
<span class="btn">button here</span>
</div>
</body>
</html>
You can use the blur event for the input and the mousedown event as mousedown event fires before the blur event.
var mouseDown = false;
$('input').blur(function() {
if(mouseDown) // cancel the blur event
{
$('input').focus();
mouseDown = false;
}
});
$('#cancelBtn').mousedown(function(){
mouseDown = true;
console.log('Button Clicked');
});
$('input').focus(function(){
$('#cancelBtn').css('display', 'block');
});
$('input').focusout(function(){
$('#cancelBtn').css('display', 'none');
});
/* Styles go here */
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: green;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
#cancelBtn {
color:blue;
float:left;
font-weight:bold;
display:none;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div id="cancelBtn">Cancel</div>
</div>
</body>
</html>

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.

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;
}
}

I have been trying to get unslider to work

I have been trying to get unslider to work. I have cheeked the Jquery and it says it has no errors. I dont think its the typos, but im pretty sure i missed something. here's my coding. hers a link to unslider unslider.com/
HTML
<!DOCTYPE html>
<html>
<head>
<title>unslider
<link rel="stylesheet" type="text/css" href="unslider.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script scr="unslider.js"></script>
</title>
</head>
<body>
<div class="banner">
<ul>
<li>This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>
</body>
</html>
CSS
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; color: red; }
.banner ul li { float: left; }
Javascript
$(function() {
$('.banner').unslider();
});
Hi be sure that u put javascript in <head> section, head must be like this:
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com 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>
</head>
If u still have problems copy/paste this code to the .html file
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com 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>

Disable or non-accessible popup background area

I have following html structure :
<div id="content">
<!-- data -->
<div id="popup"></div>
<!-- data -->
</div>
I am displaying my popup on page load , but at the same time I want to disable background area . My popup box is appearing on z-index , and rest background area should be non-accessible at this time .
How can I achieve this ?
I am using this css style :
#popup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 rgb(36, 35, 35);
border: 5px solid rgb(5, 5, 5);
border-radius: 3px 3px 3px 3px;
color: #333333;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 250px;
height: 150px;
width: 600px;
z-index: 2;
padding: 50px;
}
You will need a div to cover the entire window.
This will not be enough though since a user might still use the keyboard to navigate in the background. You would have to iterate all the a/input/button/select elements on the page and add an tab-index attribute set to -1. When you hide the pop-up they should remove the 'tab-index' attribute.
The reason for the tab-index manipulation is also one of accessibility. A user that navigates through the keyboard will have a hard time navigating content inside of your pop-up if you let them navigate in the background.
So, how would we go about constructing this? Just to set you off:
Html:
<div id="popup" class="popup">
<div class="cover"></div>
<div class="popupBody">
...
</div>
</div>
Css:
.popup {
background-color:black;display:none;
position:fixed;
left:0;right:0;top:0;bottom:0;
z-index:3000;
opacity:0.5;
}
js+ jQuery for adding tabindex:
$('input, a, button, select').each(function () {
$(this).attr('tabindex', '-1');
});
Note: Here the popup is the 'cover', with popupBody being the actual popup, uggly but working jsfiddle: http://jsfiddle.net/mjfag/1
An alternative would be to use the JQuery UI module for modal dialogues. That does nothing for the keyboard-navigation though but if that is of no concern all the other stuff is already done for you.
Edit: After some quick testing with a newer version of jQuery UI it seems like they've started handling the keyboard to.
try this
<div class="modalpopup">
<div class="modal-backdrop fade in">//for background disable
</div>
<div
class="modal hide fade in" id="myModal" style="display: block;">
<div class="modal-header">
<h3 id="myModalLabel">
Modal Heading</h3>
</div>
<div class="modal-body">
<h4>
Popover in a modal</h4>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
</div>
<style>
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
top: 10%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
position: relative;
max-height: 400px;
padding: 15px;
overflow-y: auto;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.modal-footer:before,
.modal-footer:after {
display: table;
line-height: 0;
content: "";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
</style>
You need to completely cover the div: #content with some other div.
Here's the Complete HTML Code :
<html>
<head>
<title>Pop Up Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#main {
width: 100%;
height: 100%;
background-color: #EFEFEF;
padding: 50px;
font-size: 14px;
font-weight: bold;
}
#enclosePopUp {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 1;
filter: alpha(opacity = 100);
display: none;
z-index: 2;
}
#popup {
position: absolute;
_position: absolute; /* hack for internet explorer 6 */
height: 45px;
width: 295px;
background: #FFFFFF;
left: 500px;
top: 250px;
text-align: center;
border: 2px solid #BDBDBD;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #D8D8D8;
-webkit-box-shadow: 0 0 5px #D8D8D8;
box-shadow: 0 0 5px #D8D8D8;
}
#disabledLink {
display: none;
}
</style>
<script type="text/javascript">
function loadPopUp() {
$('#enclosePopUp').fadeIn("slow", function() {
$("#main").css({
"opacity" : "0.3",
"z-index" : "1"
});
$("#disabledLink").show();
});
}
function unLoadPopUp() {
$('#enclosePopUp').fadeOut("slow", function() {
$("#main").css({
"opacity" : "1"
});
$("#disabledLink").hide();
});
}
</script>
</head>
<body>
<div id="main">
Click here to show PopUp
<br> <a id="disabledLink" href="http://www.google.com">Google.com</a>
</div>
<div id='enclosePopUp'>
<div id="popup">
This is a pop up with disabled background. <br> <a href="#"
onclick="return unLoadPopUp();">Close</a>
</div>
</div>
</body>
</html>

Categories