How can I put an iframe youtube on a frame with icon close.
example:-
If I want to put the iframe below on frame with icon close, and if I click on icon close the iframe youtube will disappear, how can I do this?
<iframe width="440" height="215" src="http://www.youtube.com/embed/OyRQio7GfLU" frameborder="0" allowfullscreen></iframe>
Thanks
I'm not sure by 100% if this is what did you expect, but I hope I've helped you.
$(".button").click(function() {
$("#x").addClass('hide');
});
.frame {
height: auto;
width: auto;
padding: 20px;
border: 1px solid black;
position: relative;
}
.button {
position: absolute;
top: 5px;
right: 5px;
height: 20px;
width: 20px;
background-color: black;
color: white;
}
.content {
display: block;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
<button class='button'>X</button>
<iframe id='x' class='content' width="440" height="215" src="http://www.youtube.com/embed/OyRQio7GfLU" frameborder="0" allowfullscreen></iframe>
</div>
Here's a way to do it with CSS without JavaScript:
Wrap your iframe in a div.
Add an <input type='checkbox'> above the div and iframe.
Add a <label> after the <input type='checkbox'>.
Hide <input type='checkbox'> with display:none.
Style the div to be invisible with opacity:0, or visibility:hidden*
Add this ruleset:
input:checked + label + div {
visibility: visible;
}
*display:none and display:block works as well but it has the possibility to disrupt layout.
The following Snippet includes commented details
SNIPPET
body {
background: black;
}
#chx1 {
display: none;
}
label {
font-size: 40px;
text-decoration: none;
color: #fC3;
cursor: pointer;
}
label:hover {
color: #0ff;
}
/* This is the style of expanding div */
.expand {
opacity: 0;
height: 0;
width: 480px;
transition: opacity .4s, max-height 1s linear .3s;
}
/* This is the style of expanding div after checkbox is checked */
/* The :checked pseudo-class is associated to expanding div with adjacent sibling selectors */
#chx1:checked + label + .expand {
opacity: 1;
max-height: 270px;
}
<!--Make sure the checkbox has an id-->
<input id='chx1' type='checkbox'>
<!--Make sure the label has a for that
has the same value as checkbox id value-->
<label for='chx1'>✦</label>
<!--This is the expanding div that wraps around iframe-->
<div class='expand'>
<!--This is your Youtube iframe inside of expanding iframe-->
<iframe width="480" height="270" src="http://www.youtube.com/embed/o0u4M6vppCI" frameborder="0" allowfullscreen></iframe>
</div>
Related
I want to make link(.fm) appearing while hovering the image, but my code isn't working (when i hover to the link it starts to appear and dissapear fast).this is the code. I tried usind z-index but it didn't worked , also tried changing positions , but without succes. Any tips please.can you please help me by typing a working code or correcting mine?
.fm a{
position:absolute;
display: none;
background-color: #5D5D5D;
color:pink;
padding:10px;
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
The code is working , but it have lags while hovering the .fm link
This is another example but using javascript.
This will help with your problem that link disappears so fast.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper {
width: 400px;
height: auto;
}
.fm {
position: absolute;
padding: 10px;
background-color: #5D5D5D;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: pink;
}
.caine1.fm {
display: block;
height: 250px;
width: 400px;
}
.link {
font-family: Verdana;
font-size: 16px;
color: crimson;
z-index: 1;
display: block;
width: 400px;
}
.hiddenLink {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="myImage" class="caine1">
<img id="img" src="1.png" width="400" height="250"></img>
<div id="link" class="hiddenLink">This is my hidden link</div>
</div>
</div>
<script>
document.getElementById("myImage").addEventListener("mouseover", function() {
document.getElementById("link").className = "link";
});
document.getElementById("img").addEventListener("mouseleave", function() {
document.getElementById("link").className = "hiddenLink";
});
</script>
</body>
</html>
Your using display none, and there is no transition animation on this component. Display none is binary, meaning there no way to animate this. Instead, use this:
To control the speed of animation, change the 1s in the transition property.
To change what the animation looks like, change the width, height, font-size, and opacity properties in the :hover selector
.fm a{
position:absolute;
width: 0;
height: 0;
visibility: hidden;
opacity: 0;
background-color: #5D5D5D;
color:pink;
padding:10px;
transition: all 1s ease-out
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
width: 4rem;
height: 1.5rem;
font-size: 1rem;
visibility: visible;
opacity: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
Hello i have found a nice javascript effect of box in
link 1
link 2
But it's for wordpress only.
Is it possible to make same slide box with Bootstrap and javascript/jquery?
This is a very simple example of recreating the slide down effect on the links you posted. It can be done fairly easily just using html and css.
<div tabindex="1" class="mainbox">
<h1>
This is a box with hidden content
</h1>
</div>
<div class="hidden">
<h2>
I am no longer hidden
</h2>
</div>
div {
width:500px;
height:200px;
background:#3c3c3c;
color:black;
}
.mainbox {
cursor:pointer;
position:relative;
z-index:1;
}
.mainbox:hover {
outline:none;
}
.hidden {
position:absolute;
top:0;
z-index:-1;
opacity:0.75;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}
.mainbox:hover + .hidden {
top:200px;
-webkit-transition:top 1s;
}
https://jsfiddle.net/tz3vjLg7/
Try this; with this approach you can move the main container to any place you want, add margins, paddings, etc to main-container without having to also re position the sliding panels inside
.main-container {
position: relative;
margin-left: 50px;
}
.main-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: lightgrey;
z-index: 1
}
.slide-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: blue;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.main-container:hover .slide-panel {
opacity: 1;
transform: translateY(150px)
}
<div class="main-container">
<div class="main-panel"></div>
<div class="slide-panel">Slide Panel</div>
</div>
JSFIDDLE:
https://jsfiddle.net/uj3uw9cp/1/
body {
color: white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
img:hover {
opacity: 0.8;
}
img:hover + #text-on-image {
visibility: visible;
}
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong>
</p>
</div>
As you can see in the example on JSFIDDLE, when someone hovers on the image, it will display a link and some text. My main problem is if someone hover on the text or links, the opacity deleted.
So I want that if someone hovers on the link or the text, the opacity will still be 0.8. Any suggestions?
Fixing opacity
That happens because when you hover the text, that will be the hovered element and the image will lost the hover. To solve this, just place the whole block into a container and place the hover selector to that element and select the contained image within it:
#container:hover > img {
opacity: 0.8;
}
Updated solution/JSFiddle
body {
color: white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
#container:hover > img {
opacity: 0.8;
}
#container:hover > img + #text-on-image {
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
Other recommendations
Keep in mind that in HTML5 elements have semantic meaning. Don't use them for their default styling. Achieve the needed style with CSS.
The <strong> element
The <strong> element represents a span of text with strong importance.
From W3C
For its style, use: font-weight: bold;
The <i> element
In some libraries <i> is used for icons, but that is against the HTML specification. Use <span> for this purpose.
The <i> element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name.
From W3C
For its style, use: font-style: italic;
As you also mentioned Javascript/Jquery, I pose another solution using it
$('img,#text-on-image').mouseenter(function(){
$('img').css('opacity', '0.8')
})
$('img').mouseleave(function(){
$('img').css('opacity', '1')
})
body {
color:white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
#container:hover>img + #text-on-image {
visibility:visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
You can add visibility also in #text-on-image:hover, check below code
img:hover + #text-on-image,
#text-on-image:hover {
visibility:visible;
}
Or wrap whole item in to another div and change css to hover over div, check below code
HTML
<div class="parent">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
CSS
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
z-index: 1;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
.parent:hover #text-on-image {
visibility: visible;
}
Case One: https://jsfiddle.net/nikhilvkd/uj3uw9cp/8/
Case two: https://jsfiddle.net/nikhilvkd/uj3uw9cp/7/
i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN
Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen
I was able to use JSfiddle to create a appendTo event. By clicking on the image, I am able to get the caption for those images printed in a list in another div. But what if i wanted it to be appended to another page into a form?
Also, how do i remove an item after its been added? The code that i currently have allows me to appendTo, but I have no idea how to undo this event... any suggestions?
Here is JS fiddle: http://jsfiddle.net/jhyqt5/cBsqN/20/
and the Code:
HTML
<div class="wrapper">
<div class="caption">Blueberry</div>
<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-prn2/1394351_529524313783586_609777864_n.jpg" class="img-circle">
</div>
<div class="wrapper">
<div class="caption">Walnuts</div>
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-ash4/1377244_529524413783576_249384396_n.jpg" class="img-circle">
</div>
<div class="wrapper">
<div class="caption">Craisins</div>
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-frc3/1378714_529524353783582_129148654_n.jpg" class="img-circle">
</div>
<br>
<br>
<div class="foodlist">
</div>
CSS
.img-circle {
border-radius: 50%;
height: 140px;
width: 140px;
}
.wrapper {
position: relative;
}
.caption {
background-color: black;
opacity: .7;
text-align: center;
line-height: 120px;
color: white;
position: absolute;
display: none;
border-radius: 50%;
width: 140px;
height: 140px;
}
.wrapper:hover .caption {
display: block;
}
.wrapper.active .caption {
display: block;
opacity: .8;
background: #38ACD5;
}
JS
$('.wrapper').on('click', function () {
$(this).toggleClass('active');
var caption = $(this).find(".caption").text();
$("<li>" + caption + "</li>").appendTo("div.foodlist");
});
Bottomline:
1) appendTo and Undo function
2) appendTo a form on a another page
Thanks :)
You can't modify a page that will be loaded sometime in the future. That page doesn't exist yet.
All you can do is to set some state (in browser cookie, browser local storage or on the server) that the javascript code in that other page can examine and then modify that other page when it is loaded.