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!
Related
I have been struggling for sometime now, trying to find ways to print out/generate document using vaadin.
i have tried using the below code but this prints all the components. I wanted to print only a particular form or layout.
UI.getCurrent().getElement().executeJs("print();")
Can some one guide me?
You'll need some CSS (similar to the approach mentioned here) that will hide everything when printing is invoked, except for the Layout or Component that needs to be printed.
For example, assuming you have the following two DIVs in your view:
Div printable = new Div(new Span("printable"));
Div nonPrintable = new Div(new Span("nonPrintable"));
You can give one of those a classname:
printable.addClassName("printable");
Then, you would add the following CSS to the global scope:
#media print {
body, body * {
visibility: hidden;
}
.printable, .printable * {
visibility: visible;
}
.printable {
position: absolute;
left: 0;
top: 0;
}
}
Note, in a Vaadin 14 project, the previous CSS is most easily incorporated using the #CssImport annotation. For example, the following annotations can be added to one of your Java classes:
#CssImport("./shared-styles.css")
Then under the directory {projecr-root-directory}/frontend, you'd need to create shared-styles.css and place the aforementioned styling there.
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result:
In my project,jquery-ui-1.10.3.custom.min.js is used to create UIdatePicker. In HTML page , UIDatePicker is defined as below :
<input id='input_birthdate' class='inputText input big,ui-datepicker-title-custom' type="text" maxlength="64" tabindex="7" style ="position: relative; z-index: 1000;" />
If I inspect this particuler field in HTML page in Firefox browser , I can see the IDs and Classes declared in jquery-ui-1.10.3.custom.min.js are being used.(I don't know how jquery-ui-1.10.3.custom.min.js is used on input_birthdate).
If I am declaring as below in some JavaScript page , it works both in laptop browser and ipad but Its not allowing to select any year or month as div is getting closed.
$("#input_birthdate").focusout(function() {
$("#input_birthdate").datepicker("hide");
});
I noticed that datepicker is made of several components,so I thought of applying focusout on parent div as below:
$('#ui-datepicker-div').focusout(function(){
$('#ui-datepicker-div').datepicker("hide");
});
But now its not working on IPAD.
Kindly suggest where I am going wrong or any other alternative to fix this.
Please check the following function should work on iPad
$("#input_birthdate").blur(function()
{
$("#input_birthdate").datepicker("hide");
});
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
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", "");
},
});