I am trying to programmatically add articles to my website and then add a random word to each article using Jquery. I am able to make all the articles but I am not able to add text to the articles. Here is my code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="Script/jquery.lorem.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var colors = ["#CCCCCC", "#333333", "#990099"];
var rand = Math.floor(Math.random() * colors.length);
$(function () {
for (var i = 0; i < Math.floor((Math.random() * 64) + 34) ; i++) {
$("#Inferface").append("<article class='box' style='background-color:" + colors[rand] + "'><span>" + i + "</span>");
}
});
// This line below should be adding the random word to each of the articles
$('.box').lorem({ type: 'words', amount: '1', ptags: false });
});
</script>
</head>
<body id="Inferface">
</body>
</html>
Strange, It seems to me that the code is working with very few adjustments
$(function ()
{
var colors = ["#CCCCCC", "#333333", "#990099"];
var rand = Math.floor(Math.random() * colors.length);
for (var i = 0; i < Math.floor((Math.random() * 64) + 34) ; i++)
{
$("#Interface").append("<article class='box' style='background-color:" + colors[rand] + "'><span>" + i + "</span>");
}
// This line below should be adding the random word to each of the articles
$('.box').lorem({ type: 'words', amount: '1', ptags: false});
});
.. you can check it out here :
Working Example
Related
I am looping through images and create dynamic divs. But the images are not displayed, though console.log() shows that parameters of ready() function in the loop are valid. It shows myDiv1 and address of the first image in the array and myDiv2 and address of the second image. What's wrong with the code?
Here's my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="view_topic.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="outerdiv"></div>
<script>
$(document).ready(function() {
$('#outerdiv').append(
$('<div>').prop({
id: 'myDiv1',
//innerHTML: 'Hi there!',
className: 'img-wrapper'
})
);
});
$(document).ready(function() {
$('#outerdiv').append(
$('<div>').prop({
id: 'myDiv2',
//innerHTML: 'Hi there!',
className: 'img-wrapper'
})
);
});
$(this).css('height',"100px");
var get_a_image = ["http://iancaple.ru/upload/images/20200804_225812.jpg", "http://iancaple.ru/upload/images/8871677_tsumpy_laba_3.docx"];
var counter = 1;
var ready_cnt = 0;
for (var i = 0; i < 2; i++) {
$(document).ready(function() {
$('#myDiv' + ready_cnt + 1).append($('<img id="theImg2">').attr({
'src': get_a_image[ready_cnt] , //'https://' + imgUrl ,
'alt': 'test image ' + ready_cnt + 1
})
).scrollTop(9999)
console.log("get_a_image[" + ready_cnt + "]=" + get_a_image[ready_cnt]);
console.log('#myDiv' + (ready_cnt + 1));
ready_cnt++;
});
}
</script>
</body>
<html>
Use parentheses to get the increased value of ready_cnt. If not, it will be regarded to select an ID of myDiv01
$('#myDiv' + (ready_cnt + 1)).append(...)
Hello I want to add tab and a new line in my pdf file Is there any way to add tab and newline in this code when displaying in pdf file? Please help. Thank You. Really Appreciate it. Below is my code.
JAVASCRIPT
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>PDF</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
</head>
<body>
<!-- Content Area -->
<div id="print">
<p></p>
<p id="veewom"></p>
</div>
<div id="p-btn"></div>
<button id="download">Print</button>
<!-- Script -->
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#p-btn': function (element, renderer) {
return true;
}
};
$('#download').click(function () {
var fieldId = "field100";
var chars = $('#try1').val();
var chars1 = $('#try2').val();
var chars2 = $('#try3').val();
$('#veewom').html(
'<b>' + "One" + ':</b>' + chars + '<br>' +
'<b>' + "Two" + ':</b>' + chars1 + '<br>' +
'<b>' + "Three" + ':</b>' + chars2
);
var d3 = $('[name=' + fieldId + ']:enabled').val();
diff1 = "";
if (d3) {
diff = d3;
}
var source = $('#print').html();
doc.fromHTML(source, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('pdf-version.pdf');
});
</script>
</body>
</html>
Here is the image. I want to add new line and tab spaces in it.
]1
You can use HTML entities. Use & nbsp; for a space and em-space (& emsp;) for tab.
It would be much cleaner to use padding or margin if possible.
Example:
padding-left: 5px;
margin-left: 5px;
i have csv file with the content :
heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2
I create Javascript/HTML code to pick up that file and display the content
<html>
<head>
<title>show csv</title>
</head>
<body>
<input type="file" id="fileinput" multiple />
<div id="result"></div>
<script type="text/javascript">
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
if (files) {
for (var i=0, f; f=files[i]; i++) {
var r = new FileReader();
r.onload = (function(f) {
return function(e) {
var contents = e.target.result;
var res = document.getElementById("result");
res.innerHTML = "Got the file<br>"
+"name: " + f.name + "<br>"
+"type: " + f.type + "<br>"
+"size: " + f.size + " bytes</br>"
+ "starts with: " + contents;
};
})(f);
r.readAsText(f);
}
} else {
alert("Failed to load files");
}
}
document.getElementById('fileinput').addEventListener('change',readMultipleFiles, false);
</script>
</body>
</html>
and the output is like :
output
question : How can i convert the content or the data to array and showing as html table ?
thanks for any help.
You can convert csv data into array and then into html table. I have added \n into your new line. Please add the \n to your code when there is a new line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
</head>
<body>
<div id='container'></div>
<script type="text/javascript"charset="utf-8">
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split("\n"),
output = [],
i;
for (i = 0; i < lines.length; i++)
output.push("<tr><td>"
+ lines[i].slice(0,-1).split(",").join("</td><td>")
+ "</td></tr>");
output = "<table>" + output.join("") + "</table>";
var div = document.getElementById('container');
div.innerHTML = output;
</script>
</body>
</html>
I found Kapila Perera's answer to be very useful. However, the last element of each row was being cropped due to the slice(0,-1) use. Building on Perera's answer, in the example below I've used slice() instead.
I've also separated out the first row lines[0] as a header row and loop from 1 instead (which won't always be the case that csv contains headers but is explicitly called out in the example).
Finally, I've added the tbody tags when the output gets wrapped but this probably isn't required.
<script type="text/javascript"charset="utf-8">
var div = document.getElementById('container');
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split("\n"), output = [], i;
/* HEADERS */
output.push("<tr><th>"
+ lines[0].slice().split(",").join("</th><th>")
+ "</th></tr>");
for (i = 1; i < lines.length; i++)
output.push("<tr><td>"
+ lines[i].slice().split(",").join("</td><td>")
+ "</td></tr>");
output = "<table><tbody>"
+ output.join("") + "</tbody></table>";
div.innerHTML = output;
</script>
I need you help about this one. I am using Vassilis Dourdounis jquery plugin, and I have created countdown timer that hides some link on complete. But it restarts whenever the page is refreshed, and it shouldn't, it should finish the count and then disappear. Can anypne help, please?
This is jquery:
/*!
* jQuery Countdown plugin v1.0
* http://www.littlewebthings.com/projects/countdown/
*
* Copyright 2010, Vassilis Dourdounis
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
(function($){
$.fn.countDown = function (options) {
config = {};
$.extend(config, options);
diffSecs = this.setCountDown(config);
if (config.onComplete)
{
$.data($(this)[0], 'callback', config.onComplete);
}
if (config.omitWeeks)
{
$.data($(this)[0], 'omitWeeks', config.omitWeeks);
}
$('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
$(this).doCountDown($(this).attr('id'), diffSecs, 500);
return this;
};
$.fn.stopCountDown = function () {
clearTimeout($.data(this[0], 'timer'));
};
$.fn.startCountDown = function () {
this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
};
$.fn.setCountDown = function (options) {
var targetTime = new Date();
if (options.targetDate)
{
targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
}
else if (options.targetOffset)
{
targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
targetTime.setDate(options.targetOffset.day + targetTime.getDate());
targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
}
var nowTime = new Date();
diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);
$.data(this[0], 'diffSecs', diffSecs);
return diffSecs;
};
$.fn.doCountDown = function (id, diffSecs, duration) {
$this = $('#' + id);
if (diffSecs <= 0)
{
diffSecs = 0;
if ($.data($this[0], 'timer'))
{
clearTimeout($.data($this[0], 'timer'));
}
}
secs = diffSecs % 60;
mins = Math.floor(diffSecs/60)%60;
hours = Math.floor(diffSecs/60/60)%24;
if ($.data($this[0], 'omitWeeks') == true)
{
days = Math.floor(diffSecs/60/60/24);
weeks = Math.floor(diffSecs/60/60/24/7);
}
else
{
days = Math.floor(diffSecs/60/60/24)%7;
weeks = Math.floor(diffSecs/60/60/24/7);
}
$this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
$this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
$this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
$this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
$this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);
$.data($this[0], 'diffSecs', diffSecs);
if (diffSecs > 0)
{
e = $this;
t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
$.data(e[0], 'timer', t);
}
else if (cb = $.data($this[0], 'callback'))
{
$.data($this[0], 'callback')();
}
};
$.fn.dashChangeTo = function(id, dash, n, duration) {
$this = $('#' + id);
for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)
{
var d = n%10;
n = (n - d) / 10;
$this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);
}
};
$.fn.digitChangeTo = function (digit, n, duration) {
if (!duration)
{
duration = 800;
}
if ($(digit + ' div.top').html() != n + '')
{
$(digit + ' div.top').css({'display': 'none'});
$(digit + ' div.top').html((n ? n : '0')).slideDown(duration);
$(digit + ' div.bottom').animate({'height': ''}, duration, function() {
$(digit + ' div.bottom').html($(digit + ' div.top').html());
$(digit + ' div.bottom').css({'display': 'block', 'height': ''});
$(digit + ' div.top').hide().slideUp(10);
});
}
};
})(jQuery);
This is HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.cookie.js"></script>
<script language="Javascript" type="text/javascript" src="js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="style/main.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
</head>
<body>
<div id="container">
<h2>OFFER</h2>
<img src="images/top.png" style="float:left;padding-left:15px;">
<div id="top_offer">
<p>REGISTER NOW AND GET SPECIAL BONUSES!</p>
</div>
<!-- Countdown dashboard start -->
<div id="countdown_dashboard">
<div class="dash minutes_dash">
<span class="dash_title"></span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title"></span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
<!-- Countdown dashboard end -->
<div class="info_message" id="complete_info_message">
<img src="images/offer.png" /> <p>Klikni ovde ► </p>
</div>
<script language="javascript" type="text/javascript">
// Set the Countdown
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 0,
'sec': 60
},
// onComplete function
onComplete: function() { $('#container').slideUp() }
});
});
</script>
</div>
</body>
</html>
THANK YOU!
are you sure this is called
$.cookie('mytimeout', count, {
expires: 7,
path: '/'
}
try putting it in the oncomplete function
I have an application which returns a JSONObject. I am able to get data from JSON object using below code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style type="text/css">
table, td, th
{
border:1px collapse black;
font-family:Arial;
font-size :small;
}
th
{
background-color:green;
color:white;
}
.hideMe
{
/*display : none;*/
/*visibility: hidden;*/
}
</style>
<script type="text/javascript" language="jscript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
var host = "somehost";
var mystr = "http://"+ host +"/rest/bpm/wle/v1/exposed/process"; // use get for this
var ulink = "";
$(document).ready(function () {
$.get(mystr, function (data) {
var obj = JSON.parse(data);
var thtml = "<table id='proctable'>";
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function()' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
}
thtml = thtml + "</table>";
document.getElementById('contentdiv').innerHTML = thtml;
});
});
//javascript
my_function = null;
//jquery
$(function () {
function generateBPDInstance() {
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}
my_function = generateBPDInstance;
ulink = "";
})
`
</script>
</head>
<body>
<form name="myform">
<div id="contentdiv">
<table id="proctable">
</table>
</div>
</form>
</body>
</html>
The above html creates a table showing a list of the returned values. I also want to get rowIndex of hyperlink and pass value of column2 to function generateBPDInstance.
I am not so good at HTML and Jquery. Please suggest how can I get rowIndex for HTML table which is created through javascript.
Thanks in advance.
The simple way is :
change your table building to this
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "" + obj.data.exposedItemsList[i].display + "" + ulink + "";
function my_function(e){
//e is the row index and when you call document.getLementById("proctable").rows[e]; this will give you the complete row.
}
--this is a simple way, and if you want traverse the tree and get , you always have parentnode or you can use jquery $(object).parent() to get the parent of hyperlink and traverse.
You problem is "pass value of column2 to function generateBPDInstance". Why not pass it already while generating the table?
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function('" + ulink + "')' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
// ------------------------------------------------------^ pass the value
}
Add parameter to your function generateBPDInstance
function generateBPDInstance(ulink) {
//--------------------------^----
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}