I have been trying to figure out how to place an SVG play button instead of a png, but I can't seem to figure it out. That's basically all I'm trying to do here. I've been trying different things but nothing has been working.
All help would be greatly appreciated.
https://jsfiddle.net/f6gvesLx/
Play SVG
<svg width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path></svg>
Below is the code format I'm using:
<style>
html, body {
height: 100%;
background: #000;
color: #fff;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.wrap {
max-width: 400px;
position: relative;
margin: auto;
border: 0px solid #5CB378;
}
.inner {
position: relative;
height: 0;
padding-bottom: 100%;
cursor: pointer;
background-color: black;
}
#thevideo, .image {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
background-color: #000000;
cursor: pointer;
overflow: hidden;
}
#thevideo iframe {
width: 100%;
height: 100%;
border: 0px;
}
.image {
background: url('http://via.placeholder.com/400x400');
background-size: cover;
border-radius: 50px;
}
.image:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url(https://i.imgur.com/WSlJUPf.png);
background-repeat: no-repeat;
background-size: 24.5% Auto;
background-position: 50% 50%;
}
<div class='outer'>
<div class='tcell'>
<div class='wrap'>
<div class='inner'>
<div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"> </div>
<div id='thevideo' style='display: none;'>
<iframe frameborder='0'id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe></div>
</div>
</div>
</div>
</div>
You are on the right path:
Remove the background image code from your css.
Then place your svg into your div that has the image class.
Then give the svg the image class as well.
Please refer to this JSFiddle that I forked: https://jsfiddle.net/0xehdwe7/
<div class='outer'>
<div class='tcell'>
<div class='wrap'>
<div class='inner'>
<div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<svg class="image" width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
</svg>
</div>
<div id='thevideo' style='display: none;'>
<iframe frameborder='0' id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe>
</div>
</div>
</div>
</div>
</div>
Related
I just needed help with something, how do I make it for my nav bar to have an image in the profile image?
Image for how I would like it to look:
Image for how I would like it to look (also to make it more clear than vague).
.navbar__link {
position: static;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
margin: 20px 0;
border-radius: 10px;
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
display: flex;
text-align: center;
display: inline-block;
padding: 20px;
}
}
// you don't need to add class to a tag, it can be selected by following way
.navbar>a {
text-decoration: none;
padding: 15px;
}
.header {
display: flex;
// make the header take all space of body
width: 100%;
}
.navbar {
display: flex;
// make navbar take all space that remains after the logo
flex: 1;
justify-content: center;
// make the navbar move left side else it will not be in complete middlle
transform: translate(-100px);
}
* {
margin: 0;
padding: 0;
}
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.logo {
width: 48px;
height: 48px;
}
.loading-bar {
width: 130px;
height: 2px;
background: #ffffff;
margin-top: 22px;
position: relative;
overflow: hidden;
}
.loading-bar::before {
content: '';
width: 68px;
height: 2px;
background: #000000;
position: absolute;
left: -34px;
animation: blackbar 1.5s infinite ease;
}
#keyframes blackbar {
50% {
left: 96px;
}
}
<body onload="handlePageLoaded()">
<header>
<div style="float: left; padding-right: 10px;">
<img width='200' height='50' src='Icons/Seencast home.png' />
</div>
<div class="navbar" style="justify-content: center;">
<a href="discovery.html" class="navbar__link">
<span class="material-icons">whatshot</span>
</a>
<a href="profile.html" class="navbar__link">
<span class="material-icons">person_outline</span>
</a>
</div>
<!-- Loading Screen -->
<div class="loading-screen">
<div class="loading-animation">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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" width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"> <image id="image0" width="90" height="90" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQAAAAAQ03yvAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAAmJLR0QAAd2KE6QAAAAJcEhZ
cwAACxMAAAsTAQCanBgAAAAHdElNRQfkBwsBJxoCRYkNAAAAmElEQVQ4y2P4jwAHGEY5w5zzhx2J
8xPO3n+A4TMq5/CP2vYPFfZMzCCO5XOb4vPf54Bkfv6veT/n9/3/d0CcP3Y15+f+ng/h/OdjOCAL
5NyzB3GO1Z//+3v+D3l+EOcZmPP4/mME5/n9zyDOc/vnf3/ffz4fxPl+3u753d/nn8/9PP8Awwf5
Az9kf38oiOE/PBjCbZRDNw4Awv38T7O+5eEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDctMTFU
MDE6Mzk6MjYrMDM6MDDkTb6MAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA3LTExVDAxOjM5OjI2
KzAzOjAwlRAGMAAAAABJRU5ErkJggg==" />
</svg>
<div class="loading-bar"></div>
</div>
</div>
</header>
<script>
window.onload = () => {
const loader = document.querySelector('.loading-screen');
loader.style.display = 'none';
}
</script>
</body>
<script>
/* Loading Script */
window.onload = () => {
const loader = document.querySelector('.loading-screen');
loader.style.display = 'none';
}
</script>
</body>
UPDATES will go under here, will be updated every 10 minutes!
ex: [UPDATE 1] EXAMPLE
real: [UPDATE 1] Nothing so far :/.
[UPDATE 2] Nothing so far :/.
I am trying to implement upload container similar to this tutorial. I have a svg element, which represents an icon and image as background. I don't know how to achieve this result and make svg element transparent:
figure {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
display: block;
padding: 20px;
margin: 0 auto 0px;
position: relative;
top: 50px;
}
svg {
width: 100%;
height: 100%;
}
.upload-image-drop {
background: url('http://via.placeholder.com/200x200');
width: 200px;
height: 200px;
border-width: 1px;
border-color: rgb(102, 102, 102);
border-style: solid;
border-radius: 5px;
}
<div class="upload-image-drop" aria-disabled="false" style="height: 200px; border-style: none; border-radius: 0px;">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
</svg>
</figure>
</div>
jsfiddle
It look in this tutorial he's painting the icon with this property . fill:#fff; so..:
svg {
width: 100%;
height: 100%;
fill:rgb(102, 102, 102);
}
I have tried to follow what is in this tutorial, but it just is working for Chrome, internet explorer doesn't create the ::after element after the iframe.
Any other ideas of how to achieve the same result ?
EDIT:
I am using the IE 11.
The iframe is placed inside a tooltip generated by the qtip2.
The HTML generated is something like that:
<div class="qtip qtip-default qtip-shadow qtip-youtube qtip-rounded qtip-customized qtip-pos-tl qtip-fixed qtip-focus qtip-hover" id="qtip-10"
role="alert" aria-hidden="false" aria-describedby="qtip-10-content" aria-live="polite"
style="left: 843.02px; top: 289.32px; display: block; z-index: 15001; opacity: 1;"
aria-atomic="false" tracking="false" data-qtip-id="10">
<div class="qtip-tip"
style="border: 0px currentColor !important; left: 4px; top: -6px; width: 6px; height: 6px; line-height: 6px; background-color: transparent !important;">
<canvas width="6" height="6" style="border: 0px currentColor !important; width: 6px; height: 6px; background-color: transparent !important;">
</canvas>
</div>
<div class="qtip-titlebar">
<div class="qtip-title" id="qtip-10-title" aria-atomic="true">Link</div>
</div>
<div class="qtip-content" id="qtip-10-content" aria-atomic="true">
<div style="display: block; white-space: pre-wrap; visibility: visible; -ms-word-wrap: break-word;">
URL: http://portal/sites/test2/Pages/default.aspx
</div>
<iframe name="myiframe" class="iframeLinkUrl" src="http://portal/sites/test2/Pages/default.aspx"
style="display: block; visibility: visible;" target="myiframe" rel="nofollow">
</iframe>
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>
</div>
</div>
And the CSS rules are inherited from the application in general, hard to put in here everything. But to resize the iframe to make it look like a thumbnail I added something like that:
.qtip-content:after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-content::after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-customized {
}
.iframeLinkUrl{
transform: scale(0.32, 0.31) translate(-73%,-99%);
}
As you can see, I also used a div to put in front of the iframe, but even like that it didn't work for IE:
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>
I am working on a project where I need to upload screenshots that are copy pasted into the browser. The system works but I have a problem to click the images to show them in full-screen.
I made a JSFiddle of what it looks like:
<div id="screenshot-container" class="vertical-scroll-div">
<div id="editor" contenteditable="true"> </div>
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
</div>
.vertical-scroll-div {
width: 100%;
padding-top: 10px;
height: 220px;
min-height: 220px;
overflow-x: auto;
white-space: nowrap;
border: 2px dashed #a9a9a9;
}
#editor {
position: absolute;
top: 0px;
width: 100%;
height: 220px;
outline: 0;
}
.screenshot {
margin-left: 10px;
height: 200px;
width: 200px;
max-height: 200px;
max-width: 200px;
}
.screenshot:hover {
cursor: pointer;
border: solid 2px #3498db;
}
The editor div can't be used as parent because it will be cleared when inserting a new image.
Hope someone got an idea.
Thanks
Just add these properties to the .screenshot selector:
.screenshot {
position: relative;
z-index: 10;
}
use this css
.screenshot {
height: 200px;
margin-left: 10px;
max-height: 200px;
max-width: 200px;
position: relative;
width: 200px;
z-index: 5;
}
Above is with section tag and below is withoutI need to have the lightbox inside the section tag. Just not sure as to why this is happening or how to override this. The lightbox is appearing but it will not close and is behind the image. Here is the code:
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
Nothing In the CSS indicates that there's an issue there...
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Thanks.
The console reads:
Uncaught TypeError: Cannot read property 'style' of null
Looking at your code
getElementById(' fade').
^^
Learn to use the developer console so you can find these typos.
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close
</div>
<div id="fade" class="black_overlay"></div>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>