I have made a contact form using "Gravity Form", in which I used image uploader. Now I want to display preview of image to user which is uploading. Is there anyway to achieve this?
Sorry, Late Answer
<script>
jQuery('#imgview').hide();
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
jQuery('#imgview').show();
reader.onload = function (e) {
jQuery('#imgview>img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
// your File input id "#input_1_2"
jQuery(document).on("change","#input_1_2", function(){
readURL(this);
});
</script>
html block
<div id="imgview"><img src=""></div>
Related
I am looking for function for WooCommerce which change meta title text in non-active tab. Anybody know how can I do it? I find this JS code but it does not work in themes function.php file:
$(function() {
var message = "Don't forget us";
var original;
$(window).focus(function() {
if (original) {
document.title = original;
}
}).blur(function() {
var title = $('title').text();
if (title != message) {
original = title;
}
document.title = message;
});
});
The following goes into functions.php
add_action('wp_head', function () {
?>
<script>
(function () {
var message = "Don't forget us"
var original
jQuery(window).on("focus", function () {
if (original) {
document.title = original
}
}).on("blur", function () {
var title = jQuery("title").text()
if (title != message) {
original = title
}
document.title = message
})
})()
</script>
<?php
});
You can put that script into a tag <script></script> in the footer.php file wich should be located in your theme (don't forget to actually duplicate this file inside your child theme)
EDIT: Also make sur to have JQuery in your frontend
Please help me on how to get the content of the froala editor. Just to display it on the console would be enough. Here is my code:
Template.myTemplate.events({
'click': function (event) {
var self = this;
return function (e, editor) {
var newHTML = editor.html.get();
console.log(newHTML);
}
}
});
I can not seem to display the content of the editor even in the console when I click the button. Thank you.
If you're not using the older version here is a working code:
Template.myTemplate.events({
'click': function (e) {
var html = $('.selector').editable('getHTML', true, true);
});
});
based on https://www.froala.com/wysiwyg-editor/docs/methods#getHTML
If you're using the v2.0 $('.selector').froalaEditor('html.get', true);
the .selector is where you initialize your froala editor, If you can show how you do that I can adjust it to it.
I am trying to submit an image.. and I've been at this for the past two days. It seems like it's super simple but I can't get it the way I want it to.
In the examples for collectionFS (and every other example I can find), they use an event that's called 'change'. https://github.com/CollectionFS/Meteor-CollectionFS
This event will update and save the file everytime the user wants to upload an image (or any file). They don't have to press "submit" to save it.
Is this the correct way to do things? I am trying to change it so I can blend event into my 'submit form' event, but it doesn't seem to work.
'submit form': function(event, template) {
console.log('this logs')
FS.Utility.eachFile(event, function(file) {
console.log('this doesnt log');
Images.insert(file, function(err, fileObj) {
if (err) {
// handle error
} else {
// handle success depending what you need to do
var userId = Meteor.userId();
var imagesURL = {
"profile.image": "/cfs/files/images/" + fileObj._id
};
Meteor.users.update(userId, {
$set: imagesURL
});
}
});
});
}
However, this doesn't seem to save the file. It doesn't even run the FS.Utility.eachFile part. I've tried all sorts of variations, but if I listed them all I'm afraid it would make a terribly long post. I thought perhaps someone could point me to the right direction? I've tried saving the file into a variable and then inserting them... but I can't seem to get FS.Utility to run with a submit form.
Any help would be much appreciated!
For those who struggle with this later, it's an issue with the assumptions the package makes at the present (1-5-2015). In cfs_base-packages.js:
FS.Utility.eachFile = function(e, f) {
var evt = (e.originalEvent || e);
var files = evt.target.files;
if (!files || files.length === 0) {
files = evt.dataTransfer ? evt.dataTransfer.files : [];
}
for (var i = 0; i < files.length; i++) {
f(files[i], i);
}
};
It's looking for a your event to be structured like this: event.originalEvent.target.files, however the event triggered by submit is originalEvent.target: "" So a dirty work-around would be to do something like this:
Template.templateName.events({
'submit .myForumClass': function(event, template) {
event.preventDefault();
event.originalEvent.target = {};
event.originalEvent.target.files = event.currentTarget[0].files;
//0 is the position of the input field in the parent form
FS.Utility.eachFile(event, function(file) {
Images.insert(file, function (err, fileObj) {
//stuff
});
});
},
});
Hope the below example helps.
<template name="fileupload">
<form class="form-horizontal" role="form">
<input type="file" name="...">
<button type="submit" value="Update" class="btn btn-primary">Upload File</button>
</form>
</template>
Template.fileupload.events({
'submit form': function (event, template) {
console.log("Submit form called");
event.preventDefault();
var fileObj = template.find('input:file');
FilesCollection.insert(fileObj.files[0], function (err, fileObj) {
});
}
});
I am new to meteor, but it seems like this should be simple. I want to create a page that pulls a get variable down and displays it on the client
ex: www.example.com?yourname=bob
and the page would display
bob
I feel like this should be easy, but so far have not been able to do it. I created an call when the client loads that asks for the info, but it doesn't work on the first load for some reason. On subsequent loads it does.
<head>
<title>Page Chat</title>
</head>
<body>
<div id="wrapper">
{{> name}}
</div>
</body>
<template name="name">
{{name}}
<br />
<input type="button" value="Click" />
</template>
js code
if (Meteor.isClient) {
Meteor.startup(function(){
Meteor.call("getData", function(error, result){
if(error){
Session.set("name", "bob");
}
else{
Session.set("name", result.name);
}
});
});
Template.name.name = function(){
return Session.get("name");
};
Template.name.events({
'click input' : function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
}
if (Meteor.isServer) {
var connect = Npm.require('connect');
var app = __meteor_bootstrap__.app;
var post, get;
app
// parse the POST data
.use(connect.bodyParser())
// parse the GET data
.use(connect.query())
// intercept data and send continue
.use(function(req, res, next) {
post = req.body;
get = req.query;
return next();
});
Meteor.startup(function () {
});
Meteor.methods({
getData: function() {
return get;
},
postData: function(){
return post;
}
});
}
If possible I would like to share the data on the initial page load, it seems like a waste to create an separate page load to get information thats already there when the page is first loading.
It might be easier to use something like meteor-router. Then you could do
server side js:
Meteor.Router.add('/something', function() {
return this.params.yourname;
});
So if you visited example.com/something?yourname=Bob you would get back Bob.
Be careful when displaying something directly to the client from a querystring/input parameter as if you don't check it before it could be used for XSS.
Original url is "http://example.com:3000/test?xyz", you can use any one below
Router.current().request.url
"http://example.com:3000/test?xyz"
Router.current().url
"http://example.com:3000/test?xyz"
Router.current().originalUrl
"http://example.com:3000/test?xyz"
Router.current().route._path
"/test"
Router.current().route.getName()
"test"
https://github.com/iron-meteor/iron-router/issues/289
I am adding youtube video to a companies website and would like them to display on non-flash devices. I have been playing with the youtube iframe API and updated one of their examples to allow a user to click on a link to change the video in the iframe. The edited code is:
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function loadVideo(videoID) {
if(player) { player.loadVideoById(videoID); }
}
</script>
Click me to change video
</body>
</html>
The only thing I added was:
function loadVideo(videoID) {
if(player) { player.loadVideoById(videoID); }
}
This works fine in Safari, Chrome and Firefox but does not work in IE7, 8 or 9. In IE7 and 8 it returns an error "Object does not support this property or method".
Is this an issue with the API or am I doing something wrong?
I had a similar problem, and it turned out that you shouldn't call any of the methods on the YT.Player object (including loadVideoById) as long as onPlayerReady hasn't been called.
Doing a check if(player) {...} isn't sufficient, the Player object will be created and some properties will already be available in out without the methods you need being available.
You will need to call the load video function from the onPlayerReady event.
For example, if you want to load a video when clicking a thumbnail do this (this would require jquery but it should get the point across):
function onPlayerReady(evt) {
evt.target.playVideo();
//declare the click even function you want
$('#thumbs a).click(function(){
//get a data-video-id attr from the <a data-video-id="XXXXXX">
var myvideo = $(this).attr('data-video-id');
//call your custom function
loadVideo(myvideo);
//prevent click propagation
return false;
});
}
This way you can be sure the player is loaded.
Preventing click propagation with return false after the call to player.loadVideoById in my click event handler did the trick for me.