I would like to end up with this structure when embedding a video:
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;">
<iframe src="https://www.youtube.com/embed/8zHdLF3-coA?rel=0&showinfo=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no">
</iframe>
</div>
I can easily insert the <iframe> with the quill.insertEmbed(range.index + 1, 'video', url, Quill.sources.USER);. But how do I then append the iframe in a div as above?
It's actually very simple albeit manual(thought there'd be some Quill's way of doing this kinda thing...). Someone please advise if there was a better way!
export default class CustomVideoBlot extends BlockEmbed {
static create(url) {
const node = super.create();
const vidWrapper = <HTMLDivElement>document.createElement('div');
// Set attributes on the iframe
node.setAttribute('frameborder', '0');
node.setAttribute('allowfullscreen', true);
node.setAttribute('src', this.sanitize(url));
// Set styles to the video wrapper
Object.assign(vidWrapper.style, WRAPPER_ATTRIBUTES);
// Append iframe as a child of the wrapper
vidWrapper.appendChild(node);
return vidWrapper;
}
}
Related
I'm trying to use Sveltes {#await}..{:then} block to show NASA's image of the day but I'm getting a strange intermittent outcome. On the first page load the image and data loads in just fine. When I change the date using the date-picker on the page, it's supposed to replace the current image and description with the image and description for the selected date that is retrieved asynchronously. However, what's happening is sometimes the html with the new data just get's appended to the bottom of the page so the image and description for the previously selected date is still there.
Can anyone tell me how I can make sure the previous data is removed? Or could this be some kind of race condition?
<script>
import { fade } from 'svelte/transition';
import Loader from '../components/Loader.svelte';
import {getContext} from 'svelte';
import { format, parseISO } from 'date-fns'
let todaysDate = format(new Date(), 'y-MM-dd');
let selectedDate = todaysDate;
async function getPhotoOfTheDay() {
let data = "";
if (selectedDate !== todaysDate) {
let response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=` + selectedDate);
data = await response.json();
} else {
console.log("use in memory data");
data = getContext('dailyImage');
}
return data;
}
$: imageData = getPhotoOfTheDay(selectedDate);
$: formattedDate = format(parseISO(selectedDate), 'MMMM d, y')
</script>
<svelte:head>
<title>All About Space: Photo of the day</title>
</svelte:head>
<div id="content">
<h1>Photo of the day on {formattedDate}</h1>
<p class="instructions">Choose a day to see the photo of the day for that date:
<input type="date" bind:value="{selectedDate}" max="{todaysDate}" >
</p>
{#if imageData===""}
<p>error.. no data for the selected date</p>
{:else}
{#await imageData}
<Loader show="true"/>
{:then image}
<div class="image-result" transition:fade="{{duration: 300}}">
<h2>{image.title}</h2>
<p>
<img src="{image.url}" alt="{image.title}" title="{image.title}"/>
{image.explanation}
</p>
</div>
{:catch error}
{error.message}
{/await}
{/if}
</div>
<style lang="stylus">
#content {
background: rgba(0,0,0,0.8);
backdrop-filter: blur(6px);
border-radius: 5px;
width: 75%;
margin: 0 auto;
padding: 1rem 2rem;
&:after {
clear: both;
content: "";
display: block;
width: 100%;
}
}
.instructions {
border-bottom: 1px solid gray;
padding-bottom: 2rem;
}
input {
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
border: 0;
border-radius: 3px;
}
img {
float: left;
padding: 0 1rem 1rem 0;
max-width: 50%;
}
</style>
There is an active bug for transitions in await blocks. It seems to be your issue: https://github.com/sveltejs/svelte/issues/1591
I would like it if you clicked on one image, another image would pop up as a modal. I would like the modal content to be a separate image from the trigger, but I borrowed this code from W3Schools and it is written for the same image.
I have tried putting a different image file as src in line 4 with modal-content (id=img01). I have tried changing the var img in line 8 to "img01". I have played around with those two lines in different combinations, but no luck.
I tried to make this as concise as possible, but not entirely sure which parts are the issue, so please forgive any extraneous code, and I can give more if you suspect there is something I'm not including.
Any help is greatly appreciated!!! :)
HTML
<img id="myImg" src="graphic.jpeg" alt="">
<div id="myModal" class="modal"> <span class="close">×</span>
<img class="modal-content" id="img01"> </div>
JS
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
var span = document.getElementsByClassName("close")\[0\];
span.onclick = function() {
modal.style.display = "none";
}
CSS
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#img01 {
height: 100%;
width: auto;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
Modal image content is loaded in JS line modalImg.src = this.src.
Try modalImg.src = "sample/url"; instead of that.
I'm trying to show a gif during an Ajax call; it works fine if the div is at the body level but won't appear in a tab panel. I've tried putting the div at the tab-pane, container, row and column levels but it won't show.
Simple html:
<div id="loading">
<img id="loading-image" src="images/page-loader.gif" alt="waiting..." />
</div>
jquery:
$('#loading').hide(); $('#loading').show(); // as required
css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 10px;
left: 24px;
z-index: 100;
}
Try this:
$(document).ajaxStart(function() {
$('<div id="loading"><img id="loading-image" src="images/page-loader.gif" alt="waiting..." /></img></div>')
.prependTo('.tabClass'); });
$(document).ajaxStop(function() {
$('#loading').remove();
});
replacing 'tabClass' with the class of whatever container you want the gif animation to attach to.
I've found this solution to be cleaner & work well.
I would like to achieve the effect where one image is revealed over the other when scrolling the page.
You can see an example on livearealabs.com (new york / seattle). Does anybody know how to create it using CSS3?
Check out this jsfiddle to create the sliding effect.
The trick is to have one div rotated 60 degrees. You position it so that it covers the entire wrapper and the overflow is hidden. Then with javascript you just have to move the slice container either by changing the left property or by changing the translate-X property.
Here is the code:
HTML:
<div class="wrapper">
<div class="bg"></div>
<div class="slice" data-show="true"></div>
</div>
CSS:
.wrapper {
position: relative;
overflow: hidden;
width: 20em;
height: 10em;
}
.bg {
background-color: red;
width: 100%;
height: 100%;
}
.slice {
position: absolute;
top: -12em;
left: -8em;
width: 30em;
height: 30em;
background-color: blue;
-webkit-transform: rotate(-60deg);
}
JS:
var hidden = false;
$('.wrapper').click(function() {
console.log('click');
if (hidden) {
$('.slice').stop().animate({left: '-8em'}, 2000);
hidden = false;
} else {
$('.slice').stop().animate({left: '-34em'}, 2000);
hidden = true;
}
console.log('click end');
});
Also check out this jsfiddle for a similar sliding effect that can be achieved with CSS only.
After learning JS for about a month now and completing around 4 courses I am still unable to work out how to change an image when clicking a thumbnail! What I want to do is simple, I just want to change the Main Image when a thumbnail is clicked! In this example there are two thumbnail images in a div and a main image above them. I just want to change the main image when a thumbnail is clicked. I know this is DOM Manipulation and think it is: document.getElementById.....?
I have make a small page so that I can learn / try different things and and finally giving up and asking for help! The code is as follows:
#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}
<body>
<div id="MainContainer">
<div id="MainImage"></div>
<div id="TNBodyContainer">
<div id="TNOne">
<div id="TNTwo"></div>
</div>
</div>
Thank you very much for any help.
Margate
You need to add some scripting to change the image when either of the thumbnails are clicked. This function is called when the page is loaded. Change the image names to suit.
This should be placed in the section of the html page.
<script>
window.onload = function() {
var mainImg = document.getElementById('Main');
document.getElementById('TNOne').onclick = function() {
mainImg.src = 'main1.jpg';
//alert('one clicked');
};
document.getElementById('TNTwo').onclick = function() {
mainImg.src = 'main2.jpg';
//alert('two clicked');
};
};
</script>
The two thumbnail divs become <img> tags with the same IDs.
Similarly the main <img> is defined also (with id="Main"). Now the elements
are clickable.
<div id="MainContainer">
<div id="MainImage">
<img id="Main" src="MainImage01.jpg"</img>
</div>
<div id="TNBodyContainer">
<img id="TNOne" src="thumb1.jpg"></img>
<img id="TNTwo" src="thumb2.jpg"></img>
</div>
</div>
Finally CSS for the thumbnails, here float is used to keep the thumbnails in the same line within the TNBodyContainer div.
TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
To change the image in the CSS background property, you need to use
document.getElementById("MainImage").style.background
The right way to go is to add event listeners:
document.getElementById("TNOne").addEventListener("click", function (event) {
setImage(event);
}, false);
document.getElementById("TNTwo").addEventListener("click", function (event) {
setImage(event);
}, false);
}
They both call the same function, but with event it is possible to see which one "clicked" with "event.target.id".
You can then decide what you want to do with for instance a switch statement. basically saying: if event.target.id == "TNOne".
You can see all this I made you a fiddle: http://jsfiddle.net/djwave28/32pQD/3/
There are some slight changes in your HTML and CSS too.