I want when I click the menu button, it would expand the width to 300px with smooth transition in 0.5 second but it doesn't work.
var menu = document.querySelector('.menu');
menu.addEventListener('click', () => {
menu.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght#500&family=Roboto:ital,wght#0,300;0,500;1,100;1,300&display=swap');
html{
background: linear-gradient(45deg,#a12626 0%,#550bec 100%) no-repeat;
height: 100%;
}
body{
font-family: 'Poppins', sans-serif;
}
.container{
position: relative;
margin-top: 30%;
}
.menu{
position: absolute;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to right, #a12626 0%, #550bec 100%) no-repeat;
/* border: white solid; */
/* color: white; */
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 50px;
cursor: pointer;
transition: width 2s ease;
}
.menu.active{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">Menu</div>
</div>
<script src="script.js"></script>
</body>
</html>
If you want to use width transition you have to add a width in your class like this:
var menu = document.querySelector('.menu');
menu.addEventListener('click', () => {
menu.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght#500&family=Roboto:ital,wght#0,300;0,500;1,100;1,300&display=swap');
html{
background: linear-gradient(45deg,#a12626 0%,#550bec 100%) no-repeat;
height: 100%;
}
body{
font-family: 'Poppins', sans-serif;
}
.container{
position: relative;
margin-top: 30%;
}
.menu{
position: absolute;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to right, #a12626 0%, #550bec 100%) no-repeat;
/* border: white solid; */
/* color: white; */
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 50px;
cursor: pointer;
transition: width 2s ease;
width: 50px;
text-align: center;
}
.menu.active{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">Menu</div>
</div>
<script src="script.js"></script>
</body>
</html>
Related
Situtation: I am trying to make the div (contains a textbox and button) to be always in the center of the white space left after the design of clip path (as you can see in the image attached).
knowing that clip path is based on percentage it keep changing when the webpage size change
ISSUE: When the webpage size change, the element is no more centered!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Check-in</title>
</head>
<body>
<header>
<h1 id="title">MOUS AIRWAY | <span id="check-in">CHECK-IN</span></h1>
</header>
<div class="userInfo">
<span id="tooltip">É neccessario inserire un codice <br>fiscale (16 caratteri).</span>
<input type="text" id="codiceFiscale" placeholder="cf" oninput="CloseToolTip()">
<button onclick="CheckIn()" id="checkIn">Check-in</button>
</div>
<script src="js.js"></script>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
header{
font-family: bebas;
color: gold;
height: 100vh;
background-color: #00008B;
clip-path: polygon(100% 0, 30% 50%, 100% 100%, 0 100%, 0 0);
z-index: -1;
}
#title{
position: absolute;
margin-left: 50px;
margin-top: 150px;
font-size: 60px;
}
#check-in{
font-size: 30px;
font-family: 'Courier New', Courier, monospace;
color: white;
}
.userInfo{
display: flex;
position: absolute;
margin-top: -450px;
margin-left: 50%;
}
button{
width: 170px;
height: 60px;
background-color: transparent;
font-size: 20px;
color: #00008B;
cursor: pointer;
font-weight: bold;
transition: background-color 0.5s ease;
}
button:hover{
background-color: #00008B;
color: white;
transition: background-color 0.5s ease;
}
#codiceFiscale{
width: 450px;
height: 60px;
margin-right: 30px;
padding-left: 10px;
border: solid 1px black;
font-size: 30px;
text-transform: uppercase;
border-color: #00008B;
}
#codiceFiscale:focus{
outline: none;
box-shadow: 0px 3px 10px #00008B;
}
P.S: i need a solution using only html, css or js. no jquery or bootstrap library.
Thanks!
To keep content always in verticaly center like in my case. here is the solution i found. make it independently from clip-path, the solution was easiest than i was overthinking...just give it position absolute! and of course make sure it always in center by using percentage.
SOLUTION:
.userInfo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-0%,-50%);
align-items: center;
}
I have made my mouse pointer display a circle which inverts colors when hovering over an object by setting cursor: none and tracking a div with jQuery to the mouse position.
The issue is that now when the mouse is stationary it doesn't register and the :hover pseudo-class is essentially useless. Are there any workarounds?
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('#circularcursor').css({
left: e.pageX,
top: e.pageY
});
})
});
html {
cursor: none;
}
#circularcursor {
position: absolute;
width: 40px;
height: 40px;
background: rgb(255, 255, 255);
border-radius: 50%;
top: var(--y, 0);
left: var(--x, 0);
transform: translate(-50%, -50%);
z-index: 2;
mix-blend-mode: difference;
transition: transform .2s;
}
body {
min-height: 900px;
background-color: #222;
}
body #cta {
display: flex;
justify-content: center;
}
body #cta #cta_btn {
text-decoration: none;
font-size: 28px;
font-family: 'Roboto Slab', serif;
border: 1px solid #333;
padding: 15px 50px;
text-align: center;
display: inline-block;
margin-top: 55px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
transition-duration: 0.2s;
color: rgb(107, 73, 4);
}
#cta_btn:hover {
transform: scale(120%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Elsie:wght#900&family=Oswald&family=Roboto+Slab&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- This is a div for the mouse pointer -->
<div id="circularcursor"></div>
<!-- This is a div for the mouse pointer -->
<div id="cta">
<a href="http://www.google.com">
<p id="cta_btn">let's talk</p>
</a>
</div>
</body>
</html>
To do what you require you need to amend the #circularcursor element so that it doesn't intercept the mouseover event from firing on the a element underneath it. To do that, set pointer-events: none on it.
jQuery($ => {
$(document).on('mousemove', function(e) {
$('#circularcursor').css({
left: e.pageX,
top: e.pageY
});
})
});
html {
cursor: none;
}
#circularcursor {
position: absolute;
width: 40px;
height: 40px;
background: rgb(255, 255, 255);
border-radius: 50%;
top: var(--y, 0);
left: var(--x, 0);
transform: translate(-50%, -50%);
z-index: 2;
mix-blend-mode: difference;
transition: transform .2s;
pointer-events: none; /* add this rule */
}
body {
min-height: 900px;
background-color: #222;
}
body #cta {
display: flex;
justify-content: center;
}
body #cta #cta_btn {
text-decoration: none;
font-size: 28px;
font-family: 'Roboto Slab', serif;
border: 1px solid #333;
padding: 15px 50px;
text-align: center;
display: inline-block;
margin-top: 55px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
transition-duration: 0.2s;
color: rgb(107, 73, 4);
}
#cta_btn:hover {
transform: scale(120%);
}
<link href="https://fonts.googleapis.com/css2?family=Elsie:wght#900&family=Oswald&family=Roboto+Slab&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="circularcursor"></div>
<div id="cta">
<a href="http://www.google.com">
<p id="cta_btn">let's talk</p>
</a>
</div>
Im trying to "Code" a cards still in early process of learning to code...i cant figure how to keep IMG from resizing over the headder when trying to zoom it in on hover i've been googling for hours and cant get it right...
now i know there is going to be a LOT of useless code but i still cant recognize a good code so please dont roast me on that :/
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background-color: #5c6370;
}
.cards{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
position: relative;
top: 100px;
}
.card{
background-color: #ffffff;
position: relative;
overflow: hidden;
height: 510px;
width: 380px;
display: flex;
flex-direction: column;
border-radius: 20px;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.671);
text-align: center;
transition: 0.1s ease-in;
margin: 25px;
box-sizing: border-box;
}
.card:hover{
transform: scale(1.07);
}
.card img {
max-width: 100%;
height: 250px;
display: block;
border-radius: 20px 20px 0px 0px;
transition: transform .4s;
overflow: hidden;
}
.card img:hover {
transform: scale(1.2);
transform-origin: 50% 50%;
}
.card-header h1{
margin: 15px;
}
.card-bttns button{
margin: 15px;
position: relative;
top: 15px;
padding: 10px 17px;
font-family: 'Anton', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
border: 2px solid black;
cursor: pointer;
background-color: #5c637000;
transition: 0.1s ease-in;
}
.card-bttns button:hover{
background-color: black;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards</title>
</head>
<body>
<section class="cards-top">
<div class="cards">
<div class="card">
<img src='https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80', alt='Snowy Mountains'>
<div class="card-header">
<h1>Pretty Mountain</h1>
</div>
<div class="card-info"><p>Very Much Snowy i like snow <br>i like to throw snowballs wow its cool <br>
do zou like to throw snowballs? Cause i Do!</p></div>
<div class="card-bttns">
<button type="submit">Follow</button>
<button type="submit">Contact</button>
</div>
</div>
</div>
</section>
</body>
</html>
In your case, adding overflow: hidden to the photo doesn't make sense. You need to add this to the div which will contain the photo. Then the image will increase but will not go beyond the div - of course you have to give the constant height.
Try this code:
I added new div to image.
Added css styles to class card-img-hld
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background-color: #5c6370;
}
.cards{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
position: relative;
top: 100px;
}
.card{
background-color: #fff;
position: relative;
overflow: hidden;
height: 510px;
width: 380px;
display: flex;
flex-direction: column;
border-radius: 20px;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.671);
text-align: center;
transition: 0.1s ease-in;
margin: 25px;
box-sizing: border-box;
}
.card:hover{
transform: scale(1.07);
}
.card img {
width: 100%;
height: 250px;
display: block;
border-radius: 20px 20px 0px 0px;
transition: transform .4s;
object-fit: cover;
}
.card img:hover {
transform: scale(1.2);
}
.card-header h1{
margin: 15px;
}
.card-img-hld {
width: 100%;
overflow: hidden;
height: 250px;
}
.card-bttns button{
margin: 15px;
position: relative;
top: 15px;
padding: 10px 17px;
font-family: 'Anton', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
border: 2px solid black;
cursor: pointer;
background-color: #5c637000;
transition: 0.1s ease-in;
}
.card-bttns button:hover{
background-color: black;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards</title>
</head>
<body>
<section class="cards-top">
<div class="cards">
<div class="card">
<div class="card-img-hld">
<img src='https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80', alt='Snowy Mountains'>
</div>
<div class="card-header">
<h1>Pretty Mountain</h1>
</div>
<div class="card-info"><p>Very Much Snowy i like snow <br>i like to throw snowballs wow its cool <br>
do zou like to throw snowballs? Cause i Do!</p></div>
<div class="card-bttns">
<button type="submit">Follow</button>
<button type="submit">Contact</button>
</div>
</div>
</div>
</section>
</body>
</html>
so I have a button that creates a div that is both resizable and moveable and adds the div to a container. However, when I try to focus a specific div element clicked it does not focus. I think its something to do with the second click function not being executed in the java script, might be wrong though. Any tips?
$(function(){
$(".createcard").click(function() {
var domElement = $('<div class="newcard"></div>');
$('.notecard-container').append(domElement);
$('.newcard')
.draggable()
.resizable();
});
$('.newcard').click(function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
});
body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, 0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
transition: .4s;
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
transition: .4s;
}
.newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
border: 1px gray solid;
z-index:100;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="ISO-8859-1">
<title>Post-it note</title>
</head>
<body>
<div class="container">
<div class="notecard-container">
<button class="createcard">New Card</button>
</div>
</div>
<!-- Input JavaScript and jQuery -->
<script src="js/jquery-3.2.0.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Since newcard is generated dynamically you should use event delegation on() when you attach the click event, like :
$('.body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
Hope this helps.
$(function(){
$(".createcard").click(function() {
var domElement = $('<div class="newcard"></div>');
$('.notecard-container').append(domElement);
$('.newcard').draggable().resizable();
});
$('.newcard').click(function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
});
body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, 0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
transition: .4s;
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
transition: .4s;
}
.newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
border: 1px gray solid;
z-index:100;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"><script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div class="notecard-container">
<button class="createcard">New Card</button>
</div>
</div>
you want attach event to dynamic element, you can find more info here:
In jQuery, how to attach events to dynamic html elements?
$('body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
$(function(){
$(".createcard").click(function() {
var domElement = $('<div class="newcard"></div>');
$('.notecard-container').append(domElement);
$('.newcard')
.draggable()
.resizable();
});
});
$('body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, 0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
transition: .4s;
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
transition: .4s;
}
.newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
border: 1px gray solid;
z-index:100;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="ISO-8859-1">
<title>Post-it note</title>
</head>
<body>
<div class="container">
<div class="notecard-container">
<button class="createcard">New Card</button>
</div>
</div>
<!-- Input JavaScript and jQuery -->
<script src="js/jquery-3.2.0.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
A <div> cannot natively accept focus as it is not an interactive element nor a form control.
You can force it to accept focus programmatically by giving it tabindex="-1" and then toggling it to tabindex="0" when you give it focus. Change it back to -1 when it loses focus and be careful not to get overzealous with tabindex.
However, if you give a non-interactive element focus, you are implying it is an interactive control, so you will also need to give it an accessible name (maybe by aria-label or aria-labeledby in this case), make sure it has focus styles, find an appropriate role so screen readers understand why it can get focus, and generally treat it like a control.
Depending on what it does, you may want to treat it as a non-modal dialog control (with keyboard interaction to match) and if it will have content that overflows, then you will want to make sure a keyboard user can get to it.
So I am pretty much done with my project I was going to create a full webpage slider as a background theme for my website and it is working flawlessly!
The issue is that its too stretched vertically, you are able to scroll to the right (You should not be able to do that) & I have no idea on why it is acting like that right now.
I've been trying to fix it with JavaScript but it didnt do anything so I am here to look for some answers.
What I am trying to accomplish is to have a fixed sized webpage both horizontally(Its alreay fixed) and vertically (Which I cant seem to get to work).
It seems to work fine on fiddle (Im new to fiddle)
Here is my fiddle & source code.
https://jsfiddle.net/z8vqp7fe/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{
height:100%;
width:100%;
overflow: hidden;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>
Try this
Btw.. there is no such thing as position: top;
and font-size: 200 should be either 200%, 200em, or 200px, etc..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,
body,
img {
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
body {
font-family: Sans-Serif;
}
.container {
height: 100%;
width: 100%;
overflow: hidden;
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev,
.cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {
background: #FFF;
}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>