I have some data in table like "< n/a>", and i need to get it by text in div, but don`t find how.
<div class="one">red</div>
<div class="one">green</div>
<div class="one"><n/a></div>
$("div.one:contains('<n/a>')")
I don't think the problem is the selector, it is the html, you might have to escape the < and > like
<div class="one"><n/a></div>
Demo: Fiddle
Your html renders the content <n/a> as html elements... see the difference between the escaped version and non escaped version
Related
Mustache.js splits an HTML attribut between many HTML attributs between whitespaces. How can I keep the attribut as it is ?
The Object to render (width contains whitespaces)
cardpool = {
width:"col-md-offset-3 col-md-6 col-sm-4"
}
The template to use
<div class={{width}}>
</div>
The wrong result (Mustache.js splits the attributs between the whitespaces) :
<div class="col-md-offset-3" col-md-6="" col-sm-4="">
</div>
The expected result (I want to keep the whitespaces in the attribut)
<div class="col-md-offset-3 col-md-6 col-sm-4">
</div>
Do you have a solution to get the expected result ?
Thank you for your help.
This isn't Mustache's fault. Your template is rendered to this:
<div class=col-md-offset-3 col-md-6 col-sm-4>
</div>
Notice the lack of any quotation marks around your class names. A browser can internally convert this to what you're seeing (I'm guessing that you are inspecting the generated data inside your browser's dev tools).
Your template should include the quotation marks around the variable if you want to group the class names into a single class attribute value:
<div class="{{width}}">
</div>
Mustache is (mostly) agnostic about the context in which it's used, so it doesn't know that attributes in HTML should be surrounded by quotation marks if the values contain whitespace. Hence, you need to add those yourself.
Try with the triple mustache: {{{width}}}. This prevents HTML escaping, which it does if used as {{width}}.
Not familiar Mustache.js, but ejs for example works like this :
<div class="<%= preRendData.class %>"></div>
So try your code with quotes :
<div class="{{width}}">
I found this code when surfing through jquery tooltip. Please Suggest why we use certain code and what does it mean?
<pre class="prettyprint">
<head>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
contentAsHTML: true
});
});
</script>
</head>
<body>
<div class="tooltip" title="<img src="my- image.png" /> <strong> This text is in bold case !</strong>">
This div has a tooltip with HTML when you hover over it!
</div>
</body></pre>
The code that your entered is html encoded, it means that with html special characters:
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
contentAsHTML: true
});
});
</script>
</head>
<body>
<div class="tooltip" title="<img src=my-image.png /> <strong> This text is in bold case!</strong>">
This div has a tooltip with HTML when you hover over it!
</div>
</body></pre>
ISO-8859-1 is the default character in HTML 4.01, please see the list of XML and HTML character for more information.
For instance, "<" is "<" (less-than sign, U+003C)
The code you tried to understand creates tooltip when user put mouse on the div with the text
This div has a tooltip with HTML when you hover over it!
The content of the toolpit is between the title tag, so
<img src=my-image.png /> <strong> This text is in bold case!</strong>
img is to show a picture ant the text between strong... is strong :-)
They are HTML entities, used to show symbols on the page, such as those that are actual html code. So < > as an HTML entity is < > (less than, greater than). © is the copyright symbol etc
< is used for the < symbol. Similary > is used for the > symbol. These are known as HTML entities.
On a side note you can refer this for future reference.
Please refer to this resource for a better understanding http://w3schools.com/HTML/html_entities.asp
Those are html entities.
Reserved characters in HTML must be replaced with character entities.
Characters, not present on your keyboard, can also be replaced by entities.
I have an HTML code as follows
<div class="editable" ...>
<div class="code">
This is an example.
This is a new line
</div>
</div>
In CSS, code has "word-wrap: pre" attribute, such that the text in the inner DIV will show two lines. I use CKEditor with DIV replacement method to edit it. However, it becomes
<div class="code">
This is an example.This is a new line
</div>
The text inside the HTML tag will become one line long, beginning and trailing spaces and new line are stripped. So in CKEditor, although I have specified the config.contentsCss, it still shows one line because CKEditor has merge those two lines into one (I checked this in Chrome "Inspect Element" in CKEditor's iframe editor). Therefore, I see the source code or saved HTML, two lines format is not preserved because they are only one line.
I've googled and tried the CKEditor HTML writer or addRules to restrict the indent format and new line in begin/close tags, however, those seems work on HTML tags, not the document text. Is there any other methods to preserve line breaks of text?
I found it.
// preserve newlines in source
config.protectedSource.push( /\n/g );
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource
$(document).on('paste', 'textarea', function (e) {
$(e.target).keyup(function (e) {
var inputText = $(e.target).val();
$(e.target).val(inputText.replace(/\n/g, '<br />'))
.unbind('keyup');
});
});
Use the <pre> HTML tag. Like this:
<div class="editable" ...>
<div class="code"><pre>
This is an example in a "pre".
This is a new line
</pre></div>
</div>
<div class="editable" ...>
<div class="code">
This is an example NOT in a "pre".
Therefore this is NOT a new line
</div>
</div>
Or you can put a <br/> tag in between your lines. Its the ssame as hitting enter.
In my particular case, it was an extra tag, univis, that I needed to give similar semantics (i.e., leave indentation and inebreaks alone), and what we ended up doing was:
CKEDITOR.dtd.$block.univis=1;
CKEDITOR.dtd.$cdata.univis=1;
CKEDITOR.dtd.univis=CKEDITOR.dtd.script;
But that looks like it might or might not be extensible to classes.
I got some Craft sites running and I don't want to paste the config file everywhere. For everyone else still having the problem: Just use redactor. Install and replace the field type. Correct everything once and you're done.
This question is the continuation of I created textarea expander from script but after, it doesn't expands
Because i create a table with the textarea and i want call the plugin textarea.
Calling after the appendTo with jQuery("textarea[class*=expand]").TextAreaExpander();
I searching all the textarea with class="expand" and working.
How to edit this sentence for working only one div's interest?
Assuming your structure is like this:
<div id="parent">
<textarea class="expand"></textarea>
</div>
You can simply do this:
$('#parent > textarea[class*=expand]');
> is the child selector and #idselects the element with the given id.
Edit
As #VijayVerma stated in the comments: If your <div> doesn't have an ID yet, just add the ID to the textarea instead:
<textarea id="onlyme" class="expand"></textarea>
And select it with the ID-selector only:
$('#onlyme');
If your <div>s already have IDs, you're fine with the first solution I've posted.
give the div an id..let say
<div id="YourId"><textarea>..</textarea></div>
jQuery("#YourID > textarea[class*=expand]").TextAreaExpander();
Is there a way to store a HTML snippet in a variable using Javascript or jQuery like this? (obviously it's a non-working an example)
var mysnippet = << EOF
<div class="myclass">
<div class="anotherclass">
Some dummy text
</div>
</div>
EOF
And then insert it in the document using jQuery:
mysnippet.append($('#someelement'));
EDIT:
Please, read this before answering of commenting: What I have is a raw HTML snippet inside my JS file, and I need to store it in a Javascript variable using something like that EOF construction. I need to avoid putting it between quotation marks.
If it's not possible using Javascript and/or jQuery, then the question has no solution.
Just get the HTML code of the div you want by var content = $('#somediv').html(); and then append it to some div later on ! $('#otherdiv').append(content);
$().html(); delivers the HTML Content of that div. documentation: http://api.jquery.com/html/
$().append(<content>); appends the Content to a special div. documentatoin: http://api.jquery.com/append/
You could use javascript templates like ejs and haml-coffee.
You could write:
var mysnippet = "<div class='myclass'>"+
"<div class='anotherclass'>"+
"Some dummy text"+
"</div>"+
"</div>";
and then insert is using the append function (which takes the snippet as argument).
Yes. Fiddle example
JavaScript
var html = '<b>Bold</b>'
$('.anotherclass').append(html);
HTML
<div class="myclass">
<div class="anotherclass">
Some dummy text
</div>
</div>
Unfortunately nothing like << EOF is available. Here's one solution:
$el = $('<div />')
.addClass('myClass')
.append(
$('<div />')
.addClass('anotherclass')
.text('Foo Bar')
);
Thinking on the same issue I have found this discussion. What I have in mind is to put a hidden textarea, containing the html, and then retrieving the html from there.
Thus there will be no conflicts with doubled DOM ids, since textarea content isn't rendered as html.
For those who come across this as I have...
You may wish to use the new
<template>
tag in HTML5.
It still doesn't store the HTML in the JavaScript unfortunately :(