I am working with open video annotation JavaScript library (OVA) to annotate some content in a div tag. However, I would like to change the content of the div tag after page load "for example, using a text box and a button". The problem is that the annotation library does not work on the div content anymore (not on the text, nor on the video).
So, is there a functionality to reset the library to work again on the new content of the div tag.
I have got to solve my problem by destroying the plugin variable and then create a new instance.
The variable was initialized like this:
var ova = new OpenVideoAnnotation.Annotator($('#airlock'),options);
And I have destroyed it like this:
ova = null;
delete ova;
Then simply create a new instance of the variable:
var ova = new OpenVideoAnnotation.Annotator($('#airlock'),options);
And everything worked just fine.
Related
I need to open a BootstrapDialog and load a remote page inside (PHP, CFM or whatever). I want to know if it's possible to change dialog properties (mainly the TITLE) from that loaded page. I tried to insert the following code but It doesn't work:
<script>
$('#openedDialog').setTitle('Blah, blah');
</script>
If I add:
alert($('#openedDialog'))
it works. So the object exists, it's just I don't have access to its methods.
Any ideas?
As you are using bootstrap modal the title element is using h4 tag with a class modal-title.So you can use text instead of setTitle
$('.modal-title').text("new title")
and if you are using this bootstrap dialog plugin then use
$('.bootstrap-dialog-title').text("new title")
or
var dialogInstance = new BootstrapDialog();
dialogInstance.setTitle('new title');
else if you given a id to the title then
$('#myTitleID').text("new title")
I am trying to add a clickable div to the sceditor. The basic requirement is to use a wysiwyg and programmatically add an element into the editor, which can display a popup when the user clicks on it.
To do this I use:
var text = "<div onClick='editdiv(this)'>"+name+"</div>";▓
$('.sceditor').sceditor('instance').insert(text);
This inserts the div into the editor but when I click on it, I get an error saying editdiv is not defined. Whereas editdiv is a function present inside the javascript same javascript file which runs the above code.
Can someone please tell me what am I doing wrong and/or a way to achieve what I want? Thanks!
What you want is impossible to get without drawbacks.
Events can only be caught inside an active browsing instance (I think that's the name). Everything inside a contentEditable=true" is not an active browsing instance
Based on that, You need to terminate the contentEditable and make a new one inside. For example (code not tested):
var text = "<div contentEditable='false' onclick='editdiv(this)'><div contentEditable='true'>"+name+"</div></div>";
$('.sceditor').sceditor('instance').insert(text);
That should make that click event work as expected
I am using ember js as my front end MVC. I have a Question and Answers module which is similar to stack overflow where there are 2 fields one for the title and the other for the description.
Since the description is a text area and I have plugged it with Froala wysiwug editor.
Now I get the content typed in the froala text editor in ember by using
var editorText = $('.froala-element');
var desciption = editorText.html();
in the ember controller.
For example, if I console log what comes from the textarea
<p><img class="fr-fin" data-fr-image-preview="false" alt="Image title" src="/img/4ad38ae5b4a73cbad30987ac441075998d1e6b35.jpg" width="300"></p><p><br></p>
And I save this string in the database. All works good.
Now I want to use lightbox plugin
And as you notice, to make use of the plugin the image needs to be wrapped inside an anchor tag and added few data-lightbox attributes
Since I am stroing the image tag markup in the database, what is the best approach wrap the image inside the anchor tag
I got 2 options -
1) Before saving the image in the database, do a pattern match with javascript and find the image and wrap it inside an anchor tag.
2) In the didInsertElement hook of ember view, find all the images on the page and perform a dom manuplation and wrap the images inside anchor tag.
Is there any other way I could get this working ? Need some suggestions.
First of all you should get the HTML inside the editable area using the methods that are available in the editor, in this case getHTML method http://editor.froala.com/examples/getHTML. It is preferable to do so because there are some cleanups which the getHTML method does and it's good to make them.
$('#edit').editable('getHTML', false, true);
You can use the RegEx approach that you suggested, but you have to take into consideration not to wrap it twice. Another option would be to do that using jQuery which is easier.
var editorText = $('#edit').editable('getHTML', false, true);
var $div = $('<div>').html(editorText);
// Wrap image.
$div.find('img').each (function (index, img) {
var $img = $(img);
// Check if image is already wrapped in your anchor tag.
if (!$img.parents('a.your_anchor_selector').length) {
$img.wrap('<a class="your_anchor"></a>');
}
});
var description = $div.html();
I'm trying to dynamically insert some HTML/JS/CSS on command. (holding
off this code for page loading speed). I found a neat way
of doing this, inserting a HTML5 tag pointing at the html-
file which in turn references the css and js, like so:
function toggleObject() {
var object = document.getElementById('myObject');
if (!object) {
var e = document.createElement('object');
e.setAttribute('data', 'testing.html');
e.setAttribute('id', 'myObject');
// inject data into DOM
document.getElementsByTagName('body')[0].appendChild(e);
} else {
document.getElementsByTagName('body')[0].removeChild(object);
}}
The only problem with this is that upon inserting the tag the object (height, width and position as defined by css) flashes white before loading which isn't very attractive.
Is there a remedy for the ugly white flash?
Note! I experimented with toggling the visibility property of the object and firing up a loader div, but I can't figure what event would be able to call off the loader and turn visibility back on when the object is fully injected in the DOM. In end I settled for just a timeout of 1 sec, which feels less than optimal..
Try setting the visibility to hidden when you create the OBJECT Element and then setting it to visible once it has been appended to its parent Node.
I am trying to embed a pdf into my webpage using an object that will fallback to an iframe which loads the pdf through an external rendering service for users that do not have acrobat installed.
I am trying to do it like this:
var container = document.createElement("div");
var object = document.createElement("object");
var iframe = document.createElement("iframe");
$(container).append(object);
$(object).append(iframe);
$("body").append(container);
This works in firefox but causes an error in IE in the jquery core code. It breaks when I append the iframe to the object.
I need to create the content in a way that will give me access to both the object and the iframe element because I do not have a reliable way to detect if the user has acrobat or not, so I am depending on the browser to display the correct content and just styling both the iframe and the object so that either one will look okay.
What is an alternate and cross-browser approach?
have you tried it like this?
var object = $("<object>");
var container = $("<div>").append(object);
$(object).append("<iframe>");
$("body").append(container);