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>
Related
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>
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;
}
}
I'm having a bit of difficulty trying to isolate quite a few things with this accordion. One, I can't seem to get anything other than 'slideToggle' to work, which seems odd to me. I have one ul and a sub ul. I want only the active instance of the sub-menu to be viewable when the parent ul li is clicked.
Here's my CSS
.ca-menu {
padding: 0;
margin-bottom:1px;
width: 300px;
}
ul.ca-menu li {
width: 300px;
overflow: hidden;
display: block;
background: #001e47;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom:0px;
border-left: 10px solid #cfcfcf;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
ul.ca-menu li:last-child {
margin-bottom: 0px;
}
ul.ca-menu li a {
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #cfcfcf;
position:relative;
}
ul.ca-icon {
font-family:'FontAwesome';
font-size: 25px;
text-shadow: 0px 0px 1px #333;
line-height: 40px;
position: absolute;
top:10px;
width: 90px;
left: 0px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content {
position: relative;
left: 70px;
width: 230px;
height: 20x;
top: 5px;
line-height:6px;
}
.ca-main {
font-size: 12px;
font-family: Century Gothic;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
line-height:4px;
}
.ca-sub {
font-size: 16px;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family:myriad pro;
}
ul.ca-menu li:hover {
border-color: #001e47;
background: #cfcfcf;
}
ul.ca-menu li:hover .ca-icon {
color: #001e47;
text-shadow: 0px 0px 1px #001e47;
font-size: 30px;
}
ul.ca-menu li:hover .ca-main {
color: #001e47;
font-size:20px;
}
ul.ca-menu li:hover .ca-sub {
color: #fff;
font-size: 12px;
}
ul.ca-menu ul.sub-menu li {
background:#fff;
width:100%;
position:relative;
left:-50px;
display:block;
}
ul.ca-menu ul.sub-menu {
background:#fff;
width:100%;
}
And the jquery
$(document).ready(function () {
$('.sub-menu li').hide();
$(".ca-menu li").click(function () {
$(this).next(".sub-menu").siblings("li").slideUp();
});
});
And here's a js fiddle link: http://jsfiddle.net/fsew7sh1/
i correct your code, just put:
$(document).ready(function () {
$('.sub-menu li').hide();
$(".ca-menu li").click(function () {
$(this).find(".sub-menu").slideDown();
$(this).siblings("li").find(".sub-menu").slideUp();
});
});
Or, put the slideUp in the slideDown callback:
var l;
$('.sub-menu li').hide();
$(".ca-menu li").click(function () {
l = $(this).siblings("li").find(".sub-menu");
$(this).find(".sub-menu").slideDown(function(){
l.slideUp();
});
});
Here the examples: jsfiddle or jsfiddle with callback.
What should I do such that when i mouse over the '+' , the add to my playlist appear and i'm ABLE to click on the "add to my playlist" and make it linkable. Right now, everytime i try to hover onto add to my playlist, it disappears. :(
(http://i62.tinypic.com/16bhbit.jpg)
Current jfiddle: http://jsfiddle.net/gmraK/
The add to my playlist is generated by
.addtoplaylist-video:hover:after{
background-color: #ffffff;
background:rgba(30,120,160,0.8);
border-color: rgba(30,120,160,0.8);
border-right-color: #ffffff;
border-radius: 5px;
top: -32px;
color: #ffffff;
content: 'Add To My Playlist!';
left: -100px;
padding: 5px 5px;
position: absolute;
z-index: 98;
width: 120px;
height:15px;
text-align:center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
cursor:pointer;
}
html
<div id="video1" class="toggle">
<span class="addtoplaylist-video">
<img src="images/addicon.png" width="12" height="11" alt="add" class="addplaylisticonimg"></span>
<span class="viewplaylist-video">
<img src="images/viewicon.png" width="17" height="9" alt="viewicon" class="viewplaylisticonimg"> </span>
</div>
js
<script type="text/javascript">
$('.addtoplaylist-video').on('click', function(){
$(this).css({'display':'none'});
$(this).parent('.toggle,.toggle2')
.find('.viewplaylist-video')
.css({'display':'block'});
});
$('.viewplaylist-video').on('click', function(){
$(this).css({'display':'none'});
$(this).parent('.toggle, .toggle2')
.find('.addtoplaylist-video')
.css({'display':'block'});
});
</script>
Try this: http://jsfiddle.net/gmraK/2/
I removed the dynamic css div/link and add a div that is only displayed when the parent has the class of active. A class which is added on hover of the toggle element.
So to begin, I removed your :hover:after
.addtoplaylist-video:hover:after {
background-color: #ffffff;
background:rgba(30, 120, 160, 0.8);
border-color: rgba(30, 120, 160, 0.8);
border-right-color: #ffffff;
border-radius: 5px;
top: -32px;
color: #ffffff;
content:'Add To My Playlist!';
left: -100px;
padding: 5px 5px;
position: absolute;
z-index: 98;
width: 120px;
height:15px;
text-align:center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor:pointer;
}
Well, to clarify, I modified it to be a standalone element.
CSS
.addtoplaylist-video-link {
position: absolute;
display: none;
background-color: #ffffff;
background:rgba(30, 120, 160, 0.8);
border-color: rgba(30, 120, 160, 0.8);
border-right-color: #ffffff;
border-radius: 5px;
bottom: 15px;
color: #ffffff;
right: 10px;
padding: 5px 5px;
position: absolute;
z-index: 98;
text-align:center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor:pointer;
}
Then added the element to the HTML.
HTML
Add To My Playlist!
Finally, I modified the JavaScript. Originally, you were displaying the content on hover as part of the :after pseudo definition. No true interaction within the JavaScript. When you hover over the .toggle class, the .active class is added to the parent element - .frame. The CSS also includes a style to display the new element when the parent has the .active class. When mousing out of the parent element the .active class is removed and the new div is removed.
JS
$('.toggle').mouseover(function(){
$(this).parents('.frame').addClass('active');
});
$('.frame').mouseout(function(){
$(this).removeClass('active');
});
Additional CSS from the fiddle includes adjusted positioning of the .toggle class elements, etc. Here is the portion to show the hidden element on hover:
.active .addtoplaylist-video-link,
.addtoplaylist-video-link:hover{
display: block;
}
Instead of displaying your text using css, write that in jQuery. Just give hover method for that '+' and inside that hover method try to display the text and give the link for that it will work. Because jQuery will give you facility to add HTML elements dynamically.
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.