I have this fiddle. I am trying to format some code and am having trouble inserting and removing line numbers dynamically. It seems on the first page load the line numbers appear but once I click run then I can't get them back. On my website they don't show at all. I would like to let users click a button and turn on/off the line numbers dynamically:
<body>
<pre id="pre">
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</pre>
<button id="button">My button</button>
</body>
$(document).ready(function(){
$("#button").on("click", function(){
$("#pre").addClass("prettyprint").addClass("linenums").addClass("lang-js");
$("#pre").html(PR.prettyPrintOne($("#pre").html()));
});
});
Thanks!
EDIT: Note that this is different than How to add line numbers to all lines in Google Prettify?. In mine, the line numbers show up at first if I add linenums class to the pre tag manually. Problem is turning them on/off with jquery doesn't work.
By calling prettyPrintOne you're essentially circumventing the class based initialisation. That method has arguments that tell prettify how to behave.
You're trying to modify how prettify behaves with classes but prettify ignores that because it only cares about the arguments which are null, therefore they fallback to internal defaults.
See the source documenting the method:
/**
* Pretty print a chunk of code.
* #param {string} sourceCodeHtml The HTML to pretty print.
* #param {string} opt_langExtension The language name to use.
* Typically, a filename extension like 'cpp' or 'java'.
* #param {number|boolean} opt_numberLines True to number lines,
* or the 1-indexed number of the first line in sourceCodeHtml.
* #return {string} code as html, but prettier
*/
prettyPrintOne is essentially for parsing some code passed to it as a string, and returning the result, with the options controlled by those arguments. Conversely prettyPrint will traverse the DOM looking for the classes you're adding, behaving according to the classes it finds. As you want to toggle, you'll want to keep using prettyPrintOne so that we can have control of when to show prettified output, and when to show the original - more on that later.
As an aside, you're telling prettify to format JS when what you've got there is HTML including JS in script tags and CSS in style tags. So you'll want to use HTML as the lang extension, not JS.
Anyway, all you need to do is adjust your call to the below, additionally adding the prettify class solely so your prettify theme CSS applies:
$("#pre").html( PR.prettyPrintOne($("#pre").html(), "html", true) )
.addClass("prettyprint");
Et voila:
As for toggling, you just need to adjust the logic so that you store the original HTML somewhere on prettify-ing and restore it next time the button is clicked:
$("#button").on("click", function() {
// Cache jquery object
var $pre = $("#pre");
// If the element has a prettyprint class, it's already been manually
// prettified
if (!$pre.hasClass("prettyprint")) {
// Element hasn't been prettified, store the html in jQuery data
$pre.data("original-html", $pre.html());
// Manually prettify
$pre.html(PR.prettyPrintOne($pre.html(), "html", true))
.addClass("prettyprint");
} else {
// Element has been prettified, restore the orginal html stored in jQuery
// data and remove the prettyprint class, back to where we started
$pre.html($pre.data("original-html"))
.removeClass("prettyprint");
// Remove the jQuery data entry for our original HTML, so next time we
// start fresh
$pre.data("original-html", null);
}
});
Here's a jsfiddle showing that in action: https://jsfiddle.net/joshdavenport/68thqus1/27/
Related
I don't understand why this an issue.
Could someone explain the issue and may be a possible fix.
Thank you.
Error:
XHTML element "a" is not allowed as child of XHTML element "script" in this context
Code:
<script type="text/javascript">
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version # http://andylangton.co.uk/jquery-show-hide
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='More Info';
var hideText='Less Info';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
***$('.toggle').prev().append(' ('+showText+')');***
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
<script>
There are differences between HTML and XHTML. In XHTML, scripts don't have a CDATA content type: the contents is treated exactly the same as any other element. It's not just a NetBeans issue.
So, there are several solutions:
Put the script in a separate file, so that its contents will not be mangled by the XML parser. This is the best solution, as it doesn't have any drawbacks. It works for HTML and XHTML.
Make sure the contents don't contain any < or & signs. Also make sure that editing the script will not introduce < or & signs later on. Replace them with their entity references: < and & respectively.
If the script doesn't contain ]]>, you can put the whole content in a <![CDATA[ .. ]]> block. This may even work in HTML in some browsers, but as <![CDATA[ is not formally defined as part of the HTML standard, this method is (officially) not HTML compatible.
I am using the following code to change the attributes of a tag on my form
the tag
<input jwcid="licensingApprovalDate#CustomDatePicker" disabled="ognl:disabled || isLicensingApprovalDateDisabled()"
value="ognl:company.licensingApprovalDate" displayName="message:company.licensingApprovalDate"/>
the code to add new attributes to the above tag
function checkForChange(field) {
var approvalStatus = document.getElementById('licensingStatus').value;
if(approvalStatus == "Pass"){
document.getElementById('licensingApprovalDate').setAttribute("validators", "validators:maxDateToday,required");
} else {
document.getElementById('licensingApprovalDate').setAttribute("validators", "validators:maxDateToday");
}
}
this function is being called when ever licensingStatus is changed, it is working and when i inspect the element when the licensingStatus is changed the tag is changed correctly but this should add an * next to the licensingApprovalDate input box but it doesn't
Is there a way for the changes to take place the second the tag/licensinggStatus is changed?
validators is a parameter, and not an attribute. It appears in the template as an attribute because, hey, it's kinda XML.
Tapestry 3 was not designed for this level of dynamic behavior (it was cutting edge in 2003 though!). Given that its 2012, please consider an upgrade to Tapestry 5!
Does anyone know how to do replace multiple text by clicking a button with jQuery?
I've built a website that displays some text/data eg; "£100.00", but I what I need is to be able to 'replace' those monetary values with "£XXX.XX" with a 'Hide' button like you get on some banking websites. For example one web page has:
£100.00, £200.00, £130.00 etc etc..
...so when a user presses the Hide button, all of the numbers on the page turn to £XXX.XX. Ideally, the button should then display "Show" instead of "Hide" and switch back when toggled.
This is for a static dummy site, so no data base.
I suspect this is best handled with jQuery?
Thanks for your time,
D.
Case 1: Controlled Input
Assuming you can at least wrap all monetary values with something like this:
<span class="money-value">£200.00</span>
<span class="money-value">£300.50</span>
And that you can add button declared with:
<button id="secret-button">hide</button>
Then you could have some jQuery code doing this:
/**
* Simple search and replace version.
*/
$(function() {
$("#secret-button").click(function() {
$(".money-value").html($(".money-value").html().replace(/[0-9]/g,"X"));
});
});
or a more advanced one with:
/**
* Complet version.
*
* 1) on button click, if asking to hide:
* 1.1) iterate over all entries, save their text, and replace it with markers
* 1.2) toggle the button's text to "show"
* 2) on button click, if asking to show:
* 2.1) iterate over all entries, restore previous text
* 2.2) clear the hidden store
* 2.3) toggle the button's text to "hide"
*/
$(function() {
var hiddenStore = [];
$("#secret-button").click(function() {
if ($(this).html() == "hide") {
$(".money-value").each(function () {
var text = $(this).html();
hiddenStore.push(text);
$(this).html(text.replace(/[0-9]/g,"X"));
});
$(this).html("show");
} else {
$(".money-value").each(function (i) {
var text = hiddenStore[i];
$(this).html(text);
});
hiddenStore = [];
$(this).html("hide");
}
});
});
Complete solution is here: See here: http://jsfiddle.net/u79FV/
Notes:
this won't work for input field values
this assumes your text entries have been marked as shown above
Does what you want with the button's changing state.
Saves the values and puts them back.
Meant to work even if new fields are added dynamically.
Shankar Sangoli's answer uses a different way of saving the stored data, which you could as well consider (using the jQuery .data() method).
you may want to switch the button to an <input type="button" /> tag, in which case you'd use .val() instead of .html() to toggle its text.
Case 2: Uncontrolled Input
Assuming you don't have control over where the values may show up, then you need to do something a bit more complicated, which is to look in the whole page for something that would look like a currency format. I'd advise against it.
But, the jQuery Highlight plugin could be something to look at, as its code does something similar (in that it searches for pieces of code to modify), and you could then reuse some of solution 1 to make it fit your purpose.
That would be harder to design in a fool-proof fashion though.
You could use a regular expression:
var expression = /\d{1}/g;
var newString = myString.replace(expression,"X");
Then just dump newString into whatever control you need it to appear in.
Edit:
A jQuery idea for something like this would be to give all of the controls that have these numbers a common class identifier to make them easy to grab with the selector:
$(".numbers").each(function() {
$(this).text($(this).text().replace(/\d{1}/g, "X"));
}
... more readable ...
$(".numbers").each(function() {
var text = $(this).text();
var newText = text.replace(/\d{1}/g, "X");
$(this).text(newText);
}
If your markup is something like this you can try this.
<span>£1000.00</span><span class="showhide">Hide</span>
JS
$('.showhide').click(function(){
var $this = $(this);
var $prev = $this.prev();
if(!$prev.data('originalvalue')){
$prev.data('originalvalue', $prev.text());
}
if($this.text() == 'Hide'){
$this.prev().text($prev.data('originalvalue').replace(/\d{1}/g,"X"));
$this.text('Show');
}
else{
$prev.text($prev.data('originalvalue'));
$this.text('Hide');
}
});
In the above code I am basically storing the original value using jQuery data method within the span element itself which is used to display the actual value.
Once you click on Hide, get the previous span using prev() method and set its text with original value replacing all the numbers in it by X. Then change the link text from Hide to Show.
Next when you click on Show get the previous span using prev() method and set its text with the original value and change the link text from Show to Hide.
References: .prev(), .data()
$('#yourButton').click(function(){
var saveText = $('body').text();
$(this).data('oldText', saveText);
if ($(this).text() == "Hide"){
$('body').text($('body').text().replace(/\d{1}/, "X"));
$(this).text('Show');
}
else{
$('body').text($(this).data('oldText'));
$(this).text('Hide');
}
});
This is kind of a complicated problem actually. You will need to be able to save the state of the text when its in number form so you will be able to toggle back and forth. The above code is untested but hopefully it will give you an idea what you need to do.
function toggleMoney() {
$('.money').each(function() {
var $$ = $(this), t = $$.text();
$$.text($$.data('t') || t.replace(/\d/g, 'X')).data('t', t);
});
$('#toggleButton').text($('.money').text().match(/\d/) ? 'hide' : 'show');
}
http://jsfiddle.net/DF88B/2/
I have a form in which I want to edit a HTML template. It has 2 textareas, one for the HTML and another one for the CSS.
I'd like to use either TinyMCE or CKEditor for the HTML textarea.
Is there any way to change the content CSS in either of them to match the CSS in the CSS textarea on the run, so when I change the CSS it is automatically loaded into the editor?
Thanks.
I have no experience with CKEditor, but i know that it is possible with TinyMce. What you need to do is to write an own plugin which will provide the necessary functionality.
OnNodeChange in the 2nd textarea (the one with your css) you need to update the head of the first editors iframe. This code snippet to be executed on a special action (for example onNodeChange) should point you into the right direction:
var DEBUG = false;
var css_code = tinymce.editors[1].getContent(); // get content of 2nd editorinstance on page (your css)
iframe_id = tinymce.editors[0].id+'_ifr';
with(document.getElementById(iframe_id).contentWindow){
var h=document.getElementsByTagName("head");
if (!h.length) {
if (DEBUG) console.log('length of h is null');
return;
}
var newStyleSheet=document.createElement("style");
newStyleSheet.type="text/css";
h[0].appendChild(newStyleSheet);
try{
if (typeof newStyleSheet.styleSheet !== "undefined") {
newStyleSheet.styleSheet.cssText = css_code;
}
else {
newStyleSheet.appendChild(document.createTextNode(css_code));
newStyleSheet.innerHTML=css_code;
}
}
Be aware that this code will add a new style sheet everytime it is called - yielding in increasing the editor iframes head. So i think best practice is to clean up the last inserted style before appliing the new one. Removing the last Node of the head shozld be sufficient.
I am trying to avoid hard-coding each instance of this WYSIWYG editor so I am using jQuery to create an each() loop based on function name. Annoyingly InnovaStudio seems to explode when I try.
Documentation
Attempt #1
<script type="text/javascript">
/*
id = $(this).attr('id');
if(id.length == 0)
{
id = 'wysiwyg-' + wysiwyg_count;
$(this).attr('id', id);
}
WYSIWYG[wysiwyg_count] = new InnovaEditor('WYSIWYG[' + wysiwyg_count + ']');
WYSIWYG[wysiwyg_count].REPLACE(id);
*/
var demo = new InnovaEditor('demo');
demo.REPLACE('wysiwyg-1');
console.log('loop');
</script>
Effect
Works fine, but of course only works for a single instance of the editor. If I want multiple instances I need to use an each.
Attempt #2:
<script type="text/javascript">
var wysiwyg_count = 1;
//var WYSIWYG = [];
var demo;
(function($) {
$(function() {
$('.wysiwyg-simple').each(function(){
/*
id = $(this).attr('id');
if(id.length == 0)
{
id = 'wysiwyg-' + wysiwyg_count;
$(this).attr('id', id);
}
WYSIWYG[wysiwyg_count] = new InnovaEditor('WYSIWYG[' + wysiwyg_count + ']');
WYSIWYG[wysiwyg_count].REPLACE(id);
*/
demo = new InnovaEditor('demo');
demo.REPLACE('wysiwyg-1');
console.log('loop');
});
});
})(jQuery);
</script>
Effect
Replaces the entire HTML body of my page with JUST WYSIWYG related code and complains as no JS is available (not even Firebug, so can't debug).
Notice that I am hardcoding the name still. I only have one instance on the page I am testing it on, so when I get this hard-coded name working I will get the commented out code working along the same lines.
Does anybody know what the hell is going on here?
Solution: Don't bother trying to use InnovaStudio, went with CKEditor instead.
Even though you went for CKEditor you might be interested in a solution. You can supply a second argument to the REPLACE function. This second argument should also be a id, id from a element able to accept html output (like div, span, p).
demo = new InnovaEditor('demo');
demo.REPLACE('wysiwyg-1', 'wysiwyg-1-replaceDiv');
When the second argument is left out, InnovaStudio, writes the html output to the document by simply using:
document.write();
Hope this helps!
Why don't you use their own initialization code since version 4.3:
<textarea class="innovaeditor">
content here...
</textarea>
<script>
oUtil.initializeEditor("innovaeditor",
{width:"700px", height:"450px"}
);
</script>
The method is oUtil.initializeEditor(selector, option). The first parameter is selector and second is editor properties in JSON format.
The selector can be:
Css class name, if class name is specified all textareas with specified class name will be replaced with editor.
Textarea Id. If it is an Id, a prefix '#' must be added, for example oUtil.initializeEditor("#mytextarea").
Textarea object.
The second parameter is editor's properties. All valid editor's properties can be specified here for example width, height, cmdAssetManager, toolbarMode, etc.
Note that this method can be called from page onload or document ready event or during page load (as long as the object referred by selector are already rendered). This method available automatically when the page include the editor script.