I'm using a short Jquery Script to make a live preview of a few input fields. Now with TinyMCE i can't get the value of tinyMCE to insert it into a div. I found another thread Get value of tinymce textarea with jquery selector, but i not really can figure out how to use this tipps on my code. I'm a beginner with jQuery and very thankful vor every help.
JS Fiddle
$(document).ready(function() {
updatePreview();
$('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',updatePreview);
});
function updatePreview(){
var tinymce = $('#lp-message');
tinymce.html($('#message').val());
}
Sorry, but there are lot of mistakes in Your code. :/
This is the only code that you need under javascript section.
tinymce.init({
selector: "textarea",
setup : function(ed) {
ed.on("keyup", function(){
$('#lp-message').html(tinymce.activeEditor.getContent());
});
}
});
And here is your html code:
<div id="live-preview-form">
<textarea id="message">Easy! You should check out MoxifvdfvdfvfdveManager!</textarea></div>
<div id="lp-message"></div>
As u can see you have to use tinymce API to get content from editors. And "keyup" events should be used on editor not on the "textarea".
I hope that I helped You. :)
Related
I'm using the excellent Datatables with Vedmack's YADCF plugin, which is working great. The only thing I can't figure out is ...
How do I switch focus to a specific YADCF filter text input box on page load? I've tried the following in and outside of document.ready, but neither work:
$('#yadcf-filter--Table-7').ready(function() {
$('#yadcf-filter--Table-7').focus();
});
... and ...
$('#yadcf-filter--Table-7').load(function() {
$('#yadcf-filter--Table-7').focus();
});
The input box doesn't appear for about 2 seconds after page load and the ID is appended by the plugin, which I assume is why I'm struggling to get it to work.
Any ideas, please?
Thanks!
Sorry - ignore this, the following works fine, I'd just made a daft mistake earlier on:
$(document).ready(function() {
yadcf.init(Table, [
etc, etc...
];
$('#yadcf-filter--Table-7').ready(function() {
$('#yadcf-filter--Table-7').focus();
});
});
I've been struggling with Javascript, of which I'm very unfamiliar.
I'd like to highlight the div after scrolling. I keep finding references to this highlight example, but anything I try doesn't do anything.
I think the problem is the example is showing how to do it in a simple html file with everything self-contained. I'm working within a PHP ecommerce platform (prestashop) and have to put the JS and CSS in their respective places. I'm not understanding how to call what's in that example correctly. Since I don't get any errors, I don't know how to troubleshoot. No errors, it just doesn't do anything.
In my HTML I have
<div>
<a onclick="test('myID')">test highlight</a>
<div id="myID">Here's the div</div>
</div>
In the JS I have
function test(myId){
$( document ).click(function() {
$( myId ).toggle( "highlight" );
});
}
Well, I fixed your problem buddy ;-)
This is the html
<div>
<a>test highlight</a>
<div id="myID">Here's the div</div>
</div>
the jQuery code
function test(myId) {
$("#" + myId).toggle("highlight");
}
$("a").click(function() {
test("myID");
});
What I did is remove your onclick from the anchor element and binded the click event with jQuery instead. And that did the trick ;-)
Here's a fiddle if you want to see it in action.
EDIT
The reason my highlighting wasn't functioning as you wished for, was because I was using an older version of the UI library. And the update also contains a way to use classes to bind click events. The fiddle above will show you.
Or if you what it more link the Highlight example you linked
you could do it like this:
EDIT
Look at this, it will maybe help you:
Fiddle
This is the HTML:
<div>
<p>Click to toggle</p>
<p>highlight</p>
<p>on these</p>
<p>paragraphs</p>
</div>
This is the Java script:
$('p').toggle(
function () {
$(this).css('background-color', 'yellow');
},
function () {
$(this).css('background-color', 'white')
});
But it is highly dependent on which version of jQuery you end up using.
This example uses 1.8.3
Take a look at https://www.simple.com website. See the way menu (& submenu) works when you scroll the webpage.
Does anyone know what it's called or know how it works? I'm trying to find a example or plug that can do this.
Thanks...
It is called fixed navigation bar and here is a great tutorial
http://www.fuelyourcreativity.com/how-to-create-a-fixed-navigation-bar-for-your-website/
It is very simple using jquery scroll() event handler.
You can bind it using following code
$(window).scroll(function () {
//your code goes here
}
read more at http://api.jquery.com/scroll/
It's just a simple anchor tag they've used along with some jQuery. A quick example here for you.
Create your links as normal Blog. This creates an anchor to move to your blog section.
Add a class to your element so it's now like: Blog
Next, add the jQuery code below to your page.
Don't forget to include the jQuery library..
$(document).ready(function() {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
I have decided to delete the question as there's no answer to what I'm looking for and there's no need to leave behind an unanswered post 2 years from now.
I am trying to create a overlay dialog box using CSS . I wrote the css but I am not able to display the overlay dialog box. Any help would be greatly appreciated.
Check out my attempt here. Also this should work in IE9 and firefox.
http://jsfiddle.net/tGDKT
why not just use jQuery UI's dialog:
http://jsfiddle.net/maniator/tGDKT/15/
$(function() {
$('.clickme').click(function() {
$('iframe').dialog();
});
});
You could also attach the method in the javascript, unobtrusive style. Give the <a> an id or:
$('a').click(calculateEmbeddedWindowSize);
... would call the function for every link on the page.
I keep getting "calculateEmbeddedWindowSize is not defined" in the console. Your javascript does not seem to be there at all on the page.
Edit - Try this: http://jsfiddle.net/tGDKT/7/
I have the following:
POST page that allows users to write text in CKEditor
VIEW Page, that views the text in CKEditor
How can I make CKEditor in the view page READ only, meaning the user can not edit the text in the note? The reason I want to use CKEditor in the view page is for 2 reasons:
1. I can use JavaScript to move the editor from disabled to enabled
2. Keep the styles the same from the POST & View page.
Is this possible? Thanks!
B
not sure if you are still looking for an answer but here is what I did and it was much simpler than the work around they suggest.
<script type="text/javascript">
window.onload = function () {
CKEDITOR.on("instanceReady", function (ev) {
var bodyelement = ev.editor.document.$.body;
bodyelement.setAttribute("contenteditable", false);
});
CKEDITOR.replace('editor1');
};
</script>
Check this CKEditor forum entry where the issue is discussed, and a CKEditor team member provides a workaround.
An important update to this thread, as of 3.6 this is supported by:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly