I installed the enhanced image plugin for ckeditor, and place this code on my my page:
<script>
CKEDITOR.replace( 'editor1', {
config.extraPlugins: 'image2',
height: 450
} );
</script>
The rich textarea no longer displays, except I use
<script>
CKEDITOR.replace( 'editor1' );
</script>
Which does not allow image caption functionality. What could be wrong?
Second argument in CKEDITOR.replace is config itself. That's why you should define it as follows:
CKEDITOR.replace( 'editor1', {
extraPlugins: 'image2',
height: 450
} );
Related
my jvector maps are in a dropdown menu, it works well in safari, opera and chrome but breaks
(no map
and error message NS_ERROR_FAILURE:
(line 700 in 2.0.2.min.js "return this.node.getBBox();"
in firefox, I've tried lots of different things but no luck.
these are in the head.
<script type="text/javascript" src="jVectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="../maCountries/be_coord.js"></script>
<script type="text/javascript" src="../maCountries/be_map.js"></script>
this is the html in the dropdown menu
<div id="mapJV">
</div> <!--mapjv container-->
This is the code in be_map.js which breaks in firefox.
$(function() {
var map,
map = new jvm.Map({
container: $('#mapJV'),
map: 'be_mill_en',
backgroundColor: '#F6F3EF',
regionStyle: {
initial: {
fill: '#ABBDC4'
},
},
});
});
$( "<style>.jvectormap-container {width : 400px; height: 400px;}</style>" ).appendTo( "head" );
the code in be_coord.js is just the normal coordinates.
Firefox usually has trouble with rendering SVG inside of the hidden elements. So solution here could be creating and rendering map after its container getting visible.
Hello I'm working on a project using ZK. What I need to do is passing a value from a label to a JQuery function to do a countdown.
I need to use this plugin : www.jqueryscript.net/loading/Graphical-Circular-Timer-with-jQuery-CSS3-pietimer.html
I have tried to insert this plugin in zul page but is doesn't seem to work.
I'm kinda of new in JQuery, I didn't know how to pass a value to "timerSeconds" from a label .
Here what I have tried to do so far :
<?link href="http://www.jqueryscript.net/css/top.css" rel="stylesheet" type="text/css"?>
<?link rel="stylesheet" type="text/css" href="pietimer.css"?>
<zk>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pietimer.js"></script>
<script type="text/javascript" defer="true">
<![CDATA[
jq(function() {
zk('#timer').pietimer({
timerSeconds: 60,// i need to insert a label value instand of 60
color: '#234',
fill: false,
showPercentage: true,
callback: function() {
}
});
});
]]>
</script>
<div id="timer" style="margin-top:100px;"></div>
</zk>
Can you help me please?
The issue is that jq() and zk() are the ZK own scope, but pietimer() is added below another jQuery version, so I guess you may use this to solve it.
zk.afterMount(function () { // run when ZK widgets are ready
$('#timer').pietimer({ // use $ instead of zk or jq
timerSeconds: 60,// i need to insert a label value instand of 60
color: '#234',
fill: false,
showPercentage: true,
callback: function() {
}
});
});
Has anyone had any luck with this?
I copied and pasted the exact example code here http://www.jqplot.com/deploy/dist/examples/barTest.html into my text editor. I added all the .js files and .css file required. when I run the page in any browser, I am not seeing the bars or the animation. I have looked at the source code on the above URL as well to see how it works. Could someone tell me why I can the animated bar chart on the URL but not from my desktop? What's different? Here is the exact code I copied:
<html>
<title>Untitled Document</title>
<link rel="stylesheet" href="js/jquery.jqplot.min.css" type="text/css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script>
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7, 10];
var ticks = ['a', 'b', 'c', 'd'];
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: { show: false }
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
</script>
</head>
<body>
<div id="chart1" style="margin-top: 20px; margin-left: 20px;width: 300px; height: 300px; position: relative;"></div>
<div><span>Moused Over: </span><span id="info1">Nothing</span></div>
</body>
</html>
here is what I see in the browser after running that code:
Thanks
For anyone interested, I've found the answer. The example code taken from the barchart.html page in my post doesn't appear to need the conditional syntax (below) in order to animate the bars:
$.jqplot.config.enablePlugins = true;
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
From the animate example on the examples page , the following code will do the trick:
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: true,
I read the entire documentation and was doing a lot of playing around with the code. Eventually, I got to the full "examples" page (not the few listed on the tests and examples page which I initially viewed since it was listed first in the documentation). I really wanted to understand the plugin code since the developer took so much time to really provide a ton of info, comments and updates to his code base.
Why doesnt this work?
$(".char").click(function() {
$(this).css('border', "solid 2px red");
});
<img class=char src=1.gif>
<img class=char src=2.gif>
I want it to highlight via border when I click one of the images.
Also I'd like only one to be highlighted at once but I guess I'll look at that after.
use $(document).ready() - your current jquery code executes before the targeted html elements are available in the dom
<script type="text/javascript">
$(document).ready(function() {
$(".char").click(function() {
$(this).css('border', "solid 2px red");
});
});
</script>
Does anyone know how to modify jquery tools tooltip:
http://flowplayer.org/tools/tooltip.html
to use event special hover:
http://blog.threedubmedia.com/2008/08/eventspecialhover.html
jQuery tools tooltip doesn't rely on hover method, so just loading the plugin is insufficient.
Source for event hover:
http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.js
Here's the source for jquery tools tooltip:
http://flowplayer.org/js/tools/tools.tooltip-1.1.1.js
I've been trying to get this to work for a while. Thanks in advance.
#Jourkey, What I understood from question is that you want to show the tooltip only when HOVER event is reported by jquery.event.hover plugin. If this is the case then after lot of trial and error I got it like this:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.event.hover-1.0.js"></script>
<script type="text/javascript" src="tools.tooltip-1.1.1.js"></script>
<style type="text/css">
div.hovering{background-color:yellow;}
div.normal{background-color:white;}
#demotip { display:none; background:transparent url(tooltip/white.png);
font-size:12px; height:60px; width:160px; padding:25px; color:#0505ff;}
</style>
<div id="rect" style="height:200px;width:200px;border:2px blue groove;"
class="normal" title='This is testing tooltip'></div>
<div id="demotip"> </div>
<span id="btnShow" style="border:1px solid black;">click</span>
<span id="btnClose" style="border:1px solid black;">close</span>
JavaScript:
<script type="text/javascript">
var api; //TO TAKE CARE OF TOOLTIP OBJECT
var hovering=false; //TO TRACK IF HOVERING STARTED BY HOVER PLUGIN OR NOT
$(document).ready(function(){
$.tools.tooltip.conf.position=["center","right"];
$.tools.tooltip.conf.api=true;
$.tools.tooltip.conf.effect='fade';
$.tools.tooltip.conf.onBeforeShow = function(a){
return hovering;};
$.tools.tooltip.conf.onBeforeHide = function(a){
return !hoveRing;};
var api = $("#rect[title]").tooltip("#demotip");//CREATE TOOLTIP
$("#btnShow").click(function(){
hovering=true;
api.show();});
$("#btnClose").click(function(){
hovering=false;
api.hide();});
$.event.special.hover.delay = 500;//REPORT HOVER AFTER DELAY OF 500MS
$("#rect").hover(function(){},//HOVER START (BEFORE HOVERING)
function(){
hovering=true;
api.show();}, //HOVERING
function(){
hovering=false;
api.hide();}//HOVER END
);
});
</script>