Im trying to use a background image in a trigger.io ios mobile app but they dont seem to work. When I use catalyst it lists the image location in some temporary local file that doesn't exist.
Is it possible to use the background-image property in CSS with trigger.io and if so, how do I get it to work?
If you are creating a DOM element on the fly with zepto or jQuery:
forge.tools.getURL('img/yourImage.png', function(path) {
var el = $('<div style="background-image: url(' + path + ')"></div>');
});
Or if you just need to set it via zepto or jQuery:
forge.tools.getURL('img/yourImage.png', function(path) {
$("#yourElement").css("background-image", "url(" + path + ")");
});
Note: I've been using backbone.js and I just pass the "path" variable to my view that does not know anything about forge.tools.getURL.
Related
I am developing a Rails app. I use Leaflet to show some maps and to mark some of my data on them. I could use a GoogleMaps-like functionality of ,,What's here?" (you click on a map and get the coordinates?)
If not with Leaflet, is there another library that could make this happen?
Thanks
Yes, you can make your map listen to click events and open a popup ...
function onMapClick(e) {
var html = 'hello from ' + e.latlng.lat + ',' + e.latlng.lng;
map.openPopup(html, e.latlng);
}
map.on('click', onMapClick);
Look at this JSFiddle
I need to preview an image prior to submitting a form.
I work with Rails 3 and needs something that is browser compatible.
Any ideas how I can achieve that?
So! :) The main idea is to use the FileReader Javascript Class, which is really handy for what you need to do.
You just have to listen to the "change" event on your file input and then call a method that will use the "readAsDataURL()" method of the FileReader class. Then you just have to fill the source of a "preview img tag" with the returned result of the method...
I've wrote you a simple jsFiddle that achieves what you want. You can see my code below:
<!-- HTML Code -->
<div class="upload-preview">
<img />
</div>
<input class="file" name="logo" type="file">
//JS File
$(document).ready(function(){
var preview = $(".upload-preview img");
$(".file").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
image_base64 = e.target.result;
preview.attr("src", image_base64);
};
reader.readAsDataURL(file);
});
});
And in the Mozilla Documentation, you have another example (surely more robust). This solution should work with Safari (version 6.0+).
This is the only way I know to preview an image prior to submitting a form, but I think it is quite a common way. Of course it has nothing to do with Ruby On Rails as we only use Javascript here... It would be impossible to do it using Rails only as you would have to upload the image before rendering it. (As Rails is server side, I think you perfectly understand why. :) )
HTML:
<input type="file">
<div id="image_preview"></div>
JS (require jquery):
$(document).ready(function(){
$('input[type="file"]').change(function(){
var image = window.URL.createObjectURL(this.files[0]);
$("#image_preview").css("background-image", "url(" + image + ")");
});
});
I've been looking for ways to open a html local levels, Local I mean that the html is inside the www folder of the application of phonegap, with inappbrowser.
var about = window.open("About.html", "_blank", "location=yes");
This is the line of code with which I intend to do this, but apparently does not work, if someone could help me I would be very grateful.
Are you using Phonegap 3.0.0? I think this is a bug with this Phonegap version.
I have been using this as a workaround (opening an inappbrowser instance):
// Image zoom
$('#container').on('tap', '#content.cmscontent img', function() {
var browser = window.open((navigator.userAgent.indexOf('Android') != -1 ? 'file:///android_asset/www/' : '') + encodeURI($(this).attr('src')), '_blank', 'location=no,toolbar=yes,enableViewportScale=yes,transitionstyle=crossdissolve');
});
See I added (navigator.userAgent.indexOf('Android') != -1 ? 'file:///android_asset/www/' : '') as a prefix before the url. Now it detects when you're app is on Android and adds the local URL in front of it.
Thanks for your answers, and achieves it work apparently the problem is that there was cleaning the project and for this reason not added the www about.html
But now I have another problem, as I will have already seen pretending to show a about of the application, for which show the ios version and device name. for this I am using the properties of the object name and version device.That for some reason unknown to me but that are not available in the index file, that I decided to pass these attributes to html url about, for example:
var about = window.open("About.html?"+device.name+"&"+device.version, "_blank", "location=yes");
and about.html handles these variables with:
var cadGET = location.search.substr(1,location.search.length);
but does not show the html inappbrowser and location bar only shows loading ...
know if the inappbrowser supports pass url parameters?
The code that you have written is correct. it is opening page in inappbrowser.
Now the thing is you have to make sure that you call it after device is ready.
Also check you are using 2.x version of cordova framework. and still if you getting issue with the inappbrowser please provide some more information.
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var about = window.open("about.html", "_blank", "location=yes");
console.log('Received Event: ' + id);
}
};
Seems there no auto size option for Panels in Firefox Add-on SDK extensions, but panel.resize exist. Is it possible to call it on current panel?
No, the code running inside a panel doesn't have the necessary privileges to call any SDK modules. This is solved by using a content script that will send a message back to the extension. The extension can then resize the panel. Something along these lines (untested):
var panel = require("panel").Panel({
contentURL: ...,
contentScript: "self.port.emit('resize', " +
"{width: document.documentElement.clientWidth, " +
"height: document.documentElement.clientHeight});"
});
panel.port.on("resize", function({width, height})
{
panel.resize(width, height);
});
panel.show();
I was wondering if there's anyway to get a 'dynamic path' into a .js file through Ruby on Rails.
For example, I have the following:
new Ajax.Request('/tokens/destroy/' + GRID_ID, {asynchronous:true, evalScripts:true, onComplete:function(request){load('26', 'table1', request.responseText)}, parameters:'token=' + dsrc.id + '&authenticity_token=' + encodeURIComponent(AUTH_TOKEN)})
The main URL is '/tokens/destroy/:id', however on my production server this app runs as a sub folder. So the URL for this ajax call needs to be '/qrpsdrail/tokens/destroy/:id'
The URL this is being called from would be
/grids/1 or /qrpsdrail/grids/1
I could, of course, do ../../path -- but that seems a bit hackish. It is also dependent on the routing never changing, which at this stage I can't guarantee.
I'm just interested in seeing what other solutions there might be to this problem.
Thanks in advance :)
Maybe a bit hackish solution, but i have a configuration-file like described here, and so you could do something like, inside a config.yml :
development:
root: /
production:
root: /qrpsdrail/
and when you build your Ajaxrequest, you could write
new Ajax.Request("#{AppConfig.root}tokens/destroy/' + ...
But it still looks like there should be a cleaner way to solve this ;)
you can use Dynamic path in new.AjaxRequest using javascript in rails
javascript
function dynamic_ajax(GRID_ID)
{
new Ajax.Request("/tokens/destroy?"+GRID_ID, {asynchronous:true, evalScripts:true, onComplete:function(request){load('26', 'table1', request.responseText)}, parameters:'token=' + dsrc.id + '&authenticity_token=' + encodeURIComponent(AUTH_TOKEN)});
}
html
Grid Id 1
Grid Id 2
Grid Id 3
You can set the path as an attribute to your html object that initiates the ajax call. An example would be:
HTML
<a id='my_clicky_thing' href='#' rails_path='<%= tokens_destroy_path %>'>Click me</a>
JQuery
$('#my_clicky_thing').live('click', function(){
var ajax_path = $(this).attr('rails_path');
/* Do ajax stuff here with the path */
});
This would allow you to use the actual rails path in your .js files, as you do in your views.
(This code may not work, it is for the concept only)