How to write a javascript code for a specific audio player

How to write a javascript code for a specific audio player - javascript

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>

Related

classList.toggle for several elements Javascript

I designed a vertical slide from bottom navigation on mobile. I would like each tab could move (up or down) with the upper one. May be the toggle method isn't the right one. I use vanilla JS.
Here is my function. The two last lines are to show the idea. I would like to write it in a better way.
let children = document.getElementById('mobile-container').children;
for (let i = 0; i < children.length; i++) {
children[i].addEventListener("touchstart", function () {
children[i].classList.toggle("unfold");
children[i-1].classList.toggle("unfold");
children[i-2].classList.toggle("unfold");
});
}
Here is my HTML
<div id="mobile-container">
<div id="mobile-projets" class="mobile">
<h2>Projets</h2>
</div>
<div id="mobile-expertises" class="mobile">
<h2>Expertises</h2>
</div>
<div id="mobile-clients" class="mobile">
<h2>Clients</h2>
</div>
</div>
Here is my CSS
#mobile-container {
display: block;
position: relative;
width: 100%;
height: 85vh;
top: 15vh;
}
#mobile-projets {
width:100%;
height: 100%;
background: #00A6C6;
text-align: center;
border-radius: 1em 1em 0 0;
position: absolute;
top: 69vh;
}
#mobile-expertises {
width:100%;
height: 95%;
background: #FFFFFF;
color: black;
text-align: center;
border-radius: 1em 1em 0 0;
position: absolute;
top: 74vh;
}
#mobile-clients {
width:100%;
height: 90%;
background: #00A6C6;
text-align: center;
border-radius: 1em 1em 0 0;
position: absolute;
top: 79vh;
}
#mobile-projets.unfold {
top: 0;
transition: all 1s ease;
-webkit-transition: all 1s easeout;
-moz-transition: all 1s easeout;
-ms-transition: all 1s easeout;
-o-transition: all 1s easeout;
}
#mobile-expertises.unfold {
top: 5vh;
transition: all 1s ease;
-webkit-transition: all 1s easeout;
-moz-transition: all 1s easeout;
-ms-transition: all 1s easeout;
-o-transition: all 1s easeout;
}
#mobile-clients.unfold {
top: 10vh;
transition: all 1s ease;
-webkit-transition: all 1s easeout;
-moz-transition: all 1s easeout;
-ms-transition: all 1s easeout;
-o-transition: all 1s easeout;
}

picture/video link opening on top of page

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>

Overlay hover effect

