I want to get an alert when i click the icon not the whole row but for some reason I am getting it on the whole row. What am I doing wrong?
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
display: block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
}
http://jsfiddle.net/hgu02x0b/1/
You have the span element displayed as block so it is covering the container width. you can take this out and text-align all children elements in .footer in the center
$("#scroll-top").click(function() {
alert('test');
});
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
display: inline-block;
position: relative;
left: 50%;
-moz-transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>
You gave the <span id="scroll-top"> element display: block, which makes it take full width.
So if you change your click handler to $("i.fa-chevron-up").click(...) it will work
Updated fiddle
Or you can change <span id="scroll-top"> to display: inline-block and set text-align: center on the footer
Updated fiddle
Or, since the icon has a fixed width, give <span id="scroll-top"> the same width, width: 34px and center it using margin: 0 auto
Updated fiddle
You can be more specific on the element you are targeting, at the moment you are targeting the element with the id of #scroll-top but you can be more specific and target the icon element within that #scroll-top i
$("#scroll-top i").click(function() {
alert('test');
});
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
display: block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>
The span is set to display: block. This makes it take up the full row. You can change the jQuery to be more precise:
$("#scroll-top i").click(function() {
alert('test');
});
fiddle
Changed it to display:inline-block. http://jsfiddle.net/hgu02x0b/2/
.footer #scroll-top {
display: inline-block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
left: 50%;
margin-left: -17px;
}
Hope this helps
Related
hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>
basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>
For each button that the user hovers on, the image should change with one which points to that button. (I have 14 versions of that image, each pointing lower)
How would this be done with jQuery? Taking the mouse X and Y or using .hover and showing/hiding specific classes? (I think .hover would work better).
It works as expected with .hover() but I can't really seem to make the image stay in the center of its .
I tried many techniques from the internet, but none of them worked.
Screenshot with it not being centered:
Code:
body {
width: 100%;
text-rendering: optimizeLegibility; /*setam textul sa fie optimzat pentru o lizbilitate mai buna, in detrimentul vitezei de incarcare si a preciziei geometrice*/
font-weight: 200;
font-size: 15px;
font-family: 'Roboto Condensed', sans-serif;
color: #fff;
height: 100%;
animation-name: tranzitie-inceput;
animation-duration: 0.5s;
}
#container-mate {
background: #e6e7d0 url('../img/bg-mate.png');
}
/*HEADER-UL PAGINII*/
#meniu-mate {
max-width: 1500px;
margin: 0 auto; /*meniul este centrat orizontal*/
background-color: #fff;
height: 100%;
}
.mate-sus {
height: 10rem;
background: linear-gradient(to right, #7ec7bc, #63b4b3 15%, #429ba8);
}
.mate-sus-nerd {
float: right;
width: 9%;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 65px;
}
.citat-mate-sus {
position: relative;
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
font-weight: bold;
margin-left: 85px;
}
.nav-bar-pagina-mate {
height: 3rem;
background: linear-gradient(to right, #9bddc5 15%, #34bab8);
margin-bottom: 1.5rem;
}
.nav-bar-pagina-mate > ul {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 1.5rem;
font-size: 1.5rem;
}
.nav-bar-pagina-mate > ul > li {
display: inline;
}
.nav-bar-pagina-mate > ul > li > a {
text-decoration: none;
color: #fff;
font-style: italic;
}
/*CONTINUTUL PAGINII*/
#cursuri-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.cursuri-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.selectie-clasa-mate-cursuri,
.selectie-clasa-mate-exercitii,
.selectie-clasa-mate-quiz {
font-size: 2.5rem;
margin-left: 2rem;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.cifre-clasa {
float: right;
display: inline;
}
.cifre-clasa > ul {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 50px;
}
.home-mate {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.back-mate {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.back-mate:hover {
color: #429ba8;
}
.home-mate:hover {
color: #429ba8;
}
.comutare-mate {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.comutare-mate:hover {
color: #429ba8;
}
.cifre-clasa > ul > li {
opacity: 0;
margin: 5px;
display: inline-block;
}
.cifre-clasa > ul > li > a > img {
width: 85%;
}
.cifre {
width: 35%;
margin-left: 400px;
margin-top: -55px;
}
.fa-book {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
#exercitii-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.exercitii-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
#quiz-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.quiz-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.fa-pencil-alt {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
.fa-question {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
font-size: 6rem;
margin-right: 2rem;
}
.fa-lightbulb {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
#variante-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
cursor: pointer;
}
.variante-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.fa-pencil-alt {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
}
/*FOOTER*/
.mate-jos {
background-color: #28494e;
width: 100%;
color: white;
text-align: right;
height: 12.2rem;
position: relative;
}
.mate-jos-text {
font-size: 1.1rem;
}
#contact-footer {
float: right;
margin-right: 6rem;
}
#contact-footer i {
font-size: 5rem;
padding: 0 3.6rem;
margin-bottom: 1rem;
}
.footer-social {
float: right;
position: absolute;
bottom: 14%;
right: 5%;
}
.logo-mateinfo {
float: left;
width: 7.5%;
left: 5%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
#variante-bacalaureat-mate-container {
max-width: 1500px;
margin: 0 auto; /*meniul este centrat orizontal*/
background-color: #fff;
height: 100%;
}
#variante-bacalaureat-mate-centru {
font-size: 5rem;
color: #000;
font-family: 'Proxima Nova', 'Roboto Condensed';
margin-top: 2rem;
overflow: hidden;
}
.semestrul1-variante-bacalaureat-mate {
background: linear-gradient(to right, #499fab, #86bfc7 20%, #abd3d8 50%, #fff);
width: 95%;
padding: 1rem 0 1rem 3rem;
margin-bottom: 1.25rem;
margin-left: 2rem;
color: #fff;
}
.variante-bacalaureat-mate-lista {
font-size: 3rem;
margin-left: 2rem;
color: #fff;
float: left;
}
.variante-bacalaureat-mate-lista > li {
height: 4rem;
line-height: 4rem;
max-width: 250px;
width: 100%;
background-color: #429ba8;
margin-bottom: 0.8rem;
padding-left: 1rem;
}
.variante-bacalaureat-mate-1:hover,
.variante-bacalaureat-mate-2:hover,
.variante-bacalaureat-mate-3:hover {
color: #7ec7bc;
transition: 0.25s;
variante-bacalaureator: pointer;
}
.fereastra-mate-variante-bacalaureat-1,
.fereastra-mate-variante-bacalaureat-2,
.fereastra-mate-variante-bacalaureat-3 {
float: right;
color: #000;
max-width: 1150px;
margin-right: 2rem;
text-align: center;
}
.vbac1
{
display: block;
margin-left: auto;
margin-right: auto
}
.header-mate-variante-bacalaureat-1 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-1 > p {
font-size: 2rem;
}
.fereastra-mate-variante-bacalaureat-2 {
display: none;
}
.header-mate-variante-bacalaureat-2 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-2 > p {
font-size: 2rem;
}
.fereastra-mate-variante-bacalaureat-3 {
display: none;
}
.header-mate-variante-bacalaureat-3 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-3 > p {
font-size: 2rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/reset.css" rel="stylesheet" />
<link href="css/fontawesome-all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<title>variante-bacalaureat Mate</title>
</head>
<body>
<div id="container-mate">
<section id="variante-bacalaureat-mate-container">
<header class="mate-sus">
<img src="img/mate nerd.png" class="mate-sus-nerd" />
<h1 class="citat-mate-sus">Egalitatea nu exista decat in matematica.</h1>
</header>
<nav class="nav-bar-pagina-mate">
<i class="fas fa-home"></i>
<i class="fas fa-arrow-left"></i>
COMUTA PORTAL
</nav>
<article id="variante-bacalaureat-mate-centru">
<h1 class="semestrul1-variante-bacalaureat-mate">variante-bacalaureat - clasa a IX-a</h1>
<ul class="variante-bacalaureat-mate-lista">
<li class="variante-bacalaureat-mate-1">Varianta 1</li>
<li class="variante-bacalaureat-mate-2">Varianta 2</li>
<li class="variante-bacalaureat-mate-3">Varianta 3</li>
<li>Varianta 4</li>
<li>Varianta 5</li>
<li>Varianta 6</li>
<li>Varianta 7</li>
<li>Varianta 8</li>
<li>Varianta 9</li>
<li>Varianta 10</li>
<li>Varianta 11</li>
<li>Varianta 12</li>
<li>Varianta 13</li>
<li>Varianta 14</li>
</ul>
<aside class="fereastra-mate-variante-bacalaureat-1">
<img src="img/vbac (1).png" class="vbac1" />
</aside>
<aside class="fereastra-mate-variante-bacalaureat-2">
<img src="img/vbac (2).png" class="vbac2" />
</aside>
<aside class="fereastra-mate-variante-bacalaureat-3">
<img src="img/vbac (3).png" class="vbac3" />
</aside>
</article>
<footer class="mate-jos">
<div id="contact-footer">
<img src="img/logo web .png" class="logo-mateinfo" />
<div class="footer-social">
<i class="fab fa-instagram"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-phone-square"></i>
<h6 class="mate-jos-text">© 2018 - Octavian Niculescu (cod), Cezar Stoica (design) pentru INFOEducatie.ro</h6>
</div>
</div>
</footer>
</section>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/js.js"></script>
</html>
I also uploaded it on my website so you can see it:
http://octaniculescu.com/mateinfo/variante-mate.html
Thanks.
I would do this in plain CSS with one single image which will be much more efficient than loading 14 different images.
What I would do would be to use the :hover CSS state in combination with transform(rotates XXdeg). This way you just need to assign a number of degrees for the image to rotate when hovering each button.
Check this approach here: https://codepen.io/guillermo-carone/pen/KRBprd
I have a problem with a specific style. I have a string "Historic" in a div with CSS transform rotate, positioned on a specific part of sibling div. If I change the string by "Historique" (for i18n), the div move.
I wish the div keep at the same place when string has changed. Thank you for answers.
#main {
margin: 50px;
position: relative;
width: 300px;
background: #eee;
border: thin solid #bbb;
}
#tag {
position: absolute;
left: -36px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: 15px;
text-transform: uppercase;
max-height: 20px;
}
.content {
display: flex;
position: relative;
padding: 20px;
}
<div id="main">
<div id="tag">Historic</div>
<div class="content">a</div>
<div class="content">b</div>
<div class="content">c</div>
</div>
I got it working by changing the tag class to read like this.
Note the transform-origin option.
transform-origin: left top 0;
position: absolute;
left: -21px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: -20px;
text-transform: uppercase;
max-height: 20px;
I added a button to my code, I wanted to make it transparent but then it made a huge gap at the top and I want the button to eb placed in the middle but I really have no idea on how to do it.
Here are some image examples
https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg[^]
https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg[^]
as you can see in this picture I changed the background color to transparent
why is it making that huge gap at the top? The button is still there but since its a white background I cant see it and I would like to move the button down to the middle
}
button {
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
overflow: hidden;
outline:none;
height: 38px;
line-height: 40px;
border: 2px solid white;
display: inline-block;
float: none;
text-align: center;
width: 120px;
padding: 0px!important;
font-size: 14px;
color: #fff;
}
button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
/*Menu CSS*/
#sidebar {
background: #151718;
width: 200px;
height: 17%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
z-index: 1000;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin: 20px;
position: absolute;
top:0px;
right:-60px;
}
#sidebar-btn span {
height: 1px;
background:#ffffff;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
/*Menu CSS*/
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Buttons for email subscriptions and stuff -->
<!-- Full Width Responsive Slider -->
<div class="container">
<div style="background-color: transparent; text-align: center; padding: 10px"><button>Contact Us</button></div>
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/wp5.jpg">
<img src="images/wp6.jpg">
<img src="images/wp7.jpg">
</div>
<!-- Full Width Responsive Slider -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
please you can add in
.button{
position:fixed;
top:40%
}
Here is the layout wanna to achieve. If there something you don't understand, you can ask.
I suggest try construct your css and your html.
Example
CSS
.centering{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
DEMO
I would like,when clicking on the menu icon change to an X shape with animation and when clicking on X shape it change to menu icon.
menu style in my site is exactly like evernote.com but menu icon must change to X .
I don't know how can I write this changing shape.can any one give me idea or guide me with this problem.
I'm new in bootstrap and js .
I uploaded my site here
HTML
<div class="col-xs-6">
<a class="bazar" href="">دانلود اپلیکیشن </a>
<button type="button" class="navbar-toggle" >
<span class="icon-bar top-m"></span>
<span class="icon-bar mid-m"></span>
<span class="icon-bar bottom-m"></span>
</button>
<div class="menu">
<span class="btnClose">×</span>
<ul>
<li>صفحه اصلی</li>
<li>سوالات متداول</li>
<li>فرصت های شغلی</li>
<li>درباره ما</li>
</ul>
</div>
css
.icon-bar{
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
}
.top-animate {
background: #fff !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
/* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.mid-animate {
opacity: 0;
}
.bottom-animate {
background: #fff !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
/* Chrome, Safari, Opera */
transform: rotate(-225deg);
}
.bazar-green, .bazar {
color: #fff;
display: block;
font-size: 20px;
position: absolute;
right: 80px;
top: 5px;
line-height: 43px;
background: url(image/bazarlogo.png) no-repeat left center;
padding-left: 80px;
z-index: 401;
}
.navbar-toggle {
display: block;
position: absolute;
right: 0px;
top: 0px;
}
.navbar-toggle{
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.menu {
width: 300px;
position: absolute;
z-index: 400;
background: rgba(0,0,0,0.7);
padding: 10px 30px;
text-align: right;
color: #fff;
font-size: 17px;
transition: all 1s;
right: -316px;
}
.btnClose {
color: #fff;
font-size: 30px;
cursor: pointer;
z-index: 500;
}
js
$('.navbar-toggle').click(function() {
$('.top-m').addClass('top-animate');
$('.mid-m').addClass('mid-animate');
$('.bottom-m').addClass('bottom-animate');
$('.menu').addClass('opened');
var height = $( window ).height();
$('.menu').css('height',height);
});
$('.btnClose').click(function() {
$('.menu').removeClass('opened');
$('.navbar-toggle').fadeIn();
});
Add extra class to span as below
<span class="icon-bar first"></span>
<span class="icon-bar middle"></span>
<span class="icon-bar final"></span>
Then in jQuery hide center span and rotate first span to 45deg using
transform: rotate(45deg);
and rotate final span to 125deg using
transform: rotate(125deg);
and you have to adjust top properly