I have an iframe within one of my webpages. It points to another page on the same domain. I've been trying to make the elements draggable within it and I'm having trouble. I got it working last night but make some changes before saving that version and now can't figure out how I had it before so I know it can be done. I have the iframe highlighting elements right now but when I put the code to drag and drop in as I had it before, it doesn't work. The code in the main page is:
function init() {
var $head = $("#myframe").contents().find("head");
$head.append($("<link/>", { rel: "stylesheet", href: "http://ajax.googleapis.com /ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css", type: "text/css" }));
$head.append($("<link/>", { rel: "javascript", href: "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js", type: "text/javascript" }));
$head.append($("<link/>", { rel: "javascript", href: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js", type: "text/javascript" }));
$head.append($("<link/>", { rel: "stylesheet", href: "my_styles.css", type: "text/css" }));
}
function iframeLoad() {
$head.append($("<link/>", { rel: "javascript", href: "my_js.js", type: "text/javascript" }));
}
My code for the jquery to drag and drop is:
$(document).ready(function() {
$("p").draggable();
});
$(document).ready(function() {
$("h1").draggable();
});
$(document).ready(function() {
$("div").draggable();
});
The url is: http://johnverber.com/Opti/url.html in case you want to see it.
Not a full answer to your question but can't do code examples in comments clearly. You can clean up that last bit, you don't need to check if the DOM has loaded 3 times. Combine it into one:
$(document).ready(function () {
$("p,h1,div").draggable();
});
Looks like you are creating 'link' tags for your js files when it should be 'script' tags.
Related
I tried some plugins but wasn't able to follow along.
Basically I want an iframe to add and preview podcasts and other things.
Is there any iframe block like youtube block which comes with grapesjs ?
To my knowledge, there is not a good grapesjs iframe plugin that already exists.
If your use-case is simple, you can just create your own iframe block that has the information you need:
var editor = grapesjs.init({...});
var blockManager = editor.BlockManager;
blockManager.add('iframe', {
label: 'iframe',
content: '<iframe src="<your iframe src here>"></iframe>',
});
If you'd like an iframe component with a customisable src trait, for example, you'd do it like this:
var editor = grapesjs.init({...});
editor.DomComponents.addType("iframe", {
isComponent: el => el.tagName === "IFRAME",
model: {
defaults: {
type: "iframe",
traits: [
{
type: "text",
label: "src",
name: "src"
}
]
}
}
});
editor.BlockManager.add("iframe", {
label: "iframe",
type: "iframe",
content: "<iframe> </iframe>",
selectable: true
});
Here's a working codesandbox: https://codesandbox.io/s/grapesjs-o9hxu
If you need more customization options, you can learn how to create custom blocks and components using the docs:
https://grapesjs.com/docs/modules/Blocks
https://grapesjs.com/docs/modules/Components
https://grapesjs.com/docs/modules/Traits
I'd like to embed the following script into my component in nuxtjs app. But since nuxt has no solution for this. I'd like to ask the vue community to see if there was a better way of embedding external 3rd party js scripts?
Where should I be embedding this type of scipt? And what sort of external configurations do I need to add to enable this to work?
I tried adding directly into my template but it doesn't seem to be working.
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) })</script>
Thanks!
Open up your nuxt.config.js file, and search for the head object. You can add your third party scripts there like this:
// nuxt.config.js
module.exports = {
head: {
title: 'My title',
// etc.
script: [
{ src: "//downloads.mailchimp.com/js/signup-forms/popup/embed.js" },
// You can add multiple third-party scripts here
]
},
// Other stuff
}
Docs: How to use external resources?
I haven't tested it, but I think, since the other part is just javascript, you can add into your page you wan't to show it or a layout file (if you want to show it on multiple pages), like this:
// layout/default.vue
<template>
<!-- Your template -->
</template>
<script>
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) });
export default {
// etc...
}
</script>
Although the require part might mess things up...
Let me know if this works!
Insert the MailChimp code inside the <head>
head() {
return {
script: [
{
type: "text/javascript", // mailchimp universal script
src:
"//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js",
"data-dojo-config": "usePlainJson: true, isDebug: false"
},
{
type: "text/javascript", // mailchimp script for specific popup form
innerHTML: this.getMailchimp
}
],
__dangerouslyDisableSanitizers: ["script"]
};
},
computed: {
getMailchimp() {
if (process.client) {
return JSON.stringify(
window.dojoRequire(["mojo/signup-forms/Loader"], function(L) {
L.start({
baseUrl: "your base url",
uuid: "your uuid",
lid: "your lid",
uniqueMethods: true
});
})
);
}
}
}
I would like to select only jpg file and use magnific popup.
$('.entry-content').each(function () {
$(this).magnificPopup({
delegate: 'a',
type: 'image'
});
});
Because of using $('.entry-content'), downloadable files are not working...
Any advice is helpful. Thank you.
You can check to see the file ending is .png.
$('.entry-content').each(function () {
if($(this).attr("src").match(/\.jpg$/)) {
$(this).magnificPopup({
delegate: 'a',
type: 'image'
});
}
});
It works now. Here is the code I use.
$('a[href*=".jpg"], a[href*=".jpeg"]').each(function(){
$(this).magnificPopup({
type:'image'
});
});
Thank you #Oleander and #Brad Larson
I have a problem using the fancybox plugin with an iframe. My current setup is:
Load news articles in a bootstrap modal, which contains an iframe from another domain (from the news system) - so for example: i am on page.domain.com and load content from news.domain.com, where every news article is provided. So everything works great, but i have problem when ill try to open a fancybox gallery.
When i use the fancybox like this:
$('a.lightbox').fancybox({
openEffect: "none",
closeEffect: "none",
titleShow: 'true',
titlePosition: 'inside',
helpers: {
title : {
type: 'inside'
},
thumbs : {
width: 90,
height: 60
}
},
beforeLoad: function() {
this.title = $(this.element).find('img').attr('alt');
}
});
The fancybox opens on every item with class lightbox, and everything looks fine. But in the iframe, it get opened inside the iframe. But i want to open the gallery outside, in the parent window.
So normally i use:
parent.$.fancybox({
But now, i am loosing the 'a.lightbox' selector. So i would need to manually push the items like this:
beforeLoad: function () {
// here i need to read out all images in the same group, and push it modally
this.group.push(
{ href: "... image1", type: "image", title: "Picture 01", isDom: true },
{ href: "... image2", type: "image", title: "Picture 02", isDom: true }
);
}
But i dont think that is a good option for me.
Is there an better way how to open a fancybox in the parent window, using the standard $('a.lightbox').... selector?
I have the underneath code, the editor loads and does not give errors.
It does however not enforce the cropping/resizing of the image.
I copied the config straight out of the examples,.. (except for the theme that is)
But it somehow does not work.
Can anyone help out?
aviaryObject = new Aviary.Feather({
apiKey: 'xxxx',
apiVersion: 3,
tools: 'all',
theme: 'light',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
aviaryObject.launch({
image: 'imgId',
url: [server-url],
forceCropPreset: ['Logo','150x150'],
forceCropMessage: 'Please crop your photo to this size',
});
Found the solution, as I'm using https I had to load a different script file.
So if you want to use aviary over a https connection, use:
https://dme0ih8comzn4.cloudfront.net/js/feather.js