I want to show an iframe as in http://chesstao.com/test.php (click the green box). But I don't see a method or class to style the height and width of the iframe.
HTML: <div>
Show iframe popup
</div>
the js:
<!--Magnific-popup-->
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.8.9/jquery.magnific-popup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.iframe-link').magnificPopup({type:'iframe'});
});</script>
the css:
.my-popup {height:900px; width:1200px}
How can I code the style (height and width) for the magnific popup iframe? I am baffled. The style above is simply ignored.
This isn't a complete answer but it might help.
Change your options to something like this:
$('.iframe-link').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler your-special-css-class">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen> </iframe>'+
'</div>'
}
});
Then in you css Class do something like this:
.your-special-css-class {
max-width: 320px !important;
height: 85%;
margin: auto;
max-height: 780px;
padding: 140% 16px 0 13px !important;
}
the important part to adjust the height is the padding....
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
type: 'iframe',
iframe: {
markup: '<style>.mfp-iframe-holder .mfp-content {max-width: 900px;height:500px}</style>'+
'<div class="mfp-iframe-scaler" >'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div></div>'
}
});
});
Adding this after the popup call did it for me:
$('.mfp-content').css('height','100%');
This allows me to not have to change the CSS so I can vary the height as needed. Used alongside
alignTop: true
Related
doing some Vue.js challenges for school and having trouble with a function that should trigger on a hover.
I need the div with the class 'redBox' to grow 10 pixels taller each time it is hovered over.
Here's my code:
<html>
<head>
<title>v-on Event Handlers</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box{width:200px; height:200px; background:green; border:2px solid black; text-align:center; line-height:200px; color:white;}
.hidden{display:none;}
.redBox{width: 100px; height: 100px; background-color: red; margin: 2em;}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{box:true, hidden:boxHidden}">{{message}}</div>
<button v-on:click="showhide();">{{buttonText}}</button>
<div class="redBox" v-on:hover="hoverGrow();"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
boxHeight:200,
boxHidden : false,
message : 'Make me disappear!',
buttonText : "Hide",
hovered: false,
},
methods:{
showhide : function(){
console.log(this.boxHidden);
if(this.boxHidden){
this.boxHidden=false;
this.buttonText="Hide";
}else{
this.boxHidden=true;
this.buttonText="Show";
}
},
hoverBox : function(){
this.boxHeight = boxHeight + 10;
}
}
});
Any tips as to why this doesn't work? Right now nothing happens when I hover over the square.
Try using v-on:mouseover instead of v-on:hover. Also your function appears to be named hoverBox not hoverGrow. So v-on:mouseover="hoverBox();" should work in your redBox div.
I'm learning Vue, and even with the simplest examples there is something wrong. For example, buttons. I have a defined component, myButton, responds to clicks, but it doesn't look like it should, is super small and dont have any label. What am I doing wrong?
Part of index.js:
Vue.component('mybutton', {
props: {
buttonLabel: String,
},
template: '<button #click="onClick()" class="btn">{{ buttonLabel }}</button>',
methods: {
onClick(){
console.log('Click');
}
},
})
Part of index.html:
<div id="app">
<mybutton text="From Vue"></mybutton>
<button class="btn">Test</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
And CSS:
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px,20px;
border-radius: 5px;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
Your prop is called buttonLabel, while you pass a property called text inside your index.html. Therefore, the button doesn't get any text and then it's rendered without any inner content (and therefore slim, since you didn't give it fixed width and height).
You need to change the part of index.html and replace text with button-label (Vue automatically maps buttonLabel to it, and it is the better option. Using buttonLabel might not work in this case, since you are not using single file components.
Call it like
<mybutton mylabel="hI"></mybutton>
Vue.component('mybutton', {
props: ['mylabel'],
template: '<button>{{ mylabel }}</button>'
})
https://codepen.io/flakerimi/pen/wvgGqVb
https://v2.vuejs.org/v2/guide/components.html
I'm new to Vue, and I'm stuck here. I understand we can use $el to append div's to DOM dynamically as a child node. But how will I go about appending a div inside a image container dynamically. I'm using bootstrap vue.
<b-img
style= "position:relative"
:id="'og'+(i+1)"
:src="pageImage.pageValue"
class="page-image"
>
<div style="position:absolute; left:0; top: 0; height:100%; width:17%; border: 2px solid red;"/>
</b-img>
While using Vue direct DOM manipulations are not preferred (Add/Remove child elements) as changes performed like this will no longer be reactive.
Rather you can find a solution of rendering a div element conditionally using vue v-if directive.
You can add some code over here and let us know what exactly you want to achieve so that we can give you an appropriate solution.
Below should work
<b-img
style= "position:relative"
:id="'og'+(i+1)"
:src="pageImage.pageValue"
class="page-image"
>
</b-img>
<div style="position:absolute; left:0; top: 0; height:100%; width:17%; border: 2px solid red;"/>
For adding borders dynamically all over image you can check the fiddle here.
<div id="app">
<div style="position:relative;">
<b-img src="https://picsum.photos/300/150/?image=41" fluid-grow alt="Fluid-grow image" ref="bimg" #load="details"></b-img>
<div v-for="divborders in imgborders" :style="{left: `${(divborders-1)*20}px`, position:'absolute', top:' 0', height:'100%', width:'20px', border: '2px solid red'}"/>
</div>
</div>
new Vue({
el: '#app',
data: {
imgborders: 0,
},
mounted() {
this.$nextTick( () => {
this.details();
});
},
methods: {
details() {
this.imgborders = Math.floor(this.$refs.bimg.getBoundingClientRect().width/20);
}
}
})
I have a component that I need display some custom modal on screen. I don't know where I should put this dialog content, so I did something like that:
<template>
<div class="ComponentItself">
<div v-show="false" ref="ModalContent">
Hello!
</div>
<button v-on:click="showModal">Show modal</button>
</div>
</template>
[...]
Note: I could not set the tag name of [ref=ModalContent] to template because the vue reserves this tag to another feature.
My idea is when I click on "show modal" it open creates an instance of another component (v-dialog) that I have created with the [ref=ModalContent] content (it should be compiled to support nested vue components).
import Dialog from './Dialog';
const DialogCtor = Vue.extend(Dialog);
const dialog = new DialogCtor({ propsData: {...} });
dialog['$slots'].default = [ this.$refs['templateNewFolder'].innerHTML ];
{something like document.body.appendChild(dialog.$el)}
This another component have a slot that could receives the HTML content to be displayed inside of that. And it just not works. The modal is displayed, but the slot content is undefined or the HTML content not parsed.
<div class="Dialog">
[...]
<slot></slot>
[...]
</div>
The current result is something like:
What I need:
I need to know if I am on the right way. I have about the component feature, but I could not identify or understand if it is/could resolve my problem;
What I could do to make it work;
Some similar project could help it, but I could not found anyone;
Maybe I could resolve my problem if is possible I just .appendChild() directly to $slot.default, but it is not possible;
It seems to me this might be a case of an XY problem.
What probably happens is that you do not need to manually fill $slot.default, but use your Dialog component a more standard way. Since there is little detail about the latter in your question, that component might also need some refactoring to fit this "standard way".
So a more standard approach would be to directly use your <custom-dialog> component in the template of your parent, instead of using a placeholder (the one you reference as ModalContent) that you have to hide. That way, whatever HTML you pass within that <custom-dialog> will be fed into your Dialog's <slot> (designed beaviour of slot).
That way you also save the hassle of having to manually instantiate your Dialog component.
Then you can toggle your <custom-dialog> visibility (with v-if or v-show) or even manipulate its position in the DOM as you mention in your code; you can access its DOM node as $el: this.$refs.ModalContent.$el when ModalContent is a Vue instance.
You could also factorize the showModal method by delegating it to the Dialog component.
Code example:
Vue.component('modal-dialog', {
template: '#modal-dialog',
data() {
return {
modalShown: false,
};
},
methods: {
showModal() {
this.modalShown = true;
},
hideModal() {
this.modalShown = false;
},
},
});
new Vue({
el: '#app',
methods: {
showModal() {
this.$refs.ModalContent.showModal();
},
},
});
/*
https://sabe.io/tutorials/how-to-create-modal-popup-box
MIT License https://sabe.io/terms#Licensing
*/
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<modal-dialog ref="ModalContent">
Hello!
</modal-dialog>
<h1>Hello World</h1>
<button v-on:click="showModal">Show modal</button>
</div>
<template id="modal-dialog">
<div class="modal" :class="{'show-modal': modalShown}" #click="hideModal">
<div class="modal-content">
<span class="close-button" ref="closeButton" #click="hideModal">×</span>
<slot></slot>
</div>
</div>
</template>
Now if you really want to fiddle with $slot, #Sphinx's linked answer in the question comments is an acceptable approach. Note that the accepted answer there also favours the standard usage. It seems to me this is also what #Sphinx implies in their 2nd comment.
I created a div container which is relative postitioned. In this div container, there are an image which is displayed in block and is responsive image and an overlay div which is absolute positioned. Because this div container is used in responsive website scenario, it does not have a fixed dimension, instead, at any time, the dimension is determined by the dimension of the image which is changing when the size of the screen changes.
When the page is loaded, only part of the overlay is visible. When the user's mouth hovers over the overlay, the rest of the overlay needs to be displayed, and fill the entire div container. I use jQuery animate to implement the animation and it works as expected only in Firefox, and it does not work in IE, and not work in Chrome, IE and Safari.
The following is the code, and you can also find the live demo in the jsfiddle: http://jsfiddle.net/spencerfeng/K9hDn/
Here is the html:
<div id="container">
<img class="responsive-img" src="http://www.fubiz.net/wp-content/uploads/2013/07/One-Ocean-One-Breath14.jpg" alt="">
<div class="overlay">
<h1>This is title</h1>
<div class="content">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words</div>
<a class="link" href="#">See more</a>
</div>
</div>
Here is the css:
#container {
width:400px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.responsive-img {
width:100%;
height:auto;
max-width:100%;
}
.overlay {
position:absolute;
left:0;
right:0;
bottom:0px;
color:#ffffff;
text-align:center;
background: rgb(54, 25, 25);
background: rgba(54, 25, 25, .5);
padding:0 20px;
}
.content {
position:absolute;
}
a.link {
position:absolute;
bottom:10px;
right:10px;
text-indent:-9999px;
text-decoration:none;
color:#ffffff;
}
Here is the javascript:
(function($){
$('.overlay').hover(
function() {
$(this)
.animate({
top: '0'
}, 300, function() {
$(this).children('.link').css({'text-indent': '0px'});
});
}, function() {
}
);
}(jQuery));