in this example its replace the div container with other element but its get the other element from the yui function how can i make same example but with replace two divs in the html
HTML
<div id="demo">
<p><em>Click me.</em></p>
</div>
Script
YUI({ filter: 'raw' }).use("node", function(Y) {
var node = Y.one('#demo p');
var onClick = function(e) {
// e.target === node || #demo p em
var tag = e.target.get('parentNode.tagName');
// e.currentTarget === node
e.currentTarget.one('em').setContent('I am a child of ' + tag + '.');
};
node.on('click', onClick);
});
You mean, You'd like to replace another div or select another div?
In this example, em is selected and then its content is changed by setContent( "your new content" )
You can just select the e.currentTarget (the node or #demo p div) and setHTML() and build your div inside like string for example <div>content<div>, this is just one out of millions of ways to accomplish this.
have a look to this: http://www.jsrosettastone.com/
Related
I have some HTML elements which are hidden by default until user try to search for it. I am thinking to change the class of the element to show when the DataTable search completed (if found).
Refer to the jQuery code below where I implement the search, what is the next step to show the parent or the container of it?
E.g. if the search key is c or cc or ccc, how to show its parent (in this case is <li class="show">)?
jQuery
$("#txtSearch").on('keyup keypress blur change', function(e) {
var val = $(this).val();
$('#mytable').DataTable().search(val).draw();
});
HTML
<li class="hide">aaa</li>
<li class="hide">bbb</li>
<li class="hide">ccc</li>
Take a look at this code Snipp,Iterate over the Hide classes and extract the inner text then compare your search results.
$("#txtSearch").on('keyup keypress blur change', function(e) {
var val = $(this).val();
var numItems = $('.hide').length ;
for(var count = 1; count<=numItems;count++){
var index = count-1;
var searchResult = $(".hide:eq("+index+")").text();
if(val.indexOf(searchResult) > -1){
$(".hide:eq("+index+")").removeClass("hide").addClass("show");
}
else{
$(".hide:eq(" + index + ")").removeClass("show").addClass("hide");
}
}
$('#mytable').DataTable().search(val).draw();
});
I have a MathJax demo that can be viewed at Online Demo.
In this demo, I have some Tex markup within a div that gets rendered perfectly by MathJax.
But, if I programatically add some Tex markup to the above div by clicking Add Math Markup button followed by clicking Rerender Math Markup button, then it results in repeated rendering of previously rendered Math markup. This can be seen in following video: Math being rendered repeatedly
All I am doing when Rerender Math Markup button is clicked is calling the following method MathJax.Hub.Typset(divElement). The divElement is the div to which Tex markup was added programatically.
Demo code for my situation
<script>
function reRenderMath() {
var div = document.getElementById("mathMarkup");
//render Math for newly added Tex markup
MathJax.Hub.Typeset(div);
}
function addMath() {
var div = document.getElementById("mathMarkup");
div.innerHTML = div.innerHTML + "$$\sin^{-1}.6$$";
document.getElementById("btnRenderMath").disabled = false;
}
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<button type="button" onclick="addMath();return false;" id="btnAddMath" >Add Math Markup</button>
<button type="button" onclick="reRenderMath();return false;" id="btnRenderMath" disabled>Rerender Math Markup</button>
<div id="mathMarkup">
$$x^2 = x +2$$
</div>
Screen shot of repeated rendering
#Sunil thanks for the answer
Summarizing:
Required script:
var MathJaxUtils = (function () {
let obj = {};
let scripts = null;
obj.render = function (element) {
scripts = new Array();
$(element).find("script[id^='MathJax-Element']").each(function () {
scripts.push({
displayElement: $(this).prev("div")[0],
scriptElement: this
});
});
//remove all html within MathJax script tags so it doesn't get typset again when Typeset method is called
$(element).find("script[id^='MathJax-Element']").remove();
//render Math using original MathJax API and in callback re-insert the MathJax script elements in their original positions
MathJax.Hub.Queue(["Typeset", MathJax.Hub, element, typeSetDone]);
};
//callback for Typeset method
function typeSetDone() {
for (var i = 0; i < scripts.length; i++) {
$(scripts[i].displayElement).after(scripts[i].scriptElement);
}
//reset scripts variable
scripts = [];
};
return obj;
}());
Basic use:
let elem = document.getElementById("mathContainer");
MathJaxUtils.render(elem);
Demo:
math-jax-test
http://jsfiddle.net/Lc5gdvge/
In the fiddle above, I've showcased how text(), returns elements text and childrens' as well. How do I avoid this and only make it return "outerdiv"?
NOTE: Just click the blue container to call function.
$(document).ready(function() {
$('.outerdiv').click(function() {
var htmlstring = $(this).text();
alert(htmlstring);
})
});
NOTE 2: This has to be without the use of ID selector.
To get the text of only the .outerDiv and not the children elements, use the following code :
$(this).clone().children().remove().end().text();
What this does is, it clones the element, removes all the children tags, and goes back to the selected tag and gets the text.
The final code should look like :
$(document).ready(function () {
$('.outerdiv').click(function () {
var htmlstring = $(this).clone().children().remove().end().text();
alert(htmlstring);
});
});
I have a Kendo UI datepicker with placeholder data. Here is the HTML:
<input type="text" class="datepicker"' placeholder="yyyy-mm-dd" />
Here is the JavaScript:
var start = $(".datepicker").kendoDatePicker({
format: "yyyy-MM-dd",
parseFormats: ["MM/dd/yyyy"],
change: startChange
}).data("kendoDatePicker");
The Kendo UI datepicker displays the placeholder data in the same style as user entered data. I would like to style the placeholder data differently. Specifically, I would like the text to be gray and italicized. When user enters data, the style changes to solid black (non-italicized). Any thoughts on how to do this?
Well, placeholder is an HTML5 attibute and isn't specic to Kendo controls. As I understand it Kendo doesn't offer any support for placeholder over what is supported by the browser, and remember that only some browsers support this attribute; IE does not.
Anyway, to style the placeholder you'll have to use vendor prefix CSS properties, see here.
I use this..it will work on your HTML and you can style it too :)
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>
Consider the following HTML:
<div id="block-container">
<div id="some-background"></div>
<div id="text-div">Focus should be here when this HTML goes into the editor</div>
</div>
I want the caret be in the text-div -- more precisely in the first text element -- when it opens in the TinyMCE editor.
There could be a way to add some class like ".default-focused" to such element and set focus based on the class. Is there any other (generalized) way to achieve this?
The reason why I can't go with the ".default-focused" way:
1. It could be huge task to add class considering the amount of data I have and
2. More importantly, user can change the HTML and can remove the class.
Well, if you know in which element the caret is to be placed you may use this short function
// sets the cursor to the specified element, ed ist the editor instance
// start defines if the cursor is to be set at the start or at the end
setCursor: function (ed, element, start) {
var doc = ed.getDoc();
if (typeof doc.createRange != "undefined") {
var range = doc.createRange();
range.selectNodeContents(element);
range.collapse(start);
var win = doc.defaultView || doc.parentWindow;
var sel = win.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof doc.body.createTextRange != "undefined") {
var textRange = doc.body.createTextRange();
textRange.moveToElementText(element);
textRange.collapse(start);
textRange.select();
}
},