Im trying to install tinymce to use with my text editor to allow the user to have a text box just like the stack overflow one. I cant get it to display though
ive put this in the head of my index file
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script src='https:https://cloud.tinymce.com/stable/tinymce.min.js'>
</script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({selector:'infotextarea'});
</script>
then in my info page ive put
<textarea id="infotextarea">Your content here.
</textarea>
can anyone explain why its not displaying
It may be that at the time you run the tinymce.init function, it is not yet rendered and there is no textarea in the DOM.
Try debugging your code on the following line:
<script>
debugger;
tinymce.init({selector:'infotextarea'});
</script>
When the web's execution has stopped on that line, in the development console of your browser type the following:
$('#infotextarea').length
If the size is greater than 0, textarea exists at that moment and it is another problem, but if it shows 0 is that you have not yet created that view, this will help us get more information about your problem.
If you want to target a <textarea> by ID you need to use a valid CSS selector.
selector: "#infotextarea"
(note the # at the beginning of the string)
I would also note you appear to be loading TinyMCE 3 separate times - I have no idea why you would need to do that - loading it once should be sufficient
Its not a perfect answer to my question, but i used ckeditor and it worked perfectly.
I must have a mistake somewhere that i or my team could not find with tinymce
Related
If you forget to close a HTML-Tag, Chrome will validate your code and try to fix problems like this.
I had a major problem because I forgot a closing Form-Tag, and instead of closing it correctly, Chrome deleted a following form, not the inputs, simply the Form-Tags.
When I looked at the Source Code itself, the Form-Tag was there, but not in the Elements-Tab in the console.
So at first, I thought it must have something to do with some JS deleting this DOM-Node and set a DOM-Breakpoint to find the script.
To cut a long story short, it took me hours to find out, that no JS deleted my form, but Chrome itself thought: There is a missing so I delete some other to fix that...
Is there any possibilty to see if Chrome automatically changes your DOM?
Thank You!
The browser Engine does indeed. They use string replace methods, although it happens internally.
<div>
</div>> // mistake
<div> //missing end tag
<div></div>
---------------------------------------------------
Methods
file=file.stringreplace('>>', '>')
an uneven count will add the missing div just after the next beginning div and conditionally if the missing is not found by the end of the file:
file=file.stringreplace('
<div>', '</div>
<div>')
The Parsing Engine after the missing and broken tags are repaired then parses the file and can then with a positive count set the screens GUI widgets by opening and closing tags as GUI Frames. It does this by adding tokens delimiters to the actual div tags making them easily distinguished from each other.
<div1s>
</div1e>
<div1s>//section columns
<div2s></div2e>
<div2s></div2e>
<div2s></div2e>
</div1e>
<div1s>Footer</div1e>
-----------------------------------------------------
The GUI Frame Tokens
for each "<dive1>"{
FrameCreate(CSS--ATTRIBUTES FROM ASSOCIATIVE ARRAYS--)
//the GUI Frame Widgets VERTICAL SECTIONS
}
//Next it finds the nested divs2 and embeds these into the thir parents above but with embedded Text Widgets also.
FrameTextBoxCreate(--CSS MATED ATTRIBUTES RULES--)
div3 etc------and so on.
In fact it is in the WebView GUI Widget Sets in its customized Mosaic Canvas Widget Sets in Chrome would be where they are repaired.
Good Day,
I am working through freecodecamp and am currently grappling with the quote generator problem. I have run into a bit of an issue with getting functionality for me scripting a change when clicking the button. Basically I have my own code which I'll post below, but also trying to simply copy and paste the code from them I am still unable to get functionality in my button.
I am sure it's an honest and easy mistake but hopefully that should make it all the easier to resolve :) Let me know if you have any questions and I genuinely appreciate it!
(please note I simply want to change the display message upon clicking the button)
<script>
$(document).ready(function(){
$("#getMessage").on("click", function(){
$(".message").html("New Message");
});
});
</script>
<div id="wrapper">
<button type="button" id = "getMessage" class = "btn btn- primary">Generate New Quote</button>
</div>
<div class= "text-center">
<div class = "message">
Sample
</div>
</div>
As the others have mentioned, you are most likely not adding jQuery, yet you are attempting to use it ($). To confirm this, check your console. It's probably filled with Uncaught ReferenceError: $ is not defined.
Assuming you're using CodePen as the challenege says in the objective, you can very quickly and easily include jQuery. To do so, just click the settings cog next to JS, use the Quick-add drop down, and select jQuery.
If you wish to include it manually (as you will most likely have to in future development) I recommend Drefetr's answer.
There do not appear to be any major issues with the code (with respect to the logic, the editor may have rendered your formatting a little nastily).
Can you confirm that you have included the jQuery libraries within the header of your HTML document? e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
For more information: https://developers.google.com/speed/libraries/#jquery
I have the following gist...
https://gist.github.com/4445255
I try adding it to my Blogger entry (per here) into my post by adding this to the very end...
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
finally in position I add
<div class="gistLoad" data-id="4445255" id="gist-GistID">Loading ....</div>
But it just shows loading...
The script you just referenced (gistLoader.js) contains a call to the function initGist(), which I do not see anywhere.
It is also looking for a DOM element by the id "gistPrinter", when the element you have created has an id of "gist-GistID".
I'm not familiar with gist, maybe someone else can correct me.
EDIT: I found initGist() here: https://raw.github.com/moski/gist-Blogger/master/public/gistBlogger.js
I hadn't yet converted my project over to a Dynamic View. So I went to Template>Dynamic View.
There is a little issue, saving formatting only seems to work in IE for dynamic views...
http://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY%5B1-25-false%5D
You forgot to setup on of the attributes. It should look like this.
<div class="gistLoad" data-id="4445255" id="gist-4445255">Loading ....</div>
I had recently found this issue wherein the gist was not loading after putting the embed url eg
<script src="https://gist.github.com/dishabhatt123/43e98122304000687293b4c3ef3dc474.js"></script>
directly into the HTML view of my blog. Here is what has finally helped me after grilling down.
Basically browsers does not support random included scripts hence using rawgist. Place the below script on the top of bottom of the page.
<script src="https://rawgit.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
Then, add the div as under:
<div class="gistLoad" data-id="43e98122304000687293b4c3ef3dc474" id="gist-43e98122304000687293b4c3ef3dc474">Loading or something, this is just text to display while the browser pulls the gist....</div>
Here, in the above div, data-id ="whereveryourgistidis" and id="gist - whereveryourgistidis"
In the above example of embed url, my gist Id is '43e98122304000687293b4c3ef3dc474'. You can replace it with your gist id from the embed url.
Please Note: you will not see the gist in 'Compose view'. But when you preview your blog, you can see it!!
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.
I'm having a ton of problems with every version of IE, one of which is that IE7 won't register input in this text input field.
http://www.flightm8.com/redesign
I'm a bit nervous about posting the link since the site looks a mess and doesn't function properly in any version of IE at the moment, and it is still quite a way off being ready for public consumption. But if anyone can shed any light on this particular problem I'd very much appreciate it.
So the question is: What is causing this problem in IE7?
Update: I've also added an additional textfield at the bottom of the page to try and rule out any CSS wierdness that might be causing the problem.
<form method="post" action="nowhere.php">
<input type='text' name='test' value='testing' />
</form>
And I still can't enter any text, or select the text that is in there. I'm wondering now if it's a problem caused by running a standalone version of IE7 and IE6.
thanks
-t
the function causing problem is this one :
function modalAlert
the call that need to be debugged is this one :
modalAlert("NO SELECTIONS");
in
function findRoutes
the line that bug is :
$("#dialog").css("top", dTop);
first, you should avoid iframes when you can, why don't you do :
var message = $('<div></div>').load('/modal/"+modalpage);
instead of crappy code like this :
var iframe = "<iframe id='modal_frame' width='533' height='292' src='/modal/"+modalpage+"' >You didn't give me any information</iframe>"
If you don't need iframes, don't use them !
$('body').append(message);
I have IE7 on win xp (native), I was able to enter text but after a freeze (when you add all those markers), then when entering text and clicking on "find routes", there's a bug that i just explained to you ...
I would imagine it is because the input box doesn't have a 'name' field, which is used when posting form data.