I wrote this code below as an audio player, i want to make it work by javascript but i don't know where to start? i want to have a play and pause option and nothing more! since i'm new to javascripts i dont know how can i make it work on this!
How can i write a javascript for this audioplayer?
#musicplayer {
position: fixed;
z-index: 999999;
bottom: 25px;
margin-left: 20px;
display: flex;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#musicplayer>*,
.play>* {
align-self: center;
-webkit-align-self: center
}
.roundthing img {
margin: 8px;
width: 15px;
margin-bottom: 200px;
}
.midline {
width: 0px;
height: 3px;
background: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .midline {
width: 20px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.play {
display: flex;
min-width: 124px;
height: 31px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
margin-top: -200px;
}
.music-controls,
.music-controls>* {
user-select: none;
-webkit-user-select: none;
width: 11px;
font-size: 11px;
cursor: pointer;
}
.pausee {
display: none;
}
.playtext {
margin-left: 8px;
font-family: courier new;
font-size: 9px;
}
#musicplayer:hover .play {
opacity: 1;
transition-delay: .0s;
-webkit-transition-delay: .0s;
}
<div id="musicplayer" class="box fade-in one">
<div class="roundthing">
<img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
<div class="midline"></div>
<div class="play">
<div class="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="playtext">Fairytail</div>
</div>
<!--play-->
<audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>
You mean something like this?
window.addEventListener("load",function() {
document.querySelector(".playy").addEventListener("click",function() {
document.getElementById("tune").play();
this.style.display="none";
document.querySelector(".pausee").style.display="block";
})
document.querySelector(".pausee").addEventListener("click",function() {
document.getElementById("tune").pause()
this.style.display="none";
document.querySelector(".playy").style.display="block";
})
})
#musicplayer {
position: fixed;
z-index: 999999;
bottom: 25px;
margin-left: 20px;
display: flex;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#musicplayer>*,
.play>* {
align-self: center;
-webkit-align-self: center
}
.roundthing img {
margin: 8px;
width: 15px;
margin-bottom: 200px;
}
.midline {
width: 0px;
height: 3px;
background: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .midline {
width: 20px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.play {
display: flex;
min-width: 124px;
height: 31px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
margin-top: -200px;
}
.music-controls,
.music-controls>* {
user-select: none;
-webkit-user-select: none;
width: 11px;
font-size: 11px;
cursor: pointer;
}
.pausee {
display: none;
}
.playtext {
margin-left: 8px;
font-family: courier new;
font-size: 9px;
}
#musicplayer:hover .play {
opacity: 1;
transition-delay: .0s;
-webkit-transition-delay: .0s;
}
<div id="musicplayer" class="box fade-in one">
<div class="roundthing">
<img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
<div class="midline"></div>
<div class="play">
<div class="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="playtext">Fairytail</div>
</div>
<!--play-->
<audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>
I'm VERY new to html coding (5/6 weeks) and I'm having a problem getting my head around something. I'd like to be able to click on an image and instead of opening a new page have it's image or embedded video load inside a floating page (I'm sure there is a correct name for this) that loads on top of the existing page.
I've found several examples of this (one of which is linked below) but I'm still baffled. Is it just code from the main.css I need or do I require javascript etc. aswell. I've tried copYing over several bits of css code but to no success. It seems to always open a new page and not a floating page like in the example I've included below.
example: https://html5up.net/parallelism
when you click an image in the above site it opens/pops up a floating box (again sorry for not knowing what it is called) in the way I'd love to understand. I really want to use this technique as my site will be image and video heavy. I feel this approach will be a far a more professional way to display my information and images.
If anyone can help I'd love to learn exactly what I need to do to implement this. It might only be 5/6 weeks but I feel I've learned quite a bit. I want to keep upskilling to the point that I can maintain this website entirely by myself.
Thanks to everyone in advance,
Al.
Here's instructions for a framework-based modal - Getbootstrap Modal
Below is a non-framework modal -
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}
<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
x
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>
Is it possible using JavaScript to make the animation run automatically and stay changed (ie not resetting) after say 2 seconds?
I've tried using the following:
element.style.WebkitAnimationPlayState = "paused";
and
element.style.WebkitAnimationPlayState = "running";
However it did not work. Any other suggestions appreciated.
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.spin:hover {
color: #0eb7da;
}
.spin::before, .spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
}
.spin:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
-webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
border: 0 solid transparent;
}
.spin:hover::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
border-radius: 100%;
}
button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
position: relative;
vertical-align: middle;
}
button::before, button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
<button class="spin circle">spin circle</button>
Replace your :hover selectors with an additional active class and with a little javascript you should be good:
document.addEventListener('DOMContentLoaded', function() {
var button = document.querySelector('.spin');
setTimeout(function() {
button.className += ' active';
}, 2000);
});
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.spin::before, .spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
}
.spin::after {
border: 0 solid transparent;
}
.spin.active {
color: #0eb7da;
}
.spin.active::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
-webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin.active::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
border-radius: 100%;
}
button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
position: relative;
vertical-align: middle;
}
button::before, button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
<button class="spin circle">spin circle</button>
Rather than using the :hover state you could use javascript to add a class (say, .active) and replace the .spin:hover css with .spin.active
Here's a jQuery example:
$('button').on('click', function() {
$(this).addClass('active');
});
Here's an example fiddle that might help do what you want: https://jsfiddle.net/en53matp/1/
In CSS, you can set a hudge delay to freeze alike the animation on the defaut state (not :hover).
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.spin:hover {
color: #0eb7da;
}
.spin::before,
.spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
transition-delay: 99999s
}
.spin:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
-webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
border: 0 solid transparent;
transition-delay: 99999s
}
.spin:hover::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before,
.circle::after {
border-radius: 100%;
}
button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
position: relative;
vertical-align: middle;
}
button::before,
button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
<button class="spin circle">spin circle</button>
.spin::before {
border: 2px solid transparent;
transition-delay: 99999s/* whatever you think long enough to hold the transition to be back to initial state */
}
.spin::after {
border: 0 solid transparent;
transition-delay: 99999s
}
https://jsfiddle.net/en53matp/3/
There is space between the .navigation & .navpromo when viewed in opera or chrome browsers. I have tried several tips including making sure there are no spaces in the markup but I can't seem to figure out the solution to make this cross compatible
http://jsfiddle.net/b7kn5bcL/#&togetherjs=Dk6IRzq6Sf
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
CSS:
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
jQuery:
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>
I'm not sure of the technical terms as I haven't looked it up, but an element with margin spacing will extend out from the content box of its parent element unless either padding, or overflow is set.
A quick fix for this is to give #navpromo the overflow: hidden; property.
Sidenote: I love that menu icon animation! :D
The popup perfectly works in chrome but its not working in firefox
i have gave css: float:left; but its not getting fixed
Fiddle: http://jsfiddle.net/rajkumart08/s6hBG/21/
CSS:
a{
text-decoration: none;
color: inherit;
}
.openme {
display: inline-block;
color: #fff;
background-color: #333;
padding: 10px;
}
#menu{
position: absolute;
padding: 20px 0px 0px;
background: -webkit-canvas(menu_background) no-repeat;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
}
#menu a{
float:left;
margin: 7px;
padding: 10px 20px;
font-weight: bold;
font-size: 20px;
text-align: center;
border-radius: 5px;
background-image: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#fff), to(#edeff3));
background-image: -moz-linear-gradient(top, #fff, #edeff3);
}
.hide {
opacity: 0;
}
.show {
opacity: 1;
}
Add this to your CSS:
#moz_background
{
display:none;
}
And change this:
#menu{
position: absolute;
padding: 20px 0px 0px;
background: -webkit-canvas(menu_background) ;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
}
to:
#menu
{
position:absolute;
padding:20px 0px 0px;
background:-webkit-canvas(menu_background) no-repeat;
background:-moz-element(#moz_background) no-repeat;
-webkit-transition:opacity 300ms ease-out;
-moz-transition:opacity 300ms ease-out;
transition:opacity 300ms ease-out;
}
DEMO
This is because Chrome displays the canvas as a background of div#menu. In Firefox, a canvas element is actually created. Because the canvas element is displayed as a block, it appears below the a elements that precede it.