The function I tried.
function handleChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 100) input.value = 100;
}
</script>
Below is the line of code I would like to limit the amount displayed.
<rich:column>
<h:outputText value="#{logresult.notes}" onchange="handleChange(this);" />
</rich:column>
Edit:
Found a solution from another Helpful user.
Since some people want to report my answers and block any help I can get. I will post the answer here.
Use CSS or a tag attribute: max-lines: 1;max-width: 200px;
Related
I am generating a PDF using nodejs with pdf-creator-node and I got success.
My requirement is I need to generate a PDF with Height X Width = 926px X 1296px.
I don' know what css I should write to generate this dimension pdf.
right now if I set div or body height and widht with above mentioned dimension I am getting 3 pages
this is what I tried
#page {
width: 1296px;
height: 926px;
}
<div
class="parent-div"
style="
width: 1296px;
height: 926px;
background-color: #faf0e6;
border: 1px solid red;
"
></div>
jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:
Go to https://github.com/MrRio/jsPDF and download the latest
Version.
Include the following Scripts in your project:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in a PopUp:
var doc = new jsPDF();
var elementHandler = {
#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
**For me this created a nice and tidy PDF that only included the line 'print this to pdf'.
Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue. It states:**
Because the matching is done against every element in the node tree, my desire was to make it as fast as possible. In that case, it meant "Only element IDs are matched" The element IDs are still done in jQuery style "#id", but it does not mean that all jQuery selectors are supported.
Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me. Instead you will have to add the same handler for each and every element, which you want to ignore like:
var elementHandler = {
#ignoreElement': function (element, renderer) {
return true;
},
#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
From the examples it is also stated that it is possible to select tags like 'a' or 'li'. That might be a little bit too unrestrictive for the most use cases though:
We support special element handlers. Register them with a jQuery-style ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) There is no support for any other type of selectors (class, of the compound) at this time.
One very important thing to add is that you lose all your style information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3, etc., which was enough for my purposes. Additionally, it will only print text within text nodes, which means that it will not print the values of textareas and the like. Example:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
I require to show the bullets instead of numbers in my input field. for that is there any easiest way? I like to use some bullet based fonts so number will be hidden.
if so, any one share me a free fonts which gives only bullets for numbers?
<input type="tel" value="●">
I tried like above. but still i like to go for bullet fonts.
If it's the ability to view and hide it's value, you could use a bit of JS to set its type attribute to tel or password?
<input type="password" id="field">
<script>const toggleVisibility = () => {
let element = document.querySelector("#field");
element.setAttribute("type", (element.getAttribute("type") == "password") ? "tel" : "password");
}
</script>
Hope that helps, if that's not what you're looking for, then you might find this CSS property useful: -webkit-text-security: disc;
Try this:
input {
-webkit-text-security: disc;
}
I have to develop a tool for automatic conversion from one E-learning standard Content Package to another, as of now I've considered IMS and SCORM but I didn't completely understand what could be the best reason for developing an automatic conversion tool from IMS to SCORM or vice-versa. I mean what benefits can one avail from such tool? This is the reason which I've got in one technical paper. Can anyone please explain and clarify this or tell me some good reason behind developing such a tool:
"IMS [6] and SCORM [7] specications share many of their
characteristics but also have some key differences in the
representation of the structure of the learning content. Other
important issue to be considered is the extension of these systems and
the huge number of organizations that use them. This situation leads
to the fact that the same contents are created, maintained, modied
and so on [8]. These are usually not identical copies, but the
contents are the same and aim to the same learning objective. So it
would be useful to share the work among the organization to avoid
repeating the work over and over again. This would save time and
resources and would lead to high quality contents. The main obstacle
to get this is the, previously presented, existence of different types
of models for contents. From all of this, we can infer the utility of
automatic conversion between formats. This conversion will allow the
interaction between learning platforms at a high level of automa-
tion." - E-LEARNING CONTENTS AUTOMATIC CONVERSION By Guiterrez, Jose Maria et al.
JavaScript(SCORM Package)
<script type="text/javascript">
<![CDATA[
var numQuestions = 2;
var rawScore = 0;
var actualScore = 0;
var question0;
var question1;
var key0 = 0;
var key1 = 1;
function getAnswer()
{
doLMSSetValue("cmi.interactions.0.id","key0b8");
doLMSSetValue("cmi.interactions.0.type","choice");
doLMSSetValue("cmi.interactions.0.correct_responses.0.pattern",
"0");
for (var i=0; i < 2; i++)
{
if (document.getElementById("quizForm8").key0b8[i].checked)
{
question0 = document.getElementById("quizForm8").key0b8[i].value;
doLMSSetValue("cmi.interactions.0.student_response",question0);
break;
}
}
doLMSSetValue("cmi.interactions.1.id","key1b8");
doLMSSetValue("cmi.interactions.1.type","choice");
doLMSSetValue("cmi.interactions.1.correct_responses.0.pattern",
"1");
for (var i=0; i < 2; i++)
{
if (document.getElementById("quizForm8").key1b8[i].checked)
{
question1 = document.getElementById("quizForm8").key1b8[i].value;
doLMSSetValue("cmi.interactions.1.student_response",question1);
break;
}
}
}
function calcRawScore(){
if (question0 == key0)
{
doLMSSetValue("cmi.interactions.0.result","correct");
rawScore++;
}
else
{
doLMSSetValue("cmi.interactions.0.result","wrong");
}
if (question1 == key1)
{
doLMSSetValue("cmi.interactions.1.result","correct");
rawScore++;
}
else
{
doLMSSetValue("cmi.interactions.1.result","wrong");
}
}
function calcScore2()
{
computeTime(); // the student has stopped here.
document.getElementById("quizForm8").submitB.disabled = true;
getAnswer();
calcRawScore();
actualScore = Math.round(rawScore / numQuestions * 100);
alert("Your score is " + actualScore + "%")
doLMSSetValue( "cmi.core.score.raw", actualScore+"" );
var mode = doLMSGetValue( "cmi.core.lesson_mode" );
if ( mode != "review" && mode != "browse" ){
if ( actualScore < 50 )
{
doLMSSetValue( "cmi.core.lesson_status", "failed" );
}
else
{
doLMSSetValue( "cmi.core.lesson_status", "passed" );
}
doLMSSetValue( "cmi.core.exit", "" );
}
exitPageStatus = true;
doLMSCommit();
doLMSFinish();
}
]]>
</script>
HTML
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Other Code -->
<body>
<div id="outer">
<div class="QuizTestIdevice" id="id8">
<script src="calculate.js" type="text/javascript"></script>
<form name="quizForm8" id="quizForm8" action="javascript:calcScore2();">
<div class="iDevice_inner">
<div class="passrate" value="50"></div>
<div class="question">
<div id="taquestion0b8">
1> TEXT FOR QUESTION 1.
</div><br />
True<input type="radio" name="key0b8" value="0" id="taoptionAnswer0q0b8" />
False<input type="radio" name="key0b8" value="1" id="taoptionAnswer1q0b8" />
</div><br />
<div class="question">
<div id="taquestion1b8">
2> TEXT FOR QUESTION 2.
</div><br />
True<input type="radio" name="key1b8" value="0" id="taoptionAnswer0q1b8" />
False<input type="radio" name="key1b8" value="1" id="taoptionAnswer1q1b8" />
</div><br />
<input type="submit" name="submitB" value="SUBMIT ANSWERS" />
</div>
</form>
</div>
</div>
</body>
</html>
Javascript and HTML for IMS Package
<html>
<body>
<div class="QuizTestIdevice" id="id8">
<script type="text/javascript">
<!-- //<![CDATA[
var numQuestions = 4;
var rawScore = 0;
var actualScore = 0;
var question0;
var question1;
var key0 = 0;
var key1 = 1;
var key2 = 0;
var key3 = 0;
function getAnswer()
{
for (var i=0; i < 2; i++)
{
if (document.getElementById("quizForm8").key0b8[i].checked)
{
question0 = document.getElementById("quizForm8").key0b8[i].value;
break;
}
}
for (var i=0; i < 2; i++)
{
if (document.getElementById("quizForm8").key1b8[i].checked)
{
question1 = document.getElementById("quizForm8").key1b8[i].value;
break;
}
}
}
function calcRawScore(){
if (question0 == key0)
{
rawScore++;
}
if (question1 == key1)
{
rawScore++;
}
}
function calcScore2()
{
getAnswer();
calcRawScore();
actualScore = Math.round(rawScore / numQuestions * 100);
document.getElementById("quizForm8").submitB.disabled = true;
alert("Your score is " + actualScore + "%")
}
//]]> -->
</script>
<form name="quizForm8" id="quizForm8" action="javascript:calcScore2();">
<div class="iDevice emphasis1">
<img alt="" class="iDevice_icon" src="icon_question.gif" />
<span class="iDeviceTitle">SCORM Quiz</span>
<div class="iDevice_inner">
<div class="passrate" value="50"></div>
<div class="question">
<div id="taquestion0b8" class="block" style="display:block">1> QUESTION 1
</div><br/>
<table><tr><td><input type="radio" name="key0b8" value="0" />
</td><td>
<div id="taoptionAnswer0q0b8" class="block" style="display:block">True
</div></td></tr>
<tr><td><input type="radio" name="key0b8" value="1" />
</td><td>
<div id="taoptionAnswer1q0b8" class="block" style="display:block">False
</div>
<br/><input type="submit" name="submitB" value="SUBMIT ANSWERS"/>
</form>
</body>
</html>
Thanking you!
When I create hand-coded courses I try to keep everything as neutral as possible. eLearning standards, such as SCORM, are usually using what we call a "wrapper", it basically handles all basic errors and the connection process.
When you go from one version to another, like SCORM 1.2 to SCORM 2004 4th Edition, the logic doesn't really change, it is improved but all the previous elements are usually here.
So you basically make a new wrapper that has the same functions' names and all the basics are already working. And your wrapper is not fundamentally different, it just replaces the "cmi.xxx".
To go from one standard to another, if the fundamentals are the same, you could use another wrapper and it would work. It is usually the case for most simple courses, as soon as you start having interactions, exercises and so on, it can become tricky.
To avoid those bad moments, keep all your interactions logic seperate from your course.
Now, your course is probably not hand-coded and generated by a software?
In such case you will need to analyze what's "under the hood", trying to figure what is done when and how to replace it with the other standard's way of handling each part.
I think a converter is something very unsafe to do, it would be very course-dependent and cannot be applied to all courses the same, unless you find a way to simply replace it's interactions with a wrapper. But if you can provide a tool that can generate a course compatible with all standards, you'll already make a lot of users happy!
Now to get back to your question, I think you need to understand what are eLearning standards made of :
Files to be displayed in the browser.
A manifest file to describe the content you're giving to the LMS.
A way of communication between the course and its LMS.
The files are usually HTML pages and everything that goes around. The manifest is an file usually written with XML. The communication is in most cases setup with Javascript.
IMS is a standard at the manifest level, it describes what should be in your .xml file.
SCORM is a standard that takes into account the two last items of the list. (based on AICC, it defines what both the course and the LMS need to comply to.)
Now if you need to create a tool to convert the XML file, I think any technology would be able to do it, as it is technically just plain text.
I'm looking to set the background-image (or even render an image via the pseudo elements :after or :before) to the value, which will be a URL, of a rel attribute, but only in certain cases (this is a cloud file listing). For example:
HTML:
<div class="icon ${fileExtension}" rel="${fileURL}"></div>
It would be great if I could do something like this:
CSS:
.icon.png,
.icon.jpg,
.icon.jpeg,
.icon.bmp,
.icon.gif { background-image: attr(rel,url); }
... but obviously that doesn't work as, if I'm not mistaken, the attr() CSS function only works inside pseudo element blocks.
I know there are ways of doing this using conditional JSP or even jQuery logic, but I'd like to figure out a neat way of doing it via CSS3, since I'm only concerned with modern browsers at the moment anyway.
Also, I don't want to explicitly set the background image to the URL or create an <img> element, because by default if the file is not a supported image, I'd rather display a predetermined set of icons.
Using
.icon:after{ content: ""attr(rel)""; }
displays the rel value as text.
A jQuery solution is to add the background-image (taken from the rel value) as inline CSS:
jQuery(function($) {
$('.icon').each(function() {
var $this = $(this);
$this.css('background-image', 'url(' + $this.attr('rel') + ')');
});
});
I've tried to do something using jQuery but i don't exactly understand what you want so i can't go on with my code. So far i've done only this.
EDITED I hope it's exactly what you need
$(function(){
var terms = new Array('png','jpg','jpeg','bmp','gif');
$('.icon').each(function(){
var t = $(this),
rel = t.attr('rel'),
cls = t.attr('class');
cls = cls.split(' ');
for (var i=0; i < terms.length; i++) {
if (terms[i] == cls[1]) {
t.css('background-image','url('+rel+')');
}
}
});
});
if you can give me a better example, to undestand exactly what you want, i hope somebody from here will be able to solve your problem.
Regards,
Stefan
I've decided to go the jQuery route, and used a combination of #ryanve and #stefanz answers. Thanks guys
$(document).ready(function() {
$(".png,.jpg,.jpeg,.bmp,.gif,.tiff").each(function(n) {
var bg = 'url(' + $(this).attr("rel") + ')';
$(this).css('background-image', bg);
});
});
I think this is relatively neat/concise and works well for my needs. Feel free to comment on efficiency, methodology, etc.
I have created <div> element, i am doing show/hide that <div> using java script..
but the problem is that the position of that varies on all different browsers
javascript is as follows
< script language="JavaScript" type="text/javascript">
var abc=false;
function showHide()
{
var a=document.getElementById("MainDiv");
var b=document.getElementById("myTestDiv");
if(abc==false)
{
abc=true;
b.style.top = a.offsetTop;
b.style.left = a.offsetParent;
b.style.display = "inline";
}
else{
abc=false;
b.style.display = "none";
}
}
</script>
html is as follows
<div id="myTestDiv" style="border: 2px solid rgb(100, 149, 237); color:#23238e; background-color:#FFFFFF; position:absolute; width:14%; height:17%; display:none" >
Why b.style.left = a.offsetParent; ? https://developer.mozilla.org/en/OffsetParent
I think you want b.style.left = a.offsetLeft;. Anyway, why you use JavaScript for this? Can't you set position: relative; of MainDiv and top: 0; left: 0; of myTestDiv?
Please try with installing BluePrint CSS Framework and retry your action again again!
Or deliver us some more information about your issue...
You've not provided enough information here, but I'll take a few guesses anyway..
b.style.display = "inline";
Instead of inline, you probably want to be setting it to block, what with the fact that divs are block-level elements.
Something else to try, append px:
b.style.top = a.offsetTop + "px";
b.style.left = a.offsetParent + "px";
Also, make sure you have a proper doctype as the very first line:
<!DOCTYPE html>
Without that, Internet Explorer in particular will be hopelessly broken.