Embedly/Jquery-Preview has been fantastic. However, I'm trying to change the location of the preview result, and having trouble. Right now, the result appears right below the input field...but I'd rather have it in a separate part of the page. Is there a way to do this?
I've tried changing the location of the selector and loading divs, but that hasn't helped. It seems to ignore those divs and put it right below the submit button.
Below is my code:
<form accept-charset="UTF-8" action="private" class="new_comment" data-remote="true" id="new_comment" method="post">
<input class="photo_comm" id="comment_comment" name="comment[comment]" placeholder="add a comment or link..." size="30" type="text" /><span type="text" id="counter">1000</span>
<input class="btn btn-primary btn-mini" data-disable-with="Submitting..." name="commit" type="submit" value="Post" />
</form>
<!-- Placeholder that tells Preview where to put the loading icon-->
<div class="loading">
<img src='http://embedly.github.com/jquery-preview/images/loading-rectangle.gif'>
</div>
<!-- Placeholder that tells Preview where to put the selector-->
<div class="selector"></div>
$('#comment_comment').preview({ key:'60f1dcdf3258476794784148a6eb65e7', // Sign up for a key: http://embed.ly/pricing
selector : {type:'rich'},
preview : {
submit : function(e, data){
e.preventDefault();
$.ajax({
dataType: 'script',
url: this.form.attr('action'),
type: 'POST',
data: data
});
},
},
autoplay : 0,
maxwidth : 400,
display : {display : 'rich'}
});