I can't solve this problem, i want to make overlay hover effect, when the mouse on top of image, will have a layer and text come out. But now it can't, there have 7 images, when the mouse touch them, all image will have overlay effect at the same time, and are not disappear. Thank you so much.
html
<article class="col-md-4 isotopeItem sm">
<div class="portfolio-item">
<div class="content-item">
<a href="https://www.w3schools.com">
<img src="img/Case Study/Hotel-Kitchen-Equipment.jpg" alt="Kitchen" style="width:360px;height:292px;">
<div class="overlay"></div>
<div class="corner-overlay-content">Kitchen</div>
<div class="overlay-content">
<p>Kitchen</p>
</div>
</a>
</div>
</div>
</article>
css
.portfolio-items article img {width:100%;}
.portfolio-item {
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.portfolio-item img {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
background: #fff;
opacity:0.9;
}
.portfolio-item .portfolio-desc {
display: block;
opacity: 0;
position: absolute;
width: 100%;
left: 0;
top: 0;
color: rgba(220, 220, 220, 0.7);
}
.portfolio-item:hover .portfolio-desc {
padding-top: 20%;
height: 100%;
transition: all 200ms ease-in-out 0s;
opacity: 1;
}
.portfolio-item .portfolio-desc a {
color: #ED502E;
}
.portfolio-item .portfolio-desc a:hover {
/*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/
text-decoration: none;
}
.portfolio-item .portfolio-desc .folio-info {
top:-20px;
padding: 30px;
height: 0;
opacity: 0;
position: relative;
}
.portfolio-item:hover .folio-info{
height: 100%;
opacity: 0.8;
transition: all 500ms ease-in-out 0s;
top:-10px;
}
.portfolio-item .portfolio-desc .folio-info h5 {
text-transform: uppercase;
}
.portfolio-item .portfolio-desc .folio-info p {
font-size: 12px;
}
.content-item{
overflow: hidden;
backface-visibility: hidden;
}
.overlay{
border-bottom: 76px solid #000000;
border-left: 360px solid #000000;
bottom: 0;
height: 0;
opacity: .65;
position: absolute;
right: 0;
text-indent: -9999px;
transition: all .9s ease-out;
width: 0;
}
:hover .overlay{
border-bottom: 292px solid #000000;
border-left: 360px solid #000000;
transition: all .9s ease-out;
}
.corner-overlay-content{
bottom: 26px;
color: #ffffff;
position: absolute;
right: 114px;
transition: all .5s ease-out;
font-size: 40px;
}
:hover .corner-overlay-content{
opacity: 0;
transition: all .10s ease-out;
}
.overlay-content{
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
transition: all .10s ease-out;
}
.overlay-content p{
color: #ffffff;
position: absolute;
right: 114px;
font-size: 40px;
bottom: 124px;
}
:hover .overlay-content{
opacity: 1;
transition: all .5s ease-out;
}
<article class="col-md-4 isotopeItem sm">
<div class="portfolio-item">
<div class="content-item">
<a href="#">
<img src="img/Case Study/Hotel-Kitchen-Equipment.jpg" alt="Kitchen" style="width:360px;height:292px;">
<div class="overlay"></div>
<div class="corner-overlay-content">Kitchen</div>
<div class="overlay-content">
<p>Kitchen</p>
</div>
</a>
</div>
</div>
</article>

Try this code
CSS
.portfolio-items article img {
width: 100%;
}
.portfolio-item {
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.portfolio-item img {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
background: #fff;
opacity: 0.9;
}
.portfolio-item .portfolio-desc {
display: block;
opacity: 0;
position: absolute;
width: 100%;
left: 0;
top: 0;
color: rgba(220, 220, 220, 0.7);
}
.portfolio-item:hover .portfolio-desc {
padding-top: 20%;
height: 100%;
transition: all 200ms ease-in-out 0s;
opacity: 1;
}
.portfolio-item .portfolio-desc a {
color: #ED502E;
}
.portfolio-item .portfolio-desc a:hover {
/*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/
text-decoration: none;
}
.portfolio-item .portfolio-desc .folio-info {
top: -20px;
padding: 30px;
height: 0;
opacity: 0;
position: relative;
}
.portfolio-item:hover .folio-info {
height: 100%;
opacity: 0.8;
transition: all 500ms ease-in-out 0s;
top: -10px;
}
.portfolio-item .portfolio-desc .folio-info h5 {
text-transform: uppercase;
}
.portfolio-item .portfolio-desc .folio-info p {
font-size: 12px;
}
.content-item {
overflow: hidden;
backface-visibility: hidden;
}
.overlay {
border-bottom: 76px solid #000000;
border-left: 360px solid #000000;
bottom: 0;
height: 0;
opacity: .65;
position: absolute;
right: 0;
text-indent: -9999px;
transition: all .9s ease-out;
width: 0;
}
.content-item:hover .overlay {
border-bottom: 292px solid #000000;
border-left: 360px solid #000000;
transition: all .9s ease-out;
}
.corner-overlay-content {
bottom: 26px;
color: #ffffff;
position: absolute;
right: 114px;
transition: all .5s ease-out;
font-size: 40px;
}
.content-item:hover .corner-overlay-content {
opacity: 0;
transition: all .10s ease-out;
}
.overlay-content {
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
transition: all .10s ease-out;
}
.overlay-content p {
color: #ffffff;
position: absolute;
right: 114px;
font-size: 40px;
bottom: 124px;
}
.content-item:hover .overlay-content {
opacity: 1;
transition: all .5s ease-out;
}
you should not use :hover directly. make use of container and on mouse over it trigger the effect.
link for reference
hope this helps..

Show div when hover over another separate div

I have searched the web and found similar questions to my own, but I have not been able to achieve the results that I am looking for. I am not the most well versed with html/css/and javascript/jquery so I am wondering if it is an error on my part with how I am formatting everything, or the path to which I am trying to write these results.
I have three circles, spaced equally in the center of the page. Each circle links out to a different page. On hovering over a circle, a span is revealed (by changing the opacity property in css) that provides a title for where that link goes.
What I am having trouble doing is: When you hover over each circle, in addition to a span being revealed that provides a title, I want to have a short descriptive text appear below the circles. When you mouse out of that said circle, the descriptive text will disappear. Each circle must have its own descriptor text.
From what I have gathered, the jquery hover on event is likely the best way to do this, however I cannot seem to get the syntax correct to make it work.
<script>
jQuery(document).ready(function() {
jQuery('#text1').hide();
});
jQuery(document).ready(function() {
jQuery('.grid_1').hover(function() {
jQuery(this).find('#text1').show();
},
function() {
jQuery('#text1').hide();
});
});
</script>
Any and all help would be greatly appreciated. Please let me know if I should clarify anything.
Link to jsfiddle

Your jquery references #text1 and it should be .text1 since that element is a class. Also $(this).find('.text').show(); won't work because .text is not a child of the thing you're hovering over ($(this)). Just use $('.text1')
$(document).ready(function() {
$('.text1').hide();
});
$(document).ready(function() {
$('.grid_1').hover(function() {
$('.text1').show();
},
function() {
$('.text1').hide();
});
});
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="gridcontainer clearfix">
<div class="grid_1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
</a>
</div>
</div>
<div class="grid_2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1">Text box1</p>
<p class="text2">Text box2</p>
<p class="text3">text box3</p>
</div>
Though I would re-write it to be a little more flexible and with less code like this, utilizing a data attribute in the .grid circles to define the text block class to show, then adding/removing a class that shows the text instead of using jquery's $.hide() and $.show()
$(document).ready(function() {
$('.grid').hover(function() {
$($(this).attr('data-text')).addClass('show');
},
function() {
$($(this).attr('data-text')).removeClass('show');
});
});
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
.text {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="gridcontainer clearfix">
<div class="grid_1 grid" data-text=".text1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
</a>
</div>
</div>
<div class="grid_2 grid" data-text=".text2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
</a>
</div>
</div>
<div class="grid_3 grid" data-text=".text3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1 text">Text box1</p>
<p class="text2 text">Text box2</p>
<p class="text3 text">text box3</p>
</div>

I'll provide a css solution since there exist a jquery answer
Add the following to your css
.fmcircle_out:hover .description{
opacity:1;
}
.description{
opacity:0;
transition:opacity 1s;
}
.fmcircle_out a{
text-decoration:none;
}
.fmcircle_out:focus {
opacity: 1;
}
See snippet (Note you can add these rules to existing rules declared if you'd like)
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .description {
opacity: 1;
}
.description {
opacity: 0;
transition: opacity 1s;
}
.fmcircle_out a {
text-decoration: none;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
<div class="gridcontainer clearfix">
<div class="grid_1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
<div class="description">This link describes option 1</div>
</a>
</div>
</div>
<div class="grid_2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
<div class="description">This link describes option 2</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
<div class="description">This link describes option 3</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1">Text box1</p>
<p class="text2">Text box2</p>
<p class="text3">text box3</p>
</div>

Jquery code Which hide another div on hover and make it visible when mouse move out.
<script>
$(document).ready(function(){
$('.grid_1').hover(
function () {
$('#text1').hide();
},
function () {
$('#text1').show();
}
);
});

Using media queries on content loaded by AJAX

Is there any possible way to use media queries on content loaded by AJAX? I'm using .load() to load a html snippet into the web page. It is a light box I created using CSS. The problem is that media queries don't seem to have any effect on it.
Once the movie has been clicked, a html snippet is loaded into the div "lightbox-target" and a lightbox appears up on the screen. The lightbox is styled using ".detail".
<div class="template actionmovies">
<h1 class="name">Batman: The Dark Knight</h1>
<h2 class="imdb">9/10</h2>
<h3 class="rotten">94%</h3>
<a class="lightbox" href="#The_Dark_Knight" name="The_Dark_Knight">
<img src="images/darkknight.jpg" />
</a>
</div>
<!-- the HTML snippets load inside this div -->
<div class="lightbox-target">
</div>
CSS
.lightbox-target {
position: fixed;
background: rgba(0,0,0,0.85);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
z-index: 1000;
}
.detail {
position: absolute;
top: 100px;
height: 525px;
width: 65vw;
left: 50%;
margin-left: -34vw;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.9);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background-color: #3D3D3D;
z-index: 1001;
padding: 0 10px 0 20px;
border-radius: 10px;
}
a.lightbox-close {
display: block;
color: white;
position: absolute;
padding: 15px 20px 0 0;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
i:hover {
opacity: 0.65;
}
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
#media all and (max-width: 1405px){
.detail {
position: absolute;
top: 100px;
height: 500px;
width: 60vw;
left: 50%;
margin-left: -34vw;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.9);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background-color: #3D3D3D;
z-index: 1001;
padding: 0 10px 0 20px;
border-radius: 10px;
}
}

Develop Reference

JavaScript is the programming language of the Web.

How to write a javascript code for a specific audio player - javascript

Related

classList.toggle for several elements Javascript

picture/video link opening on top of page

Overlay hover effect

Show div when hover over another separate div

Using media queries on content loaded by AJAX

Categories

Resources