I have written the following function within the success of another ajax call :
I have used the readymade jquery and rapheal function for the venn diagram and used both there js ,here's the code :
( function($) {
$(function() {
$('#venn-demo').venn({ numSets: 3,
universeLabel : 'All rate centers '
});
$('.new-venn').click(function() {
$('#venn-demo').html('').venn({
numSets : $(this).attr('data-num-sets')
});
$('#region-list').html('');
});
$('#venn-demo').on('regionClicked.venn', function(e) {
var activeRegions = $('#venn-demo').venn('activeRegions')
, arNames = []
;
for ( var i in activeRegions ) {
arNames.push( activeRegions[i].getId() == "" ? "U" : activeRegions[i].getId() );
}
$('#region-list').html( arNames.join(', ') );
});
});
})(jQuery);
The resulting venn diagram should be clickable but it is not, also I am getting this error:
e.attr is not a function
How should I make this work?
Use this code for click function in venn diagram :
Download : http://www.filedropper.com/vennchart
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Venn</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" media="screen" href="./css/main.css" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/raphael-min.js"></script>
<script type="text/javascript" src="./js/jquery.venn.js"></script>
</head>
<body onload="vennLoad()">
<div id="venn-demo" style="margin: 0 auto; width: 430px; height: 300px"></div>
<div style="text-align: center;">Active Regions: <span id="region-list"></span></div>
<script type="text/javascript">
( function($) {
$(function() {
$('#venn-demo').on('regionClicked.venn', function(e) {
var activeRegions = $('#venn-demo').venn('activeRegions'), arNames = [];
for ( var i in activeRegions ) {
arNames.push( activeRegions[i].getId() == "" ? "U" : activeRegions[i].getId() );
console.log(arNames);
}
$('#region-list').html( arNames.join(', ') );
$('#venn-demo').find("svg").remove();
var regionVal = $('#region-list').text();
vennLoad(regionVal);
});
});
})(jQuery);
function vennLoad(regionVal){
$('#venn-demo').venn({ numSets: 3, setLabels:['AA: 60 ', 'BB: 70', 'CC: 30'] });
}
</script>
</body>
</html>
Related
I have this terminal but I can't seem to resize it (it's always the width of the page) and I can't write anything.
What's the problem here?
#terminal2 {
width: 50px;;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.js"></script>
<div id="terminal2"></div>
<script>
var term = new Terminal();
term.open(document.getElementById('#terminal2'));
term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
</script>
This works for me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.js"></script>
<style type="text/css">
#terminal2 {
width: 500px;
}
</style>
<script>
window.onload = function(){
var term = new Terminal();
var tt = document.getElementById('terminal2')
term.open(tt);
term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
}
</script>
</head>
<body>
<div>
<div id="terminal2"></div>
<div>
</body>
</html>
Try this:
window.onload = function(){
var term = new Terminal();
var tt = document.getElementById('terminal2');
term.open(tt);
term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
}
#terminal2 {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.css" rel="stylesheet"/>
<div>
<div id="terminal2"></div>
<div>
Im working at a simple javascript.
im using the jsPDF lib but the script load a blank pdf.
this is the code :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fromHTML EX</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.22" />
<script type="text/javascript" src="/root/utils/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/js/basic.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.js"></script>
<script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
function PDF1(){
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("datauri");
}
PDF1()
</script>
</head>
<body>
ASDSADASDASDSA
<div>
<p id="ignorePDF">don't print this to pdf</p>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
i have tryied to put the calling function at the bottom of the page but it still don't work.
Can someone help me?
Since you are using jQuery try:
$( document ).ready(function() {
//console.log( "ready!" );
PDF1();
});
Also Note: You could use (not required):
var source = $("body")[0];
Code page used to test
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fromHTML EX</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.22" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://parall.ax/parallax/js/jspdf.js"></script>
<script type="text/javascript">
function PDF1(){
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("datauri");
}
$( document ).ready(function() {
//console.log( "ready!" );
PDF1();
});
</script>
</head>
<body>
ASDSADASDASDSA
<div>
<p id="ignorePDF">don't print this to pdf</p>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
This code can also be used for exporting to pdf using jsPDF.
var pdf = new jsPDF('p','pt','a4');
let pdfConf = {
pagesplit: true, //Adding page breaks manually using pdf.addPage();
background: '#fff' //White Background.
};
pdf.fromHTML($('#capture').get(0),20,20,{
width:500
})
pdf.save("download.pdf");
I am creating a chat service, everything works fine except for one little detail, the scrollbar. I'm using the jQuery Custom Scrollbar plugin.
It doesn't go to the bottom, sometimes it's does really well but sometimes it stuck in the half from the last message, I have been working in this detail for one week and I can't figure out what's the problem yet.
Here's my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>---</title>
<!-- Main CSS -->
<link rel="stylesheet" href="css/default.css">
<!-- Extra CSS -->
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<!-- All JS Scripts-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.elastic.source.js"></script>
<script type="text/javascript" src="js/jquery.xdomainrequest.min.js"></script>
<script type="text/javascript" src="js/flowtype.js"></script>
<script type="text/javascript" src="js/cpg_smartphones_proto.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Perfect Scrollbar
<link href="css/perfect-scrollbar.css" rel="stylesheet">
<script src="js/perfect-scrollbar.js"></script>-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if !IE]><!--><script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</head>
<body onload="initialize()">
<div class="row">
<div id="chat_intro">
<div class="chat_caller" onclick="goToChat()">
<h1>Enter</h1>
</div>
</div>
</div>
<div id="chat_box">
<div id="chat_top" hidden="hidden">
<div id="chat_header">
<h4>Personal support</h4>
<p>Find the best product for you.</p>
</div>
<div id="chat_avatar"></div>
</div>
<div id="chat_container">
<div id="history_div">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" type="text" onkeypress="chatHandler(event)">
</textarea>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#chat_box').hide();
$('#chat_footer').hide();
});
</script>
</script>-->
</body>
</html>
And now, the JS:
function goToChat() {
origin = BANNER_NAME + "_" + uid + metaData;
$("#chat_intro").hide();
$("#chat_box").show();
$("#chat_top").show();
$("#chat_container").show();
$("#chat_footer").show();
$("#history_div").mCustomScrollbar( {
theme : "dark-thick",
advanced : {
updateOnContentResize : true
}
});
document.getElementById('input_area').focus();
chat();
}
function chatHandler(event) {
// ENTER key
var key;
if (window.event) // IE8 and earlier
{
key = event.keyCode;
} else if (event.which) // IE9/Firefox/Chrome/Opera/Safari
{
key = event.which;
}
InputInterface.restartTimeout();
if (key == 13) {
chat();
$('#input_area').focus();
event.keyCode = 0;
}
}
function chat() {
// Build request
var chatText = "";
if (!initialized) {
chatText = "hi";
}
else {
chatText = input_area.value;
if(chatText.trim()=="")return;
var userAnswer = USER + input_area.value + TIME + getTimeStamp() + TIME_END + FONT_END;
history_mc.innerHTML += userAnswer;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
$("#history_div").mCustomScrollbar("scrollTo", "bottom");
});
$(input_area).val("");
if(getUrlParameter("isMobile") == "true") hideKeyboard();
}
$("#deleteThis").remove();
InputInterface.prepareSending(chatText);
setTimeout(function(){history_mc.innerHTML += TYPING_MESSAGE;
$("#history_div").mCustomScrollbar("scrollTo", "bottom");});
if(!initialized){
InputInterface.flush();
initialized = true;
}
}
//Start calling recursively getMsgId until the retries max out or succesfully get an Id
function getResponse(json) {
start = new Date().getTime();
processRetries = 0;
responseRetries = 0;
getMessageId(json);
}
function displayResponse(response) {
$("#deleteThis").remove();
history_mc.innerHTML += BM_INI+ response_number +BM_FIN + response + TIME + getTimeStamp() + TIME_END + FONT_END;
$("#history_div").mCustomScrollbar("update");
setTimeout(function(){
if (DEBUG) console.log("#conv"+response_number);
$("#history_div").mCustomScrollbar("scrollTo", "#conv"+response_number);
response_number++;
},250);
document.getElementById('input_area').focus();
}
I hope you can shine me with you jedi powers, thank you so much.
Greetings.
I want to open a new page inside of shadowbox, when I click the code
this link Opens a new page inside the shadowbox in the same page. How to do that?
<a class="fancybox" href="edit.php?pn"></a>
rfq_list.php
<link rel="stylesheet" href="css/style.css" type="text/css" id="" media="print, projection, screen" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/jquery.tablesorter.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
type: "iframe",
helpers : {
overlay : {
closeClick: false}
// prevents closing when clicking OUTSIDE fancybox
},
closeClick : false, // prevents closing when clicking INSIDE fancybox
scrolling : 'no',
width : 550,
height : 0,
autoScale : true,
openEffect : 'elastic',
closeEffect : 'fade',
closeBtn : true,
afterClose:function () {
window.location.reload();
}
}).trigger("onclick");
});
parent.$.fancybox.close();
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
<script type="text/javascript">
$(function() {
$("table").tablesorter({debug: true});
});
</script>
<script type="text/javascript">
$(function(){
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow=[];
for (var i=1;i<tfrow;i++) {
tbRow[i]=document.getElementById('tfhover').rows[i];
tbRow[i].onmouseover = function(){
this.style.backgroundColor = '#f3f8aa';
};
tbRow[i].onmouseout = function() {
this.style.backgroundColor = '#ffffff';
};
}
});
</script>
</head>
rfq.php
<script type="text/javascript" src="javascript/jquery.js"></script>
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str == "") {
$txtHint.html('');
return;
}
$txtHint.load('rfq_list.php?q=' + str)
}
</script>
<div id="txtHint">
</div>
What is the problem in this scripts?
You are including jQuery three times:
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
and aside particular cases you have to include it once (and use noconflict).
Now the the table sorter plugin will be detached from jQuery by the third include and you face your error.
Remove the other jQuery include and use only the latest.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="finance.css"/>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript" src="canvastext.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="flotr.js"></script>
<script type="text/javascript" src="HumbleFinance.js"></script>
<script type="text/javascript" src="prettify.js"></script>
<script type="text/javascript">
var priceData=[];
var dateData=[];
var NewdateData = [];
var NewData=[];
var date1 ;
var date2;
function callMe()
{
alert('dddw');
}
function drawChart(data)
{
for (var i = 0; i < data.jobs.length; i++) {
priceData.push([i, data.jobs[i].INCPU]);
dateData.push(data.jobs[i].Dater);
}
HumbleFinance.init('finance', priceData , dateData);
Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
var area = e.memo[0];
xmin = Math.floor(area.x1);
xmax = Math.ceil(area.x2);
date1 = dateData[xmin];
date2 = dateData[xmax];
$('dateRange').update(dateData[xmin] + ' - ' + dateData[xmax]);
alert(date1);
alert(date2);
This two alerts are being called continously .
}
);
}
Event.observe(document, 'dom:loaded', function() {
new Ajax.Request('/HumblFin/Serv',
{
method:'get',
onSuccess: function(transport){
var data = transport.responseText.evalJSON();
drawChart(data);
},
onFailure: function(){ alert('Something went wrong...') }
});
});
</script>
</head>
<body>
<form id="sample">
<div id="finance">
<div id="dateRange">
</div>
</div>
</form>
</body>
</html>
The div dateRange is being updated only once , but the two alerts are being executed continuously
Please help ( Like the div tag , i want my alerts also want once )
It sounds like the custom event 'flotr:select' is being fired continuously.
Looking at the limited code provided i suspect that updating the 'dateRange' element is firing the 'flotr:select' event.
if you have firebug or google chrome, put a break point into the code and examine the call stack.