Related
I tried to add JavaScript function to similar element but unfortunately it doesn't work.
I also tried modifying JavaScript code by using querySelectorAll and Foreach but it didn't worked, It add the class but when it come to removing class it broke down and console just kept throwing undefined errors.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #2c5346, #203a43, #0f2027);
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 100vh;
}
.box{
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.288);
border-radius: 23px;
flex-direction: column;
color: white;
position: relative;
overflow: hidden;
}
.box img{
width: 100px;
height: 100px;
border-radius: 50px;
}
.user_name{
margin-bottom: 5px;
font-size: 2rem;
}
.skill{
color: rgba(225,225,225,0.555);
}
/*arrow*/
.arr_container .cancel{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container i{
transform: rotate(45deg);
}
.active_arr{
transform: translate(80%, 80%);
}
.left_container{
position: absolute;
background: #0f2027;
width: 100%;
height: 100%;
border-radius: 23px;
padding: 40px 0 0 20px;
transition: all .4s;
}
.off{
transform: translate(-80%,-80%) rotate(90deg);
}
.active{
transform: translate(0) rotate(0);
}
.left_container p{
margin-bottom: 15px;
font-size: 1.2rem
}
.left_container .skill div{
display: inline-block;
color: rgb(155,155,155);
border:1px solid rgb(155,155,155);
padding: 5px 10px;
font-size: .9rem;
margin: 4px 4px 4px 0;
}
.left_container .icons{
font-size: 1.6rem;
margin-top: 10px;
}
.left_container .icons i{
color: #cfcfcf;
cursor: pointer;
margin-right: 10px;
transition: all .4s;
}
.left_container .icons i:hover{
color: #2c5346;
}
.cancel{
right: 0px;
bottom: 0px;
font-size: 1.5rem;
color: rgb(70,70,70);
position: absolute;
width: 50px;
height: 50px;
background: white;
justify-content: center;
align-items: center;
border-radius: 23px 0 23px 0;
}
.cancel .fas{
position: absolute;
right: 1rem;
bottom: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="cards.css">
<title>cards</title>
</head>
<body>
<div class="main center">
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="cards.js"></script>
<!-- <script>
$(document).ready(function(){
$(".arr_container").click(function(){
$(".left_container").addClass("active")
})
})
</script>
<script>
$(".cancel").click(function(){
$(".left_container").removeClass("active")
})
</script> -->
</body>
</html>
I will appreciate any kind of help
thank you
The classnames and CSS are a mess and you're only adding active_arr to ar and you're only removing active_arr from cl. You're also only selecting one left_container
You should not reach up to change parents if possible; you should iterate parents, iterate their children, etc
This should get you started.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
});
cancel.addEventListener("click", ({ target: cancel }) => {
});
});
I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked.
And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both.
here is a link to the live page to see what happens when you click any link for #about section: portfolio #about
https://kingdomb.github.io/live_portfolio/#about
NOTE: The code below does not give display the error properly so use the link above.
UPDATE: 3/22 02:16
I managed to find this:
Come on guys!
This have a very simple solution, create your ancho like this:
<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>
With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.
Works like a charm. I use this trick in all one page design websites.
BUT, now one click on the about link in the navbar to #myanchor gives me this:
And if I click the exact same navbar link I get a minor adjustment to this:
THANKS!!!
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction();
myFunction2();
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll
position.Remove "sticky"
when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
// Get the logo
var logo = document.getElementById("logo");
// Get the offset position of the logo
var logoSpin = logo.offsetTop;
// Add the logo-spin class to the navbar when you reach its scroll
position.Remove "logo-spin"
when you leave the scroll position
function myFunction2() {
if (window.pageYOffset >= logoSpin) {
logo.classList.add("logo-spin");
} else {
logo.classList.remove("logo-spin");
}
}
// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
// .filter(function() {
// return this.hostname != window.location.hostname;
// })
// .attr("target", "_blank");
//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
for (var c = document.getElementsByTagName("a"), a = 0; a <
c.length; a++) {
var b = c[a];
b.getAttribute("href") &&
b.hostname !== location.hostname &&
(b.target = "_blank");
}
}
externalLinks();
html,
body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}
/* ABOUT */
#about {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 200px;
}
/* .section2 {
position: absolute;
width: 100%;
} */
.section2 .row {
background: url("../images/improved-teamwork-and-
collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 0%;
}
.section2 .card {
background-color: RGBA(33, 37, 41, .80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
}
.section2 .card-block {
font-weight: 520;
width: 50%;
margin: 0 auto;
font-size: 25px;
line-height: 50px;
padding: 60px;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.section2 .card-block {
z-index: 8000;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 75px;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration:
1.8s">King</span>.
<br>
<div class="intro animated fadeInLeft" style="animation-
delay: 3s; animation- duration: 2s">And I'm a full- stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn
btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration:
2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item active">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s;
animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data- toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="margin: -65px 0px 200px 0px; position:
absolute;">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent
projects. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-
primary" target="__blank">Print My Resume
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
The reason you are having this issue is that the .section2 section it looks like you have a margin-top: 200px. Therefore creating that space. Now you can just adjust accordingly.
I would be careful when using margins. Using them only if you have to. I rarely use it, only for minor tweaks and responsiveness. If you are styling correct there should be no use for margins. I would take a look into using Flexbox. This is super useful when creating nice functional layouts. It's a great starter for new people too. The sooner you get into it, the easier layouts will be for you.
I also noticed that you are using javascript to add external links that open in a new page. To do that an easier way is to do something like this <a href="someoutsidelink.com" target="_blank">. Here is a reference, w3schools
As for your navbar fixed, here is some code that you should use instead of the one you have now.
var elementPosition = $("#navbar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$("#navbar")
.css("position", "fixed")
.css("top", "0");
} else {
$("#navbar").css("position", "static");
}
});
Edit One:
Here's one way to do this one is adding a blank <div class="blank"> tags. Place it on top of the <section class="section2"> opening tag. then add a height: 200px; width: 100% therefore creating that space.
I found a solution! I refactored the code in the ABOUT section to this:
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
Notice that I removed the opening div margin html styling.
Beginner here,
I'm currently trying to show a border around buttons every time I click on them.
Theborder would appear quarter by quarter (or 1/3) with the same onclick="myFunction(). I don't get it. How could I properly do it without using a new css class (here: .test_skill) ? I've tried to replace or modify the actual border in .btn but it's not doing anything.
My .html file is :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<div id="skill_unlocked" onclick="myFunction()">
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
</div>
<button class="btn"></button>
</body>
</html>
My .css file is :
body{
background-color: #575757;
}
.btn{
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover{
opacity: 0.9;
background-color: #2B2B2B;
}
.fas{
font-size: 28px;
}
.test_skill{
}
My .js file is :
function myFunction()
{
document.getElementById('skill_unlocked').setAttribute("class", ".test_skill");
}
Bonus question : I'm not sure about the structure I've choose for my button with the<div>,<button>,<i> and <a> tags.I think that I'll have problems with it later becuase of the class tags a bit randomly placed. And it will not fit to what I want on thecss.file
function myFunction()
{
document.getElementById('skill_unlocked').setAttribute("class", ".test_skill");
}
body{
background-color: #575757;
}
.btn{
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover{
opacity: 0.9;
background-color: #2B2B2B;
}
.fas{
font-size: 28px;
}
.test_skill{
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<div id="skill_unlocked" onclick="myFunction()">
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
</div>
<button class="btn"></button>
</body>
</html>
A few things:
When adding the class test_skill programmatically, you want to omit the dot (you have ".test_skill").
You'll probably want to add onclick and the ID skill_unlocked to the <button>, rather than the full-width containing <div>. In this case, you don't need the <div> at all.
.setAttribute("class", ...) will actually overwrite the class(es) if you have an existing one. Instead, you really should use .classList.add("test_skill").
The class that you're adding is test_skill, yet you set up rules for .test_skill_unlocked. You'll want to ensure these match!
To add the border, you're looking to apply border such as:
.test_skill {
border: 2px solid red;
}
And instead of targeting the individual element, what I would recommend is to grab all of the buttons with document.getElementsByClassName("btn"). Note that this returns a NodeList collection of elements, so you'll need to loop over them, adding an event handler to each. From here, you can use the JavaScript keyword this to refer to the button you're currently clicking on. This way, you can use the same function to add the bordered class to each button.
This can all be seen in the following:
var buttons = document.getElementsByClassName("btn");
for (var i = 0; i < buttons.length; i++) {
document.getElementsByClassName("btn")[i].addEventListener("click", function() {
this.classList.add("test_skill");
});
}
body {
background-color: #575757;
}
.btn {
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover {
opacity: 0.9;
background-color: #2B2B2B;
}
.fas {
font-size: 28px;
}
.test_skill {
border: 2px solid red;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
<button class="btn"></button>
</body>
</html>
This is some code i was paying with. I think it does what you was asking but on hover not click. Not exactly what you need but maybe some ideas.
$( ".hvr-ripple-out-good" ).click(function() {
$( this ).toggleClass( "fill-good" );
});
.hvr-ripple-out-good {
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
color: #333;
text-align: center;
border: 1px solid #333;
border-radius: 50%;
}
.hvr-ripple-out-good:hover {
color: #39CCCC;
border-color: #39CCCC;
}
/* Ripple Out */
#-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
#keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out-good {
display: inline-block;
vertical-align: middle;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.hvr-ripple-out-good:before {
content: '';
position: absolute;
border: rgba(0, 0, 0, 0.0) solid 2px;
border-radius: 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out-good:hover:before, .hvr-ripple-out-good:focus:before, .hvr-ripple-out-good:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
border-color: #39CCCC;
animation-fill-mode: forwards;
}
.fill-good {
background-color: #39CCCC;
color: #fff;
border: 1px solid #fff;
}
.fill-good:hover {
color: #fff;
border: 1px solid #fff;
}
.active {
color: #61D6D6 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div style="padding: 100px; float: left;">
<a class="hvr-ripple-out-good"><i class="fas fa-check"></i></a>
</div>
It's very simple, you can achieve it with css only. No need to use scripts for this simple task, as this make the application heavy and it won't even work if the user has disabled JS in their browser.
Please find the code below for showing border on click (for desktop like devices) and on focus (for touch devices).
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #575757;
}
.btn {
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover {
opacity: 0.9;
background-color: #2B2B2B;
}
/* Show border on all buttons */
.btn:active,
.btn:focus {
border: 2px solid red;
}
.fas {
font-size: 28px;
}
/*
* Remove comment for section below to Show border on specific button.
*/
/*
#skill_unlocked:active,
#skill_unlocked:focus {
border: 2px solid red;
}
*/
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<button class="btn" onclick="myFunction()" id="skill_unlocked"><i class="fas fa-flag fa-inverse"></i></button>
<button class="btn"></button>
</body>
</html>
</body>
</html>
Answer to bonus Question
The structure is not an issue in your case here. But, preferably use <i> within <a> if you want to create link on element within <i>
Use this function
function myFunction() {
var el = document.getElementById('skill_unlocked');
el.classList.add("test_skill");
}
Probably best to knock that out with pure CSS with the :active selector.
.btn:active {
border: 5px solid red;
}
Example JSFiddle
There are a few good ways to do something like this. That said, I'd suggest using something other than an inline onclick attribute.
In this solution, I used jQuery and added an animation to the border with CSS. This gives the effect of the border appearing quarter by quarter
as per your OP and additional comments. You can play with the animation keyframes to get the border to appear in thirds, make it thicker, etc.
Edit: I made the border remain by adding the animation-fill-mode CSS property and inserting the "filled" border segments at each keyframe in the animation.
Hope this helps!
$('.btn').on('click', function() {
$(this).addClass('test_skill');
$(this).on('oanimationend webkitAnimationEnd msAnimationEnd animationend', function() {
//$(this).removeClass('test_skill');
});
})
body {
background-color: #575757;
}
.btn {
margin: 10px;
display: block;
opacity: 0.6;
border: none;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover {
opacity: 0.9;
background-color: #2B2B2B;
}
.fas {
font-size: 28px;
}
.test_skill {
animation: border .5s;
animation-fill-mode: forwards;
}
#keyframes border {
0% {
border-top: 0px;
}
25% {
border-top: 2px solid red;
border-right: 0px;
}
50% {
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 0px;
}
75% {
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-left: 0px;
}
100% {
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<div id="skill_unlocked">
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
</div>
<button class="btn"></button>
</body>
</html>
Theres 2 problems:
1) Is you are calling the function setAttribute to add a class.
2) Structure doesnt make much sense , since the class you trying to add doesnt have any styles , so you can remove the
To make it work you could do this:
add the on click and id attributes to the btn like so :
<button class="btn" id="skill_unlocked" onclick="myFunction()">
and remove the border attr like this:
document.getElementById("btn").style.border = "none";
if you want to add a class you should do it like this ( but this wont do anything) :
document.getElementById("skill_unlocked").classList.add('btn');
or to remove a class (this should remove all the styles):
document.getElementById("skill_unlocked").classList.remove('btn');
$(document).ready(function(){
var btn = $('.btn');
btn.click(function(){
$(btn).css('border','1px solid #000');
$(this).css('border','1px solid #f00');
})
})
.btn {
width: 120px;
height: 40px;
display: inline-block;
outline: none;
}
div {
margin: 5px 0;
}
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i> Shipping</button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i> Address</button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i> Camera</button>
<div id="skill_unlocked">
<button class="btn"><i class="fas fa-flag fa-inverse"></i>Flag</button>
</div>
<button class="btn">Button</button>
</body>
</html>
I'm using Django, and Jquery to fade in an image when it shows on screen in my browser. I'm trying to avoid using external libraries and I found a good tutorial.
The thing is, the code works on codepen but not in my Django website.
This is the codepen http://codepen.io/SitePoint/pen/MwEaQM
And this is my code:
html
{% load staticfiles %}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<script type="text/javascript" src="{% static 'js/animate.js' %}"></script>
<body>
<!--For our animations to look good, the animated elements need to be able to be scrolled to. For this example I've added dummy content to the top -->
<div class="main-container">
<div class="container">
<h1>Slide in from the left </h1>
<p>This animation will focus on sliding an element from the left once it enters the view of the user</p>
</div>
<div class="container">
<h2>
Our Testimonials <i class="fa fa-comment"></i></h2>
<p> We have worked in the industry for 15 years and have provided services to a wide range of clients.</p>
<p>Come and see what our clients are saying about our services. </p>
</div>
<div class="container cf">
<!-- testimonial one -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjVTdZcktRTWhNamM" />
</div>
<div class="right">
<h3>Johnathon Richard Smith</h3>
<h4>CEO / Manager - Auto Incorporated</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> When I started using their service I was skeptical. They promised me a 300% return on my initial investment. However they came through on their word and now my business is flourishing.. <i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
</div>
<!--testimonial two -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjV3BseTMtcEU1T2M" />
</div>
<div class="right">
<h3>Joanna Hammerlton</h3>
<h4>Marketing Manager - Omega Creative</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Our company first enlisted their services when we had a down-turn in sales and revene. They outlined a series of steps we could take to improve our position and within a year we are making signifcant improvements..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
<!--testimonial three -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjTURta0pyMEtoUmc
" />
</div>
<div class="right">
<h3>Mark Jamerson</h3>
<h4>CEO - Generic Business</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> We entered into a 12 month period of service with this company in the hopes to improve our returns. After this period we have a return of double our initial investment..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<!--testimonial four -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjb1dxcGZEYUc0Z3M" />
</div>
<div class="right">
<h3>Susan Hilton</h3>
<h4>Financial Officer - People Tech</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Our involvement in this company has been mutually beneficial. We were hoping for slightly higher returns, however the current level of returns are sufficient..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>
</body>
css
/*These styles contain basic styles for fomatting along with our animation css*/
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background: #efefef;
line-height: 170%;
}
strong,
b {
font-weight: 600
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
line-height: 150%;
}
i.fa {
color: #333;
}
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*clearfixes*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.main-container {
background: #fff;
max-width: 1000px;
margin: 25px auto 25px auto;
position: relative;
}
.container {
position: relative;
padding: 25px;
}
/*animation element*/
.animation-element {
opacity: 0;
position: relative;
}
/*animation element sliding left*/
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-100px, 0px, 0px);
-webkit-transform: translate3d(-100px, 0px, 0px);
-o-transform: translate(-100px, 0px);
-ms-transform: translate(-100px, 0px);
transform: translate3d(-100px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {
float: left;
width: 47%;
margin: 0% 1.5% 3% 1.5%;
background: #F5F5F5;
padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial:nth-of-type(odd) {
width: 48.5%;
margin: 0% 1.5% 3.0% 0%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 48.5%;
margin: 0% 0% 3.0% 1.5%;
}
.animation-element.slide-left.testimonial .header{
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
float: left;
margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
float: left;
}
.animation-element.slide-left.testimonial img {
width: 65px;
height: 65px;
border-radius: 50%;
box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}
.animation-element.slide-left.testimonial h3 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial h4 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial .content {
float: left;
width:100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .rating{}
.animation-element.slide-left.testimonial i {
color: #aaa;
margin-right: 5px;
}
/*media queries for small devices*/
#media screen and (max-width: 678px){
/*testimonials*/
.animation-element.slide-left.testimonial,
.animation-element.slide-left.testimonial:nth-of-type(odd),
.animation-element.slide-left.testimonial:nth-of-type(even){
width: 100%;
margin: 0px 0px 20px 0px;
}
.animation-element.slide-left.testimonial .right,
.animation-element.slide-left.testimonial .left,
.animation-element.slide-left.testimonial .content,
.animation-element.slide-left.testimonial .rating{
text-align: center;
float: none;
}
.animation-element.slide-left.testimonial img{
width: 85px;
height: 85px;
margin-bottom: 5px;
}
}
js
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
It should be the same. I'm not sure why it won't work. I've tried wrapping the jquery in a function to make it wait for the content to load but I got the same result.
EDIT: Here is a screenshot of the requests It seems to be loading everything fine. There are no errors. The animated content is hidden as it should but it does not appear when I scroll.
Are there any errors? Are the CSS and JS files present? This should not have anything to do with Django directly, but could be due to the files not being served correctly using Django's static files engine. Are you sure all files are being downloaded?
I got this snippet http://unslider.com/. I did everything asked there to get it working. But somehow it doesn't seem to load the next image in the queue and in return gives a blank space... You can see it here. easycounseling.org/new.html .. Here's the code:
<script>
$(function() {
$('.ss-area').unslider();
});
</script>
<div class="ss-area clearfix">
<ul class="img-sli">
<li class="fimg">
<div class="contents clearfix">
<div class="info-box">
<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>
<div class="con-us-btn-wr">
<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>
</div>
<p>
to signup and avail of our limited period promotional offer!
</p>
</div>
</div>
<div class="mer-usp-wr">
<ul class="mer-usp clearfix" style="font-size:18px;">
<li>DEmo DEmo </li>
<li>DEmo DEmo DEmo </li>
<li>DEmo e</li>
<li>DEmo DEmo </li>
<li>DEmo DEmo </li>
</ul>
</div>
</li>
<li class="simg">
<div class="contents clearfix">
<div class="info-box">
<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>
<div class="con-us-btn-wr">
<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>
</div>
<p>
to signup and avail of our limited period promotional offer!
</p>
</div>
</div>
<div class="mer-usp-wr">
<ul class="mer-usp clearfix" style="font-size:18px;">
<li>DEmo DEmo </li>
<li>DEmo DEmo DEmo </li>
<li>DEmo e</li>
<li>DEmo DEmo </li>
<li>DEmo DEmo </li>
</ul>
</div>
</li>
</ul>
</div>
The plugin is based on jQuery library
So you need to include jQuery and the plugin script file to make it work. The order in which they are loaded is important
---> jQuery
---> unslider plugin
Put this in the section where you have included the other script files. You can always test this by inspecting the console in Developer tools of the browser. It clearly shows the error.
Hi check this my unslider.com help 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 style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
</ul>
</div>
←
→
</div>
</body>
</html>