Is there a way to use dojo/dom-construct to create an image element with a link? I am looking for equivalent of the following HTML code:
<a href="test.html" target="_blank">
<img src="/pix/byron_bay_225x169.jpg" >
</a>
Yes it is possible!
Just do it like this:
var anchor= domConstruct.create('a', {
'href': 'test.html',
'target': '_blank'
});
var image= domConstruct.create('img', {
'src': '/pix/byron_bay_225x169.jpg'
});
domConstruct.place(image, anchor);
HTML:
<div data-dojo-attach-point="container"></div>
JS:
var img = domConstruct.create("img", {
src: "/path/image.png",
style: "height:16px;width:16px;",
title: "Image",
onclick: function(){
// onclick event
},
onmouseenter: function(){
// on mouse over event
},
onmouseout: function(){
// on mouse out event
}
);
domConstruct.place(img, this.container);
Related
i'm using freeswitch 1.6 and following cookbok to implement webrtc. for this i download sip.js#0.7.0 too. and have created call.html, call.js and answer.html, answer.js pages. my call.html including js is
<html>
<body>
<button id="startCall">Start Call</button>
<button id="endCall">End Call</button>
<br/>
<video id="remoteVideo"></video>
<br/>
<video id="localVideo" muted="muted" width="128px" height="96px"></video>
<!--<script src="js/sip-0.7.0.min.js"></script>-->
<!--<script src="call.js"></script>-->
</body>
<HEAD>
<script src="js/sip-0.7.0.min.js"></script>
<script>
var session;
console.log('hiiiiiiiiiiii')
var endButton = document.getElementById('endCall');
endButton.addEventListener("click", function () {
session.bye();
alert("Call Ended");
}, false);
console.log('hiiiii2')
var userAgent = new SIP.UA({
uri: 'sip:anonymous#gmaruzz.org',
wsServers: ["ws://call.sia.co.in:5066"],
authorizationUser: 'anonymous',
password: 'welcome'
});
console.log('hiiii3')
var startButton = document.getElementById('startCall');
startButton.addEventListener("click", function () {
session =userAgent.invite('sip:1010#139.59.17.63', options);
alert("Call Started");
}, false);
console.log('hiiii4')
var options = {
media: {
constraints: {
audio: true,
video: true
},
render: {
remote:document.getElementById('remoteVideo'),
local: document.getElementById('localVideo')
}
}
};
</script>
</HEAD>
</html>
please correct me where i'm going wrong. Thanks in advance.
you must put the wsServers in transportOptions like :
var userAgent = new SIP.UA({
uri: 'sip:anonymous#gmaruzz.org'
transportOptions: {
wsServers: "ws://call.sia.co.in:5066"
},
authorizationUser: 'anonymous',
password: 'welcome'
I want to display dojo select inside a dijit/TooltipDialog. The items of the dojo select are dynamically loaded. So I want to add this select programmaticaly. The content of TooltipDialog can be an object but select needs a domNode to be held. The code is :
<head>
<script>
require([
"dojo/parser",
"dijit/form/Select",
"dijit/TooltipDialog",
"dojo/on",
"dojo/dom",
"dojo/_base/lang",
"dijit/popup",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function(parser,Select,TooltipDialog,on,dom,lang,popup, ObjectStore, Memory){
parser.parse();
var t={mySel:null};
var store = new Memory({
data: [
{ id: "foo", label: "Foo" },
{ id: "bar", label: "Bar" }
]
});
var os = new ObjectStore({ objectStore: store });
t.mySel = new Select({
store: os
}, "ttt");
var myTooltipDialog = new TooltipDialog({
content: t,
onMouseLeave: function(){
popup.close(myTooltipDialog);
}
});
on(dom.byId("mmm"),"mouseover" ,lang.hitch(this,function(e){
popup.open({
popup: myTooltipDialog,
orient: ["above-centered","above","below"],
around:dom.byId('mmm')
});
t.mySel.startup();
}));
t.mySel.on("change", function(){
console.log("my value: ", this.get("value"))
})
})
</script>
</head>
<body class="claro">
<div id="ttt" > tttt</div><br>
<div id="mmm" > tttt</div><br>
</body>
You are assignign an object t the tooltip content not a domenode
so try to make these change :
var myTooltipDialog = new TooltipDialog({
content: t.mySel.domNode,
onMouseLeave: function() {
popup.close(myTooltipDialog);
}
}
I would like to build bxslider with pagination in the format of getCurrentSlide / getSlideCount. Something like here.
my html code:
<ul class="bxslider">
<li>...</li>
...
</ul>
<div class="counter">1 / 10</div>
JS code:
jQuery('.bxslider').bxSlider({
pager: true,
auto: false,
controls: true
});
I assume, i need to use getCurrentSlide / getSlideCount, but i didn't find any examples.
Any help, would be appreciate. Thank you!
bxSlider has short pager ;)
$('.bxslider').bxSlider({
pager: true,
pagerType: 'short'
});
you can do it like this;
slider = $('.bxslider').bxSlider({
nextSelector: '.next-slide',
nextText: '>',
prevSelector: '.prev-slide',
prevText: '<',
mode: 'fade',
captions: false,
auto: true,
autoControls: false,
onSlideAfter: function(){
$('.slide-number').text((slider.getCurrentSlide()+1)+'/'+slider.getSlideCount());
}
});
Append this code within your header
<script>
(function ($) {
//bxslider
function insertCount(slide_curr, slide_count) {
$('#slide-counter').html('<strong>' + (slide_curr + 1) + '</strong>/' + slide_count);
};
var slider = $('.bxslider').bxSlider({
auto: true,
pager: false,
captions:true,
onSliderLoad: function () {
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
insertCount(slide_curr, slide_count);
},
onSlideNext: function () {
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
insertCount(slide_curr, slide_count);
},
onSlidePrev: function () {
var slide_count = slider.getSlideCount();
var slide_curr = slider.getCurrentSlide();
insertCount(slide_curr, slide_count);
}
});
})(jQuery);
</script>
add just after the close ul().You are done and should display the total and current index hope this helps.
solution Instruction and Demo can be found here
I am using kendoui dataviz charts, and I need to export those charts into (.png) or (.jpg) image format.
Basically kendoui dataviz chart has a built-in method called 'svg()'.
'svg()' Returns the SVG representation of the current chart. The returned string is a self-contained SVG document.
Example
var chart = $("#chart").data("kendoChart");
var svgText = chart.svg();
Now svgText contains details of chart image..can anybody tell me how to convert these data to actual image format and pop up a Save As prompt ???
code example: I tried this, but it doesn't prompt any 'SaveAs' popup
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
<center>
<div>
<input type="button" value="click" onclick="disp();" />
</div>
</center>
<div>
<canvas id="canvas"></canvas>
</div>
</div>
</div>
<script type="text/javascript">
function disp() {
var chart = $("#chart").data("kendoChart");
var svgText = chart.svg();
var c = document.getElementById('canvas');
canvg(c,svgText);
var img = c.toDataURL("image/png");
document.write('<img src="' + img + '"/>');
window.win = open(imgOrURL);
setTimeout('win.document.execCommand("SaveAs")', 100);
}
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Internet Users"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6]
}, {
name: "United States",
data: [67.96, 68.93, 75, 74, 78]
}],
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009]
},
tooltip: {
visible: true,
format: "{0}%"
}
});
}
$(document).ready(function () {
setTimeout(function () {
createChart();
},100);
$(document).bind("kendo:skinChange", function (e) {
createChart();
});
});
<script>
UPDATE 2
The Chart now includes various export options - PNG, SVG and a vector PDF. See the Export demo for reference.
UPDATE
The Chart now has built-in method for obtaining the exported image (base64 encoded):
var img = chart.imageDataURL();
I'm not aware of a cross-browser way to display a "Save As" dialog.
See also: API Reference
Original response follows:
Exporting the Chart image in-browser is not possible. We have prepared a demo that shows how to convert the SVG document to PNG/PDF on the server using Inkscape.
The demo application is implemented in ASP.NET MVC, but does not depend on any of its features and can be ported to other frameworks.
You can find the demo on GitHub:
https://github.com/telerik/kendo-examples-asp-net/tree/master/chart-inkscape-export
U can do like this.
For this approach u need svg.dll
U can download from this link.
http://svg.codeplex.com/releases/view/18884
Javascript:
var chart = $("#chart").data("kendoChart");
var svgString = escape(chart.svg());
$.ajax({
url: "/MyController/Sample",
data: { svg: svgString },
async: false,
type: 'Post',
success: function (data) {
window.location = "/MyController/getPdf";
}
});
Controller:
[HttpPost]
[ValidateInput(false)]
public void Sample(string svg)
{
var svgText = System.Web.HttpUtility.UrlDecode(svg);
Session["chrtData"] = svgText;
}
public void getPdf()
{
string svgText = Session["chrtData"].ToString();
var byteArray = Encoding.ASCII.GetBytes(svgText);
using (var stream = new MemoryStream(byteArray))
{
var svgDocument = Svg.SvgDocument.Open(stream);
//First Way
var bitmap = svgDocument.Draw();
MemoryStream docMemStream = new MemoryStream();
bitmap.Save("D:\\hi.png", System.Drawing.Imaging.ImageFormat.Png);
}
}
I try to catch the Blur and Focus Events of a tinyMce Editor.
I found following way for this.
ed.onInit.add(function(ed) {
tinyMCE.execCommand('mceRepaint');
var dom = ed.dom;
var doc = ed.getDoc();
if (o.onblurtopics) {
tinymce.dom.Event.add(doc, 'blur', function(e) {
alert("blur");
});
}
if (o.onfocustopics) {
tinymce.dom.Event.add(doc, 'focus', function(e) {
alert("focus");
});
}
});
This works fine, but only in Firefox. When I try this in current Chromium or IE8 it has no effect.
Does anyone has a suggestion?
Use
tinymce.dom.Event.add(s.content_editable ? ed.getBody() : (tinymce.isGecko ? ed.getDoc() : ed.getWin()), 'blur', function(e) {
alert('blur');
}
Seems overly complicated to me, this should work:
editor.onInit.add(function(editor) {
tinymce.dom.Event.add(editor.getBody(), "focus", function(e) {
parent.console.log('focus');
});
});
editor.onInit.add(function(editor) {
tinymce.dom.Event.add(editor.getBody(), "blur", function(e) {
parent.console.log('blur');
});
});
You could use jQuery to take care of the blur/focus (jQuery then will take care of the browser dependent stuff).
Update: It works!
Here is the tinymce fiddle: http://fiddle.tinymce.com/ageaab/1
And here is the code:
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "bold italic",
setup : function(ed) {
ed.on('init', function()
{
$(ed.getBody()).on('blur', function(e) {
console.log('blur');
});
$(ed.getBody()).on('focus', function(e) {
console.log('focus');
});
});
}
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>