On my CMS I have a list of thumbnails (Sortable). The thumbnails work great and now I'm writing a plug-in to drag-them to a tinyMCE window.
As the tinyMCE window has an iFrame it doesn't work that well.
jQuery has an option for Draggables called iframeFix that works exactly as I need. However that list must be a Sortables. I've looked quite extensively on Google and found no-one with my requirements. Has anyone here on StackOverflow done it?
Apply the iframeFix to a Sortables?
If not... I'm on my way to a jQuery plug-in.
Thank you in advance!
I've done it.
You need to have a DIV on top of the iFrame to let the Draggable/Sortable flow without problems. So I used jQuery to create a DIV right on top of the iframe. Then it show's it when you grab the element and destroys it when you drop it. Works like a charm. If anyone is in need of something like that let me know.
update (by popular request):
On my specific scenario I use the following DIV:
<div id="iframeDivFixer" class="ui-draggable-iframeFix" style="background-color: rgb(255, 255, 255); display: none; width: 665px; height: 665px; position: absolute; opacity: 0.001; z-index: 1000; left: 362px; top: 290px; background-position: initial initial; background-repeat: initial initial;"></div>
And, as soon as I grab the thumbnail javascript is used to set the display property to block. The process is reversed when you release the dragabble.
A seriously old question here, but there's another way to do it using css - pointer-events:none; which is supported on all the currently supported browsers (IE11 and above - caniuse.com)
$("#sortable").sortable({
start: function() {
$("iframe").css("pointer-events", "none");
},
stop: function() {
$("iframe").css("pointer-events", "");
},
});
Related
I am working on an app in which users can upload images to their profile.
The following function is invoked when an event is fired from a child element. It dynamically creates an input element so the user can select a file to upload.
_changeImage: function () {
var input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.addEventListener('change', this._imgChanged.bind(this));
input.click();
},
It works on browser and android platforms but fails on iOS.
Could anyone point out what might be causing this problem and how I could approach it?
This problem appears to be related to a security measure in iOS. File input must be manually clicked by the user, not done programatically.
In order to work around this we overlay an invisible input element over the target element.
<input id="inputpic" type="file" accept="image/*" on-change="someFunction">
*keep in mind that on-change is polymer specific so you may want to use onChange
Then we style it with css to have 0 opacity.
#inputpic {
opacity: 0;
position: absolute;
top: [position_of_target_element];
left: [position_of_target_element];
width: [width_of_target_element]px;
height: [width_of_target_element]px;
z-index: 10;
}
I am not particularly happy about this workaround but I tried several other proposed solutions (link below) and found that:
Using a 'hidden' attribute instead of css opacity does not work.
Wrapping the input element in a label element does not work.
More info in this thread.
If anyone else has a better solution I would love to hear back. Thanks!
I want to integrade hubspot chat interface in my Rails 4 + Turbolinks application. I have configured Google Tag Manager to show support chat interface in each page load event which is working fine.
GTM tag (custom html)
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/xxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->
PROBLEM
When I refresh a page manually (full page refresh) hubspot client interface (chat bubble window) shows up.
when I visit page with Turbolinks it doesn't show up.
For debugging I have followed
how-do-i-know-if-my-hubspot-tracking-code-is-working
I can see this tag added to document body (DOM) by inspecting element or by checking it into browser's view page source. Also Network tab show the network call done to js.hs-script.com.
EXPECTED
hubspot chat interface to work with turbolinks page visit:
I had this issue as well and solved it by removing any existing Hubspot scripts from the header before (re-)including the Hubspot script loader. I just added the following script in my view directly before adding the Hubspot loader:
<script>
// Remove Hubspot <head> scripts after a Turbolinks page load
// so it can re-initialize properly. Paste this code immediately
// before the hubspot loading script in the <body>
(function() {
var scripts, script;
// Remove scripts added by hs-scriptloader
scripts = document.querySelectorAll('script[data-loader="hs-scriptloader"]');
for (var script of scripts) {
script.remove();
}
// Remove Hubspot Analytics
script = document.getElementById('hs-analytics');
if (script != undefined) {
script.remove();
}
// Avoid duplicate chat warning and allow chat to load
window.hubspot_live_messages_running = undefined
})()
</script>
<!-- Now add the script to load Hubspot-->
<script async="" defer="defer" id="hs-script-loader" src="//js.hs-scripts.com/xxxxxxx.js" type="text/javascript"></script>
It's still a brittle solution since Hubspot could change the selectors (data-loader etc.) at any time.
The hubspot code inserts 2 js files into the <head> and injects some inline stylesheets into the <body> - one of the js files (conversations-embed.js) creates a div with the id #hubspot-messages-iframe-container. As its name suggests, it contains an iframe with the chat window. It also adds a bunch of css to the body.
The main problem here is that Turbolinks replaces everything in the <body>per page change, leaving the hubspot script unaware of the fact that a page has been changed. Since everything is replaced, the div injected by the script and the css disappears.
My first try was to clone the chat container div into a window variable, and use appendChild(clonedNode) to the event.data.newBody element within the turbolinks:before-render event. While this kinda works, it isn't very elegant. It disappears and reappears each time you change a page. Also, the state was not carried over so if I closed the window it would be open at the next page and so on.
What does work is to move the #hubspot-messages-iframe-containerout of the body into the html tag itself, leaving it out of harms way from turbolinks. It's state is kept (open, closed, etc...) and does not blink or have any side effects. Remember that you have to manually remove it from the pages you may not want it on.
I know it's a bit hacky, but it works and until they have some sort of api to reinitialse the chat window this is a workaround:
document.addEventListener("turbolinks:load", function() {
let targetNode = document.body
let config = { childList: true }
let callback = function() {
if (document.body.querySelector('#hubspot-messages-iframe-container')) {
document.documentElement.appendChild(
document.getElementById('hubspot-messages-iframe-container')
)
observer.disconnect()
}
}
let observer = new MutationObserver(callback)
if (!document.querySelector("html > #hubspot-messages-iframe-container")) {
observer.observe(targetNode, config)
}
})
You will also need to copy the style injected into the body, since Turbolinks will also replace this. This is what I ended up with (converted to Sass):
html.hs-messages-widget-open.hs-messages-mobile
height: 100% !important
overflow: hidden !important
position: relative !important
body
height: 100% !important
overflow: hidden !important
position: relative !important
margin: 0 !important
#hubspot-messages-iframe-container
display: initial !important
z-index: 2147483647
position: fixed !important
bottom: 0 !important
right: 0 !important
&.internal
z-index: 1016
iframe
min-width: 108px
.shadow
display: initial !important
z-index: -1
position: absolute
width: 0
height: 0
bottom: 0
right: 0
content: ""
&.internal
display: none !important
&.active
width: 400px
height: 400px
background: radial-gradient(ellipse at bottom right, rgba(29, 39, 54, 0.16) 0, rgba(29, 39, 54, 0) 72%)
iframe
display: initial !important
width: 100% !important
height: 100% !important
border: none !important
position: absolute !important
bottom: 0 !important
right: 0 !important
background: transparent !important
I have integrated a tinymce editor in a rails project with active admin.
I spent almost a couple of hours looking for a way to align the editor to the right of my available space, as currently it's hiding the labels for it.
I have the following init js:
$(document).ready(function() {
tinyMCE.init({
mode: 'textareas',
align: 'right',
width: '80%',
height: 200,
autoresize_min_height: 200,
autoresize_max_height: 400,
resize: 'both',
plugins : 'advlist autolink link image lists charmap print preview'
});
});
Read much of the TinyMCE4 documentation and couldn't find a way to align the window to the right. My attempts to override the css class for this are as well no successful.
Could you please give me an advice. Does someone know how to deal with the alignment via the js init?
Here's the screenshot: http://betasve.com/wp-content/uploads/2014/09/TinymceProblemAA.png
Thank you in advance.
Try this in active_admin.css.scss:
.mce-tinymce {
margin-left: 215px !important;
+
Complementing the answer make by nistvan, works better with:
.mce-tinymce { margin-left: 20% !important;}
I want to add Google AdWords to my site but the script I'm supposed to add creates an iframe in the dom. This iframe is visible and moves down 13px (its height) all my page.
Is there any way to avoid this? If not, can I hide it without affecting Google AdWords functionality? (It is an empty iframe).
There's an easy fix that doesn't affect the functionality of the code snippet. I've done this with no adverse effects. Just place the script within a hidden div like below and it should do the trick:
<div style="display:none">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
</div>
#Mario is correct that there is a setting that will allow you to turn this display off. However, this setting doesn't seem to exist on the Google UI for remarketing tags, even though they do display this iframe (I think this is a bug on Google's end, as I imagine the "google_remarketing_only = true" flag was supposed to turn this iframe off and isn't working correctly).
I found out that you can also set this in the tracking JS by manually adding the flag "google_conversion_format = 3", like so:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 0123456789,
google_conversion_label = "XXXXXXXX",
google_custom_params = window.google_tag_params,
google_remarketing_only = true,
google_conversion_format = 3;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
This might be easier that regenerating the tags for some people, and solves the problem in the case that the UI doesn't support setting this option when generating the tags.
I normally add this CSS(3) rule to the stylesheet:
iframe[name=google_conversion_frame]
{
display: none !important;
}
Hope it helps.
you can also set max-height: 0; instead of display:none;
Not sure of implications of display none on the iframe.
This works back to ie6.
iframe[name="google_conversion_frame"] {
display: block;
max-height: 0;
}
The best and simplest solution that I have come across for this issue is simply to remove the frame from the document flow by adding the following code to the css stylesheet:
iframe[name="google_conversion_frame"]{
position:fixed;
}
Hope this helps
I found this wonderfull tooltip called qTip2. Loving it so far but has gotten myself into a problem using it.
I was able to install and get qTip2 running with my Rails 3.1 setup. However I'm running into a problem when I'm using qTip2's ajax functionality.
qTip2 ajax request requires a link to the script to be executed before displaying it in the tooltip content div (which is automatically generated by qTip2). You can look at the code I'm referring to here.
http://www.craigsworks.com/projects/qtip2/demos/#ajax
The problem with it is that it does not really go well with RoR. An ajax request declared using RoR is more explicit, where I can explicitly tell rails which div id I would like to update.
Given the following circumstances I needed to do the following things:
the tooltip content must be dynamic
I needed to use the qTip2 ajax functionality so that I could create a custom layout for the tooltip content.
I did try the followings though:
Put the html snippet to be loaded to the content div in the public folder. The content loaded with the right format but I can't have dynamic content. html.erb files didn't seem to work in this folder. Is there any alternative to this folder that would work but with dynamic content?
Tried to use qTip2 ajax request with RoR but was not successful. What I did was I tried to explicitly define the ajax update id in the .js respond file (going through the controller and views etc.). But figuring out the exact id that was generated by qTip2 plugin was a little too overwhelming for me.
here is what I have
html
<a id="editor1" href="/deals_details.html.erb">
javascript
$(document).ready(function()
{
$('#editor1').each(function()
{
$(this).qtip(
{
content: {
text: '<img class="throbber" src="/assets/throbber.gif" alt="Loading..." />',
ajax: {
/*once: false*/
url: $(this).attr('href')
},
title: {
text: 'qTip2 Test',
button: true
}
},
position: {
at: 'center',
my: 'center',
viewport: $(window),
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
}
})
})
// Make sure it doesn't follow the link when we click it
.click(function(event) { event.preventDefault(); });
});
CSS
.ui-tooltip-wiki{
max-width: 440px;
}
.ui-tooltip-wiki .ui-tooltip-content{
padding: 10px;
line-height: 12.5px;
}
.ui-tooltip-wiki h1{
margin: 0 0 7px;
font-size: 1.5em;
line-height: 1em;
}
.ui-tooltip-wiki img{ padding: 0 10px 0 0; }
.ui-tooltip-wiki p{ margin-bottom: 9px; }
.ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }
Please help me!! :) Apology if this post looks stupid, this is my first question on stackoverflow.
I think you're making it too complicated. The qTip ajax functionality simply requests a URL, and the return value is HTML content within a div tag. If you look at the source of the demo you mentioned, you'll see a request for http://www.craigsworks.com/projects/qtip2/data/burrowingowl.php. If you look at what that produces, it is simply a div tag with some content (the style looks different because it is further transformed by the page's CSS).
So the question becomes: can you provide your dynamic content in a div in response to a URL in Rails? Of course! Perhaps you want to set up a SnippetController with a show action and then using pretty standard Rails conventions/routes your URL might be /snippet/show/[ID] and you simply have the view produce the required div content.